Dor e lágrimas em Svelte 3

Em vez do prefácio

O artigo será útil para aqueles que, assim como decidimos experimentar o Svelte em um projeto ao vivo. Nossa pequena empresa recebeu um pedido para desenvolver um administrador da web para um serviço com back-end no Mongodb Stitch. Nos últimos dois anos, o front-end Nós escrevemos em React ou Vue (dependendo do tamanho do projeto e se o ReactNative é necessário), mas depois de ouvir sobre a beleza de Svelte, decidimos tentar entender por nós mesmos se é bom. E talvez devêssemos usá-lo em vez de Vue ou React?

Quem é Svelte?

Em poucas palavras - esse é o novo framework js (mas ele não se considera assim), que é o assassino de React e Vue, e blá, blá, blá ... No meu artigo, quero considerar Svelte não apenas o quão legal é "sob o capô", mas a partir do ponto visão da facilidade de uso em um projeto real.
Nós não fabricamos carros, nós os dirigimos e temos clientes maus com termos menos maus.

Tutorial

A primeira coisa que você começa a aprender sobre um novo idioma ou estrutura é um tutorial no site. No Svelte, este é Svelte.dev/Tutorial .

Infelizmente, parte dos tutoriais simplesmente não funciona no site na visualização, enquanto não está totalmente claro se funciona na realidade ou não. Você precisa gastar tempo e verificá-lo manualmente, porque não está claro se o tutorial está desatualizado ou se algo deu errado no site da Svelte. E isso realmente leva muito tempo.

Estilos e kit de interface do usuário

Encontrar um kit de interface do usuário para o Svelte foi uma dor à parte para todos nós. Eu queria exclamar: "Pelo menos Material, Bootstrap ... pelo menos alguma coisa ...".

Apenas sveltematerialui.com e svelteui.js.org foram encontrados, que no momento pareciam muito cru.

Com uma importação simples de <Button/> , ocorreu um erro no pacote durante a montagem, não houve tempo para resolver o erro do kit da interface do usuário.

Após analisar rapidamente a documentação, decidi abandoná-la em favor da importação de baunilha da CDN.

Eu queria usar a interface do usuário do material no projeto, pois é possível que o painel de administração também seja usado em um dispositivo móvel, e o material é muito adequado para isso (na minha opinião, parece ainda pior na área de trabalho).

O uso de JS sem um kit de interface do usuário me trouxe mentalmente de volta há 10 anos) (locomotivas de classe e nostalgia amável).

Devido ao fato de o Svelte trabalhar com o DOM "de uma maneira diferente", o MaterialUI começou a divulgar todo tipo de coisas desagradáveis ​​relacionadas à maneira como os componentes da interface do usuário que são adicionados via js ao dom são exibidos. Por exemplo, um simples controle giratório é exibido sempre:



Após uma longa pesquisa, o que deu errado, verificou-se que o botão giratório na UI do material é adicionado via JS após o documento estar pronto (onLoad), mas após esse evento, o Svelte inicia sua adição ao DOM e o script JS Material simplesmente não o vê desde o evento. antes.

Isso teve que ser tratado adicionando ao componente pai do Svelte:

  afterUpdate(() => { componentHandler.upgradeDom(); }); 

Estilização

Com estilos, tudo fica muito claro, nós enfeitamos todos os estilos como no Vue. Você escreve o estilo e está tudo bem e, em seguida, escreve o componente da interface do usuário (já que não possui o UIKit), que deve usar parâmetros de adereços, por exemplo, largura e altura, e fazer logicamente da seguinte maneira:

 <script> export let width = '20px'; export let height = '20px'; </script> <style> .loader { width: { width }, height: { height }, } </style> 

E ... não, no estilo você não pode inserir variáveis. Você pode sair dessa situação através do “ReactWay” e criar estilos dinâmicos no “script” como variáveis ​​ou funções com retorno de estilo.

Como resultado, novamente temos mingau, parte do estilo na parte do estilo no script . O código puro será obtido apenas se você não tiver parâmetros nos estilos ou apenas parâmetros dinâmicos e eles estiverem apenas no script .

Roteamento e roteadores

Sem um roteador normal, você não pode nem criar um aplicativo de uma página.

Reaja, o Vue ao dimensionar o projeto 'Hello World' já vem com um roteador na caixa (ou você pode selecioná-lo). Mas como tudo no Svelte, isso não é fácil.

Você precisa escolher um roteador e até mesmo soluções muito semelhantes. Na verdade, existem apenas dois roteadores github.com/EmilTholin/svelte-routing e github.com/kazzkiq/svero até agora.

Ambos são muito parecidos, mas eu escolhi o primeiro, escolhi pelo número de estrelas (sim, eu sei, sou uma pessoa terrível).

Então, vamos começar a incorporá-lo em nossa MDL.

Coloque tudo em <Router url = "{url}"> e adicione <Link /> para os links da navegação.



Vá para a pré-visualização e veja o que aconteceu.

Mas as doenças da infância de Svelte continuam e as aulas não podem ser transferidas para <Link />. Uma pergunta razoável surgiu e como você a estilizará?

Aparentemente, isso ainda está em problemas para o roteador.

Felizmente, podemos vincular nosso a href = '' habitual ao roteador especificando use: link pelo qual agradecimentos especiais.

Erros

Ao contrário do React, que simplesmente não permite criar um pacote e grita fortemente sobre um erro, o Svelte coleta perfeitamente tudo com um erro. Ao mesmo tempo, se você esqueceu algo, instale o npm install ou exporte, tudo ficará bem e apenas mostrará uma tela branca (aliás, esse foi o caso nas primeiras versões do React).

No React e no Vue, costumávamos ver esses erros no estágio de compilação ou fiapos.

Como resultado, você terá que detectar erros em dois lugares. Para ser justo - isso ocorre no React e no Vue, mas com muito menos frequência e esses erros óbvios são detectados no estágio do fiapo.

Svelte só precisa de uma convenção de nomenclatura

Você encontrará esse problema com bastante frequência - com a ausência de uma convenção de nomenclatura.

Por exemplo, de volta ao roteador.

Existe essa importação:

     import { Router, link, Link ,Route } from "svelte-routing"; 

O que é esse link e link ? Mesmo em um projeto tão pequeno como o meu, já havia confusão com a falta de convenções de nomenclatura nos projetos usados ​​no Svelte.

Obviamente, deveria ter sido assim nos olhos do ReactMan:

 import { Router, useLink, LinkComponent ,RouteComponent } from "svelte-routing"; 

No Svelte, há uma semelhança com ref e no react, esta é uma referência a um elemento ou componente dom.
O tutorial oficial nos diz para fazer assim:

 <script> let dialog; </script> <dialog bind:this={dialog} class="mdl-dialog» /> 

E se você tiver 15 variáveis ​​no componente?

 <script> let loading; let pins; let dialog; let stitch; </script> <dialog bind:this={dialog} class="mdl-dialog» /> 

Onde e quais são realmente variáveis ​​e onde estão os links para componentes ou elementos?
Eu modificaria o tutorial e tornaria os exemplos mais corretos do ponto de vista dos iniciantes e de suas convenções de variáveis ​​(consulte o Tutorial do React para obter um bom exemplo). Se você deixar o vinagrete fazer variáveis, seria bom se o linter ou o bundler jurassem esse vinagrete, como por exemplo, isso foi feito pela golang.

 <script> let dialogElement; </script> <dialog bind:this={dialogElement} class="mdl-dialog» /> 

Outro exemplo de "vida" quando você recebe alguns dados na função de componente e esses dados devem ser enviados para a sua View , onde alguma variável é parafusada na parte do elemento da interface do usuário. E parece conosco (ou melhor, com nosso programador) assim:

  async function ReloadPins() {        loading =  true;        pins = await getAllPins();        status = 0;    } 

Quando abri seu código, imediatamente "ficou claro" para mim que há uma variável que estado e qual está anexado à nossa interface do usuário .

Brincadeirinha, é claro, nada está claro. Além disso, o estado nem é claro ou é apenas uma variável auxiliar. No React, isso é decidido por estado, o que de alguma forma traz clareza.

O que mudou onde e quem fez isso?

As variáveis ​​dentro do componente Svelte são globais e mudam em todos os lugares (olá Angular).
Mas há boas notícias, elas são globais em um componente (enquanto Angular), portanto, essa mudança de todos e de todos não é tão assustadora dentro de um componente.

Ao mesmo tempo, você economiza tempo com a "beleza" do código e não pensa no que precisa para tornar o estado uma variável, mas no que deixar dentro da função (oi React) - você tem tudo e em qualquer lugar.



Como resultado, você escreve componentes rapidamente, mas é muito difícil entender o que um júnior escreveu nesta “salada” alguns dias depois, quando ele próprio já se esqueceu (às vezes até o nome). Por causa disso, será impossível entender o que há dentro sem uma organização clara do código dentro do projeto ou equipe.

Bind Stitch

Stitch é uma coisa ótima, e definitivamente vou contar mais sobre isso e compará-lo com colegas, medir os testes em produção no meu próximo artigo e agora mais sobre Svelte.

Para usar o Stitch, você terá que seguir o caminho "Vanilla" e inserir:

 <script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.4.0/stitch.js"></script> 

Como ao usar o npm e um pacote de importação normal, o problema com o erro do buffer começa.

Não sei se isso está relacionado ao coletor Svelte ou ao próprio Stitch, ou qualquer outra coisa, mas não tive tempo de escolher e só precisei adicionar um script com importação, após o qual tudo funcionou com êxito.

Estes são os principais problemas que encontramos ao trabalhar com o Svelte. E para ser honesto - em geral, nós não gostamos, e ninguém ...

Qual é o resultado:

Por que você precisa do Svelte?

• Se você trabalha sozinho e precisa urgentemente fazer o MVP ou um pequeno painel de administração. Haverá problemas com um grande painel de administração, porque quando você escreve um novo código, esquece o antigo ou deve escrever um código auto-documentado, pois o Svelte não o "força" a fazer isso.
• Se o tamanho do pacote for muito importante para você. Por exemplo, você está criando um aplicativo da web para um país em que ainda não há 3G ou a Internet é muito lenta e muito cara. Na maioria das partes do mundo, programadores caros, não a Internet, portanto, o tamanho do pacote dentro de limites razoáveis ​​não será um problema real em 99% dos casos.
  
• Se você está apenas começando a aprender a escrever em JS e fazendo um front-end, o Svelte lhe dará toda a liberdade para “dar um tiro no pé”, em um vizinho da mesa ou organizar tiros em massa nas pernas. Na verdade, você não precisará aprender JSX ou entender as convenções de código por um longo tempo; poderá fazer imediatamente seu primeiro projeto de front-end e verificar se já conseguiu e que alguma coisa está funcionando.
  

Com base no último, eu realmente não entendo por que os mantenedores do Svelte farão o suporte ao TypeScript? Adoramos o Svelte apenas por “atirar nas pernas” e, na minha opinião, o TypeScript é como as pistas todo-o-terreno do carro esportivo Svelte. E você sabe, depois de trabalhar com o Svelte, percebi o quanto o JS mudou nos últimos anos e que não é mais o JS.

O Svelte oferece a oportunidade de trabalhar no mesmo JS antigo e de lâmpada, sem PropTypes, Flow e TypeScript.

Do que eu gostei?

• Bem legível se / else, que não está no Vue. Eu realmente gostaria de ver algo semelhante no Vue.
• Você pode criar seu evento em componentes e livrar-se de passar retornos de chamada para funções em filho, para comunicação entre filho> pai.
  

Por que não usar o Svelte?

• Não existe um único kit de interface do usuário totalmente funcional. É difícil imaginar um aplicativo da Web sem o UIKit; apenas grandes projetos para os quais o Svelte não é adequado podem escrever o próprio Kit da UI. Transar com algo baunilha vai para a criação de seus próprios componentes de interface do usuário (seu Kit de interface do usuário) ou na luta contra erros e classes "locomotivas".
  
• A natureza implícita de alguns erros simples e sua captura apenas no estágio de teste.
  
• Se você for criar um aplicativo multiplataforma (e agora todo mundo estiver móvel primeiro), terá que reescrever tudo no ReactNative ou finalizar o NativeScript gerado com as mãos (existe um gerador NS da Svelte). Para ser justo, o Vue com desenvolvimento móvel também não está indo muito bem, mas também possui alguns recursos de trabalho.
  
• Você precisará escrever uma convenção de código muito clara para seus desenvolvedores no projeto, pois o tutorial e os exemplos não foram feitos para o desenvolvimento da equipe.