Categorías: Labs

Usando Neutrino para iniciar el desarrollo de JavaScript moderno

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks.

Neutrino es una herramienta que trae las mejores partes de las herramientas modernas JavaScript con la facilidad de cero configuración. Embarcarse en la aventura que es el desarrollo JavaScript puede ser retador.

Trabajar con las últimas herramientas y las librerías más innovadoras es divertido, pero a menudo resulta en una significante cantidad de configuración previa antes de sentarse a escribir una aplicación. Enfrentarse a la parálisis del análisis es una amenaza común, y el tiempo necesario para establecer un conjunto completo de herramientas ha dado lugar a estigmas como “la fatiga del JavaScript”. Neutrino fue construido para permitirte arrancar a toda velocidad.

Neutrino combina la potencia de Webpack con la simplicidad de presets (conjuntos predeterminados) para construir proyectos web y Node.js. Al encapsular los casos de uso comunes de la configuración de Webpack en presets compartibles, es posible crear una aplicación sin necesidad de tocar un archivo de configuración. En la actualidad, hay presets disponibles para crear aplicaciones para la web, React, e incluso Node.js. La adición de la pruebas o el linting supone también solamente un preset. Echemos un vistazo a la rapidez con que podemos iniciar una aplicación React.

Inicio rápido con React

A través de esta guía estaré usando el cliente Yarn para trabajar con dependencias y ejecutar comandos. Esto es puramente preferencia personal; tú también puedes usar el cliente npm si lo deseas.

Para comenzar, necesitamos un espacio para crear nuestra aplicación React. En tu terminal, crea un nuevo directorio y cámbialo:

mkdir hacks-react
❯ cd hacks-react

Lo siguiente, añadamos Neutrino y el preset React para construir la aplicación, y algunas otras dependencias para desarrollar con React:

❯ yarn add --dev neutrino neutrino-preset-react
❯ yarn add react react-dom

El preset de React tiene algunas convenciones:

  • El código fuente se ubica en src
  • El punto inicial de la aplicación es src/index.js
  • Puedes montar tu aplicación en un elemento con un ID de “root”.

Creemos un fichero de entrada en src/index.js, le editamos con algún contenido simple, y le visualizamos:

TODO: arreglar codigo

import React from 'react';
import { render } from 'react-dom';
 
render(<h1>Hacks: React!</h1>, document.getElementById('root'));

Para ejecutar nuestra vista previa de la aplicación y crearla, añade un par de scripts a tu package.json:

{
  "scripts": {
    "start": "neutrino start --presets neutrino-preset-react",
    "build": "neutrino build --presets neutrino-preset-react"
  },
  "devDependencies": {
    "neutrino": "^4.0.0",
    "neutrino-preset-react": "^4.0.0"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-hot-loader": "next"
  }
}

Ejecuta el comando para comenzarlo en tu consola, y abre la URL indicada:

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

Aplicación de prueba

En menos de 5 minutos, ¡tenemos el comienzo para una aplicación React! Lo que es más, nuestro preset Neutrino viene con bastante predefinido:

  • Cero configuración previa necesaria para empezar el desarrollo y construcción de una aplicación web React.
  • Compilación moderna con Babel añadiendo JSX, módulos ES, las 2 versiones principales del navegador, funciones asíncronas, y objeto sintaxis de rest spread de objetos.
  • Compatibilidad para React Hot Loader con reemplazo de módulos en caliente.
  • Extiende de neutrino-preset-web
  • Cargadores Webpack para importar HTML, CSS, imágenes, iconos y fuentes directamente de JavaScript.
  • Webpack Dev Server durante el desarrollo.
  • Creación automática de páginas HTML estáticas, sin necesidad de plantillas.
  • Paquetes optimizados para producción con minificación Babili y fácil división.
  • Fácilmente extensible para personalizar tu proyecto según se necesite, no se requieren cajas negras o expulsión de dependencias.

Calidad del código

Es igual de fácil agregar linting. Usaremos la guía de estilo de Airbnb como ejemplo. Añadiendo el preset de Airbnb, podemos añadir linting de nuestro código fuente de acuerdo con la guía de estilo de Airbnb:

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

Ahora añadamos nuestro preset a nuestros comandos Neutrino, pero vamos a moverlo a “presets” y fuera de “scripts” para que no sea tan difícil de manejar y reducir la repetición. También, el preset de Airbnb necesita cargarse antes de construir el preset:

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

Si comenzamos con la app otra vez, pero esta vez introducimos algo que va en contra de la guía de estilo de Airbnb, podemos ver los problemas justo en la consola:

❯ yarn start
 
✔ Development server running on: http://localhost:5000
✔ Build completed
 
ERROR in ./src/index.js
 
/Users/eli/code/hacks-react/src/index.js
  5:13  error  Strings must use singlequote  quotes
 
✖ 1 problem (1 error, 0 warnings)

Mantener alta la calidad de tu código es tan simple como añadir presets y seguir las convenciones. Puedes seguir las mismas guías para añadir pruebas al proyecto. Solo elige un preset de pruebas y tú estarás en camino.

Con gran poder…

Puede llegar un momento en el que algo en el proceso de compilación necesita cambiar para respaldar tus casos de uso específicos. Afortunadamente, personalizar y sobreescribir el proceso de construcción es directo. Neutrino no te obliga a mantener toda la configuración de compilación si necesitas cambios, ni expulsa todas sus dependencias en tu proyecto. Cada preset de Neutrino tiene mecanismos bien definidos para aumentar la compilación con una API mínima pero intuitiva. Crear tus propios presets también es una buena forma de unificar la configuración en muchos proyectos y reducir la duplicación de cambios comunes. Simplemente publica en npm o GitHub, agrega como otra dependencia y continúa desarrollando.

Nuestra motivación

Hemos creado Neutrino para resolver problemas con los que nos enfrentamos creando aplicaciones front-end entre equipos dentro de la organización de Release & Productivity de Mozilla. Neutrino está actualmente en uso por varios proyectos de Mozilla incluyendo TaskCluster, Treeherder, y Unified Logviewer. Mantenemos y apoyamos a Neutrino porque es algo que nosotros mismos necesitamos y usamos, y esperamos que todos los que lo usen también se beneficien.

Sal y crea

Al reunir grandes herramientas, Neutrino y sus presets fomentan un entorno para un rápido desarrollo al tiempo que eliminan algunas de las barreras en la forma de escribir aplicaciones.
Te animo a leer a través de la exhaustiva documentación de Neutrino y probarlo en tu próximo proyecto. Todo el código fuente tiene licencia MPL v2 y está disponible en GitHub. ¡Que lo disfrutes!

The following two tabs change content below.