O autor do material, cuja tradução publicamos hoje, deseja compartilhar uma história sobre quais tecnologias ele usa para desenvolver rapidamente protótipos de aplicativos da web. Essas tecnologias incluem as bibliotecas Fastify e Preact. Ele também usa a biblioteca htm. Ele se integra facilmente ao Preact e é usado para descrever elementos DOM usando construções intuitivas que lembram JSX. No entanto, para trabalhar com isso, você não precisa de um transpiler como o Babel. Tendo demonstrado as ferramentas de desenvolvimento de prototipagem e os métodos para trabalhar com ele, o autor do material mostrará como empacotar esses aplicativos em contêineres do Docker. Isso facilita a demonstração de aplicativos para todos os interessados.
Iniciar
Cheguei ao uso do conjunto de tecnologias acima mencionado, há algumas semanas, quando precisava criar um protótipo de aplicativo da Web muito simples, projetado para testar, juntamente com meus colegas, algumas suposições.
Minha experiência foi extremamente bem-sucedida. Consegui criar um protótipo muito rapidamente, meus colegas puderam experimentá-lo convenientemente, eles conseguiram expressar rapidamente suas impressões sobre ele. Ao mesmo tempo, eles poderiam testar o projeto mesmo se o Node.js e o NPM não estivessem instalados em seus computadores.
Tudo isso me levou à ideia de que eu deveria escrever material sobre minha abordagem à prototipagem rápida de aplicativos da web. É possível que essa abordagem seja útil para outra pessoa. Para aqueles que já estão familiarizados com o Fastify e o Preact, descreverei imediatamente o mais importante, o que lhes permitirá colocar imediatamente minhas idéias em prática.
Idéias principais
Se você já conhece o Fastify e o Preact e deseja aprender sobre como organizar o desenvolvimento de projetos com base nessas tecnologias, você está literalmente a alguns passos do que deseja. Ou seja, estamos falando dos seguintes comandos:
git clone https://github.com/lmammino/fastify-preact-htm-boilerplate.git my-new-project cd my-new-project rm -rf .git npm install
Obviamente, você pode alterar o nome do projeto,
my-new-project , para o nome do seu projeto.
Depois de instalar tudo o que você precisa, você pode começar a trabalhar no projeto. Ou seja, estamos falando sobre o seguinte:
- A pasta
src/ui contém arquivos da parte do cliente do aplicativo (aqui são usados o Preact e o htm). - A pasta
src/server contém arquivos relacionados ao lado do servidor do aplicativo (o Fastify é usado aqui).
Editando os arquivos apropriados, você pode executar o projeto:
npm start
Depois disso, você pode testá-lo acessando o endereço
localhost:3000 no navegador.
E mais uma coisa. Se você gostou do meu desenvolvimento, ficarei imensamente grato pela estrela no
GitHub .
Agora, vejamos as tecnologias usadas aqui e os recursos de trabalhar com elas.
Fastify
Fastify é uma estrutura da web rápida e econômica para Node.js. Este projeto foi originalmente criado por dois programadores. Agora, a equipe de quem trabalha nele tem 10 pessoas, mais de 130 pessoas ajudam no desenvolvimento do projeto, ele coletou quase 10.000 estrelas no GitHub.
O Fastify foi influenciado por estruturas do Node.js. como Express e Hapi, que já existem há algum tempo. Ele foi originalmente destinado à produtividade, à conveniência dos programadores e à expansão de seus recursos com a ajuda de plugins. A propósito, esse é um dos meus recursos favoritos do Fastify.
Se você não estiver familiarizado com a estrutura Fastify ou quiser conhecê-la melhor, posso recomendar sua
documentação oficial.
Note-se que eu estou relacionado ao Fastify. Sou membro da equipe principal de desenvolvimento e estou principalmente comprometido em apoiar o site do projeto e trabalhar em sua documentação.
Preact
O Preact é uma biblioteca para o desenvolvimento de interfaces de usuário para projetos da Web, criada por uma pessoa como um substituto compacto e rápido para o React. Esse projeto acabou sendo bastante bem-sucedido, agora toda uma equipe de desenvolvedores está envolvida nele, no GitHub ele marcou mais de 20.000 estrelas.
Uma das razões pelas quais eu gosto do Preact é que esta biblioteca possui uma camada extensível para descrever os componentes visuais do aplicativo. Em circunstâncias normais, essa biblioteca pode ser usada usando JSX em combinação com Babel para traduzir o código, mas se você não deseja instalar o Babel e configurar o processo de criação do aplicativo, pode usar o Preact, por exemplo, junto com a biblioteca
htm , que usa literais de modelo e não requer transpilação ao iniciar projetos nos quais é usado em navegadores modernos.
Neste artigo, usaremos a biblioteca htm e em breve consideraremos alguns exemplos.
Visão Geral do Projeto
Aqui, examinamos todo o processo de criação de um projeto. Nosso objetivo será desenvolver um aplicativo Web simples que exiba informações sobre a hora no servidor no momento de seu lançamento. Aqui, para tornar mais claro o que procuraremos.
Aplicativo no navegadorEste é um SPA (aplicativo de página única), no qual Preact e htm são usados para formar sua parte do cliente, e o Fastify é usado para criar uma API projetada para receber o tempo do servidor.
Um leitor atento pode perceber que a página mostrada na figura anterior tem um ícone favicon bastante. É verdade que ele é muito pequeno lá, então vou facilitar a tarefa para aqueles que, quebrando os olhos, estão tentando decifrar. Aqui está uma versão ampliada dele.
FaviconConfigurando o Lado do Servidor do Aplicativo
Vamos começar criando uma nova pasta:
mkdir server-time cd server-time
Agora inicialize o projeto NPM e instale o Fastify:
npm init -y npm i --save fastify@next fastify-static@next fastify-cli
Observe que eu usei a construção
@next ao descrever alguns
@next dependência. Isso é feito para que o projeto use a biblioteca Fastify 2, que está atualmente em um estado candidato a lançamento, mas que em breve se tornará a principal versão estável.
Observe que você também pode criar um novo projeto baseado no Fastify usando a
fastify-cli comando
fastify-cli :
npx fastify-cli generate server-time
No momento da redação deste material, essa equipe cria um projeto projetado para usar o Fastify 1.x, mas muito em breve, após o lançamento do Fastify 2, essa ferramenta será atualizada.
Vamos analisar os pacotes instalados:
fastify é um componente central da estrutura.fastify-static é um plug-in adicional que permite a veiculação conveniente de arquivos estáticos com o servidor Fastify.fastify-cli é uma ferramenta de linha de comando que permite criar projetos com base no Fastify.
No momento, estamos prontos para criar uma API baseada no Fastify. Então, vamos colocar o código do
src/server/server.js :
const path = require('path') module.exports = async function(fastify, opts) { // `src/ui` fastify.register(require('fastify-static'), { root: path.join(__dirname, '..', 'ui'), }) // API fastify.get('/api/time', async (request, reply) => { return { time: new Date().toISOString() } }) }
Acredito que o código acima se explica bem, mas há alguns detalhes interessantes que merecem ser discutidos. Isso será especialmente útil para aqueles que não têm experiência com o Fastify.
A primeira coisa em que você pode prestar atenção neste código é que a palavra
async chave
async é usada aqui. O Fastify suporta o desenvolvimento de estilo assíncrono / aguardado e uma abordagem de retorno de chamada mais tradicional. O que exatamente escolher depende das preferências de um desenvolvedor em particular.
Outro detalhe interessante é que definimos o servidor aqui como um módulo exportado. Este módulo (no jargão do Fastify, isso é chamado de "plugin") é uma função que assume como argumento uma instância do
fastify (
fastify ) e um conjunto de opções (
opts ). Dentro da declaração do módulo, podemos usar uma instância de
fastify para registrar plugins. É exatamente o que acontece com o
fastify-static in
fastify-static . Também podemos descrever pontos de extremidade HTTP usando métodos especiais como
fastify.get e
fastify.post .
A abordagem modular usada aqui, embora pareça um pouco incomum, tem suas vantagens. Para começar, deve-se notar que ele permite combinar vários servidores. Imagine que você criou um servidor projetado para servir um blog e outro para um fórum. Eles podem ser facilmente integrados a um aplicativo existente, anexando-os a caminhos como
/blog e
/forum .
Além disso, essa abordagem permite abstrair aplicativos e subaplicações das ligações do servidor (por exemplo, ligação de soquete), passando a solução para esta tarefa para o aplicativo raiz ou para o
fastify-cli .
Inicie o servidor usando a
fastify linha de comando
fastify :
node_modules/.bin/fastify start --log-level info src/server/server.js
Para simplificar nossa vida, podemos adicionar este comando à seção de
scripts do nosso arquivo
package.json :
{ "scripts": { "start": "fastify start --log-level info src/server/server.js" } }
Antes de realmente iniciar o servidor, precisamos garantir que haja uma pasta na qual os recursos estáticos estejam localizados. Caso contrário, o
fastify-static gerará
fastify-static erro. Crie esta pasta:
mkdir src/ui
Agora podemos iniciar o aplicativo com o comando
npm start e navegar usando o navegador para
localhost:3000/api/time .
Se tudo funcionar corretamente, no navegador você poderá ver algo como o seguinte:
{ "time": "2019-02-17T19:32:03.354Z" }
Neste ponto, você pode apreciar outro recurso interessante do Fastify. Está no fato de que a serialização JSON, no caso de uma determinada rota retornar um objeto, é aplicada automaticamente.
Agora, o trabalho na API do servidor está concluído. Vamos ter um frontend.
Configuração de front-end
Todo o código do nosso projeto relacionado ao frontend estará localizado na pasta
src/ui . Ele será composto por 5 arquivos:
app.js - pré-código do aplicativo.bootstrap.min.css - código CSS para estilizar o aplicativo (é retirado diretamente da estrutura do Bootstrap).favicon.ico - arquivo favicon. Se você estiver desenvolvendo um aplicativo sério, não poderá ficar sem um bom arquivo favicon.index.html é o principal arquivo HTML do nosso aplicativo de uma página.preacthtm.js - código das bibliotecas Preact e htm.
Primeiro, coloque os arquivos na pasta, que são estilos, bibliotecas e o ícone favicon:
curl "https://unpkg.com/htm@2.0.0/preact/standalone.js" > src/ui/preacthtm.js curl "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" > src/ui/bootstrap.min.css curl "https://github.com/lmammino/fastify-preact-htm-boilerplate/blob/master/src/ui/favicon.ico?raw=true" > src/ui/favicon.ico
Agora crie o arquivo
src/ui/index.html :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <!-- Bootstrap CSS --> <link rel="stylesheet" href="/bootstrap.min.css" /> <title>My awesome server time</title> </head> <body> <div id="app"></div> <!-- JavaScript --> <script src="/preacthtm.js"></script> <script src="/app.js"></script> </body> </html>
Temos diante de nós uma página HTML muito comum com a qual carregamos todos os recursos (CSS e JS) e criamos um elemento
<div> vazio com o
app identificador, no qual produziremos nosso aplicativo durante a execução do projeto.
Agora dê uma olhada no código do aplicativo, que deve estar no
src/ui/app.js :
/* htmPreact */ const { html, Component, render } = htmPreact class App extends Component { componentDidMount() { this.setState({ loading: true, time: null }) fetch('/api/time') .then(response => response.json()) .then(data => this.setState({ loading: false, time: data.time })) } render(props, state) { return html` <div class="container mt-5"> <div class="row justify-content-center"> <div class="col"> <h1>Hello from your new App</h1> <div> ${state.loading && html` <p>Loading time from server...</p> `} ${state.time && html` <p>Time from server: <i><font color="#999999">${state.time}</font></i> </p> `} </div> <hr /> <div> Have fun changing the code from this boilerplate: <ul> <li>UI code available at <code>/src/ui</code></li> <li>Server-side code available at <code>/src/server</code></li> </ul> </div> </div> </div> </div> ` } } render( html` <${App} /> `, document.getElementById('app') )
Há apenas um componente estável neste aplicativo chamado
App . O estado deste componente inclui 2 variáveis:
loading é uma variável lógica usada para indicar se uma solicitação para a API do servidor está sendo executada em um determinado momento para obter informações sobre a hora do servidor.time - uma sequência que contém as informações de hora mais recentes recebidas do servidor.
Se você estiver familiarizado com o React, poderá entender facilmente o código acima.
Usando Preact e htm, podemos criar componentes declarando classes que estendem a classe
Component interna.
Nesta classe, podemos descrever o comportamento de um componente usando métodos de ciclo de vida como
componentDidMount() e também usar um método que se comporta como um método
render() regular do React.
No nosso caso, assim que o componente é anexado à página (método
componentDidMount() ), configuramos a propriedade de
loading status e executamos uma solicitação de API usando
fetch .
Depois que a solicitação é concluída, configuramos o valor da propriedade do estado do
time e redefinimos a propriedade de
loading como
false .
O método
render() é chamado automaticamente sempre que um estado de componente é alterado ou quando novas propriedades são passadas para ele. Neste método, descrevemos o componente DOM usando htm.
A biblioteca htm permite descrever nós DOM usando literais de modelo com uma tag especial -
html . Dentro do nosso modelo literal, expressões dinâmicas podem estar presentes, como aquelas que usamos para verificar o status e decidir o que exibir se o aplicativo estiver carregando dados do servidor e se os dados já estão carregado.
Também é importante notar que precisamos criar uma instância do aplicativo e exibi-la em uma página HTML. Isso é feito usando a função
render() do objeto global
htmPreact .
Agora, o trabalho no aplicativo front-end está concluído. Você pode reiniciar o servidor, vá para
localhost:3000 e experimente o que acabamos de criar. Por exemplo, você pode desenvolver o seu próprio com base neste aplicativo. E quando o que você cria parecer interessante o suficiente para mostrá-lo a outra pessoa, provavelmente será útil embalar seu aplicativo em um contêiner do Docker.
Contêiner de aplicativos
Acredito que a melhor maneira de mostrar aos outros seus novos pequenos projetos é usar os recursos do Docker para esse fim.
Graças ao Docker, qualquer pessoa que tentar executar seu aplicativo em casa ficará livre de pensar se ele possui a versão apropriada do Node.js e do NPM instalados, ele não precisará fazer o download do código-fonte do aplicativo para garantir que, digitando a sequência correta de comandos , instale suas dependências e inicie o servidor.
Para compactar o aplicativo no contêiner do Docker, precisamos criar um
Dockerfile muito simples na pasta raiz do nosso projeto:
FROM node:11-alpine WORKDIR /app COPY . /app RUN npm install --production EXPOSE 3000 CMD ["npm", "start"]
Aqui descrevemos as seguintes ações:
- A imagem é criada com base na imagem do Node.js. 11, construída com base no Alpine Linux.
- Tudo da pasta atual é copiado para a pasta
/app do contêiner. - Depois disso, executamos o comando
npm install para baixar e instalar as dependências. O uso do sinalizador --production leva ao fato de que apenas as dependências necessárias para a implantação do projeto na produção serão instaladas. Isso acelera a criação da imagem se o projeto usar muitas dependências de desenvolvimento. - Indicamos que o contêiner deve ter poro aberto 3000, no qual, por padrão, o servidor funcionará.
- No final, descrevemos um comando,
npm start , que será executado quando o contêiner iniciar. Ela lança o aplicativo.
Para coletar a imagem para o contêiner, execute o seguinte comando:
docker build -t server-time .
Após alguns segundos, a imagem deve estar pronta e você poderá iniciar o contêiner:
docker run -it -p 3000:3000 server-time
A
-p permite configurar a conexão entre a porta do contêiner 3000 e a porta local 3000. Isso permitirá acessar o aplicativo em contêiner no
localhost:3000 .
Agora você está pronto para compartilhar seu aplicativo com outras pessoas. Para executá-lo no ambiente do Docker, basta, desde que o Docker esteja instalado no computador, executar os dois comandos acima em sua pasta.
Sumário
Neste artigo, falamos sobre como criar um ambiente para o rápido desenvolvimento de aplicativos da Web usando o Fastify e o Preact. Além disso, falamos sobre como compartilhar o aplicativo com outras pessoas usando o Docker.
Como mencionado acima, as ferramentas propostas são projetadas para prototipagem rápida, então agora você deve estar se perguntando o que está faltando aqui para desenvolver aplicativos reais. Provavelmente, quando você fala de "aplicativos reais", quer dizer os seguintes recursos:
- Compilação de recursos da parte front-end do aplicativo: criação de arquivos (pacotes configuráveis) otimizados, possivelmente usando Webpack, Babel ou outras ferramentas.
- Roteamento no front-end do aplicativo.
- Renderização do servidor
- Meios de armazenamento permanente de dados.
Todas essas possibilidades para o desenvolvimento de aplicativos reais ainda não foram adicionadas ao conjunto de tecnologias discutido aqui, então, por enquanto, percebo isso como uma ferramenta para o desenvolvimento de protótipos. Tenho certeza de que, se você gostou do que viu e considera tudo isso como base para aplicativos futuros que resolvem problemas reais, pode encontrar facilmente o que precisa e criar aplicativos prontos para uso em Fastify e Preact liberação de produção.
Caros leitores! Como você protótipo de aplicativos da web?
