Support & Downloads

Quisque actraqum nunc no dolor sit ametaugue dolor. Lorem ipsum dolor sit amet, consyect etur adipiscing elit.

s f

Contact Info
198 West 21th Street, Suite 721
New York, NY 10010
youremail@yourdomain.com
+88 (0) 101 0000 000
Follow Us
Svelte 3

Svelte 3 + Firebase: Criando um CRUD com a nova ferramenta JS

 

Amigos developer, se você precisam de aplicações front-end de alta performance e ao mesmo tempo gerando componentes leves e pequenos, eu tenho uma novidade para você: Svelte 3.

Eu sei que vocês estão pensando 😉: “…lá vem mais um framework javascript 😞…”, mas este não é um framework e você vai ver pontos interessantes para considerar o uso do Svelte.

Acompanhem comigo o passo a passo, vamos criar um aplicação simples para o gerenciamento de tarefas. Na aplicação vamos usar alguns recursos básicos do Svelte 3.

Ao final do artigo teremos uma aplicação em Svelte 3 completa, com inserção, alteração, exclusão e consulta de dados usando um banco de dados na nuvem, então bora o/

 

 

O que é Svelte?

Criado em novembro de 2016, por Rich Harris (@rich_harris), em sua versão mais recente, Svelte 3 foi atualizado em abril de 2019.

Svelte é um compilador/builder javascript que nos apresenta uma nova abordagem para se construir interfaces e diferente dos frameworks javascript como VueJS, Angular e outros, Svelte não é um framework javascript.

Svelte não usa a técnica de Virtual DOM, por ser um compilador, ele gera código final em javascript puro (vanilla javascript), sem dependência de nenhum framework.

Rich Harris, acha que a técnica de Virtual DOM é apenas uma sobrecarga, pois existem operações adicionais a serem feitas no DOM, por exemplo, o processo de encontrar as diferenças entre Virtual DOM e o DOM real.

 

Mas por que usar Svelte?

Enquanto frameworks tradicionais fazem o trabalho de conciliação entre DOM virtual e DOM real no navegador, Svelte trabalha com o conceito de que mudanças devem ser diretamente injetadas no DOM, quando o estado do aplicativo é alterado.

Outra diferença do Svelte, é que o código desenvolvido pelo programador, já deve ser compatível com o navegador, antes da aplicação ser executada. Este processo de compatibilização de código é transferido para a etapa de compilação e não é realizado no momento de execução da aplicação.

Em relação a reatividade, Svelte faz com que o próprio javascript fique reativo e sem precisar usar bibliotecas complexas de gerenciamento de estado.

Outro ponto que Rich Harris chama a atenção: Svelte precisa de menos código para realizar as mesmas coisas que os outros frameworks javascript fazem.

 

 

Quais empresas usam o Svelte?

Este é o site oficial do Svelte, https://svelte.dev. Na página inicial podemos ver as principais empresas que adotaram a ferramenta, na seção “Who’s using Svelte?”.

Entre elas está o jornal The New York Times (nytimes.com) e a brasileira Stone Pagamentos (www.stone.co).

O case da Stone Pagamentos é interessante. Atualmente, são mais de 200 mil máquinas de pagamento de cartão da empresa usando o Svelte. 

Esses dispositivos de pagamento são de baixo desempenho e a empresa testou vários frameworks antes de se decidir pelo Svelte. O Svelte foi a melhor solução encontrada por apresentar alto desempenho com baixo custo de processamento.

A Stone é mencionada por Rich Harris em sua palestra disponível neste vídeo. Vá para o minuto 25 do vídeo, para saber mais sobre esse case da Stone Pagamentos e o Svelte: https://www.youtube.com/watch?v=AdNJ3fydeao

 

 

Quer saber mais sobre o Svelte?

Para saber mais visite o website oficial, https://svelte.dev.
Também recomendo assistir toda a palestra do próprio Rich Harris:
 https://www.youtube.com/watch?v=AdNJ3fydeao

 

 

O que vamos aprender?

Vamos usar o Svelte 3 para criar uma aplicação bem simples, será uma aplicação tipo TO-DOonde serão realizadas as operações básicas de criação, alteração, consulta e exclusão de dados de tarefas, o banco de dados estará na nuvem (FIrebase).

Apresentaremos o básico do Svelte 3, comandos javascript não serão detalhados para não perdermos o foco.

 

 

Ferramentas

  • Editor indicado: Visual Studio Code (https://code.visualstudio.com/download).\
  • Extensão “Svelte” para suporte da linguagem no Visual Studio Code.
  • Node.js e NPM (https://nodejs.org).
  • npx – Ferramenta para executar pacotes Node.js.
    • Este utilitário vem junto com o NPM desde a versão 5.2. Caso você não tenha
    • o npx instalado, utilize o comando abaixo:

  • Bulma (https://bulma.io) – Framework Css que vai nos ajudar a criar uma página mais bonita e responsiva (usaremos via CDN)

 

 

Criando o banco de dados na nuvem com Firebase

Nossa aplicação Svelte usará um banco de dados na nuvem, abra uma conta gratuitamente no Firebase acessando http://firebase.com, crie um projeto e depois crie um banco de dados do tipo “Realtime Database” como nas imagens a baixo:

 

 

 

Entre no painel do Firebase, clique em Database e depois em Criar Banco de Dados

 

Escolha o modo de teste e mande ativar o banco de dados

 

Passo a passo da criação do App

1 – Criando a aplicação

1) O nome sugerido para a aplicação é “svelte-todo-app”. Para começar uma aplicação Svelte abra o console e digite os seguintes comandos:

 

2) Instale as dependências. Pode ser usado o yarn no lugar do npm.

 

3) E com isso, execute o servidor de desenvolvimento usando este comando:

 

4) Informe em seu navegador o endereço http://localhost:5000 para acessar seu aplicativo. 

Apareceu assim para você? 

 

No console:

 

No Browser:

Hello world!

Então estamos prontos para começar a usar o Svelte! 🎉

2 – Estrutura de arquivos

Ao criar o projeto, o Svelte gerou a seguinte estrutura de pastas e arquivos. Vamos detalhar alguns desses itens.

  1. public: Esta pasta contém o código compilado da aplicação. A página da web que vemos no navegador é gerada com base nesse código compilado.
  2. src: Esta pasta contém todo o código fonte que escrevemos para a aplicação.
  3. App.svelte: Este é o componente raiz de uma aplicação Svelte. Todo arquivo ou módulo Svelte tem a extensão “.svelte”.
  4. main.js: Este é o arquivo raiz que nos auxilia a injetar nossa aplicação Svelte dentro do DOM.
  5. package.json: Arquivo de metadados que contém todas as dependências do projeto.
  6. rollup.config.js: Svelte usa o “rollup” como javascript bundler, mas pode ser usado outro empacotador como o webpack. Ele também permite que seu navegador seja atualizado automaticamente após qualquer modificação em seu código fonte.

 

3 – Estrutura de um componente

Abra o arquivo App.svelte, vamos detalhar a estrutura de um componente Svelte:

Um componente Svelte é composto de três seções:

  • Script: Entre as tags <script> e </script> fica o código javascript. É onde escrevemos a parte lógica do componente.
  • Style: Dentro das tags <style> e </style> desenvolvemos o código CSS relativo ao componente.
  • HTML: A seção de HTML não tem tags. Ou seja, tudo que escrevemos fora das tags anteriores é código HTML. 

 

4 – Preparando o projeto

Agora vamos criar os primeiros componentes, pastas e começar a codificar.

 

1) A primeira coisa a fazer é importar o Bulma para nosso projeto ficar um pouco mais bonito. 😊

Certifique-se que o servidor de desenvolvimento está funcionando. Caso precise iniciar o servidor, repita o procedimento:

Use este conteúdo a seguir, no arquivo index.html do projeto, dentro da pasta public.

public/index.html

 

2) O arquivo main.js como vimos anteriormente, é o arquivo raiz que nos auxilia a injetar nossa aplicação Svelte dentro do DOM.

Faça com que ele fique da seguinte forma:

main.js

💡 Para saber mais, consulte a documentação oficial: https://svelte.dev/tutorial/making-an-app

 

3) O componente raiz de uma aplicação Svelte, é o arquivo App.svelte.

Para o arquivo App.svelte, use o conteúdo a seguir:

App.svelte

Na seção de HTML, dentro de chaves podemos usar qualquer expressão javascript. Experimente usar uma expressão javascript agora. Troque {projectName} por {projectName.toUpperCase()}

  • Assim como você pode usar chaves para controlar o texto, você pode usá-las para controlar os atributos dos elementos HTML. Por exemplo a url de uma imagem:
    • <img src={src}>
  • Experimente usar esse “shorthand attribute”. Quando atributo e valor são os mesmos podemos usar assim:
    • <img {src}>

 

💡 Para saber mais, consulte a documentação oficial:

 https://svelte.dev/tutorial/dynamic-attributes

 

3) Crie uma pasta específica para conter componentes do projeto.

Dentro da pasta src crie a pasta Tasks para conter componentes específicos de nosso projeto.

 

4) Para finalizar essa parte, crie dois componentes.

Dentro da pasta src crie dois arquivos vazios. Nosso projeto terá dois componentes específicos para as tarefas do projeto.

 

Mantenha o servidor de desenvolvimento em execução, para observarmos o resultado de nossas implementações no navegador:

 

5 – Reatividade no Componente de Tarefas

1) Antes de trabalharmos com o componente Task.svelte temos que inclui-lo para dentro do componente App.svelte.

Veja como um componente é referenciado no Svelte. Precisamos usar o comando import na seção script e uma tag na seção HTML.

src/App.svelte

 

2) O componente Task.svelte irá conter o campo para entrar com a descrição da tarefa, os botões principais e a grid de tarefas.

Vamos começar apresentando o formulário e o campo da tarefa. Use este conteúdo a seguir, dentro do arquivo Task.svelte.

src/Tasks/Task.svelte

Binding – bind:value={newDescription}

    • Você pode usar a diretiva bind:value para fazer a vinculação de dados. No exemplo anterior, sempre que você alterar o valor do campo da tag input, ele atualizará a variável newDescription imediatamente. 
  • Para ver esse efeito, insira o código a seguir, após o comentário “<!– Binding –>”

💡 Para saber mais, consulte a documentação oficial:

 https://svelte.dev/tutorial/text-inputs

 

3) Implementando uma declaração reativa.

Svelte automaticamente atualiza o DOM quando o estado de algum componente muda. Frequentemente, alguma parte de um componente precisa ser recalculado (atualizado) com base em outras partes. Para isso temos as declarações reativas.

Neste caso, vamos implementar uma declaração reativa para habilitar o botão salvar apenas quando a descrição da tarefa for maior ou igual a cinco caracteres.

 

Na seção de scripts inclua uma variável booleana. Ela representa se o tamanho da descrição da tarefa é válida.

Em seguida, insira a declaração reativa que atribui falso ou verdadeiro à nova variável dependendo do tamanho da descrição da tarefa.

Sua seção script deve ficar assim:

Pode não parecer, mas essa expressão reativa é um javascript válido porém incomum.

É assim que funciona uma declaração reativa no Svelte: quando newDescription sofre qualquer mudança de valor, a expressão à direita do sinal de igual será reavaliada e seu resultado atribuído a variável que está ao lado esquerdo do sinal de igual, neste caso a variável validDescription.

Resumindo, o Svelte interpreta assim uma declaração reativa: “re-execute este código assim que mudar qualquer valor referenciado”.

 

Agora falta usar a expressão reativa. 

Inclua o trecho abaixo após o comentário “<!– Buttons –>”

Agora temos dois botões. O botão “New” que usaremos posteriormente e  botão “Save”.

O botão “Save” será habilitado caso a descrição da tarefa tenha tamanho válido.

 

💡 Para saber mais, consulte a documentação oficial:

 https://svelte.dev/tutorial/reactive-declarations

 

Check Point

Para conferir o andamento, certifique-se que seu componente está assim:

 

src/Tasks/Task.svelte

Se tudo está indo bem, a tela até o momento estará assim:

 

6 – Event Listeners: Lidando com eventos.

Com Svelte podemos ouvir qualquer evento em um elemento HTML com a diretiva “on”.

Vamos implementar um comportamento no botão “New” usando a diretiva “on” do Svelte.

Queremos limpar o campo de descrição de tarefas e deixar o cursor posicionado para que o usuário comece a entrar com uma nova descrição.

Assim que o usuário der click no botão “New”, o botão irá acionar uma function associada.

Continuando em src/Tasks/Task.svelte, na seção de HTML seu botão “New” ficará assim agora:

 

Na seção script teremos agora a function que está sendo chamada na diretiva “on:click={newTask}”

💡 Para saber mais, consulte a documentação oficial: https://svelte.dev/tutorial/dom-events

 

7 – Reatividade acionada por atribuição.

Por conta da reatividade do Svelte ser acionada por atribuições, usar métodos de array como “push” ou “splice” não resulta em atualizações automaticamente.

No Svelte vamos usar uma atribuição simples em um array, para atualizar dados de tarefas que estão no banco de dados.

Lembra do banco de dados da nuvem que criamos anteriormente? Agora vamos começar a manipular dados de tarefas usando este banco.

Para isto, crie um array na seção script. Vamos armazenar tarefas neste array para apresenta-las posteriormente na tela.

 

src/Tasks/Task.svelte 

Ainda na seção script, inclua a function “submitTask” e a function “insertTask”, que efetivamente registra dados de tarefas no banco de dados da nuvem e atualiza o array de tarefas.

 

Atenção. Informe no comando “fetch” a URL de seu banco de dados (ela está no seu painel do firebase em Databases -> Realtime Database).

Continuando em src/Tasks/Task.svelte, na seção de HTML seu botão “Save” ficará assim agora:

💡 Para saber mais, consulte a documentação oficial:

 https://svelte.dev/tutorial/updating-arrays-and-objects

 

Check Point

Para conferir o andamento, insira algumas tarefas e verifique no banco do Firebase se as mesmas foram incluídas.

firebase

 

8 – Lifecycle: Ciclo de vida de componente.

Cada componente tem um ciclo de vida que começa quando ele é criado, e termina quando é destruído. 

Há várias funções que permitem executar códigos em momentos importantes durante esse ciclo de vida.

O que se usa com mais frequência é o “onMount”, que é executado depois que o componente é renderizado pela primeira vez no DOM. 

No nosso caso, vamos usar a function “onMount” para carregar os dados de tarefas. Assim que o componente iniciar, “onMount” será acionada e carregará a função “getTasks()” do nosso projeto. “getTasks()” carregará dados de tarefas da nuvem para o array “tasks”.

 

Para que isto aconteça, vamos implementar a função “onMount” e “getTasks()” na seção script.

src/Tasks/Task.svelte 

💡 Para saber mais, consulte a documentação oficial:

https://svelte.dev/tutorial/onmount

 

9 – Blocks: lógica no HTML.

O HTML não tem uma maneira de expressar lógica, como condicionais e loops. O Svelte tem.

Vamos precisar mostrar os itens que estão dentro do array tasks. Para isto usaremos um “each” que será implementado na grid de itens que faremos agora.

Podemos usar um “else” no  “each” do Svelte. Caso nosso array de tarefas esteja vazio, o fluxo de controle desviará para o  “else” e mostraremos uma mensagem “No tasks” ao usuário.

 

Acrescente este trecho de HTML no final do arquivo, ou seja, após a última linha do arquivo.

src/Tasks/Task.svelte 

 

Check Point

Para conferir o andamento, verifique na tela “Grid” que acabamos de criar, se as tarefas aparecem.

Se tudo está indo bem, a imagem a seguir deve estar aparecendo.

💡 Para saber mais, consulte a documentação oficial:

https://svelte.dev/tutorial/each-blocks

 

10 – Props: passando dados entre componentes.

Em qualquer aplicativo, comumente precisamos passar dados de um componente para um componente filho.

Para fazer isso, precisamos declarar propriedades. No Svelte, fazemos isso com a palavra-chave “export”.

 

Vamos começar a trabalhar com o componente TaskGridItem.svelte. Ele vai mostrar detalhes das tarefas.

Para isto, use o seguinte conteúdo:

src/Tasks/TaskGridItem.svelte 

 

O componente superior é Task.svelte. Modifique o seguinte trecho para que ele envie dados das tasks para o componente filho TaskGridItem.svelte.

src/Tasks/Task.svelte 

 

O componente TaskGridItem.svelte, precisa estar disponível. Então acrescente esta linha na seção script de Task.svelte.

src/Tasks/Task.svelte 

💡 Para saber mais, consulte a documentação oficial:

https://svelte.dev/tutorial/declaring-props

 

11 – Event Dispatcher: componentes enviando eventos.

Componentes também podem enviar eventos. Para fazer isso, eles devem criar um “event dispatcher”.

 

No nosso contexto, temos os botões de alterar e excluir tarefas dentro do componente TaskGridItem.svelte. Quando o usuário acionar o click nesses botões, precisamos que esses eventos sejam enviados para o componente superior. 

Existe uma necessidade a mais nesse caso. Temos que enviar ao componente superior, Task.svelte, os dados da tarefa a qual o botão acionado se refere.

 

Vamos implementar isso em Svelte.

src/Tasks/TaskGridItem.svelte 

 

Repare que estamos enviando também os parámetros “edit” e “delete”. Eles servem como uma identificação que indicará quais functions serão executadas no componente superior.

Essas functions vão utilizar dados enviados (id, description) para realizar as ações desejadas. “Edit” e “Delete” para editar tarefas e excluir tarefas respectivamente.

A seguir está o componente superior recebendo dados enviados de TaskGridItem.svelte. Implemente conforme este trecho de código em Task.svelte.

 

Repare que “edit” corresponde a function “editTask” e “delete” corresponde a “deleteTask”, mas poderiam ser nomes iguais.

src/Tasks/Task.svelte 

 

Ainda no componente superior Task.svelte, seção script, vamos implementar as ações de editar e excluir tarefas.

src/Tasks/Task.svelte 

💡 Para saber mais, consulte a documentação oficial:

 https://svelte.dev/tutorial/component-events

 

12 – Finalizando a aplicação.

Falta pouco para terminar. 

 

Na seção script, modifique a function “submitTask” para diferenciar entre uma alteração e uma inserção de dados.

src/Tasks/Task.svelte 

 

E para melhorar a visualização, implemente este estilo usando CSS. Serve atribuir cores a alguns avisos da tela e para aumentarmos o espaço superior do título da grid de tarefas. Para isso use a seção style, conforme está a seguir.

src/Tasks/Task.svelte 

Ficou assim sua tela? 😀

13 – Gerando build para o ambiente de produção.

Se você seguiu todos os passos, seu projeto está pronto para ser enviado e utilizado em produção.

Execute o seguinte comando para criar uma versão otimizada para essa finalidade:

A saída do build de produção pode ser encontrada na pasta “public” do diretório do seu projeto. O conteúdo pode ser enviado para o seu serviço de hospedagem diretamente.

 

Para mim aqui, o conteúdo da pasta public têm um tamanho total de 96K.

 

14 – Acessando a aplicação na nuvem.

Eu fiz o deploy usando a plataforma Netlify. Se quiser utilizar esta aplicação na nuvem, click aqui.

 

Experimente fazer o deploy de sua aplicação. Compartilhe com conosco. 😊

 

Deixo um desafio para você.

Observem que a aplicação que eu fiz o deploy, faz algo a mais do que vimos até agora: ela “sabe” informar se está acontecendo inclusão ou alteração de registros. 

Em outras palavras, a aplicação que está funcionando na nuvem, informa uma mensagem na cor azul dizendo que o usuário está incluindo um registro e na cor vermelha informa que o usuário está alterando uma tarefa.

Este é um desafio para você 💪: Implemente este novo comportamento usando Svelte!

 

Conclusão

Parabéns! Você fez todo o passo a passo e agora você tem uma aplicação em Svelte 3 funcional e completa, com inserção, alteração, exclusão e consulta de dados usando um banco de dados na nuvem.

Este artigo mostrou alguns recursos básicos do Svelte 3, mas outros recursos não foram abordados como Stores, Transitions, Component Composition (Slots), Debugging e outros.

Ou seja, tem muito mais para mostrar!!!

Espero que tenham gostado deste artigo para que eu possa continuar falando sobre o Svelte 3.

 

Até o próximo post. 😎

 

Referências

 

 

Analista de Desenvolvimento de Sistemas numa empresa de serviços financeiros, trabalha com tecnologias diversas principalmente back-end e entre elas Ruby On Rails. Dedica-se a praticar corridas de rua e artes marciais. Nos fins de semana gosta de ler, assistir filmes, preparar palestras e escrever para blogs ツ

10
Deixe um comentário

avatar
3 Comment threads
7 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
6 Comment authors
LEANDRO SOARES COSTASergio LimaDEmysFELIPE MACHADO DE OLIVEIRA MOREIRACRISTIANO SANTOS GONCALVES Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
FELIPE MACHADO DE OLIVEIRA MOREIRA
Visitante
FELIPE MACHADO DE OLIVEIRA MOREIRA

Tive problemas na parte onde pela 1 vez pede para verificar se os dadso estao salvando no banco. Minha aplicação roda sem erro.

Fiquei com úvida sobre a url no feth do meu firebise encontrada dentro de realtime database

minha duvida é a seguinte:

Devo manter ou tirar o nome /tasks.json?

Sera isso que pode nao permitir meus dados serem salvos no banco ?

meu codigo fetch ficou assim

 fetch(“https://todolist12457893.firebaseio.com/tasks.json”, {
     method: “POST”,
     body: JSON.stringify(taskData),
     headers: { “Content-Type”: “application/json” }
   })

Sergio Lima
Visitante

Olá Felipe, Vc deve manter o “/tasks.json” se é um POST. A seguir, eu copiei e colei o meu código do jeito que está implementado. Só mudei um digito da minha URL original. Confira com sua implementação. E no console do browser vc já verificou se há erros? function insertTask() { const taskData = { description: newDescription }; fetch(“https://svelte-5d1e4.firebaseio.com/tasks.json”, { method: “POST”, body: JSON.stringify(taskData), headers: { “Content-Type”: “application/json” } }) .then(response => { if (!response.ok) { throw new error(“An error occurred, please try again!”); } return response.json(); }) .then(data => { // Reatividade acionada por atribuição. tasks = […tasks, {… Read more »

FELIPE MACHADO DE OLIVEIRA MOREIRA
Visitante
FELIPE MACHADO DE OLIVEIRA MOREIRA

Boa noite! Não ha erros, vou dar uma repassada no codigo e aviso se funcionar. Obrigado por hora!
Abraços!

FELIPE MACHADO DE OLIVEIRA MOREIRA
Visitante
FELIPE MACHADO DE OLIVEIRA MOREIRA

Ontem consegui Implementar todo o Todo proposto. Ficou muito legal! VAlew

Sergio Lima
Visitante

Que ótima notícia, Felipe. Parabéns! Compartilhe a URL com a gente. 😀

LEANDRO SOARES COSTA
Visitante
LEANDRO SOARES COSTA

Boa tarde,
Voce teria esse codigo completo no github ou algo similar ?

CRISTIANO SANTOS GONCALVES
Visitante
CRISTIANO SANTOS GONCALVES

Parabéns pelo ótimo tutorial!!

Sergio Lima
Visitante

Valeu pelo apoio Cristiano. Se conseguiu reproduzir este tutorial compartilhe com a gente! 😉 Obrigado.

DEmys
Visitante
DEmys

Temos uma comunidade Svelte Brasil no telegram para quem se interessar.
@sveltebrasil

Sergio Lima
Visitante

Olá DEmys, foi uma ótima iniciativa criar a comunidade Svelte Brasil no Telegram! Eu fui um dos primeiros a entrar 😀