Svelte: Nasce um novo framework JavaScript

3 min readJul 7, 2019

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

$ npx degit sveltejs/template first-project-with-svelte
$ cd first-project-with-svelte
$ npm install
$ npm run dev

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.

<script>
  // Toda lógica do componente vai aqui
<script>
<style>
  /** Todo o estilo do componente vai aqui */
</style>
<!-- Toda marcação do HTML -->

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/.

<script>
 let counter = 0
 
 const increment = () => counter += 1
 const decrement = () => counter -= 1
</script><style>
  /** Estilo aqui */
</style><h1>{ counter }</h1>
<button on:click={ increment }> Increment </button>
<button on:click={ decrement }> Decrement </button>

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:

<script>
 import Counter from './Counter.svelte'
</script><style>
</style><Counter />

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

$ npm run build

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!!