Svelte: Nasce um novo framework JavaScript

Igor Oliveira
Jul 7 · 3 min read

O que é?

O Svelte é um framework que junta o melhor de seus “concorrentes” , como o ReactJs e o VueJs. Porém trazendo também abordagens interessantes de estilo próprio

O que me fez sentir uma leve paixão pelo Svelte, é que, quando compilamos nosso código para produção, ele gera tudo apenas com JavaScript puro e bem otimizado, eliminando qualquer tipo dependência que possa pesar nossa aplicação. Isso que dizer que podemos usar o Svelte para desenvolver com todas as facilidades de um framework JS e quando compilamos nosso código, em um passe mágica todo framework some restando apenas nosso bom e veho JavaScript puro.


Começando um projeto com Svelte

Para começarmos um novo projeto Svelte, necessitamos de ter instalado no nosso computador o NPX.

Com o npx instalado, rodaremos o seguinte comando em nosso terminal

Agora vamos analisar a estrutura que o Svelte nos dá.

  • src/: Nessa pasta irá conter todo nosso código de desenvolvimento e nosso arquivo de entrar main.js
  • public/: Todo arquivo de produção será enviado para essa pasta
  • package.json: Eu chamo sua atenção aqui para você notar que nosso projeto não possui nenhuma dependencies, apenas as devDependencies.

Arquivos .svelte

Os arquivos .svelte são como os .jsx ou .vue, servem para criarmos toda a lógica do componente, o estilo e marcação HTML.

Abaixo podemos ver a estrutura básica de um componente Svelte.

Importante ressaltar que todo estilo do componente é restrito apenas a ele, ou seja, o estilo de um componente não afeta o outro.


Construindo nosso primeiro componente

Nosso primeiro componente vai ser um contador bem simples. Vamos começar criando o arquivo Counter.svelte no na nossa pasta src/.

Vamos por partes:

  • Primeiro declaramos usando let o valor inicial do nosso contador, que irá começar com 0.
  • Logo abaixo nós criamos uma função anonima que vai incrementar mais um na nossa variável counter.
  • Seguindo essa mesma linha criamos uma outra função anonima que irá decrementar menos um na nossa variável.
  • Na parte de marcação nós criamos um h1 que irá mostrar o valor inicial do contador, que começará com 0, logo em seguida criamos um botão de incremento e outro de decremento

Agora vamos nos atentar nos botões, neles podemos perceber que estamos chamando um evento de click e é dessa forma que o Svelte trabalha com eventos, antes de qualquer evento nós usamos o prefixo on: .

Dessa forma quando clicarmos no botão de Decrement será disparada uma ação que irá pega o valor atual da variável counter e subtrair com menos um. O mesmo irá acontecer com Increment, só que ao invés de subtrair irá somar mais um.

Finalizando

Para finalizarmos esse artigo, temos que importar nosso componente para o App.svelte, fazendo com que ele fique dessa forma:

Em seguida vamos gerar o arquivo para produção, basta apenas rodar um:

Fim!

E chegamos ao fim de mais um artigo, em breve estarei lançado mais artigos falando mais sobre essa coisa linda chama Svelte!!

Você pode conferir todo código no Github CLICANDO AQUI!!

Referências

Igor Oliveira

Written by

Oi, eu me chamo Igor!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade