Aplicativos JavaScript modernos com o Neutrino

Utilize ferramentas que aproveitam o poder do Webpack com a facilidade de predefinições simples para iniciar rapidamente projetos JavaScript, tudo sem configuração inicial.

Dar o primeiro passo para iniciar um novo projeto de JS geralmente traz consigo um esforço significativo para preparar seu ambiente antes de iniciar o desenvolvimento do projeto. Muitos desenvolvedores preferem usar recursos de ponta e fluxos de trabalho de ferramentas modernas para tornar o processo agradável. Infelizmente, essa abordagem muitas vezes pode ter uma curva de aprendizado considerável, pois as pessoas gastam tempo pesquisando as práticas recomendadas, seguindo tutoriais de configuração complexos e experimentando boilerplates. E se pudéssemos pegar o trabalho que a comunidade dedicou à configuração de seus próprios projetos e capturá-lo em pacotes compartilháveis que qualquer pessoa pode usar? Foi por isso que criamos o Neutrino.

Neutrino é uma ferramenta que combina o poder de compilação e configuração do Webpack e acrescenta a capacidade de criar projetos baseados em JavaScript com predefinições. Uma predefinição é o bloco de construção fundamental do Neutrino. Com ela, o senhor pode complementar um projeto com vários recursos, incluindo a forma como ele é compilado, garantindo a qualidade do código, e até mesmo adicionar testes rapidamente. Ao dividir a configuração em unidades compostas, podemos promover um ecossistema em que a personalização de um projeto se torna plug and play.

Para que o senhor tenha uma ideia de como é fácil começar a usar o Neutrino, vou orientá-lo na criação de alguns projetos simples.

Observação: Nos próximos exemplos, estou usando o gerenciador de pacotes Yarn para instalar dependências e criar scripts. Essa é apenas minha preferência pessoal, e o senhor pode usar o cliente npm se desejar.

Início rápido do Node.js

Espere, o senhor pode usar o Neutrino para criar aplicativos Node.js?

Para começar com nosso primeiro projeto Node.js baseado em Neutrino, usaremos neutrino-preset-node. De acordo com sua documentação, ele permite:

• Nenhuma configuração inicial e substituições fáceis, se necessário
• Compila para suportar Node.js v6.9+, Módulos ES, Funções Async
• Mapas de fontes com cabeamento automático

Legal, vamos começar!

Em primeiro lugar, precisamos de um diretório para começar a trabalhar. Em seu terminal, crie um novo diretório e mude para ele. Em seguida, vamos instalar o neutrino e neutrino-preset-node como dependências de desenvolvimento.

❯ mkdir project && cd project
❯ yarn add --dev neutrino neutrino-preset-node

Por padrão, a predefinição do Node.js procura o código-fonte em um src com o ponto de entrada principal sendo index.js. Vamos criar esse arquivo e editá-lo, apenas com um servidor HTTP simples que ecoa tudo o que enviamos a ele.

import { createServer } from 'http';

const port = process.env.PORT || 3000;

createServer(({ url }, response) => {
  console.log(`Received message at ${url}`);
  response.end(url.slice(1));
})
.listen(port, () => console.log(`Running on :${port}`));

Em seguida, vamos adicionar alguns scripts ao nosso package.json que nos darão alguns comandos fáceis para iniciar e criar nosso aplicativo:

{
  "scripts": {
    "start": "neutrino start --presets neutrino-preset-node",
    "build": "neutrino build --presets neutrino-preset-node",
    "serve": "yarn start && node build"

  },
  "devDependencies": {
    "neutrino": "^4.0.1",
    "neutrino-preset-node": "^4.0.1"
  }
}

Estamos prontos para iniciar nosso aplicativo! Usando yarn serve em um terminal, e curl em outro, podemos ver nosso código em ação:

❯ yarn serve
Warning: This preset does not support watch compilation. Falling back to a one-time build.
Hash: 8fa3faf9cbe8ca235884
Version: webpack 2.2.1
Time: 632ms
       Asset     Size  Chunks             Chunk Names
    index.js   3.6 kB       0  [emitted]  index
index.js.map  3.53 kB       0  [emitted]  index

Running on :3000

---

❯ curl http://localhost:3000/Hello\!
Hello!

É isso aí?!

Sim. É isso mesmo.

Não é necessário nenhum custo inicial para iniciar seu projeto com uma cadeia de ferramentas totalmente moderna.

Início rápido do React

Ok, admito que isso foi bastante simples. Mas certamente um ambiente complexo como o React precisa de mais do que isso, certo?

Por diversão, vamos mudar esse projeto de Node.js para React. De acordo com o Documentação do Neutrino, os recursos de predefinição do React:

• Sintaxe JSX, Módulos ES, suporte para as duas últimas versões de navegadores e Funções Async
• Suporte para importação de CSS, HTML, imagens, fontes e ícones diretamente do JavaScript
• Substituição de módulo quente, sem modelos HTML e muito mais

Vamos trocar as predefinições e instalar algumas dependências do React.

❯ yarn remove neutrino-preset-node && yarn add --dev neutrino-preset-react
❯ yarn add react react-dom

Nossos comandos package.json precisam ser alterados para usar a predefinição do React agora:

{
  "scripts": {
    "start": "neutrino start --presets neutrino-preset-react",
    "build": "neutrino build --presets neutrino-preset-react"
  },
}

Em vez de criar um servidor Node.js, vamos renderizar algum conteúdo em um aplicativo da Web. Por convenção, nossa predefinição nos permite montar nosso aplicativo no ID “root”:

import React from 'react';
import { render } from 'react-dom';

render((
  <main>
    <h1>Hello! 😎</h1>
  </main>
), document.getElementById('root'));

De volta ao terminal, podemos iniciar nosso aplicativo e carregá-lo no navegador:

❯ yarn start
✔ Development server running on: http://localhost:5000
✔ Build completed

Esperamos que isso demonstre como é simples começar a trabalhar com um novo projeto React! Se não estiver trabalhando com o React em seu projeto da Web, considere usar o neutrino-preset-web para outras bibliotecas ou aplicativos Web genéricos.

Várias predefinições

O Neutrino simplifica a composição de várias predefinições. Para demonstrar, vamos adicionar uma predefinição de linting que adequará nosso projeto ao Guia de estilo do Airbnb. Instalar neutrino-preset-airbnb-base:

❯ yarn add --dev neutrino-preset-airbnb-base

Para reduzir um pouco a repetição, vamos aproveitar um recurso do Neutrino que extrairá de uma matriz de predefinições em nosso package.json. Isso evita que tenhamos de nomear todas as predefinições que queremos usar para cada comando. Remova as predefinições dos comandos de script e mova-as para config.presets.

{
  "config": {
    "presets": [
      "neutrino-preset-airbnb-base",
      "neutrino-preset-react"
    ]
  },
  "scripts": {
    "start": "neutrino start",
    "build": "neutrino build"
  }
}

Nota: neutrino-preset-airbnb-base precisa ser carregado antes de nossa predefinição React de acordo com a documentação.

Se modificarmos nosso código e introduzirmos algo que viole a predefinição, seremos claramente notificados no console:

❯ yarn start
✔ Development server running on: http://localhost:5000
✔ Build completed

ERROR in ./src/index.js

/node-project/src/index.js
  6:10  error  Strings must use singlequote  quotes

✖ 1 problem (1 error, 0 warnings)

Estou começando a perceber um padrão aqui…

Testes também!

Vamos adicionar rapidamente um teste Jest simples, por que não? O teste Neutrino preset neutrino-preset-jest usa uma convenção de um test com algumas expectativas sobre as extensões de arquivo:

❯ yarn add --dev neutrino-preset-jest
❯ mkdir test && touch test/add.test.js
❯ touch src/add.js

Vamos escrever um teste rápido para verificar se uma função executa corretamente uma adição simples, que criaremos em breve:

import add from '../src/add';

describe('addition', () => {
  it('adds 2 numbers', () => {
    expect(add(3, 5)).toBe(8);
  });
});

Agora, nosso módulo de adição no src/add.js:

export default (x, y) => x + y;

Edite o package.json mais uma vez, adicionando a predefinição Jest à nossa lista, juntamente com um comando para executar testes:

{
  "config": {
    "presets": [
      "neutrino-preset-airbnb-base",
      "neutrino-preset-react",
      "neutrino-preset-jest"
    ]
  },
  "scripts": {
    "start": "neutrino start",
    "build": "neutrino build",
    "test": "neutrino test"
  }
}

Vamos fazer o teste!

❯ yarn test

 PASS  test/add.test.js
  addition
    ✓ adds 2 numbers (3ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.228s
Ran all test suites.

Se tivéssemos cometido um erro ao escrever nosso módulo de adição e acidentalmente usássemos a multiplicação:

export default (x, y) => x * y;

Isso teria causado a falha do teste:

❯ yarn test

 FAIL  test/add.test.js
  ● addition › adds 2 numbers

expect(received).toBe(expected)

Expected value to be (using ===):
      8
    Received:
      15

at Object.<anonymous> (test/add.test.js:5:38)
      at process._tickCallback (internal/process/next_tick.js:103:7)

addition
    ✕ adds 2 numbers (5ms)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        1.221s
Ran all test suites.

Modificando a compilação

Um dos excelentes recursos do Neutrino é que o senhor não precisa trocar a simplicidade pelo aprisionamento ou pela falta de extensibilidade. Ao seguir o documentação o senhor pode complementar o processo de criação do seu projeto com recursos adicionais que não vêm com a predefinição. Se o senhor descobrir que usa esses recursos ou alterações em vários projetos, poderá incorporá-los ao seu predefinição própriae compartilhe-a com sua equipe e a comunidade!

Conclusão

Transformar o Neutrino na ferramenta que é hoje foi um trabalho árduo, mas esperamos que o senhor goste. Experimente-o em seus projetos, dê feedback, crie suas próprias predefinições e compartilhe com outras pessoas. Queremos que todos tenham sucesso com o Neutrino.

Se quiser participar do desenvolvimento ou da documentação, visite a seção de contribuição dos documentos para obter detalhes completos ou visite nosso repositório do GitHub.

Documentação sobre neutrinos: https://neutrino.js.org/

Neutrino GitHub: https://github.com/mozilla-neutrino/neutrino-dev

Obrigado!
Eli Perelman & Hassan Ali – Mozilla