Guia de uso SPA em svelte
Objetivo da stack
Esta stack é utilizada em aplicações SPA (O que é SPA; Diferença SPA e SSR - video; Diferença SPA e SSR - texto). Ela tem como objetivo ser de fácil desenvolvimento e leve, além de conter os requisitos listados aqui.
Ela deve ser utilizada nos projetos de médio/grande porte, mas também podem ser utilizadas em projetos pequenos no lugar de svelte puro.
Seu template pode ser encontrado em: https://gitlab.com/team-tecnologia/templates-and-snippets/svelte-template.
Lista do que tem na stack
Lembre-se de conferir no projeto a versão das lib utilizadas antes de olhar a documentação destas libs.
Esta stack foi construída tendo como base uma lista de requisitos listadas aqui. Abaixo segue a lista do que conseguimos até o momento colocar na stack e o que de importante ainda está faltando, e alguns links sobre o que é cada coisa ou links para a documentação das bibliotecas.
- ✅ Framework de componentes reativos com o svelte.
- ✅ Documentação com o storybook.
- 〰 Testes automatizados de regressão:
- ✅ testes de módulos e funções com jest;
- ✅ testes de componentes com jest, testing-library, svelte-testing-library e user-event;
- ✅ testes de screenshot com creevey;
- ✅ testes de snapshots com o storyshot e jest snapshots;
- ❌ testes ponta a ponta;
- ✅ Typescript. Tanto em arquivos .ts quando dentro do svelte, e nos testes com jest;
- ✅ Hot reload;
- Mecanismos para ampliar a correta execução em diferentes browsers:
- ✅ polyfills para css;
- ✅ css autoprefixer;
- ❌ polyfills para js (como por exemplo o babel);
- ✅ Source map e optimização (minificação);
- ✅ Soluções de rotas com o routify:
- ✅ rotas hash based;
- ❌ rotas slash based;
- 〰 Soluções de autorização e policies:
- Deve ser implementada no código diretamente.
- ✅ Linting para JS e TS com ESLint.
- ❌ Linting para SCSS.
- ✅ Separação de arquivos CSS de JS após build.
- ✅ Hash do nome dos recursos durante o build.
- ❌ Auto compressor de imagens.
- ❌ Auto criador de sitemap.
- ✅ Politica de componentização e organização de pastas.
- ✅ Guia de padrões de código, como css, js, ...