Svelte: diretivas e componentes com TypeScript

Conhecendo o ambiente - Apresentação

Olá, boas vindas! Meu nome é Antônio Evaldo, eu sou instrutor aqui na Alura. Eu estou super feliz de ter você comigo neste curso de Svelte. O Svelte é uma ferramenta front-end utilizada para construir interfaces para web, assim como o React, o Angular e Vue. O Svelte foi votada a ferramenta front-end mais amada de 2021, de acordo com uma pesquisa do Stack Overflow.

Neste curso vamos construir a aplicação chamada Svelte Perfis. No formulário dela nós podemos pesquisar pelo nome de usuário do GitHub.

Eu vou digitar "antonio-evaldo", clicar no botão "Buscar". Vai aparecer um card mostrando as informações do meu usuário do GitHub.

Inclusive esse design bonito será disponibilizado para você através de um link do Figma. Outra coisa: se eu pesquisar por um usuário que não existe, por exemplo, o card some e aparece uma mensagem dizendo "Usuário não encontrado!".

A borda do campo, do formulário, também fica vermelha. Então vamos aprender como fazer isso neste curso. Eu vou te dar alguns spoilers do que vamos fazer. Eu vou abrir já a versão final do projeto do curso no VS Code. Nós vamos aprender a criar componentes e como utilizá-los.

Veja que temos uma pasta chamada "components". Nós criamos um componente para o usuário, aquele card do usuário na aplicação.

Criamos um componente para o formulário, criamos um componente para o botão, para o título. Vamos entender em quais situações é interessante criarmos um componente. Nesses componentes também vamos aprender a criar estados, você vai aprender como esses estados fazem a reatividade do nosso código, a reatividade da interface de acordo com os dados do JavaScript.

Também vamos aprender um recurso bem legal do Svelte, que são as diretivas, que colocamos diretamente no HTML para facilitar algumas operações no nosso código. Também vamos ver os blocos if e each, que servem para fazer condicionais e estruturas de condição diretamente no HTML.

Também vamos ver uma coisa bem legal, que é a sintaxe do cifrão do Svelte para fazer código reativo, um monte de coisa. Tudo isso que vamos fazer é utilizado o TypeScript, vamos utilizar boas práticas, vamos aumentar a rigidez do nosso código, aumentar a consistência de dados.

Também vamos aproveitar para revisar, rever alguns conceitos de JavaScript como, por exemplo, requisições. Vamos utilizar a FastAPI para fazer a requisição para o GitHub, pegar os dados retornados, vamos utilizar async await. Um monte de coisa para praticarmos e revisarmos.

Neste curso vamos ver conceitos que também são utilizados em ferramentas como React, Angular e Vue, mas você vai ver como aplicar esses conceitos no Svelte. Se você vem do React, por exemplo, você ainda vai aprender umas coisas bem legais, umas coisas novas.

Se você não vem de nenhuma dessas outras ferramentas, não se preocupe, esse curso foi também pensado para você. Se atualmente você está buscando entrar no mercado de trabalho, talvez esse curso não seja para você. O Svelte, ele é uma tecnologia em ascensão e não possui tantas vagas de emprego com os seus concorrentes.

Mas, se você quer se manter atualizado ou atualizada das tecnologias front-end, se você quer estudar uma nova abordagem, uma nova forma de se fazer aplicações para web, ou mesmo se você gostar do Svelte e quiser contribuir para esse projeto open source, esse curso sim pode ser para você.

É importante dizer que neste curso nós não veremos sobre SvelteKit, roteamento, também não veremos stores, Context API e nem os métodos do ciclo de vida do Svelte. É isso, eu estou super ansioso para compartilhar todos esses conhecimentos com você. Vamos lá?

Conhecendo o ambiente - Primeira aplicação Svelte

Nós vamos utilizar o Svelte, mas o que é o Svelte, o que ele faz? Por que nós vamos utilizá-lo neste curso?

No meu navegador está aberta uma pesquisa, do Stack Overflow, de 2021, que contou com mais de 60 mil respostas de pessoas desenvolvedoras. Essa pesquisa perguntava qual era a ferramenta que as pessoas desenvolvedoras mais amavam utilizar. Olha só, o Svelte ficou em primeiro lugar com mais de 70% de aprovação dessas respostas.

As próximas ferramentas, abaixo do Svelte, que seriam de front-end, estão o React.js e o Vue.js. Isso é uma motivação já muito bacana para aprendermos um pouco sobre o Svelte e entender também porque é uma ferramenta que está sendo tão amada. “Antônio, mas eu ainda não entendi o que exatamente é o Svelte e o que ele faz”. Bora descobrir na prática?

Bora criar a nossa primeira aplicação em Svelte, mas não se preocupe, é bem prático, é bem rápido. No meu navegador também está aberta uma aba, eu vou entrar nela, que está na página oficial do Svelte, que é a URL é "svelte.dev".

Se você entrar nesta página também, e descer um pouco, do lado direito você vai encontrar um bloco que contém alguns comandos.

Tem quatro comandos, que se você executá-los, você vai construir a sua primeira aplicação em Svelte. Porém como queremos utilizar TypeScript no nosso projeto, logo abaixo desses quatro comandos tem uma frase em inglês, dizendo o seguinte: “Veja o quickstart guide para suporte de Typescript e mais detalhes”.

Eu vou clicar na palavra "Quickstart guide", que está em laranja. É um link que abre uma nova página, que será um post do blog do Svelte. O título é: “A forma mais fácil de começar com o Svelte”.

Está tudo em inglês, mas se você não tiver familiaridade com o inglês, você pode pedir para o navegador traduzir a página para português. Descendo um pouco essa página que foi aberta, eu vou até o tópico de numeração 2, que o título é "Use degit". Tem mais dois parágrafos e, logo depois desses dois parágrafos, tem mais um bloco com alguns comandos.

Um deles é justamente a configuração para TypeScript para o nosso projeto. Selecionando o primeiro comando que é npx degit sveltejs/template my-svelte-project, eu vou copiar esse comando com "Ctrl + C", eu vou abrir o PowerShell do Windows. Abrindo aqui - se você estiver utilizando o Mac ou o Linux, pode abrir o terminal do seu computador, vai funcionar da mesma forma.

Antes de dar "Ctrl + V" no comando que eu acabei de copiar, um alerta: você precisa ter o Node instalado na sua máquina. Eu vou dar um node --version. A versão que eu estou utilizando é a 16.13.0, eu já estou com o Node instalado na minha máquina.

Se você não estiver com o Node na sua máquina, você pode, no seu navegador, digitar "nodejs.org" e você pode baixar a versão LTS mais recente.

No meu navegador está aparecendo a versão 16.14. Você pode baixar ela, mas a minha recomendação é que você utilize exatamente a mesma versão que eu estou utilizando, a 16.13. Se você utilizar alguma versão mais recente do Node e por algum motivo der algum problema na construção do aplicativo Svelte, talvez seja por causa disso.

Qualquer coisa, qualquer problema que dê, você baixa a versão 16.13, que é a mesma que eu estou utilizando, e você já vai me acompanhar direito aqui. Voltando para o Windows PowerShell, agora eu vou finalmente dar um "Ctrl + V" naquele comando que eu tinha copiado do post do blog do Svelte.

Explicando rapidamente o que esse comando faz: ele começa com o npx degit, o npx, ele executa a ferramenta degit. O degit, ele vai pegar um repositório do GitHub e copiar para a nossa máquina. No caso, o repositório é o template do perfil sveltejs, lá do GitHub. Essa última parte do comando, que é my-svelte-project, será o nome do nosso projeto.

Então eu vou apagar essa parte do comando e escrever svelte-perfis, que será o nome do nosso projeto. Dando "Enter", vamos esperar o NPX clonar o nosso repositório. Apareceu uma mensagem de resposta dizendo que clonou o repositório para a minha máquina.

Feito isso, eu vou voltar no post do Svelte, copiar o segundo comando, que é cd- ou melhor, nem precisa copiar esse comando, o segundo comando é cd e o nome do nosso projeto. Eu vou escrever cd svelte-perfis. Dando "Enter" nós entramos na pasta do projeto que foi criado.

O próximo comando é node scripts/setupTypeScript.js. Vou dar um "Ctrl + C" nesse comando, voltar para o Windows PowerShell e dar um "Ctrl + V". Esse comando é que vai configurar o TypeScript no nosso projeto. Dado "Enter", eu tive uma resposta do terminal, dizendo que foi convertido para TypeScript.

Tudo certo até agora. O próximo comando é npm install. Eu vou digitar ele no PowerShell. Dando "Enter", o que esse comando faz é instalar as dependências necessárias para instalar a nossa aplicação do Svelte. Essa parte pode demorar um pouco. Eu vou pausar o vídeo e já volto com vocês.

Já terminou de baixar as dependências, não deu nenhum erro, nenhum alerta, mas mesmo que dê um alerta no seu terminal, não tem problema, é comum quando utilizamos o comando npm install. Por fim, vamos voltar no post do blog e copiar o último comando, que é npm run dev.

Copio com "Ctrl + C", volto no terminal, dou um "Ctrl + V", npm run dev, "Enter". Isso já vai realmente rodar a nossa aplicação. Está fazendo aqui o build da aplicação, está fazendo os processos internos. Eu tive uma resposta do terminal, dizendo que a nossa aplicação está pronta e que podemos acessar por esse link "localhost:8080".

Nós podemos ir no navegador e digitar exatamente "localhost:8080". Às vezes dá esse problema, de que vamos rodar a aplicação pela primeira vez e às vezes não carrega.

Nesse caso, você pode voltar para o terminal. No meu caso, eu vou dar um "Ctrl + C" para parar o servidor - no Windows eu tenho que dar "Ctrl + C" umas três vezes para realmente parar e voltar para a linha de comando. Eu vou dar npm run dev novamente. Fazendo isso deve funcionar normalmente.

Está fazendo aqui o build do projeto. Voltando para o navegador, já está aqui, vou até atualizar a página para ver se está tudo certo. Está tudo certo, acabou de atualizar.

Está aparecendo aqui o template do nosso projeto, do Svelte, que é o que já vem por padrão. É isso que o Svelte faz, ele cria interfaces para web, assim como as outras ferramentas que já estão consolidadas no mercado, como o React, Angular e Vue. A diferença é que o Svelte é um compilador.

Ele vem com a proposta de ser mais prático e leve, e não só isso, ele também vem com a proposta de ser fácil de aprender, com uma sintaxe bem limpa, bem enxuta. Nós vamos ver isso durante o curso. No próximo vídeo vamos explorar a estrutura do projeto que foi criada e aproveitar para ver umas coisas da sintaxe do Svelte.

Conhecendo o ambiente - Explorando a aplicação

Vamos explorar um pouco a nossa aplicação que foi criada, esse template que já veio por padrão. Eu vou voltar no terminal do PowerShell e dar um "Ctrl +C" algumas vezes para finalizar o servidor. Agora eu vou digitar o comando code .. Esse comando vai abrir o editor padrão de código do meu computador que, no caso, é o Visual Studio Code.

Já abriu aqui o VS Code para mim. Nós podemos ver, do lado esquerdo, a estrutura de pastas e arquivos do nosso projeto. Apareceu até uma mensagem aqui, no canto inferior direito, do VS Code dizendo que "’Svelte for VS Code’ é a extensão recomendada para esse projeto”.

Se aparecer essa mensagem para você, você pode clicar direto em instalar. Mas se por algum motivo você perder de vista essa mensagem, basta você vir no ícone de extensões do VS Code ou simplesmente digitar "Ctrl + Shift + X" e pesquisar por Svelte. A primeira extensão que aparecer provavelmente será essa, a "Svelte for VS Code".

Você pode ver que até o criador dela tem o nome Svelte, isso quer dizer que é a extensão oficial. Vamos baixá-la para ter realce de código, realce de sintaxe e também outras ferramentas de inteligência que vão nos ajudar no projeto. Acabei de instalar a ferramenta, a extensão, no VS Code. Vou voltar para a estrutura de pastas do projeto. Aqui nós temos algumas pastas.

Uma delas, por exemplo, é o "node_modules", que foi instalada quando rodamos o comando npm install. Outra pasta é a "public", vamos abri-la e explorar um pouco. Veja que tem um arquivo chamado "index.html", eu vou abrir.

À primeira vista, se vocês prestarem atenção, esse arquivo tem a estrutura básica de um HTML, tem o <head> com algumas tags. Só que se vocês olharem, a tag <body> está vazia, não tem nada. Mas e se eu disser para vocês que esse arquivo, na verdade, é aquela página que vimos no navegador? “Como assim, Antônio? Cadê aquele hello world, cadê aquele parágrafo que nós vimos no navegador antes?”.

Nós estamos vendo ele aqui. Certo, o que acontece é que esse conteúdo, esse título e o parágrafo, é adicionado dinamicamente através de um script chamado bundle.js. Nós podemos ver esse script referenciado no final da tag </head>.

Ele é referenciado na pasta “build”. Se olharmos dentro da pasta "public", também tem uma pasta chamada "build". Abrindo ela nós podemos ver esse arquivo chamado "bundle.js". Abrindo esse arquivo nós vemos um arquivo enorme, JavaScript, com um monte de código meio confuso e que não vale a pena tentarmos decifrá-lo agora.

Mas o que eu posso dizer para vocês é o seguinte: esse código, é ele que adiciona aquele conteúdo que nós vimos na página, no navegador. Ele vai adicionar o hello world e o parágrafo, que está em inglês, e colocar no body do "index.html". “Antônio, mas eu ainda não entendi de onde vem aquele hello world, não tem alguma coisa mais legível que possamos ler?”.

Tem. Nós vamos achar isso em outra pasta. Eu vou fechar o "bundle.js" e vamos direcionar as nossas atenções agora para a pasta "src". Abrindo ela nós conseguimos ver um arquivo chamado "App.svelte". Vamos abri-lo.

Apareceu uma mensagem também do VS Code, dizendo para reiniciar o VS Code, porque instalamos uma extensão. Se aparecer essa mensagem vocês podem reiniciar. Eu vou fazer isso agora, aproveitar que apareceu, eu vou reiniciar a janela. Pronto, voltando para o arquivo "App.svelte", nós temos o seguinte, nós temos uma tag <script>, temos uma tag <main> e temos uma tag <style>.

Isso é a estrutura de um arquivo do Svelte. Nesse caso, do arquivo "App.svelte", que é o primeiro componente do nosso projeto. Se vermos aqui, a tag <h1> tem Hello {name}, eu já vou explicar para vocês o que esse name é e como ele virou o world. Nós temos o parágrafo <p>, então aqui já está mais legível, conseguimos ver que é daqui que vem aquele conteúdo que vimos no navegador.

Mas como o Svelte sabe que esse conteúdo é para ser inserido no "index.html"? Quem vai fazer esse trabalho é um arquivo chamado "main.ts", que também está dentro da pasta "src". Bora abrir ele, rápido, para ver como ele faz isso. Abrindo o "main.ts", o que temos?

Temos algumas linhas de código, de JavaScript. A primeira delas está importando App de './App.svelte', aquilo que acabamos de ver. O que vocês precisam saber que é que, neste caso, o app está sendo importado como uma classe, o Svelte faz isso de alguma forma por trás dos panos. Na linha 3 ele cria uma constante chamada app também, só que tudo minúsculo.

E recebe uma instância de App. Essa instância de App recebe no construtor, nos parênteses, que é quando vamos chamar a instância de uma classe, recebe no construtor um objeto com algumas propriedades. A primeira delas é target e o valor é document.body. É aqui que acontece a mágica, na verdade.

O Svelte vai interpretar todo aquele código que vemos me "App.svelte" e inserir no body do "index.html" que nós vimos. Então é isso o que acontece, é o que vai acontecer quando pedimos para rodar o comando npm run dev, ele vai compilar aquele código do "App.svelte" e jogar dentro do "index.html".

Tem outra propriedade desse objeto, que nós passamos no construtor, que é props. Você não precisa saber muito sobre esse aqui agora, mas veja que dentro desse props, o valor dele é um objeto, que a propriedade se chama name e o valor é 'world'. É esse que vai aparecer como um name dentro do arquivo "App.svelte".

Mas vamos fazer o seguinte, vamos apagar essa parte de props do "main.ts", eu vou apagar esse atributo, essa propriedade props, já que não vamos trabalhar com ela agora, vocês não precisam saber o que isso faz agora, exatamente. Eu salvo o arquivo "main.ts", volto em "App.svelte", aproveito e vou apagar a palavra-chave export, que está dentro da tag script, porque também não vamos precisar dela agora.

Não se preocupe, porque você terá outra oportunidade para entender como funciona a palavra-chave export em outra aula.

Agora, voltando para o navegador, eu acabei de salvar o "App.svelte", voltando para o navegador e atualizando a página, não vai funcionar porque, na verdade, eu não rodei o servidor novamente. Não deu certo. Eu vou voltar para o código, eu vou digitar "Ctrl + J" para abrir o terminal integrado do VS Code.

Vou digitar npm run dev. Nós precisamos fazer isso toda vez que quisermos rodar a nossa aplicação, o servidor do Svelte precisa estar rodando. Pronto, acabei de digitar o comando, dei "Enter" e o terminal do VS Code já me retornou dizendo que a nossa aplicação está pronta. Voltando no Chrome, eu vou atualizar e apareceu "Hello Undefinied!".

Lembra que apagamos aquela parte do world? Vamos voltar no código, vou fechar o terminal com "Ctrl + J" novamente. O que está acontecendo? Na tag <script> nós temos uma variável chamada name.

Ela não foi definida. Antes ela estava definida como world, mas agora vamos defini-la dentro do próprio arquivo "App.svelte". Logo depois de let name: string; eu vou digitar string = 'Antônio';. Salvando o arquivo e voltando no navegador, aparece "Hello Antônio!".

Então se voltarmos para o código e olharmos a parte do HTML mesmo, que é a tag main e tem h1, percebemos que estamos utilizando a variável do JavaScript, que foi declarada com let name: recebe : string = 'Antônio'.

Então podemos utilizar diretamente uma string do JavaScript e inserir diretamente no meu HTML com essa citação de chaves - veja que foi escrito <h1>Hello {name}</h1>. Essa é uma citação do próprio Svelte, onde utilizamos variáveis do JavaScript para colocar valores diretamente no HTML, o que é uma coisa bem legal e também já é um recurso conhecido de outras ferramentas com o React, o Vue e o Angular.

Sobre o curso Svelte: diretivas e componentes com TypeScript

O curso Svelte: diretivas e componentes com TypeScript possui 158 minutos de vídeos, em um total de 58 atividades. Gostou? Conheça nossos outros cursos de Svelte em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Conhecendo o ambiente
• Trabalhando com componentes
• Card de Usuário
• Trabalhando com API
• Implementando nova funcionalidade