Se você deseja aprender uma nova estrutura Javascript que permite escrever menos código, não usar DOM virtual e criar aplicativos realmente reativos, o Svelte é para você.
O que é o Svelte?
Svelte é uma estrutura Javascript, um compilador e uma linguagem. Ao contrário de outros frameworks, como o React e o Vue, que realizam grande parte de seu trabalho no navegador, o Svelte faz seu trabalho na etapa de compilação, o que resulta em código altamente eficiente e um tempo de execução potencialmente mais rápido no lado do cliente.
O Svelte oferece um desenvolvimento mais rápido, uma página da Web mais rápida e uma melhor experiência para o desenvolvedor (os criadores do Svelte o criaram com outros desenvolvedores em mente). Além disso, conhecer o Svelte ajudará você a se destacar dos possíveis empregadores e mostra que você está interessado em novas tecnologias.
Ótimo! Conte-me sobre Svelte!
Este artigo leva você pelas novidades do Scrimba Curso Svelte de 16 partes que abrange os seguintes tópicos essenciais para ajudá-lo a se tornar um mestre Svelte:
- Componentes
- Importação / Exportação
- Slots
- Modelo
- Manipulação de eventos
- Despacho de Eventos
- Botões
- Reatividade
- Obrigatório
O curso é ministrado por meio de uma série de screencasts interativos, permitindo que você pratique suas novas habilidades e realmente incorpore seu aprendizado.
Concluindo com um Projeto Final detalhado que consolida todas as habilidades aprendidas ao longo do caminho, o curso ajuda a construir a memória muscular necessária para se tornar um desenvolvedor Svelte eficaz. É liderado por Noah Kaufman, desenvolvedor sênior de front-end de San Francisco, Califórnia, com mestrado em linguística computacional.
Se isso soa bem na sua rua, de cabeça para o curso no Scrimba e continue lendo para saber mais.
Componentes
No Svelte, tudo existe dentro de um componente, e o primeiro elenco mostra como é a anatomia desses componentes. O componente possui três partes opcionais; , which contains Javascript,
Importação e Exportação
Aqui, vamos dar uma rápida olhada em como importar e exportar componentes para que possam ser usados em outras partes do aplicativo.
Os componentes são importados com o import
palavra-chave:
import Face from "./Face.svelte";
Enquanto o export
A palavra-chave permite que outros componentes alterem os componentes na importação:
=)
Desafio 1
Neste elenco, Noah nos desafia a colocar nossas novas habilidades em Svelte à prova. Não há spoilers aqui, então clique para o curso para tentar o desafio e verificar a solução.
Slots
Os slots nos permitem colocar elementos dentro dos componentes. Por exemplo, inserir um
dentro de
Container
nos permite colocar quantos elementos quisermos no
componente:
Os elementos recém-colocados são filhos do componente:
Say: {say}
Templating
A sintaxe de modelo Svelte nos permite adicionar instruções if e loops ao nosso HTML. É isso mesmo, para o nosso HTML!
Uma declaração if se parece com isso:
{#if say} Hi! {/if}
Enquanto um loop for se parece com isso:
{#each [2,1,0] as faceIndex} {/each}
Neste desafio, usamos o que acabamos de aprender sobre o modelo Svelte para adicionar um cabeçalho ao nosso aplicativo. Confira o curso experimente você mesmo e verifique sua resposta.
Manipulação de eventos
Em seguida, Noah nos mostra um manipulador de eventos embutido simples, que permite ao usuário mostrar o cabeçalho do aplicativo com o clique de um botão.
No entanto, se usarmos um componente em vez de um botão HTML nativo, esse tipo de
on:click
manipulador não vai funcionar. Podemos consertar isso com encaminhamento de evento, ou seja, adicionar uma planície on:click
para o nativo no arquivo de componente:
Despacho de Eventos
O envio de eventos permite que um componente emita mais de um tipo de evento, por exemplo, o mesmo O componente pode ser usado para mostrar um elemento e ocultá-lo.
Criamos um distribuidor de eventos como este:
Em seguida, o adicionamos ao HTML nativo como isso:
Finalmente, definimos o opções de funcionalidade do
App.svelte
arquivo como este:
{ showHeader = true; }} on:hide={() => { showHeader = false; }}/>
O mesmo resultado também pode ser alcançado passando valores (neste caso true
e false
) até o envio. Os valores podem ser acessados através da variável de evento e
.
{ showHeader = e.detail; }} />
Botões - Desafio 3
Nosso terceiro desafio está mais envolvido do que os dois anteriores e coloca nosso novo conhecimento dos despachantes de eventos à prova. Para nos ajudar, Noah divide o desafio em pedaços pequenos:
Vá para o curso agora para tentar e ver a solução.
Reatividade
As instruções reativas são um recurso exclusivo do Svelte, que informa a um pedaço de código para executar novamente cada vez que uma variável dentro desse código é atualizada. Por exemplo, o código abaixo será executado sempre que a variável score for alterada (observe que declaramos uma declaração reativa com $:
)
let score = 0;$: smileySays = "Hi there, your score is: " + score;
Também podemos executar instruções if dentro de instruções reativas:
let score = 0;$: smileySays = "Hi there, your score is: " + score;$: if (score < -4) smileySays = "Wow your score is low!";
Desafio Reativo - Desafio 4
Agora podemos testar nossas novas habilidades ao concluir o Desafio Reativo, que nos aproxima um passo de estarmos prontos para o projeto final.
Mais uma vez, Noah divide o desafio em partes menores para nos ajudar no nosso caminho:
Clique para o curso para experimentar e verificar sua resposta.
Um pouco mais de reatividade
Em seguida, Noah nos dá outro exemplo do uso de Declarações Reativas, um rosto emoji que muda de acordo com a atual happyScore
variável:
const faceList = [ "🤬", "😡", "😭", "🙁", "😕", "😐", "🙂", "😀", "😄", "😊", "😘",];$: index = happyScore + 5;
Da mesma forma que nos exemplos anteriores, o código é executado sempre que a variável 'happyScore' é alterada, portanto, uma Declaração Reativa é a ferramenta certa para o trabalho.
Obrigatório
A ligação permite que um usuário atualize uma variável (nesse caso, chamada name
) inserindo um valor em um campo. Como a ligação é um processo bidirecional, a alteração da variável também atualiza o
valor de:
Vinculamos valores como este:
// ligação declarada abaixo: {name}, {smileySays}
Além de vincular variáveis, também é possível vincular valores de objetos, listas ou componentes.
Projeto final
Clique na imagem para acessar o projeto final.
Bem feito para fazer o curso! Encerramos as coisas com um projeto final que une todas as habilidades que aprendemos ao longo do caminho. Mais uma vez, Noé divide em pedaços menores para nos ajudar a:
Confira o elenco para testar suas novas habilidades no Svelte e ver a solução.
Outro
Isso nos leva ao final do curso. Ótimo trabalho para terminar! E se você deseja aprender mais sobre o Svelte, consulte os documentos oficiais em svelte.dev para tópicos como: Context
, Stores
, Lifecycle methods
, Actions
, Sapper
e mais.
Você também pode seguir o meu Canal do SvelteMaster no Youtube e inscreva-se no Scrimba Svelte Bootcamp para ser o primeiro a saber sobre o lançamento e quaisquer descontos.
Espero que você tenha achado útil e possa usar seu conhecimento totalmente novo em breve.
Enquanto isso, por que não cabeça para Scrimba para ver quais outros cursos estão sendo oferecidos para ajudar você a atingir suas metas de codificação?
Se você também quiser sair com seus colegas alunos ou conversar com pessoas mais experientes e com os criadores dos cursos Scrimba, junte-se ao nosso Servidor Scrimba Discord
Feliz aprendizado 🙂