Experiências com Svelte por uma pessoa desenvolvedora React (defasado) [pt-BR]
Tags: javascript, svelte, webdev, braziliandevs
Published: 2019-08-01 21:29:46

---
title: Experiências com Svelte por uma pessoa desenvolvedora React (defasado) [pt-BR]
published: true
description: Svelte e integrações, o que deu certo e o que deu errado.
tags: javascript, svelte, webdev, braziliandevs
---

> **ARTIGO ANTIGO** Artigo escrito em agosto de 2019. Na época o Svelte não possuia suporte nativo a TypeScript e o Sveltekit ainda não existia.

Esta não é a primeira versão do Svelte e creio que a grande maioria nunca se importou antes pois não parecia maduro o suficiente. Para mim foi assim, pelo menos. Também sinto que não sou o único que começou a ter interesse na ferramenta após a versão 3.

<figure>
![Uma tirinha em inglês onde um garoto aponta que "alguns caras" estão usando (aqui eu editei pro meu artigo) Svelte. No segundo quadrinho a mãe diz "Não olhe, você será influenciado por..." e no terceiro quadrinho, o garoto dizendo que já era tarde, com uma roupa mais hipster](https://thepracticaldev.s3.amazonaws.com/i/szxxzaps6w7coqe9hi0a.png)
<figcaption>
...e fiquei empolgada <sup><sub><sup><sub>fodeu</sub></sup></sub></sup>
</figcaption>
</figure>

Para situar você, meu caro leitor, minha cara leitora e meu caro leitore de único artigo, vou introduzir um pouco sobre Svelte. O texto acabou ficando um pouco longo pois não pretendo dividir em partes dado que faço artigos com pouquíssima freqüência (nula, pra ser sincera). As minhas experiências foram focadas em integrações de Svelte com ferramentas e tecnologias de mercado. Caso você já saiba o que é Svelte, [pule para a parte que falo das minhas impressões](#enfim).

![Imagem do jogo Super Mario Bros, onde o jogador pode pular mundos](https://www.mariowiki.com/images/thumb/4/44/SMB_Warpzone.png/200px-SMB_Warpzone.png)

Adiciono também que eu repito muita coisa tanto neste próprio _post_ quanto de conteúdo de outras postagens. Apesar disto, se você ver que eu passei rápido por um assunto é porque devem ter fontes melhores aprofundadas e eu focarei sobre esse meu tempo experimentando o _framework_.

## O que é Svelte?

<figure>
![Uma pessoa batendo com a cabeça na mesa](https://media.giphy.com/media/9mWg0JLV4NwM8/giphy.gif)
<figcaption>
<strong>Oh noes!</strong> Mais um framework...
</figcaption>
</figure>

**Svelte** é um framework de componentes com escrita declarativa e que converte seus componentes em código nativo pro navegador.

> [acima é um resumido daqui](https://svelte.dev/blog/svelte-3-rethinking-reactivity#What_is_Svelte)

Quando fala-se de frameworks para componentização com escrita declarativa nada mais é que escrever componentes tal como hoje os maiores frameworks de mercado fazem (React, Vue, Angular...) e evitar ficar _**jQuery**zando_ toda sua aplicação, escrevendo código imperativo que modifica direto pro DOM.

Já o diferencial desta ferramenta é a segunda parte:

Na verdade este _framework_ não é um _framework_ que dá importância em _runtime_ como os _frameworks_ atuais, muito pelo contrário, seu ponto forte é o **compilador**.

<figure>
![Bob Esponja abrindo os braços e sai um arco íris](https://media.giphy.com/media/SKGo6OYe24EBG/giphy.gif)
<figcaption>
ele compila seus componentes para código nativo do navegador
</figcaption>
</figure>

O compilador irá transformar todo seu código declarativo e bem estruturado em algo que altere imperativamente o **DOM**. Diga adeus ao _Virtual DOM_. Ele irá _**jQuery**izar_ sua aplicação por você enquanto seu código continuará componentizável e de fácil manutenção.

<figure>
![Uma imagem de um programa de televisão de vendas por telefone](https://media.giphy.com/media/VF5doyjvpNfeFLIwjn/giphy.gif)
<figcaption>
e não é só isso!
</figcaption>
</figure>

Desde sua concepção foi pensado em gerar aplicações reativas. Recomendo muito a [palestra do Rich Harris sobre "Pensando em reatividade" 🇬🇧](https://www.youtube.com/watch?v=AdNJ3fydeao).

## Antes de tudo, sintaxe!

Recomendo este completíssimo artigo escrito pelo Claudio Holanda: [Svelte: A era dos frameworks-compiladores](https://claudioholanda.ch/blog/svelte-a-era-dos-frameworks-compiladores/).

## E por onde começar?

O site oficial conta com uma ótima ferramenta ao qual nós desenvolvedores estamos bem acostumados: [REPL](https://svelte.dev/repl/). É basicamente o parquinho das pessoas desenvolvedoras e a principal ferramenta usada pela comunidade (no chat - link no final do artigo) para apontar problemas ou erros. Não é necessário baixar nada, programe na esquerda e veja a saída na direita. Simples assim.

Caso queira um melhor direcionamento sobre as funcionalidades da plataforma, baseado no **REPL** também foi criada uma ferramenta interativa com [tutoriais](https://svelte.dev/tutorial/basics) e [uma galeria com exemplos básicos](https://svelte.dev/examples).

## Svelte, hoje vou lhe usar!

![Foto do personagem Coronel Jesuíno, que tinha esta fala e que se tornou meme "'alguma coisa' vou lhe usar!"](https://i.ytimg.com/vi/w7xQG1ujzuU/hqdefault.jpg)

De acordo com a documentação, para inicializar projetos Svelte foi popularizado uma outra ferramenta geradora de código chamado [degit](https://github.com/Rich-Harris/degit), também desenvolvida pelo **Rich Harris**. Basicamente com esta ferramenta você passa um repositório público _Git_ e ele irá baixar e descompactar a última versão de uma branch na pasta onde você irá desenvolver seu código.

Para facilitar, foram disponibilizados repositórios de **template** com a possibilidade de escolher a ferramenta para criação de bundle em duas opções: **Webpack** e **rollup**.

### Desenvolver em Svelte ~~loucamente~~ localmente

Para iniciar localmente uma aplicação <abbr title="Single Page Application">SPA</abbr> em Svelte, basta baixar o template:

```sh
# using rollup
npx degit sveltejs/template my-svelte-project
# using webpack
npx degit sveltejs/template-webpack my-svelte-project
cd my-svelte-project

npm install
npm run dev
```

> fonte: https://svelte.dev/

Ao rodar `npm run dev` a aplicação irá subir um servidor local em modo de desenvolvimento apontando para `http://localhost:5000/`. Após o desenvolvimento, basta rodar `npm run build` e sua aplicação <abbr title="Single Page Application">SPA</abbr> estará pronta para produção com os artefatos criados dentro da pasta `public`.

### Usando o Sapper

> Desatualizado. Ler sobre **Sveltekit**

O **Sapper** é uma aplicação inspirada no [Next.js](https://nextjs.org/), um framework bem famoso na comunidade **React**. Mas uma funcionalidade que me agradou bastante foi a de geração de conteúdo estático, algo bem parecido com o [Gatsby](https://www.gatsbyjs.org/) (porém mais básico, sem GraphQL etc).

```sh
# for Rollup
npx degit "sveltejs/sapper-template#rollup" my-app
# for webpack
npx degit "sveltejs/sapper-template#webpack" my-app
cd my-app

npm install
npm run dev & open http://localhost:3000
```

> fonte: https://sapper.svelte.dev/

**Um aviso importante**: o _reload_ automático (<abbr title="Hot Module Reload">HMR</abbr>) pode não funcionar muito bem utilizando Sapper, necessitando constantemente ter que matar e reinicializar a aplicação durante o desenvolvimento ao utilizar códigos durante _lifecycle_.

Ao executar `npm run build`, o Sapper gera uma aplicação Node dentro da pasta `__sapper__/build`. Também é possível utilizar [express](https://expressjs.com/pt-br/) (no template é utilizado um servidor mais leve chamado [Polka](https://github.com/lukeed/polka)).

Para os _hypeiros_ e amantes de [JAM Stack](https://jamstack.org/), como eu mencionei anteriormente também é possível gerar conteúdo estático. Basta rodar `npm run export` e ele criará os artefatos para produção na pasta `__sapper__/export`.

## Pontos interessantes

Infelizmente [não há suporte nativo oficial para TypeScript](https://github.com/sveltejs/svelte/issues/1639) mas por um outro ângulo, talvez faça desta ferramenta mais amigável para quem está começando em relação a...

## Outras ferramentas do gênero

> Tem alternativas? Tem sim senhor!

### [Stencil](https://stenciljs.com/)

A filosofia do Svelte [não é gerar web components como foco principal 🇬🇧](https://dev.to/richharris/why-i-don-t-use-web-components-2cia). Porém também é possível criar _custom elements_ nativamente conforme [esta _issue_](https://github.com/sveltejs/svelte/issues/797) e utilizar como `web components`.

O Stencil é desenvolvido pela equipe responsável pelo Ionic (ou seja, projeto "parrudo de responsa") e tem em seu showcase empresas de renome. Mesmo o Svelte tendo uma versão para [mobile (svelte-native)](https://svelte-native.technology/), diria que vale a pena ver ambos. Utiliza **TypeScript**.

### Algumas alternativas em 2022 (edit)

- [SolidJS](https://www.solidjs.com/)
- [Qwik](https://qwik.builder.io/)

## _Real laife_

Mesmo sendo clichê de todo artigo brazuca sobre Svelte, repito aqui também um dos maiores cases são as maquininhas verdinhas de pagamento da Stone, usando o Svelte (versão 2 do Svelte).

![Foto da palestra do Rich Harris falando sobre a Stone](https://thepracticaldev.s3.amazonaws.com/i/pat10pn23h1g5m9wd8lx.png)

Como citado no [vídeo do Rich Harris](https://youtu.be/AdNJ3fydeao?t=1498)

> [open source 😍](https://github.com/stone-payments/pos-mamba-sdk).
> créditos: [@kaisermann](https://github.com/kaisermann)

**"Mas quero ver um caso real na web! 😡😡😡"**

Ao lembrar que o criador trabalha ~~no **The New York Times**~~ na Vercel dedicado somente ao Svelte (2022), encontrei um [outro case de uso](https://twitter.com/sveltejs/status/873087411286192128) de quando ele ainda trabalhava no NYT, integrando com **d3**: [um especial sobre a votação na grã-bretanha](https://www.nytimes.com/interactive/2017/06/08/world/europe/british-general-election-results-analysis.html). Também foi desenvolvido numa versão mais antiga do Svelte.

---

## Enfim...

Vim de **React**.

_Fanboy_ mesmo, assumida.

Sempre tinha um detalhe ou outro e que sempre me motivou a não trocar de _framework_ do coração.

Já tinha visto algo bem superficial sobre o Svelte e tinha achado interessante porém sempre passava batido por não ter ouvido muito sobre utilização.

Passou um tempo e após três versões _major_ surgiram muitos cases bem legais e pensei em finalmente dar uma chance e aprender mais sobre.

### E por onde comecei?

Sinceramente digo que quando eu começo a aprender algo novo, me sinto intimidada em ir direto na documentação por mais que ela seja boa. Tutoriais e artigos também nem sempre são completos ou abrangentes e geralmente deixam passar algo. Optei então por um curso na Udemy (variando de R$ 28 - 60, quando tem promoção... ~~clichê de pitches: não estou ganhando nada em citar eles 😞~~) ministrado pelo Maximilian Schwarzmüller: [Svelte.js - The Complete Guide (em inglês)](https://www.udemy.com/sveltejs-the-complete-guide/), do Academind.

É um curso que, apesar de básico/iniciante, cobre muito bem diversas partes das funcionalidades principais contidas no Svelte 3 (versão atual no momento da postagem) e é bem didático.

### Componentização

Como todo _framework_ atual, seu desenvolvimento é voltado a componentização da <abbr title="User Interface">UI</abbr>. Achei a parte da criação de componentes bem semelhante ao **Vue.js** no caso de ter tanto o código de marcação (_Markup_), os estilos e o JavaScript num único arquivo.

Dentro do JavaScript, é possível escrever direto em ES6. Como citado anteriormente, ainda não possui suporte a TypeScript nativo, porem...

### Preprocessadores

Como o código no Svelte é compilado, é possível utilizar [preprocessadores](https://www.npmjs.com/package/svelte-preprocess) de um jeito bem trivial. Como se trata de uma ferramenta de terceiro (módulo não oficial porém com muitos mantenedores), sua integração pode não ser das melhores.

É possível integrar outras linguagens ao escrever componentes como TypeScript e CoffeScript para aplicação; Pug (antigo Jade) para _Markup_ (HTML) e Postcss, SASS, Less e Stylus para estilização. É bem simples para integrar.

Dei umas brincadas usando TypeScript e testei usar Stylus e não tive muitos problemas na utilização, porém tive outros problemas (que foram agregados num ítem a parte no final do artigo) com...

### Ferramentas e Integrações

É bem completo o suporte do Svelte para ferramentas de integração.

#### ESLint

Adicione este plugin oficial: [eslint-plugin-svelte3](https://github.com/sveltejs/eslint-plugin-svelte3). Simples assim.

Sua configuração é bem trivial e como não se trata de um _preset_, é bom lembrar que a ativação das regras devem ser feitas individualmente dentro de `rules` no arquivo de configuração.

#### Testes

Para quem veio de **React** já deve conhecer o `react-testing-library` do Kent C. Dodds. Quando a ferramenta se popularizou e generalizou dando origem a outras [Testing Libraries](https://testing-library.com/), e o Svelte não ficou de fora: [@testing-library/svelte](https://github.com/testing-library/svelte-testing-library).

Ele requer um transformador para o Jest: [jest-transform-svelte](https://www.npmjs.com/package/jest-transform-svelte).

#### Prettier

Esse "embelezador" de código também não poderia ficar de fora. Basta adicionar [este plugin](https://github.com/UnwrittenFun/prettier-plugin-svelte) e adicionar um `override` nas configurações do Prettier conforme descrito na documentação.

#### Storybook

Sim, é possível ter um [Storybook com componentes escritos em Svelte](https://storybook.js.org/docs/guides/guide-svelte/). [Seu suporte ainda é básico](https://www.npmjs.com/package/@storybook/svelte#todos).

#### Famoso "saiba mais"

[Com um famoso clique aqui](https://github.com/sveltejs/integrations).

### E estilos?

Existem certas características que eu já adianto:

#### todo _css_ escrito num arquivo de componente será _escopado_ para aquele componente somente

Ao compilar, o Svelte altera os seletores e adiciona classes para evitar conflitos de estilo. E esta funcionalidade é padrão do _framework_.

#### não é possível utilizar interpolação de variáveis JavaScript dentro da _tag_ `<style>`.

Porém nada impede de repassar tais valores utilizando [variáveis CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS/Using_CSS_custom_properties): [exemplo leviano](https://svelte.dev/repl/c28c244c8a414530acf291942585340f?version=3.6.7). Claro que também é possível alterar estilos _inline_ utilizando o atributo `style`, porém lembre que por boas práticas...

#### o Svelte assume que o _CSS_ deve ser intocável

Ou seja, o que estiver dentro da _tag_ `<style>`, após a transformação dos seletores em classes escopadas é um código pronto para ser extraído para um arquivo separado (`extract-text-webpack-plugin`, estou falando de ti).

Não sei nem se é possível utilizar **CSS-in-JS**, inclusive. Porém lembre do _front-end_ raiz, onde utilizamos classes para definir diferentes estilos ao invés de alterá-los em tempo de execução.

### Mas... Não tem _Virtual DOM_?

É inegável que o _pattern_ de _Virtual DOM_ do React é performático (palavras sob influência da minha _fanboyzisse_, não leve a sério!), porém pela filosofia do Svelte de compilar seu código para uma aplicação que utiliza e altera direta e cirurgicamente o **DOM**, ter um _Virtual DOM_ seria redundante além de adicionar um _runtime_ talvez desnecessário.

### Reatividade

O que também me chamou muita atenção foi a atualização de variáveis de forma reativa. No código, basta adicionar uma instrução específica pro Svelte: "[`$:`](https://svelte.dev/docs#3_$_marks_a_statement_as_reactive)".

Faz parte da sintaxe do JavaScript, é válido e até tem um nome específico: [etiqueta](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/label). No JavaScript é utilizado como controle de fluxo em loops e em outras linguagens, geralmente como controle em `goto`.

Resumindo, toda vez que uma atribuição de variável, expressão ou execução de função é utilizada à direita do sinal `$:` será calculado ou executado novamente em caso de mudança de valores de variáveis utilizadas.

### Stores

Como toda biblioteca de componentização de UI, não poderia faltar um gerenciador de estado. E suas [Stores](https://svelte.dev/docs#svelte_store) nativas foram desenvolvidas nesta versão já pensando em reatividade, utilizando um padrão já conhecido das pessoas desenvolvedoras que é o **pub-sub**.

E para usos simples, há um _shorthand_ (escrita facilitada) onde facilita o uso de dados da _Store_ sem se preocupar com [_subscribe_ ou _unsubscribe_](https://svelte.dev/tutorial/auto-subscriptions).

#### Loops Eficazes

Outro ponto que achei legal é que mesmo lidando direto com o **DOM**, o Svelte se vira bem em relação a loops. Claro que infelizmente não é algo automático pois o Svelte precisa saber qual a key para cada elemento porém é possível trabalhar com eficácia na hora de [utilizar loops](https://svelte.dev/docs#each), evitando repaints.

### E falando em _shorthands_...

Gostei bastante da escrita de componentes, para as tarefas mais triviais sempre tem uma forma mais reduzida de se escrever, por exemplo, um _two-way bind_; repassar um _evento_, seja [personalizado](https://svelte.dev/docs#createEventDispatcher) ou não; alternar classes _CSS_; usar _rest-spread_ ou até mesmo...

### Transições e animações!

Algo que eu realmente não esperava vir de brinde. Para animações, efeitos e transições triviais o Svelte possui uma [mini biblioteca](https://svelte.dev/docs#svelte_transition) com uma coleção delas, e de fácil implementação.

Também é possível utilizar [funções de animação e _easing_ personalizadas](https://svelte.dev/tutorial/custom-css-transitions), mas aí meu amigo:

<figure>
![Meme da Nazaré pensando e com as contas flutuando na tela](https://conteudo.imguol.com.br/c/entretenimento/5b/2016/10/14/nazare-tedesco-vila-de-senhora-do-destino-2004-vira-meme-mundial-1476485254931_1080x703.jpg)
<figcaption>
...é muita matemática rs. Deixo esta parte pra galera que curte desenvolver jogos ou nunca faltou em uma aula de álgebra linear.
</figcaption>
</figure>

### _Tags_ especiais

O Svelte também possui alguns componentes nativos que auxiliam no desenvolvimento de um código mais declarativo. [Por exemplo, fica bem trivial obter a largura do viewport](https://svelte.dev/repl/c731dc73439f45c38448127485a4954a?version=3.6.8).

Dentre as _tags especiais_ há funcionalidades como alterar _tags_ no _head_ dentro do Sapper, usar recursividade no próprio componente, usar componentes dinâmicos...

### Compilador opinativo

Tanto o compilador quanto os _linters_ de sintaxe (pelo menos digo isto em relação ao plugin de Svelte para Visual Studio Code) avisam quando há erros triviais de acessibilidade (imagem sem `alt`) e código `css` não utilizados pelo componente.

### Reatividade (parte 2)

Quando ouço reatividade, a primeira coisa que veio à minha cabeça foi **RxJS** (digo pelo nome da _lib_)...

![meme de uma pessoa americana olhando pra câmera e ficando confusa](https://i.gifer.com/54fJ.gif)

Pensei levianamente comigo: "e se eu trocasse a _store_ nativa com _autosubscribe_ por um **Observable**?" Tinha lido que haviam certas compatibilidades entre ambos e decidi testar por conta própria. Para minha surpresa:

{% codesandbox svelte-with-rxjs-7uvxx %}

<sup><sub>(desculpe a bagunça no código)</sub></sup>

Sim, o Svelte integra bem com **RxJS**.

> **edit**: infelizmente o exemplo acima está rodando com **Svelte v3.6**. Quando houve a atualização para a v3.7 acabou quebrando. Por enquanto eu fixei o codesandbox de exemplo na versão v3.6 do Svelte. Agradecimentos ao [@kaisermann](https://github.com/kaisermann) novamente por ter me avisado :D

**Deixo um lembrete:** o Svelte não lida tão bem enquanto ainda não tiver recebido algo do stream (_timeouts_). Para evitar possíveis erros, recomendo uma das seguintes soluções: mesclar com um outro Stream, contendo um valor _nullable_ e emitindo antes da resposta, assim podendo checar dentro de um `{#if}` se já foi emitido algum valor ou englobar o stream numa _Promise_/_generator_ e utilizar `{#async}`.

### Mas ..._runtime_?

Ok, eu menti quando falei que o Svelte não possui uma _lib_ de _runtime_. Não tem, claro, para _Virtual DOM_ pois como expliquei, seria redundante. Porém a _runtime_ é bem enxuta. São praticamente funções que lembram **Hooks** do **React**.

> [documentação](https://svelte.dev/docs#Run_time)

#### _Lifecycle_

Os pares `onMount` & `onDestroy` relativos a renderização e `beforeUpdate` & `afterUpdate` relativos a atualização do componente.

#### _Context_

`setContext` & `getContext`. Também semelhante a contextos no React.

#### `preloading`

Este é exclusivo do **Sapper**. Este é executado quando utiliza-se diretivas nos _links_, carregando e executando dados antes mesmo do usuário clicar no elemento (no evento de `mouseover`, predizendo sua ação).

### E claro, <abbr title="Server Side Rendering">SSR</abbr>!

Fica a critério do desenvolvedor. Como anteriormente citado, o [Sapper](https://sapper.svelte.dev/) auxilia neste aspecto. Como anteriormente citado, esta ferramenta foi inspirada no **Next.js**. Claro que é possível juntar tudo num _bundle_ utilizando somente o Svelte e criar sua <abbr title="Single Page Application">SPA</abbr>.

![Apresentadora Oprah Winfrey distribuindo prêmios para a platéia](https://media1.tenor.com/images/b7fc556c96a04f7c0fcd7f5ef141c4bc/tenor.gif)

Porém usando o Sapper, é possível estender a funcionalidade da sua aplicação para utilizar um servidor com <abbr title="Server Side Rendering">SSR</abbr> (podendo inclusive utilizar [Express](https://expressjs.com/pt-br/)).

Ou no melhor dos casos, exportar uma aplicação [JAM Stack](https://jamstack.org/) utilizando o `sapper export` (algo como um [Gatsby](https://www.gatsbyjs.org/) simplificado), gerando artefatos estáticos, prontos para subir para um <abbr title="Content Delivery Network">CDN</abbr>. O próprio Svelte lida _automagicamente_ com a parte de _hidratação_ da aplicação.

### Problemas que tive

Claro que nem foi somente louros. Contarei algumas experiências:

#### Jest

Tive alguns problemas ao utilizar **Stylus**. Para testes, foi contornado utilizando um [transformador próprio](https://gist.github.com/ninetails/2f84baab9518006c5d45263f57726cc4) (neste exemplo estou utilizando somente Stylus, mas é possível integrar qualquer um existente. Aconselho a utilizar este transformador personalizado pois o `jest-transformer-svelte` e a maioria dos outros pacotes similares possuem dependência com **rollup**, pessoalmente considero desnecessário e cria arquivos não referenciando o arquivo original. Apesar disto, lembro aqui que a cobertura de código é um tanto confusa para arquivos Svelte, senão inexistente, ou seja, não muito confiável. Logo aconselharia a descartar cobertura de código em projetos Svelte.

#### Prettier

Algo que me fez deixar preprocessadores em segundo plano foi que tive muitos problemas ao utilizar o plugin para Prettier. Este funciona muito bem para código de estilos feitos em CSS porém a integração com o Stylus não é bem definida e tive muitos problemas como formatação errônea. Como o plugin não integrava muito bem com preprocessadores, acabava transformando o código em algo ilegível e não _parseável_, e, para evitar escrever muitos **prettier-ignore**, recomendo evitar o uso de preprocessadores.

Para estilos em específico, vi também que ao utilizar um preprocessador o compilador não chega a verificar e validar estilos não utilizados pelo componente.

### ESLint

Teve um _bug_ em específico no ESLint ([já corrigido](https://github.com/eslint/eslint/issues/11940)) usando **Sapper**. Como o **lint-staged** passa o nome do arquivo e os arquivos de rota com parâmetro do _Sapper_ (e do Next.js 9) usam colchetes, o ESLint interpretava os colchetes como parâmetro de busca do _Bash_ e não encontrava o arquivo, mesmo _escapando_.

### _HMR_

Outra dor de cabeça que tive, utilizando **Sapper** é que o _live reload_ pode não funcionar muito bem ao utilizar funcionalidades do _lifecycle_ do _Sapper_ como o _preloading_. Caso for utilizar o Svelte puro não terá problemas, porém ao utilizar o **SSR** do _Sapper_, ele meio que se perde ao ter modificações no lado do código do servidor sendo necessário reiniciar a aplicação dependendo da modificação.

## Conclusão

<sup><sub>(como ensinado nas aulas de redação, tem que ter um, claro!)</sub></sup>

Não me considero uma _early adopter_... _hypera_ talvez. Porém a minha experimentação foi positiva e muito melhor do que eu esperava. Como disse, _balançou meu coração_ que era anteriormente exclusivo do **React**. Muitas das funcionalidades acima listadas não são nem um pouco triviais de implementar nem no meu _framework_ favorito.

Ainda é novidade e não há _mercado_ para sua utilização por aqui (Brasil). Porém na minha opinião ainda tem muito potencial. Claro que muito do que eu falei tem meu viés. Mesmo curtindo React, meu perfil é muito mais tentar ir para o lado do SSR e otimizações estáticas, não curtindo tanto manter somente em _SPA_, _mobile_ (e consequentemente _webcomponents_ e _micro frontend_) e tentar aliviar ao máximo a execução da aplicação no navegador do usuário. Logo este framework acertou em cheio minhas expectativas.

Espero em breve ter _Meetups_ à medida que sua adoção cresça (tenho esperanças rs).

---

> Este post foi criado como uma resposta ao pedido do [@felipefialho](https://github.com/felipefialho) para [falar sobre minhas experiências com o Svelte](https://github.com/frontendbr/forum/issues/1199#issuecomment-512836768)

> Gostaria de agradecer a galera do [Discord](https://discord.gg/Xf9zzW9) por terem ajudado em alguns pontos deste artigo.
> Também agradeço o [@kaisermann](https://github.com/kaisermann) novamente, por ter ajudado a escrever este artigo.


Também:

> Curto conversas mais informais e memes antigos... Dificilmente escrevo para a comunidade não sendo nos fóruns. Não é minha intenção ofender ninguém com postagens deste tipo. Peço também para não me ofender nos comentários lá embaixo se não achou graça neste post e achou que isto estragou o conteúdo. A tentativa foi para tentar deixar o conteúdo do post mais leve para leitura. Peço desculpas pelos erros, principalmente de concordância, pois vou alterando o texto de acordo com o que me passa pela cabeça e nem sempre os `diffs` ficam harmoniosos. Ainda mais tendo este texto como um compilado de tudo que passei durante esse tempo de experimentação. As opiniões expressadas são pessoais e sobre este específico momento. Nunca as tome como verdade e tanto minhas opiniões como as ferramentas descritas podem mudar e evoluir e se tornarem futuramente divergentes deste texto. _BTW_ eu adicionei as imagens sem me preocupar em normalizá-las ou _copyrights_ pois são somente ilustrativas (inclusive podem parar de funcionar pois _hotlinkei ilegalmente_, sendo bem amador mesmo). Este _post_ não possui monetização (pelo menos não para mim, autor...). Adicionalmente, peço para levar na brincadeira sobre minha posição sobre React. Não existe _melhor framework_, e sim o melhor framework é aquele que melhor se adequa ao produto e ao time.

## Join Us!

![Imagem do Tio Sam usada no alistamento americano](https://radioimg.s3.amazonaws.com/connectingvets/styles/nts_image_cover_tall_775x425/s3/poster.jpg?1OjrvU_4ezS4q42xtvfUeQ8DhRM3qrmP&itok=fLua2OFq&c=e343bb5d7f1eb529d074ad2775302016)

- [Forum Front-end Brasil](https://github.com/frontendbr/forum/issues)
- [Discord Svelte Brasil](https://discord.gg/Xf9zzW9)

## Referências

(os conteúdos exclusivos em inglês eu deixei uma bandeirinha unicode do lado: 🇬🇧)

### Meta 🇬🇧

- [Site](https://svelte.dev/)
- [Documentação](https://svelte.dev/docs)
- [Sapper](https://sapper.svelte.dev/)
- [Svelte @ Discord (oficial)](https://svelte.dev/chat)

### Posts relacionados

- [Why I don't use web components 🇬🇧](https://dev.to/richharris/why-i-don-t-use-web-components-2cia), por [Rich Harris](https://dev.to/richharris) (post obviamente viesado, porém recomendo ler os comentários)
- [Svelte: o framework JavaScript que não é um framework](https://blog.geekhunter.com.br/svelte-o-framework-javascript-que-nao-e-um-framework/), por [Thiago Frias](https://blog.geekhunter.com.br/author/thiago-frias/)
- [Svelte: A era dos frameworks-compiladores](https://claudioholanda.ch/blog/svelte-a-era-dos-frameworks-compiladores/), por Claudio Holanda
- [Svelte 3 + Firebase: Criando um CRUD com a nova ferramenta JS](https://escoladejavascript.com/crud-com-svelte-3-e-fireabase/), onde o [Sergio Lima](https://dev.to/sergiosouzalima) ensina a fazer uma aplicação integrada com o Firebase
- [Disappearing Frameworks 🇬🇧](https://peteroshaughnessy.com/posts/disappearing-frameworks/), por Peter O'Shaughnessy
- [Getting Started with Svelte 3 🇬🇧](https://alligator.io/svelte/getting-started-with-svelte)
- [Svelte 3 Tutorial for The Impatient (React) Developer 🇬🇧](https://dev.to/valentinogagliardi/svelte-3-tutorial-for-the-impatient-react-developer-3i26), por [Valentino Gagliardi](https://dev.to/valentinogagliardi)

Com direito a tradução dos últimos dois artigos feita pelo [Eduardo Rabelo](https://medium.com/@oieduardorabelo):

- [Svelte 3: Começando com Svelte 3](https://medium.com/@oieduardorabelo/svelte-3-come%C3%A7ando-com-svelte-3-1c38983850b6)
- [Svelte 3: Guia para o Desenvolvedor (React) Impaciente](https://medium.com/@oieduardorabelo/svelte-3-guia-para-o-desenvolvedor-impaciente-935389f0c08a)

### Vídeos
- [Rich Harris - Rethinking reactivity 🇬🇧](https://youtu.be/AdNJ3fydeao)
- [Computer, build me an app - Rich Harris - JSConf EU 2018 🇬🇧](https://youtu.be/qqt6YxAZoOc)

### Cursos

- [Svelte.js - The Complete Guide 🇬🇧](https://www.udemy.com/sveltejs-the-complete-guide/), por [Maximilian Schwarzmüller](https://www.youtube.com/channel/UCSJbGtTlrDami-tDGPUV9-w)

## Changelog

### 2019-08-06

- Adicionado breve referência sobre Storybook
- Patchfix do codesandbox fixando o Svelte na versão 3.6
- Adicionado o post do Sergio Lima nas Referências

### 2022-10-19

- Adicionando descrição para as imagens (espero não ter pulado nenhuma)
- Alteração de pronomes e utilização de linguagem neutra (posso ter também passado batido por algo)

## Licença deste texto

[Beerware](https://pt.wikipedia.org/wiki/Beerware)