Comece com o Express.JS

Criando aplicativos voltados para o navegador com o Node.js ficam tediosos. Express.js. é um Framework JavaScript. Dedicado a aplicativos de página única e multi-páginas hospedados no ambiente Node.js.

• 29 ferramentas de design web para acelerar o seu fluxo de trabalho

Ele fornece uma fina camada de recursos fundamentais de aplicativos da Web que não obscurecem os recursos do Node.js que você já está familiarizado, para que você possa ter certeza de que seu aplicativo concluído será de acordo com o desempenho. E também é ótimo para criar apis robustas, graças a uma pilha de métodos de utilidade HTTP e middleware prontos para uso.

Se você quiser uma opção menos complexa, você pode criar um site sem a codificação com um Construtor de sites . De qualquer maneira, certifique-se de obter o seu hospedagem na web. serviço certo. Quer começar? Aqui está o que você precisa saber sobre express.js.

01. Gere uma estrutura viável

O Express.Js se orgulha de ser "nãoopincionado" - isto é, a estrutura permite que o desenvolvedor misture e corresponda em termos de arquiteturas, modelos e motores de marcação. Infelizmente, com grande poder vem uma grande responsabilidade.

A equipe do Desenvolvedor Express busca suavizar o golpe introduzindo um gerador de projetos (se você está projetando ao lado de uma equipe, implantando o melhor armazenamento na núvem para manter as coisas coesivas). Cabe à sua estação de trabalho na forma de um pacote de NPM e ajudará nossos experimentos com a seguinte estrutura:

 Tamhan @ Tamhan-ThinkPad: ~ / Desktop /
Coisas / 2018aug / FutureExpressJs /
Workspace $ sudo npm instalar
Gerador Express -g 

O gerador também contém dezenas de opções de projeto - a figura que acompanha esta etapa mostra a saída de ajuda completa. Por amor de simplicidade, nos limitaremos a um projeto com base nas configurações padrão. Chute fora de seu processo de geração com:

 Tamhan @ Tamhan-ThinkPad: ~ / Desktop /
Coisas / 2018aug / FutureExpressJs /
Workspace $ Express futuretest 

Aviso: O mecanismo de visualização padrão não será jade em lançamentos futuros.

Quando terminar, o diretório de trabalho atual contém uma nova pasta chamada 'Futuretest'. É o lar do nosso projeto de teste e deve ser configurado usando o comando de download do pacote do NPM. No momento da escrita, o gerador inclui o Jade View Generator - o projeto planeja mudar isso no futuro próximo, obrigando você a passar um parâmetro selecionando o mecanismo de exibição pretendido. Alternativamente, solicite o uso do Pug - é o sucessor oficial do motor Jade:

 CD Futuretest /
NPM install 

02. Compreender a estrutura do aplicativo

Agora que o gerador do projeto fez sua coisa, vamos abrir o App.Js em um editor de escolha. Sua - estrutura abreviada - estrutura apresenta-se como segue:

 var indexRouter = requer ('./
rotas / índice ');
var UsuáriosRouter = requer ('./
rotas / usuários);
var app = express ();
// Visualizar configuração do motor
app.set ('visualizações', path.join (__
Dirname, 'Visualizações'));
app.set ('Motor de visualização', 'jade');
app.use (logger ('dev'));
app.use (express.json ());
app.use (express.urlencoded ({
estendido: False}));
app.use (cookieparser ());
app.use (express.static (caminho.
Junte-se (__ Dirname, 'Public'))); 

Express.js é altamente modular. APP.JS serve como um ponto de entrada, onde uma ou mais "use ()" as funções permitem a adição de componentes destinados a lidar com várias solicitações. Invocações de 'Set ()' permitem ajustar os parâmetros no motor - um dos quais é a instalação do mecanismo de visualização Jade mencionado na etapa anterior.

A emissão real do conteúdo da Web ocorre nas classes do roteador. Por amor de Brevidade, vamos nos limitar a index.js:

 var express = requer ('expresso');
var router = express.Router ();
roteador.get ('/', função (req, res,
Próximo) {
  res.render ('index', {title:
'Express'});
});
Module.Exports = roteador; 

'Get ()' é fornecido com uma string de correspondência e um manipulador de eventos que é invocado sempre que um evento correspondente ocorre. No nosso caso, o método de renderização do mecanismo de modelo escolhido é instruído a retornar conteúdo para o navegador do usuário que logou.

03. Execute a página da Web

Neste ponto, estamos prontos para levar o site para um giro pela primeira vez. Retorne ao terminal contendo a instalação do Express.js e ligue para o início do NPM com o conjunto de bandeiras de depuração:

 Debug = MyApp: * NPM Iniciar 

Quando terminar, insira http: // localhost: 3000 / em um navegador de escolha para analisar o andaime criado pelo gerador do projeto. Quando terminar, pressione ctrl. +. C. Para fechar a janela e devolver o controle para a linha de comando intérprete - tenha em mente que isso também fecha o servidor da Web de depuração.

04. É tudo sobre roteamento e endpoints

Por uma questão de simplicidade, vamos concordar que um aplicativo da Web é geralmente feito de uma seqüência de pontos de entrada. Express.js lida com estes através da classe do roteador - pense nisso como repositório de métodos que são chamados em resposta a uma solicitação de entrada.

Adicionar um novo endpoint a um aplicativo é realizado adicionando um novo trabalhador na fila. Nosso exemplo gerado automaticamente cria dois tipos de roteadores, cada um dos quais é levantado usando o método 'exigir':

 var indexRouter = requer ('./
rotas /
índice');
var UsuáriosRouter = requer ('./
rotas /
Usuários); 

Na próxima etapa, "app.use" registra os roteadores e os conecta às strings de solicitação. Nosso código além disso adiciona um manipulador de erros que é invocado se uma URL não existente for inserida no sistema:

 app.use ('/', IndexRouter);
app.use ('/ Users', UsueRouter);
app.use (função (req, res, next)
{
  Em seguida (CreateError (404));
}); 

05. Crie uma nova rota

Abra os usuários.js e modifique seu código como abaixo:

 Router.Get ('/ user1', função (req,
res,
Próximo) {
  res.send ('futuro diz olá
1 ');
});
roteador.get ('/', função (req, res,
Próximo) {
  res.send (responda com um
recurso');
}); 

Adicionando novas rotas a express.js é um processo mecânico. Pegue o objeto de roteador de escolha e invoco o método correspondente ao verbo HTTP que você procura de lidar. Em seguida, passe em uma string que será adicionada ao 'offset' registrado com 'app.use'. A partir desse momento, ambos http: // localhost: 3000 / usuários / user1 e http: // localhost: 3000 / usuários / devolver uma resposta válida.

Tenha em mente que o Express.js não se limita a manipular recursos "obter". 'Post ()', 'Coloque ()' e 'delete ()' lidar com os quatro pedidos HTTP tradicionais, com dezenas de métodos verbais adicionais que atendem a necessidades mais incomuns. Por fim, o objeto 'req' fornece acesso ao cabeçalho da solicitação - colocá-lo em bom uso ao analisar parâmetros ou informações do cliente.

06. Correspondência avançada

Adicionar rotas à mão fica tedioso como complexidade do programa cresce. O Express.js atende por esse problema, introduzindo o suporte a curinga e a expressão regular. Por exemplo, observe a seguinte declaração que usa uma expressão regular para corresponder a várias cadeias contendo o cão de seqüência de caracteres.

 app.get (/.* Dog $ /, função (req,
res) {
  ...}) 

07. Roteamento anormal

Ao manejar, as quatro solicitações HTTP deveriam ser suficientes para qualquer pessoa (dica de chapéu para Bill Gates), o Express.js também pode funcionar com protocolos adicionais. Express-ws. é um candidato especialmente saboroso para esta seção - estende o alcance do Express.js para incluir comunicações do WebSocket.

Quando o plugin for adicionado ao projeto Principal Express.js, permitindo que ele seja realizado através de uma chamada 'exigir'. Ele retorna um objeto auxiliar contendo todos, exceto um método - chame-o para estabelecer uma conexão entre o roteador e o plug-in:

 var expressws = requer ('express-
WS ')
aplicativo);
Depois disso, um novo método chamado 'WS ()' pode ser invocado para adicionar novas rotas com base na tecnologia WebSocket:
app.ws ('/', função (WS, req) {
  WS.ON ('mensagem', função (msg)
{
    console.log (msg);
  });
  console.log ('soquete', req.
teste); }); 

Seu protótipo difere de rotas normais devido à presença do objeto 'WS' - fornece acesso à instância subjacente do WebSocket conectada ao cliente responsável pela conexão.

08. Integrar bancos de dados e motores de modelos

Baseado em Node.js significa que o ecossistema de plugin rico está ao seu comando ao trabalhar em aplicativos baseados na Web. Por exemplo, acessando bancos de dados SQL e NOSQL - geralmente uma tarefa extraordinariamente tediosa - pode ser tratada usando plugins fornecidos pelos fornecedores de banco de dados. A implantação real é tão fácil quanto instalar o módulo NPM necessário - se o seu código é acessar um banco de dados Redis, basta adicionar o seguinte:

var redis = requer ('redis')
Var cliente = redis.createClient ()
cliente.set ('StringKey', 'AVAL',
redis.print)
. . . 

Claro, na memória sqlite também é suportado:

 var sqlite3 = requer ('sqlite3').
Verbose ()
var db = novo sqlite3.
Banco de dados (': memória:')
db.serialize (função () {
  dbun ('criar tabela lorem
(texto de informação) ') 

Tenha em mente que a integração do Node.js não está limitada a plugins de banco de dados. Os desenvolvedores aventureiros poderiam ir até onde incluem produtos como Tessel, criando assim aplicativos da Web que também podem interagir com Internet das Coisas dispositivos.

09. Templating em estilo

Uma área onde programas simples e reais diferem é a criação de pontos de vista. Embora um pequeno projeto de exemplo geralmente use cordas artesanais, montando grandes faixas de HTML com uma série de coisas conectadas é altamente chata.

Os motores de modelo fornecem uma solução limitada. Eles permitem a criação de arquivos de esquema predefinidos, que podem ser preenchidos programaticamente na execução.

No caso do nosso programa de exemplo, as visualizações estavam em arquivos .jade. Índice de abertura revela a seguinte estrutura:

 estende o layout
Bloco de conteúdo
  H1 = título.
  P Bem vindo ao # {title} 

As expressões incluídas em colchetes atuam como campos de modelo cujos valores devem ser substituídos a tempo de execução. Index.js invoca renderização com um objeto de parâmetro, levando à renderização da página inicial mostrada na figura que acompanha esta etapa:

 Router.Get ('/', função (req, res,
Próximo) {
  res.render ('index', {title:
'Express'});
}); 

A maioria dos mecanismos de modelos também pode analisar matrizes quando fornecidos com um modelo de item. Nesse caso, cada linha da matriz é exibida com uma instância do modelo DOM - semelhanças com o modelo de exibição da lista encontrados no Android são puramente coincidentes. O Express.js não se limita aos motores de modelos predefinidos. Se você sentir vontade de entrar em sua razão, basta seguir os passos descritos aqui - Em princípio, você tem que substituir toda a função.

10. Lidar com conteúdo estático

Os aplicativos express.js tendem a conter arquivos e fotos CSS. Servir estes através da função de renderização é ineficiente - uma maneira mais inteligente envolva os enviando em sua maneira mesquinha com uma solicitação HTTP tradicional. Isso pode ser alcançado através da função 'Express.static ()', que pode marcar pastas inteiras para exportação:

 app.use (express.static ('público'))
app.use (express.static ('arquivos')) 

11. Modifique o fluxo de eventos

Finalmente, permita-nos mencionar o termo middleware em breve. No Express.Js PARGÂNCE, o middleware é um conjunto de um ou mais componentes que se integram no fluxograma mostrado oposto. Eles podem, então, ser usados ​​para modificar solicitações à medida que passam pelo sistema de roteamento - quando implementadas corretamente, a funcionalidade ilimitada pode ser alcançada.

Além disso, alguns componentes prontos podem ser encontrados aqui - Visite este site antes de embarcar em um projeto de desenvolvimento em larga escala.

12. Como sediar um aplicativo Express.js

Testar aplicativos baseados em Express.js é fácil. Problemas ocorrem assim que você deseja que a página se torne acessível a terceiros - devido a ela sendo gerada pelo ambiente Node.js, não há como obter uma imagem estática adequada à implantação do FTP para serviços de hospedagem na Web.

Em teoria, não há nada de usar um PI de framboesa, um OrangePI, um servidor dedicado ou uma máquina virtual alugada a partir de um serviço de nuvem ou um provedor de hospedeiros que ofereça hospedagem virtual. No entanto, alugar uma máquina virtual completa pode sobrecarregar você com as responsabilidades de manter o ambiente de execução e o sistema operacional atualizado.

Se esta tarefa não for ao seu gosto, um provedor de plataforma como um serviço pode ser mais atraente (embora, na maioria dos casos, bastante caro) escolha.

Muitos desenvolvedores consideram Heroku, com seus preços mostrados na figura que acompanha essa caixa, para ser o padrão de ouro para todas as coisas relacionadas à hospedagem do Node.js.

Isso, no entanto, é um pouco injusto na verdade - o feijão elástico da Amazon, a plataforma de nuvem do Google e o Azure da Microsoft, todos fornecem suporte semelhante para a execução remota de cargas de pagamento baseadas no Node.js. Em todos esses sistemas, a questão principal é o manuseio - enquanto o Azure é conhecido por suas implantações lentas, outros provedores de desenvolvedores de carga com serviços de back-end de difícil utilização de sistemas de configuração extremamente complexos.

Além disso, a versão suportada do ambiente Node.js difere do provedor para o provedor. Claro, não temos espaço suficiente para cobrir o tópico em profundidade. Visita Tutorial de Implantação de Mozilla e express.js ' desempenho e confiabilidade e segurança Práticas melhores páginas para algumas das questões envolvidas. Certifique-se de olhar para a documentação do provedor para repreender as melhores práticas.

13. Futuro à prova de suas aplicações

O ciclo de desenvolvimento do Express.js está longe de ser suave: os desenvolvedores são bem conhecidos por mudanças freqüentes de API que exigem reescritas do código do cliente. O interruptor de 3.x para 4.x foi especialmente doloroso, e é por isso que a liberação iminente de 5.x pode deixar alguns de vocês se sentirem desconfortáveis.

Enquanto o Express.js 5.0 traz algumas mudanças de quebra, seu impacto é mais limitado. Primeiro de tudo, um conjunto de funções já deprecadas é removido para real - se o código ainda os usa, atualizando para 5.x requer manutenção.

Designers de motores de visualização precisam verificar 'res.render ():' crescimento do rank em relação a renderizadores, que levou a algumas implementações síncronas escorregando. A versão 5 da estrutura aumenta o desempenho, impondo a renderização assíncrona.

Além disso, um conjunto de melhorias diversas e mudanças documentadas aqui vê o retorno de algumas características extintas de versões anteriores - além disso, alguns insetos de longa data serão fixados no novo lançamento.

Finalmente, esteja ciente de que você já pode experimentar a nova versão. Basta criar uma cópia do código-fonte, pegue um terminal e insira o seguinte comando para baixar um valor de um arquivo de bleeding-borda mal testado. Ser seguro.

 $ NPM instalar express @ & gt; = 5.0.0-
Alpha.1 --Save 

Este artigo foi originalmente publicado em questão 279 da revista Creative Web Design Web Designer. Comprar edição 279 aqui ou Inscreva-se no web designer aqui .

Artigos relacionados:

• Tudo o que você precisa saber sobre o novo nó.js 8
• 20 Módulos do Node.js que você precisa saber
• 25 ferramentas de javascript de mudança de jogo