no-framework, front-end moderno sem framework

no-framework

Neste post faremos um exerccio e uma proposta de arquitetura sem frameworks ou libs na stack javascript para montar uma aplicao front-end, chamaremos de no-framework.

O cdigo-fonte utilizado pode ser visualizado e baixado no repositrio do Github na url: https://github.com/joaoneto/no-framework

Com a ajuda de algumas ferramentas (tooling), que iremos montar uma pgina simples no modelo single page application (SPA).

Cuidados

Ao abrirmos mo de algumas implementaes, estamos assumindo o
controle e abandonando uma base de cdigo muito bem validada e mantida com constantes evolues pelas comunidades no github.

Por que?

Quando iniciamos um projeto, escolhemos ferramentas que abstraem a parte mais complicada, para focar no que realmente importa, que o desenvolvimento das funcionalidades.

importante tambm, conhecer um pouco mais como funcionam essas abstraes por baixo dos panos, para conseguir extrair o melhor do que os frameworks e bibliotecas oferecem.

Tendo isso em mente, faremos um exerccio de explorar algumas abstraes em um nvel mais baixo, trocando a utilizao do React e toda a stack de dependncias do ecossistema que estamos acostumados por um cdigo manual, sem abrir mo da simplicidade.

Vamos (re)visitar alguns tpicos antes:

1. Ferramentas (tooling)

Tooling so: os empacotadores, linters, code style, validadores de tipagens, transpiladores, etc... que iro auxiliar tanto no ambiente de desenvolvimento, quanto na transformao do cdigo fonte para verso de produo.

2. Single page application (SPA)

SPA o acrnimo de single page application, que carrega o contedo pesado da pgina apenas uma vez, na primeira requisio e que, quando abrimos links que pertencem a rota dessa aplicao, a pgina no ser totalmente recarregada, possibilitando uma transio de pgina mais rpida.

Para que o SPA funcione dessa maneira, temos que direcionarmos todo o trafego de todas as rotas do servidor HTTP para um nico HTML, por exemplo: /**/* -> /index.html.

E todo o fluxo de requisio caindo no mesmo HTML, a aplicao SPA fica responsvel por lidar com a rota e abrir a pgina correta e tambm por erros de pgina 404 (soft 404).

Outro problema conhecido de utilizar a estratgia SPA, que o SEO (search engine optimization) se torna mais complicado, pois todas as tags SEO tambm so includas uma nica vez no HTML.

3. Server side rendering (SSR)

SSR o acrnimo de server side rendering, que entrega um HTML dinamicamente "renderizado" para rota em que o servidor requisitado, fazendo o papel do primeiro render no lado do servidor e entregando tudo "pronto" para exibio no browser, o CSR (client side rendering).

Essa estratgia soluciona o problema do SEO citado anteriormente, pois quando o indexador visita uma rota especfica, ele recebe o contedo HTML "renderizado".

4. Rehydrate

Quando utilizamos o SSR, podemos usar uma estratgia de reidratao, que ir sincronizar o estado do HTML previamente renderizado no lado do servidor, com a renderizao da aplicao no lado do client (CSR).

Ao aplicar a reidratao, o resultado do DOM deve ser o mesmo do que vem pr renderizado, caso contrrio, o virtual DOM (VDOM) ter uma diferena detectada invalidando essa pr renderizao no SSR, e forando atualizaes desnecessrias no DOM.

5. DOM e VDOM

DOM o acrnimo de document object model, a representao da estrutura do HTML que o javascript utiliza em forma de API, para acessar e manipular essa estrutura.

O VDOM uma representao virtual do DOM utilizado para capturar diferenas e calcular as atualizaes que devem ser aplicadas diretamente no DOM.

Webpack

O webpack um dos empacotadores mais utilizados e usaremos ele em conjunto com babel para transpilar e empacotar.

O plugin webpack-dev-server, far o papel do servidor SPA, ele est configurado para redirecionar o trafego de todas as rotas para o index.html, do jeito que precisamos para o desenvolvimento.

Lint e code-style

O eslint em conjunto com o prettier evitar erros de sintaxe, e tambm foi preparado uma configurao para o vscode, que ao salvar o arquivo, j deixa de acordo com as regras definidas no .eslintrc.json.

Setup

O setup do projeto uma configurao bem simples e pode ser visto no repositrio git, comentarei aqui apenas alguns pontos relevantes.

Crie uma pasta e inicie o projeto com o yarn:

mkdir no-frameworkcd no-frameworkyarn init -y

Instale as dependncias:

yarn add -D @babel/core @babel/plugin-transform-react-jsx @babel/preset-env @babel/preset-react @babel/preset-typescript @types/webpack-env @typescript-eslint/eslint-plugin @typescript-eslint/parser babel-loader css-loader eslint eslint-config-airbnb-base eslint-config-prettier eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier fork-ts-checker-webpack-plugin html-webpack-plugin prettier style-loader tsconfig-paths-webpack-plugin typescript webpack webpack-cli webpack-dev-server

Adicione 2 scripts no package.json

...  "scripts": {    "dev": "webpack-dev-server --mode development",    "build": "webpack --mode production"  },...

O .babelrc com os presets typescript e env, com plugin de JSX customizado possibilitar a escrita das tags JSX com as funes globais que sero descritas depois: _createElement e _Fragment, na seguinte configurao:

{  "presets": [    "@babel/preset-typescript",    ["@babel/preset-env", { "targets": { "node": true } }]  ],  "plugins": [    ["@babel/plugin-transform-react-jsx", { "pragma": "_createElement", "pragmaFrag": "_Fragment" }]  ]}

O tsconfig.json deve conter em compilerOptions:

...    // preserve no altera os arquivos JSX, usaremos um custom    "jsx": "preserve",    // _createElement funo global usada no lugar do React    "jsxFactory": "_createElement",    // _Fragment funco global usada no lugar do React.Fragment    "jsxFragmentFactory": "_Fragment",...

Veja a configurao inteira no repositrio https://github.com/joaoneto/no-framework/blob/main/tsconfig.json

Na configurao do webpack.config.js, usaremos 3 plugin:

• html-webpack-plugin para gerar o arquivo html com o carregamento dos scripts necessrios.
• tsconfig-paths-webpack-plugin para resolver caminhos com aliases nos imports partindo de @/arquivo ficar ./src/.
• fork-ts-checker-webpack-plugin para validao de tipagem de forma assncrona.

Tendo 2 regras de loaders:

• JS/TS: babel-loader
• CSS: style-loader com css-loader

Veja o arquivo completo em https://github.com/joaoneto/no-framework/blob/main/webpack.config.js

Para quem utiliza o vscode, existe a configurao que formata o cdigo ao salvar em: .vscode\settings.json

Na pasta src/lib ficam os arquivos de criao de elementos no DOM, navegao SPA, entre outras libs.

Na pasta src/pages ficam os componentes de pginas.

Na paste src/design-system ficam os estilos do design-system, que, em um monorepo poderia conter esses arquivos css e os componentes basicos do design-system.

Na pasta src/components ficam os componentes da aplicao, que nesse exemplo no esto separados dos componentes bsicos do design-system.

O index.tsx escuta o evento DOMContentLoadede monta a aplicao com o tema do sistema (dark/light).

A tipagem dos componentes JSX no est funcionando propriamente ainda.

Alguns prs

• Um bundle bem compacto
• Inicializao rpida
• Proximidade maior com o javascript e css

Alguns contras

• Maior cuidado com elementos desvinculados do DOM e eventos que o GC (garbage collector) no conseguira liberar
• Exige maior conhecimento
• Gerenciamento de estado pode se tornar uma dor