Puedes encontrar los artículos previos en:

• ¿Qué es Linting y ESLint?
• ¿Qué es npm?
• ¿Qué es Babel?

¿Qué es Prettier?

En resumen y muy acotado, Prettier es un formateador automático de código. ¿Qué quiere decir esto?

Escribir código es una acción humana y como tal hay opiniones sobre como se debe escribir este código y no solamente desde el punto de vista algorítmico o técnico, si no, incluso se crean discusiones sobre estilos de "escritura" (Famosa es la "guerra sagrada" sobre si usar o no ; es JavaScript o tabs vs espacios).

Al trabajar en un proyecto de código que incluya a más de una persona estas discusiones sobre como debería escribirse o no el código (guía de estilo) pueden mermar la productividad del equipo enfrascándose en nimiedades que pueden tornarse bastante molestas, por ejemplo, al revisar un pull-request. Las diferencias de estilo se mostrarán como cambios que en efecto no son parte del real desarrollo que se intenta lograr.

Prettier busca solucionar esto otorgando una serie de configuraciones y opiniones sobre esta guía de estilo.

Prettier ofrece soporte para múltiples lenguajes y frameworks.

• Javascript
• JSX
• Angular
• Vue
• Typescript
• CSS
• HTML
• JSON
• Graphql
• Markdown
• YAML

Lo que ofrece Prettier es tomar tu código y "re-formatearlo" en base a las configuraciones definidas manteniendo así un estilo consistente.

Uno de los casos más comunes que podemos usar como ejemplo es el largo de la definición de una función:

function calcularMuchosArgumentos(unaVariableMuyLarga, otraVariableConUnNombreDeclarativo) 

Prettier tomará este trozo de código y automáticamente lo re-escribirá como

function calcularMuchosArgumentos(
    unaVariableMuyLarga,
    otraVariableConUnNombreDeclarativo
)

Haciéndolo mucho más legible y sin intervención nuestra ni preocupación de como lo escribes inicialmente.

Finalmente, lo que Prettier otorga es una forma sencilla y automatizada de definir un estilo de código en todo tu proyecto ya que simplemente desecha el estilo original (el que fue escrito por un desarrollador) al re-escribirlo bajo las reglas y configuraciones definidas.

¿Por qué querrías usar Prettier?

Algo dejé entrever en el párrafo anterior. Definir una guía de estilo única en el proyecto que permita evitar discusiones innecesarias sobre cómo escribir código y evite conflictos a la hora de revisar cambios en el código.

Pero hay algunas otras ventajas como por ejemplo:

• Ayudar a los nuevos desarrolladores del equipo. Quienes llegan a unirse a un equipo que ya lleva un tiempo trabajando no tendrán que aprender las reglas de estilo del equipo y acostumbrarse a nuevas formas de escribir su trabajo, evitando así gastar tiempo en tomar nuevos hábitos.
• Enfoque: Al usar una herramienta como prettier es fácil notar que tendrás un poco más de tiempo para enfocarte en lo que realmente importa en tu trabajo: escribir código sin preocuparte de formatear o estilizar lo que escribiste. Prettier tiene integraciones con la gran mayoría de editores de texto por lo que el formateo es completamente no-intrusivo y automático.
• Fácil adopción: Integrar Prettier en tu proyecto es sencillo y no generará cambios bruscos que debas tener en cuenta.

¿Qué diferencia hay entre Prettier y un linter cómo ESLint?

Es fácil asociar el trabajo de Prettier y ESLint, pero en realidad difieren en su objetivo

Si quieres saber más sobre que es ESLint, como funciona y como instalarlo revisa este artículo de la serie.

En pocas palabras, el trabajo de un linter como ESLint es encontrar bugs y el de Prettier formatear el código.

Por ejemplo, ESLint tiene reglas para mejorar la calidad del código cómo: no-unused-vars, no-await-in-loop, no-dupe-args, etc. Prettier no tiene nada que hacer con este tipo de reglas, ya que están relacionadas a una tarea diferente.

¿Cómo instalar Prettier?

Prettier es un paquete que puedes encontrar en npm

Para saber más sobre que es NPM te invito a revisar este artículo de la serie

Comienza por abrir tu terminal e instalar Prettier localmente en tu proyecto

npm install --save-dev --save-exact prettier

Luego deberás crear un archivo de configuración para que así el editor de texto que utilizas sepa que Prettier está disponible.

echo {} > .prettierrc.json

Además, es buena idea configurar un archivo .prettierignore que te permitirá indicarle a Prettier que archivos no formatear.

# Ignore artifacts:
build
coverage
static

Este archivo es muy parecido e incluso a veces idéntico a tu archivo .gitignore o .eslintignore

Con esto Prettier ya está disponible para su uso, puedes comenzar por formatear todos tus archivos utilizando, nuevamente la terminal

npx prettier --write .

Si tienes muchos archivos esto puede tomar un tiempo, ahora es buen momento para configurar tu editor de texto favorito para que trabaje con Prettier  momento de guardar los archivos o mediante alguna combinación de teclas.

Puedes revisar la documentación de cada editor o este listado en el sitio oficial de Prettier sobre la Integración con Editores

Tips

Es común tener varias herramientas trabajando en tu proyecto, por lo que es importante configurar todo para que "jueguen bien", una de esas configuraciones es permitir que ESLint y Prettier trabajen en conjunto sin interponerse (algunas reglas pueden sobreponerse). Para ello existe un plugin eslint-config-prettier que permite que ESLint deshabilite las reglas que pueden chocar con Prettier

Puedes instalarlo utilizando la terminal

npm install --save-dev eslint-config-prettier

Luego tendrás que añadir algunas configuraciones a tu configuración es ESLint.

{
    "extends": [
    	"prettier"
    ]
}

También es buena idea permitir que Prettier funcione con tus acciones relacionadas con Git

Una forma de reforzar el uso de Prettier en el equipo es que se ejecute automáticamente al momento de "guardar" tu código en tu repositorio (hacer commit). La idea es asegurarte que todos los archivos que fueron modificados sean formateados por Prettier. Para esto debes instalar algunas herramientas y configurar tu archivo package.json

npm install --save-dev husky lint-staged
npx husky install
npm set-script prepare "husky install"
npx husky add .husky/pre-commit "npx lint-staged"

Finalmente, edita tu archivo package.json y agrega

{
    "lint-staged": {
        "**/*": "prettier --write --ignore-unknown"
    }
}

En resumen, en este artículo hemos revisado que es y como funciona Prettier, también el razonamiento de porque querrías utilizarlo para evitar problemas de guías de estilo.

También revisamos como instalar localmente Prettier en tu proyecto, configurar .prettierrc.json y el archivo `.prettierigore`.

Finalmente, vimos como configurar para que ESLint y Prettier funcionen en conjunto.

TLDR; Puedes escuchar la versión en audio de este artículo en este episodio de Café con Tech

JAMStack es un término genérico para referirse a una forma de desarrollar aplicaciones web. Es una arquitectura, modelo y filosofía que determina una forma de desarrollar una aplicación que cumple con los 5 pilares de una aplicación o framework bien "diseñado" según AWS.

• Excelencia Operacional
• Seguridad
• Fiabilidad
• Eficiencia
• Optimización de Costo

Tradicionalmente una webapp está compuesta de un servidor, un programa que ejecuta una serie de operaciones para retornar una página web. Esto ocurre cientos de veces con cada visita al sitio web.

Un ejemplo de app tradicional es una app hecha con algún framework que se encarga no solo de obtener los datos, sino también de construir y servir el contenido hacia el browser. Rails, Django, Laravel, ExpressJs, etc. son ejemplos de una app tradicional.

Historia

Pero, demos un poco de contexto que siempre es adecuado saber de donde proviene una idea.

La web comenzó de manos de Sir Tim Bernes Lee proveyendo de una forma de mostrar contenido estático por medio del uso de un lenguaje de marcado HTML. Hasta aquí todo bien, el desarrollo de sitios web fue por años simplemente para mostrar contenido.

Luego se le agregó dinamismo al utilizar lenguajes que de forma dinámica construían el contenido, como Perl y PHP y esto sigue así hasta que al rededor del año 2015 los sitios estáticos vuelven a popularizarse gracias al uso de herramientas de generación de sitios estáticos como Jekyll que permitían desarrollar rápidamente un sitio web directamente en github.

El 2016 el término JAMStack es acuñado por un grupo de desarrolladores que sintieron que "Sitio estático" no hacia correcta referencia a lo que se estaba desarrollando.

el 2016 crece la revolución de la "Web moderna" en donde se prioriza la performance, escalabilidad y experiencia de desarrollo. El término JAMStack comienza a ser adoptado por grandes grupos de desarrolladores.

• 2018 es el año de la explosión de JAMStack, herramientas como Netlify, Gatsby y Contentful crecen rápidamente popularizando aún más el término. Ese mismo año nace la JAMStack Conf.

El resto es historia.

Entonces, ¿Qué es JAMStack?

JAMStack es un approach diferente pero a la vez conocido. Es una app estática. ¿Cómo?

Es estática en el sentido de que el contenido es servido como archivos estáticos (Markup) pero los datos utilizados pueden ser dinámicos (API)

Por ejemplo tu ya tradicional aplicación escrita con React, cuando la pones en producción, lo que realmente tienes es un conjunto de archivos estáticos que es distribuido por algún servicio como Amazon S3 o Netlify y eso esencialmente es JAMStack.

Entonces de que se compone una app JAMStack

Por lo general son 3 componentes

JavaScript

Javascript permite proveer de dinamismo e interacción a esos archivos estáticos. Aquí es donde frameworks y librerías como React, Angular, Svelte y Vue entran en juego.

Estas herramientas hacen que crear un sitio web sea más "simple" (no más fácil en particular) ofreciendo diversas opciones para agregar dinamismo, junto con ofrecer un set de herramientas que finalmente generan un grupo de archivos estáticos que son servidor por tu CDN favorito.

APIs

Utilizar la versatilidad de las API es esencial para ofrecer funcionalidades a tu app JAMStack, la idea aquí es que tu aplicación puede consumir funcionalidades y datos de múltiples fuentes, algo completamente distinto al enfoque tradicional en donde los datos provenían del propio servidor.

El uso de Javascript para consumir datos sobre HTTP ha permitido el crecimiento de una miríada de servicios que proveen diversas funcionalidades, como autentificación, contenido, búsqueda, almacén de datos, etc.

Gatsby aquí hizo un gran trabajo definiendo el concepto "Content Mesh" para describir la red de apis que se utilizan en una app JAMStack.

Al mismo tiempo gatsby fue pionero, o al menos de los primeros frameworks, en ofrecer una clara interfaz entre todas estas fuentes de datos por medio del uso de Graphql como centralizador.

Personalmente creo que la popularización de Graphql incentivo el crecimiento de JAMStack y viceversa.

Markup

Este componente es esencial, es finalmente la parte visible al usuario, es lo que el browser consume, aquí lo importante no es en particular como se crea, puede ser a mano o por medio de herramientas de autogeneración, si no, es importante como se distribuye.

Para ser considerado JAMStack el contenido debe ser distribuido de forma estática, lo que implica que no debe ser renderizado de forma "dinámica" por el servidor.

Si estás creando una app o sitio web y este es construido en el momento por el motor PHP (por ejemplo), no estamos hablando entonces una app JAMStack, pero si estás sirviendo un archivo HTML desde algún servicio de storage como S3, entonces suena como JAMStack.

Una forma popular de crear el componente Markup es el uso de framework de Static Site Generators como Gatsby, Jekyll, Hugo, etc.

Frameworks que permiten consumir datos desde alguna o varias API durante el tiempo de "compilación" para recrear los archivos estáticos utilizando esos datos.

Por ejemplo, piensa en que tienes una serie de posts escritos en archivos markdown hosteados en algún servicio de Cloud que ofrece una api, es posible, utilizar esa api para obtener todos los archivos que tienes y utilizar su contenido para crear una página HTML para cada uno de ellos. Esto implica que finalmente lo que subirás a tu servicio de storage es una versión "pre-compilada" que será servido directamente al browser, lo que usualmente significa una experiencia de uso mucho más rápida para tus usuarios.

Beneficios

¿Entonces, que hace que JAMStack sea tan bueno y un término tan popular?

Primero, markting, yes. JAMStack es un término bastante marketero, muchos más que aplicación estática no?, pero obviamente si tiene beneficios reales como:

• Mejor performance: Servir contenido previamente construido utilizando un CDN indica que ya no dependes de la capacidad de tu servidor para construir las páginas que serán servidas en donde en ocasiones de muchos usuarios (requests) el servidor sufría e incluso podía simplemente caerse y dejar sin servicio tu maravilloso e-commerce.
• Más seguro No necesitas preocuparte de sobre vulnerabilidades del servidor o tu base de datos por lo que puedes enfocar tus esfuerzos en definir permisos de acceso para la información privada utilizando alguna api de autorización como Auth0.
• Menor Costo: Hostear contenido estático es barato o incluso gratuito.
• Mejor experiencia de desarrollo: Frontend Devs se pueden enfocar en lo que mejor hacen, el desarrollo frontend, sin estar atados a una estructura monolítica. Esto usualmente significa un mejor y más rápido desarrollo.
• Escalabilidad Si tu producto se vuelve viral de la noche a la mañana y de pronto tienes miles de usuarios activos, tu CDN lo compensará sin mayor dificultad. El CDN te dará escalabilidad "infinita" o al menos gigantesca.

Workflow

Obviamente la forma de desarrollar puede variar en cada uno, pero por lo general hay un flujo de trabajo mínimo ideal y bastante sencillo.

Desarrolla -> Sistema de control de versiones -> CI/CD -> Assets estáticos -> Deploy atómico -> Actualizar CDN.

Obviamente depende de tus herramientas, pero por ejemplo mi blog y todos mis otros sitios están construidos con este flow, pero quizá· un poco más simplificado dado los servicios.

Desarrollo el sitio en mi editor favorito y utilizo git para guardar mis cambios y subirlos a github, todos los commit hechos a master son "escuchados" por netlify que automáticamente genera un nuevo build y directamente actualiza su CDN interno.

¿Qué herramientas puedo utilizar?

Ya sabes que es JAMStack ahora la parte divertida, construir tu propia app JAMStack.

Puedes elegir un framework que te permite seleccionar casi cualquier tecnología web.

• Gatsby: React y Graphql (mi sitio web y el de control remoto están hechos con Gatsby)
• 11ty Diferentes lenguajes de Template como Markdown, Handlebars, liquid, etc.
• Hugo. Escrito en GO. Mi sitio de notas está hecho con HUGO.
• Nift. Escrito en C++ y Language Agnostic.
• Scully: Angular.js

y muchos más que puedes ver en https://jamstack.org/generators/

¿Dónde servir o almacenar tu app? Aquí hay mucho donde elegir.

• Netlify (mi elección)
• Vercel
• AWS (AWS Amplify es una buena elección)
• Github Pages

¿Que servicios o api hay disponibles?

• Auth0 es un gran servicio de autenticación y autorización.
• Cloudinary como servicio para hostear imágenes, las social cards de mis sitios es generada utilizando cloudinary.
• Sanity, Contenful o incluso Wordpress como CMS
• Stripe o MercadoPago como plataforma de pagos   ¿Y Como le doy dinamismo?

Como ya hemos comentado, un sitio JAMStack provee de contenido estático en términos de que los archivos utilizados son estáticos, pero su contenido puede ser tan dinámico como se requiera. Hay varias formas de ofrecer este dinamismo como también muchos servicios que utilizar

• Puedes Utilizar React, Vue, Angular, o casi cualquier otro framework
• Puedes utilizar funciones serverless como lo que ofrece AWS lambda, Netlify functions o Vercel
• Utilizar bases de datos como FaunaDB
• Formularios, comentarios, e-commerce, search, etc.

En fin, aún hay mucho camino por recorrer

Recursos

Dada la pasión y emoción alrededor de JAMStack existen varias comunidades online que trabajan para proveer ambientes inclusivos para permitir que todos puedan aprender sobre este modelo y como hacer de la web un mejor lugar.

La principal conferencia sobre JAMStack es la jamstackconf. La conferencia líder y "oficial" sobre esta arquitectura, organizada por Netlify.

• Meetups: Puedes encontrar varias y diferente meetups que buscan mantener el contenido vivo permitiendo que muchos puedan dar a conocer su trabajo en estas pequeñas comunidades. Puedes encontrar una lista de estas meetups en jamstack.org/community
• Slack: También puedes unirte a algunas comunidades online como el Slack de JAMStack, the New Dynamic y Party Corgi Network.
• Newsletter: Puedes unirte a algún newsletter que te permitirán mantenerte al día sobre el desarrollo de JAMStack.
• Guías y tutoriales: En frontend masters puedes encontrar el curso de Jason Lengstorf sobre introducción a JAMstack. Egghead.io también tiene varias lecciones sobre Jamstack incluyendo videos sobre Netlify, Gatsby, Next y otros.

Gracias especiales a Colby Fayock autor de The Jamstack Hanbook, cuyo ebook fue utilizado como parte de las referencias para este episodio.

Hoy revisaremos: ¿Qué es inmutabilidad?

JavaScript es un lenguaje muy (quizá demasiado) flexible y ofrece varias opciones para manipular todo tipo de estructura de datos, algunas de estas opciones son Mutables y otros Inmutables.

Pero ¿Qué es inmutabilidad?

Este concepto comenzó  a tener un auge importante en el desarrollo frontend gracias a que la programación funcional comenzó poco a poco a hacerse presente, siendo quizá el culpable la dupla React + Redux.

Una de las características más importantes de los lenguajes funcionales es que sus estructuras de datos son inmutables lo que ayuda a reducir la complejidad del software. Y si algo sabemos por la experiencia es que la complejidad es un “code smell”.

Es común que nuestras aplicaciones JavaScript incrementen de forma exponencial su complejidad dado el número de requerimientos de esta, el problema con esto es que llegado a un punto, es casi imposible mantener un modelo mental de todo lo que ocurre en la aplicación, y por sobre todo, poder seguir fielmente el flujo de datos o información y sus transformaciones.

El concepto de Inmutabilidad es sencillo y poderoso. Un valor inmutable es algo que no puede ser cambiado.

La verdad es el constante cambio, la mutación oculta los cambios, los cambios se manifiestan en caos, por lo tanto, el sabio abraza la historia. — The Dao of Immutability

https://medium.com/javascript-scene/the-dao-of-immutability-9f91a70c88cd#.b1cayh7g7

¿Entonces que hacer cuando necesitas un objeto o valor idéntico al original pero solo con algunos atributos diferentes?. Hasta ahora lo que hacíamos es mutar la variable original y continuar con nuestras vidas. Pero si consideramos esa variable inmutable entonces tendremos que hacer una copia y manipular la copia en vez del original.

Pero esta técnica siempre genera alarmas: ¿crear un objeto nuevo por cada cambio es costoso? y a la respuesta es: si, ya que se debe instanciar nuevamente en memoria.

Dada esta situación, numerosas investigaciones se han realizado generando grandes avances en manejo de memoria y técnicas que optimizan las estructuras de datos para evitar el gigantesco consumo de memoria que significa recrear un objeto una y otra vez por un tiempo prolongado.

En esta charla de David Nolen se explica como estas estructuras se implementan y funcionan.

Inmutabilidad es trabajar con los hechos, dado que una variable inmutable no puede cambiar podemos decir entonces que estamos hablando de los hechos, la fuente de la verdad.

En los lenguajes funcionales la inmutabilidad es algo que se da por sentado, pero en JavaScript es algo que debemos "forzar" mediante buenas prácticas, linting o el uso de librerías tipo “helper” que refuercen estas prácticas.

Por cierto, si no sabes que es linting, escribí un artículo sobre ello en freecodecamp

¿Por qué la inmutabilidad es importante?

Básicamente porque te permite representar estados de forma correcta y eliminar los "side effects".  Es mucho más fácil seguir la lógica de un software que no modifica sus variables que uno que permite que sus variables cambien a diestra y siniestra.

Un ejemplo de la importancia de la inmutabilidad es el propio React. Un componente React es básicamente una función que a base de un estado (sus props y estado interno) retorna una interfaz.

Para manejar estado interno React ofrece una función (hook) llamado useState. Esta función retorna una tupla [estado, funcion actualizadora] es decir, React nos indica que para modificar el estado debemos utilizar la función actualizadora, no podemos ir directamente y mutar el estado, debemos solicitar su cambio.

Cuando hacemos uso de la función actualizadora React crea una copia del estado y modifica solo lo que es necesario en la copia.

Trabajando con objetos inmutables.

Entonces, queremos asegurarnos de que nuestros objetos no sean mutados. SI vamos a hacer uso de un método para actualizar el objeto este método debe retornar un nuevo objeto. En esencia lo que necesitamos es una función pura.

Una función pura tiene dos propiedades esenciales:

• El valor que retorna depende sólo de los argumentos de entrada. O lo que es lo mismo, el valor de retorno no cambiará si los valores de entrada no cambian.
• No puede modificar nada que este fuera de su ámbito.

¿Qué herramientas nos ofrece JavaScript?

En el caso de los objetos JavaScript nos ofrece a lo menos dos formas para mantener el principio de inmutabilidad.

Object.assign

Object.assign es un método del objeto Object que permite crear un nuevo objeto copiando los valores que le son pasados como parámetros.

Object.assign({}, data, { attribute: 'something' }

En este ejemplo lo que estamos haciendo es copiar todo el contenido del objeto data dentro del objeto vació que pasamos como primer argumento, además copiamos y en efecto sobreescribimos el valor del atributo attribute dentro del nuevo objeto. Object.assign retorna el valor del nuevo objeto.

Operador spread

Ya revisamos lo que podemos hacer con el operador spread en una lección anterior. En este caso utilizaremos el operador para efectuar lo mismo que con Object.assign

{...data, attribute: 'something' }

Arreglos

El objeto Array define algunas operaciones mutables, es decir, modifican el arreglo original al operar sobre el: push, pop, splice, shift,unshift, reverse y sort. Usar estos métodos implica la existencia de side effects y posibles bugs difíciles de rastrear.

Transformemos estos métodos para funcionar de forma inmutables, usaremos el siguiente arreglo como base en cada operación.

const usuarios = [
	{ 
		id: 1,
		name: "brad gibson",
		email: "brad.gibson@example.com"
	},
	{
		id: 2,
		name: "Kuzey Karaduman",
		email: "kuzey.karaduman@example.com"
	},
	{
		id: 3,
		name: "Heinz-Werner Konrad",
		email: "heinz-werner.konrad@example.com"
	}
]

Push

La forma usual es utilizar

const newUser = {
	id:4,
	name: "Stephen Watkins",
	email: "stephen.watkings@example.com"
}
usuarios.push(newUser) // [{ id: 1}, {id:2}, {id: 3}, { id: 4} ]

Pero esto modifica el arreglo inicial, la forma inmutable de esta operación se obtiene al utilizar el operador spread.

const newUsuarios = [...usuarios, newUser ]

JavaScript

Unshift

Este operador es similar a push, salvo que en vez de agregar un elemento al final del arreglo lo hace al principio (prepend).

čonst newUser = {
	id:4,
	name: "Stephen Watkins",
	email: "stephen.watkings@example.com"
}
usuarios.unshift(newUser) // // [{ id: 4}, {id:1}, {id: 2}, { id: 3} ]

Nuevamente podemos hacer uso del operador spread para conseguir la versión inmutable

const newUsuarios = [newUser, ...usuarios]

Pop

Este operador remueve el último item del arreglo y lo retorna

const user = usuarios.pop(); // user = { id: 3 } y usuarios ahora tiene sólo dos elementos

Para lograr lo mismo de forma inmutable tenemos que hacer uso de otro método de arreglo a modo de "helper" y ejecutar algunos otros pasos:

const user = usuarios[usuarios.length - 1]; //Obtenemos una copia del ultimo usuario para replicar el comportamiento de `pop` de retornar el elemento
const newUsuarios = usuarios.slice(0, usuarios.length - 1)// el arreglo original sigue sin modificarse

Aquí utilizamos slice que revisaremos más adelante.

Shift

Este operador actúa de forma similar a pop y es en efecto el acto contrario a unshift. Remueve un elemento del principio del arreglo y lo retorna.

const user = usuarios.shift(); // user = {id: 1} y usuarios ahora tiene solo 1 element

Nuestra solución inmutable nuevamente debe hacer uso de slice para replicar el comportamiento

const user = usuarios[0]; //Obtenemos una copia del primer usuario para replicar el comportamiento de `shift` de retornar el elemento
const newUsuarios = usuarios.slice(1) // el arreglo original sigue sin modificarse

Splice

Este método es utilizado tanto para remover como para agregar elementos en cualquier posición de un arreglo

usuarios.splice(1,2, newUser);

Esta operación modifica el arreglo original, removiendo dos elementos desde la posición 1 y agregando en su lugar el newUser

el resultado es

{
    id: 1,
    name: "brad gibson",
    email: "brad.gibson@example.com"
  },
	{
		id: 4,
	  name: "Stephen Watkins",
	  email: "stephen.watkings@example.com",
	}

Para transformar esta operación en inmutable nuevamente hacemos uso de splice y  el operador  spread

const newUsuarios = [...usuarios.slice(0,1), newUser, ...usuarios.slice(3)]

slice obtiene un trozo del arreglo original y luego con spread este trozo se expando para copiarse dentro del nuevo arreglo.

Sort y reverse

Finalmente tenemos los métodos sort y reverse uno ordena el arreglo y otro lo invierte

Cabe destacar que sort puede recibir un parámetro que define como se deben comparar los elementos del arreglo para definir cuál va primero.

En nuestro caso estamos utilizando un arreglo de objetos, y para su ordenamiento lo haremos comparando los atributos id

function compare(a, b) {
  if(a.id > b.id) {
    return -1
  }
	if(a.id < b.id) {
		return 1
	}
  return 0
}

Esta función indica que si el elemento a tiene un id mayor que el del elemento b entonces retorna un valor menor que 0 que significa que a debe posicionarse primero. En caso contrario se retorna un valor mayor que 0, entonces b debe posicionarse primero. Si retorna 0, entonces los elementos se dejan en la misma posición.

Ahora con esto en su lugar podemos ordenar e invertir nuestro arreglo

usuarios.sort(compare); // [{ id: 3}, {id: 2}, {id: 1}]
usuarios.revserse(); // [{ id: 1}, {id: 2}, {id: 3}]

Estos operadores son mutables por defecto y no tienen una contrapartida en el mundo de la inmutabilidad, por lo que para replicar su comportamiento lo que hacemos es la solución más sencilla (La navaja de Ockham), es decir, obtenemos una copia del arreglo y operamos sobre esta copia.

const sorted = [...usuarios].sort(compare)
const inverted = [...usuarios].reverse()
const sortedAndInverted = [...sorted].reverse()

Como siempre te dejo el demo de todo este código aquí

Librerías

Existe también la opción de utilizar alguna librería que te permita aplicar los principios de inmutabilidad de una forma más directa. Este tipo de librerías garantizan que el principio está siendo aplicado.

Una de estas librerías y quizá la más mencionada es Immutable.js que tuvo gran auge al ser usada junto con Redux.

Conclusión

La inmutabilidad no es un tópico específico de JavaScript, puede ser aplicado a cualquier lenguaje y es muy recomendado que así sea. Lo importante aquí es entender por qué requieres utilizar inmutabilidad y como estás manejando tus datos para mantener un flujo de datos legible y un patrón de código mantenible.

Puedes encontrar los artículos previos en:

• ¿Qué es Linting y ESLint?
• ¿Qué es npm?

¿Qué es Babel?

Babel es un "compilador" (o transpilador) para JavaScript. Básicamente permite transformar código escrito con las últimas y novedosas características de JavaScript y transformarlo en un código que sea entendido por navegadores más antiguos.

¿Por qué es necesario transformar el código JavaScript?

JavaScript es un lenguaje que no para de evolucionar y que cada año agrega nuevas características a su estándar. El estándar de JavaScript, conocido como ECMAScript.

ECMAScript (o abreviado ES) es la especificación en la que se basa JavaScript. ES nace de la organización ECMA International, cuyo objetivo es desarrollar estándares y reportes técnicos para facilitar el uso de tecnologías de la información.

Esta organización se constituye de varios equipos siendo el TC39 el equipo encargado de revisar, proponer y definir las características que el estándar tendrá cada año.

Lamentablemente la velocidad de actualización del estándar no es la misma que la velocidad de adopción de los navegadores, es decir, los navegadores no siempre pueden implementar las nuevas características en sus engine, ni tampoco hacerlo retrocompatible con versiones más antiguas. Además, tampoco es posible asegurar que todos los usuarios estén utilizando navegadores modernos o de última generación lo que imposibilita tener la seguridad de que podamos hacer uso de las nuevas características del lenguaje en todas partes.

¿Qué ventajas tiene el utilizar las nuevas características propuestas por ECMA?

Las nuevas características y "habilidades" que JavaScript provee cada año son sobre todo ventajas para ti como desarrollador, ya que te proporciona de herramientas más poderosas y expresivas para implementar soluciones a problemas complejos. Algunas de las características se han ido agregando con los años son:

• Funciones flechas (arrow functions)
• Plantillas Literales (Template Literals)
• Map y Set
• Let y Const
• Clases
• Encadenamiento Opcional (Optional Chaining)
• Operador Fusión Nula (Nullish Coalescing)
• Métodos Privados (ES2021)
• Operador de Asignación Local (ES2021)
• Puedes ver más en la especificación actual de ECMA en: https://www.ecma-international.org/publications-and-standards/standards/ecma-262/

¿Entonces como puedo usar las nuevas versiones de JavaScript?

Ya que no todos los navegadores pueden interpretar o entender las nuevas características del lenguaje que estás o quieres usar es necesario buscar algunas soluciones, una de ellas es el uso de polyfills o librerías que implementan con código "antiguo" el mismo comportamiento que lo que intentas expresar con características nuevas, un ejemplo de esto es el polyfill para usar Object.keys

Pero si necesitas usar algo más que un par de operadores entonces entra en juego más requerimientos y aquí es donde Babel hace su aparición

Babel permite transformar código de versiones nuevas de ES (ECMA2015+) a versiones retrocompatibles de JavaScript, esto lo realiza mediante:

• Transformaciones de sintaxis
• Polyfills
• Transformaciones de código fuente (codemods)
• etc

Si lo que gustas es saber más sobre compiladores y como funciona babel en el alto nivel puedes revisar The super tiny compiler

Babel es entonces una herramienta que lee tu código (archivo por archivo) y genera nuevo código que puedes usar en navegadores antiguos (o como entrada para algún bundler como webpack, rollup, etc)

Babel es casi omnipresente, utilizado por el 99.9% de los equipos que desarrolla software utilizando JavaScript, además Babel se alinea directamente a las discusiones del TC39 proveyendo así implementaciones de propuestas que aún ni siquiera son aceptadas por el comité, lo que te permite tener dichas funcionalidades mucho antes incluso que los navegadores.

¿Cómo funciona Babel?

Revisaremos de forma breve como babel funciona convirtiendo tu código de una versión a otra.

Considera este pequeño trozo de código JavaScript

const sum = (a, b) => a + b

Ahora considera que por alguna razón necesitas que este se ejecute en un navegador antiguo, entonces deberás transformarlo a

'use strict';
function sum(a,b) {
	return a + b;
}

¿Cómo se logra esto?

Es un proceso que se ejecuta en al menos 3 procesos

Parsing: Babel toma el código fuente, lo lee y lo convierte en una representación abstracta conocida como AST (Abstract Syntax Tree). Esta es una representación donde cada nodo del árbol representa una estructura del código fuente. Babel utiliza Babylon para este trabajo.

Puedes ver el AST de nuestro ejemplo visitando astexplorer.net

1. Transformación: En esta etapa Babel trabaja sobre el AST generado en el proceso anterior y lo manipula para generar un nuevo AST que represente el código necesario para el soporte seleccionado.

Este paso es realizado por una serie de "plugins" que permiten ejecutar varias transformaciones de forma sencilla y atómica. Aquí cada plugin toma el AST generado por el previo para aplicar una pequeña transformación.

Puedes revisar como funciona el plugin [babel-plugin-transform-arrow-function](<https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-arrow-functions>) o leer el "libro de mano de los plugin de babel" (en inglés) para saber como funcionan o como implementar tu propio plugin

1. Generación de código: En esta etapa, babel toma el AST generado y crea/escribe el código compatible, es decir, crea ese trozo de código soportado por navegadores más antiguos.

'use strict';
function sum(a,b) {
	return a + b;
}

Instalar y configurar Babel

Ya sabemos que hace y hasta cierto punto como funciona babel, es hora de hacer uso de su poder, para eso lo primero es instalarlo en nuestro equipo. Para eso necesitamos utilizar el manejador de dependencias de node npm

npm install --save-dev @babel/core @babel/cli

Si no tienes el archivo package.json creado, crea uno antes de instalar dependencias. npm init te ayudará.

Una vez instalado esto, verás las nuevas dependencias de desarrollo en tu archivo package.json

Ahora para ejecutar babel puedes intentarlo directamente en la consola accediendo al binario dentro de la carpeta de instalación o utilizar las bondades de npm y su archivo de configuración al crear algunos scripts que te permitan ejecutarlo fácilmente.

Simplemente agrega la sección scripts y define el comando build.

"scripts": {
	"build": "babel src -d lib"
}

Este comando le indica a babel que lea todo el contenido del directorio src y que genere la salida en el directorio lib.

Ahora para ejecutar solo basta utilizar npm.

npm run build

Si ejecutas esto utilizando el breve código de ejemplo de este artículo verás que babel hizo absolutamente nada, esto es porque la configuración por defecto de babel no define qué se debe hacer. Como comenté más arriba, Babel utiliza un sistema de plugins para definir las transformaciones que necesitas realizar.

Configurando Babel

La configuración de babel se realiza utilizando un archivo de configuración, nada nuevo bajo el sol, llamado babel.config.js Un archivo JavaScript que retornará un objeto con la configuración deseada. El hecho de ser un archivo JavaScript te permite "calcular" ciertos parámetros como por ejemplo, utilizando variables de entorno.

Babel distribuye un "set" de configuraciones pre-definidas llamadas presets. Estos son básicamente un conjunto de plugins comúnmente utilizados que te permiten iniciar rápidamente.

Primer instalamos el paquete

 npm install @babel/preset-env --save-dev

Y luego definimos su uso en el archivo de configuración

{
  "presets": ["@babel/preset-env"]
}

Este preset es "inteligente" y decide qué plugins se usarán (y por ende que transformaciones se aplicaran) en base a la configuración de ambientes que quieres soportar. Dado que no especificamos ningún ambiente objetivo, babel asumirá que queremos transformar todo el código de versiones ES2015 en adelante en código compatible con ES5. No se recomienda utilizar babel de esta manera ya que estarás transformando código que probablemente los navegadores de tus usuarios ya soportan.

En nuestro particular y sencillo ejemplo, la transformación para soportar ES5 es convertir la función flecha en una función normal, puedes ver el resultado aquí pero, las funciones flechas ya son soportadas por la gran mayoría de navegadores actuales por lo que no tiene sentido hacer la transformación

Para decirle a babel que queremos soportar navegadores un poco más modernos podemos pasar un nuevo parámetro de configuración.

Babel se integra con browserlist que no es más que una nomenclatura de configuración para definir qué navegadores o ambientes de node deben ser soportados por distintas herramientas. Para su uso se recomienda crear un nuevo archivo llamado .browserlistrc en donde pues escribir la lista de navegadores soportados.

Creemos el archivo de configuración y digamos que queremos soportar una lista de navegadores bastante nuevos, por ejemplo, que considere las estadísticas de uso y soporte todos los navegadores que tengan una porción de uso superior al 2%.

> 2%

Ahora al ejecutar npm run build nuevamente veremos que el resultado es que nuestra función flecha no fue modificada (Puedes ver el ejemplo aquí)

Conclusión

En resumen babel es una herramienta necesaria hoy en día para así poder aprovechar todo el poder de las nuevas versiones de JavaScript mientras desarrollas sin preocuparte si los navegadores soportan o no dicha característica.

Su configuración más común es sencilla, simplemente utilizas el plugin preset-env y configuras los navegadores que quieres soportar. Siempre puedes ir más allá e ir agregando plugins para, incluso, soportar características que aún son solo una propuesta.

Por lo general no ejecutas babel directamente si no, como parte de un sistema de transformación a producción más grande que incluye algún bundler como webpack, rollup, vite, etc.

Saber más

• Puedes encontrar más información sobre que es ES6 y TC39 en este episodio de Café con Tech Podcast
• Encuentra más información sobre TC39 en este artículo de Freecodecamp en inglés.

✉️ Únete a Micro-bytes         ? Sígueme en Twitter           ❤️ Apoya mi trabajo                                   newsletter de micro cursos

En este segundo artículo de la serie sobre las distintas herramientas orientadas a la experiencia de desarrollo revisaremos que es npm.

Puedes encontrar el primer artículo: ¿Qué es Linting y ESLint? en este enlace.

¿Qué es npm?

npm es parte esencial de Node.js, el entorno de ejecución de javaScript en el lado del servidor basado en el motor V8 de Google. Es muy seguramente la principal razón del gran éxito de Node permitiendo que cientos de desarrolladores puedan compartir paquetes de software entre distintos proyectos.

En este momento, se han publicado 1,493,231 paquetes por medio de su repositorio con más de 27 mil millones de descargas.

npm responde a las siglas de Node Package Manager o manejador de paquetes de node, es la herramienta por defecto de JavaScript para la tarea de compartir e instalar paquetes.

Tal como reza su documentación, npm se compone de al menos dos partes principales.

• Un repositorio online para publicar paquetes de software libre para ser utilizados en proyectos Node.js
• Una herramienta para la terminal (command line utility) para interactuar con dicho repositorio que te ayuda a la instalación de utilidades, manejo de dependencias y la publicación de paquetes.

Es decir, en tu proyecto basado en Node — que actualmente incluye los proyectos de aplicaciones web que utilizan Node para su proceso de compilación y generación de archivos — utilizarás la utilidad de linea de comandos (cli) para consumir paquetes desde el repositorio online, un listado gigantesco de soluciones de software para distintos problemas disponibles públicamente en npmjs.com y para manejar dependencias, y para ello necesitas un archivo de configuración que le diga a npm que este es un proyecto node.

package.json

Este archivo indica a npm que el directorio en el que se encuentra es en efecto un proyecto o paquete npm. Este archivo contiene la información del paquete incluyendo la descripción del mismo, versión, autor y más importante aún dependencias.

Este archivo es generado automáticamente mediante la ejecución de un script de npm: npm init este script es ejecutao para inicializar un proyecto JavaScript, al ejecutarlo la linea de comandos te hará algunas preguntas para crear el paquete:

 $ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (test)

Esta utilidad te guiará en el proceso de crear un archivo package.json. Solo cubre los items más comunes y trata de adivinar algunos valores por defecto. Revisa npm help init para documentación más a fondo sobre estos campos y que hacen exactamente. Utiliza npm install <pkg> para instalar paquetes y guardarlos como dependencia en el archivo package.json. Presiona ^C en cualquier momento para cancelar

nombre del paquete: (que-es-npm)

Lo primero que verás al ejecutar npm init es un mensaje como el anterior y la primera pregunta: nombre del paquete: (que-es-npm) que entre paréntesis mostrará el nombre del directorio en el que se está ejecutando como nombre por defecto.

Luego veras lo siguiente.

version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
author:
license (MIT):
private:

Puedes simplemente presionar Enter en cada una de estas opciones para dejar vació el campo o guardar el valor por defecto que se muestra entre paréntesis.

• version: Corresponde a la versión de tu proyecto. Lo ideal es mantener este campo actualizado cuando modificas algo en tu proyecto o librería utilizando por ejemplo semver.
• description: Una breve descripción de tu proyecto. Particularmente importante si lo que estás creando es un paquete que publicarás vía npm.
• entry point: Define cuál será el punto de "entrada" de tu proyecto. Esto es, que archivo se ejecutará cuando se importe tu proyecto dentro de otro. Nuevamente, especialmente importante para paquetes de librerías.
• test command: Aquí puedes definir el comando que quieres ejecutar para realizar las pruebas de tu proyecto, este comando se ejecutará cuando escribas npm run test en tu terminal.
• git repository: Define la url del repositorio git en donde este proyecto está alojado, se utiliza para informar a los usuarios de tu paquete el repositorio en donde encontrar el código fuente del proyecto.
• author: El nombre e email de quien creó este proyecto.
• license: Identifica el tipo de licencia de uso de tu proyecto. Permite a las personas saber que y que no está permitido al usar tu código. Puedes encontrar la lista completa de licencias soportadas por este campo aquí.
• private: Es un valor boolean que te permite evitar que tu paquete se publique en el repositorio. Si lo que estás creando es un proyecto personal este valor será true.

Una vez contestadas todas las preguntas y terminado el proceso de inicialización tendrás un nuevo archivo dentro del directorio de tu proyecto: project.json cuyo contenido será similar a este

{
  "name": "que-es-npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1"
  },
  "author": "Matias Hernandez <matiasfh@gmail.com> (<https://matiashernandez.dev>)",
  "license": "ISC"
}

npm scripts

Una importante sección de este archivo es scripts. Esta sección define un listado de propiedades que permiten ejecutar comandos dentro del contexto de tu proyecto incluyendo: comandos de otros paquetes listados como dependencias, scripts personalizados, scripts bash, etc.

Por defecto se crea un script para ejecutar el comando de test que, si no agregaste nada personalizado en el proceso de inicialización sólo tendrá una llamada al comando echo, es decir, ****al ejecutar en la terminal npm run test verás en la consola Error: no test specified

Un ejemplo de producción de esta sección es:

{
		...
		...
    "scripts": {
        "start": "npm run generate && PORT=5000 react-scripts start",
        "build": "react-scripts build",
        "storybook": "start-storybook -p 6006 -h localhost",
        "build-storybook": "build-storybook -s public",
        "test": "jest",
        "test:watch": "jest --watch --silent",
        "cypress": "cypress run",
        "eject": "react-scripts eject",
        "lint": "eslint src/**/*.{js,ts,tsx} --fix",
        "prettier": "npx prettier --write '**/*.tsx'",
        "generate": "graphql-codegen --config codegen.yml"
    },
    ...
		...
}

En este ejemplo podemos ver una lista de 11 scripts que cumplen diferentes tareas tales como:

• start: Primero ejecuta el script generate y luego inicia la aplicación web. react-scripts es una dependencia del paquete y se encuentra disponible dentro del directorio node_modules.
• build: Ejecuta la compilación de la aplicación en modo producción.
• lint: Ejecuta el proceso de linting (revisión de formato y estilo de código) del proyecto (Puedes leer más sobre este proceso en el primer artículo de esta colección)
• test: Ejecuta el script de pruebas basado en el paquete jest que también está instalado como dependencia.
• prettier: Ejecuta prettier mediante el uso de npx. Este es un paquete especial de npm que permite ejecutar binarios dentro del alcance de tu proyecto sin necesidad de especificar dicho comando como script dentro del archivo package.json.

Dependencias y dependencias de desarrollo

La siguiente sección muy relevante dentro del archivo es el listado de dependencias y el listado de dependencias de desarrollo

{
   
    "dependencies": {
        "react": "^17.0.1",
        "react-dom": "^17.0.1",
        "react-hook-form": "6.14.1",
        "react-i18next": "11.8.5",
        "react-query": "^3.5.12",
        "react-router-dom": "5.2.0",
        "react-scripts": "4.0.1",
        "react-table": "^7.6.3",
        "react-virtual": "2.3.2",
        "yup": "0.32.8"
    },
		...
		...
    "devDependencies": {
        "@emotion/jest": "11.1.0",
        "@graphql-codegen/add": "2.0.2",
        "@graphql-codegen/cli": "1.20.1",
        "@graphql-codegen/introspection": "1.18.1",
        "@graphql-codegen/typescript": "1.20.2",
        "@graphql-codegen/typescript-graphql-request": "3.0.1",
        "@graphql-codegen/typescript-operations": "1.17.14",
        "@types/jest": "^26.0.20",
        "@types/node": "^12.0.0",
        "@types/react": "^16.9.53",
        "@types/react-dom": "^16.9.8",
        "@types/react-router-dom": "^5.1.7",
        "cypress": "^6.2.1",
        "eslint": "^7.17.0",
        "eslint-config-prettier": "^7.1.0",
        "eslint-plugin-prettier": "^3.3.1",
        "starwars-names": "1.6.0",
        "stylelint": "13.8.0",
        "stylelint-config-prettier": "8.0.2",
        "stylelint-prettier": "1.1.2",
        "ts-jest": "^26.4.4"
    }
}

Estas secciones, definen que paquetes disponibles en el repositorio de npm son requeridos por tu proyecto indicando también la versión necesaria. La versión mostrada aquí está en formato semver y corresponde al campo versionmencionado antes.

Estas dependencias son instaladas al ejecutar npm install <pkg> --save y en el caso de las dependencias de desarrollo utilizando npm install <pkg> --save-dev.

La diferencia de estos listados es que dependencies está destinado a ser utilizando en producción y devDependenciesdefine paquetes que son necesarios sólo durante el desarrollo de tu proyecto.

Es importante conocer cómo se definen las versiones a utilizar en estas dependencias. Cada una de ellas muestra un número basado en semver en la forma mayor.minor.patch.

• mayor: Representa una versión mayor que genera cambios en la API del producto.
• minor: Representa un valor que aumenta cuando se hacen cambios retro-compatibles.
• patch: Un valor que aumenta cada vez que se hacen reparaciones de errores o mejoras sutiles.

También es posible encontrar algunos símbolos frente a la numeración de la versión, estos son:

• ^: latest minor release. Por ejemplo ^1.0.4 indica que 1.0.4 es la versión más "baja" que se puede instalar pero permite que se instale cualquier versión superior a esa pero que se encuentre dentro de la versión 1.
• ~: latest patch release. Esta es la forma contraria a  ^. Esta especificación  ~1.0.4 puede instalar la versión 1.0.7 si es que esta es la ultima version del patch.

Una vez instalados los paquetes de tus dependencias la información de las versiones instaladas queda almacenada en un archivo llamado package-lock.json

package-lock.json

Este archivo es auto generado por npm install y es una lista descriptiva y exacta de las versiones instaladas durante tu proceso. No esta destinado a ser leído ni manipulado por los desarrolladores, si no, para ser un insumo del proceso de manejo de dependencias.

¿Cómo trabajar con npm?

Lo más usual que harás con npm es la instalación de dependencias, esto se hace mediante npm install para instalar todas las dependencias listadas en el archivo package.json o utilizando npm install <pkg> para instalar algún paquete en particular.

npm install

Este script nativo de npm tiene algunas otras opciones a la hora de hacer la instalación de paquetes.

Por defecto al ejecutar npm install <pkg> la última versión disponible en el repositorio agregando el símbolo ^ a la versión.

Al ejecutar npm install <pkg> el paquete se instalará dentro del directorio node_modules que está dentro de tu proyecto.

Puedes usar algunos parámetros tales como

• -g para indicar que quieres que el paquete se instale globalmente
• --production indica que la ejecución de npm install solo instalará las dependencias listadas en el apartado dependencies dejando de lado las dependencias de desarrollo.

npm audit

npm tiene una miriada de paquetes disponibles lo que es una gran característica indicando lo saludable del ecosistema que es capaz de generar nuevas librerías a gran velocidad, pero también puede ser un problema. npm puede albergar paquetes maliciosos o con problema de seguridad.

La organización trás npm mantiene una lista de agujeros de seguridad y puedes utilizar este comando para revisar tus dependencias.

npm audit te entregará información de las vulnerabilidades encontradas en tus dependencias junto con una breve descripción de como resolverlo indicando la versión que corrige el defecto.

npm publish

En el caso de que tu proyecto sea una librería de software libre que quieres compartir con otros, este comando será el que te permitirá publicar tu paquete en el repositorio, solo necesitas ejecutar:

• npm login para ingresar a tu cuenta de npm
• npm publish para subir tu paquete al repositorio

Ten en cuenta que necesitas tener bien configurados tu entry point y el script de build.

También puedes hacer uso de los scripts del ciclo de vida. Una serie de scripts que se ejecutan en diferentes momentos del proceso de publicación:

• prepare (desde npm@4.0.0): Se ejecuta antes de que el paquete se empaquete (packed) y antes de que se publique. También se ejecuta al correr npm install y después del script prepublishOnly
• prepublishOnly: Se ejecuta antes de que el paquete sea preparado y empaquetado y solo cuando se ejecuta npm publish
• prepack: Se ejecuta antes de empaquetar, es decir antes de npm pack y npm publish
• postpack: Se ejecuta después de que el paquete fuese generado y ubicado en su destino final.

¿Cuándo usar estos scripts?

Cuando necesitas que tu paquete ejecuta alguna acción antes de ser utilizado y que no dependa del sistema operativo en que está siendo instalado, por ejemplo: transpilar tu código Typescript a JavaScript, obtener datos remotos que tu paquete necesita, etc.

¿Qué scripts se ejecutan al publicar un paquete?

Cuando ejecutas npm publish una serie de scripts son ejecutados automáticamente por npm el orden de estos scripts es el siguiente:

• prepublishOnly
• prepare
• prepublish
• publish
• postpublish

Es decir, si necesitas ejecutar algún comando antes de que se publique tu paquete debes configurar el script prepublishOnly ¿Cómo?

{
	"scripts": {
		"prepublishOnly": "compile-my-code src/"
	}
}

Conclusión

npm es la solución que ofrece el ecosistema de JavaScript para manejar dependencias, auditar paquetes y mantener un repositorio de paquetes disponible para todos los usuarios, es la herramienta central de todo proyecto JavaScript sea este backend o frontend.

El sistema de npm se basa en un archivo centralizado que describe los metadatos del proyecto, scripts y dependencias tanto de producción como de desarrollo.

En el mundo del desarrollo de aplicaciones web hay una miríada de herramientas que buscan, no sólo mejorar la experiencia de usuario y la performance de tu aplicación en general, si no también, mejorar la experiencia de desarrollo (DX). Si bien tener tantas herramientas y opciones a disposición puede ser algo bueno para la mejora intrínsica de estas herramientas, es también un problema para muchos que están comenzando en este proceso ya que puede ser muy confuso seguir indicaciones que presumen de cierto grado de conocimiento previo.

Si bien hay muchos "boilerplates" o "plantillas de proyectos" disponibles para cada tipo de framework, el uso de estas herramientas cae dentro de una "caja negra" donde pocas veces se entiende como funcionan cada una de ellas, o el por que las necesito.

En el caótico mundo del desarrollo web, es necesario tener una especie de guía para sobrevivir.

Esta serie de artículos busca cubrir esa area olvidada o perdida (the missing semester) tanto en la educación formal como en los tutoriales disponibles en internet. Obtener conocimiento y proficiencia con las herramientas, enfocándonos en la experiencia de desarrollador.

¿Que herramientas estarán incluídas en la serie?

• npm
• Linting (Eslint, stylelint)
• Babel
• Prettier
• Bundlers (Webpack, Rollup, etc)
• Git

¿Qué es Linting?

Es inevitable tener errores en el código que desarrollas para una aplicación, y todos sabemos que estos errores son malos, algunos causan problemas en la interfaz que generan incomodidad en los usuarios, otros comprometen la seguridad del sistema o simplemente rompen todo y la aplicación deja de funcionar.

Hay un cierto grupo de errores que pueden ser identificados y reparados antes de que tu código llegue a ser ejecutado, estos pueden ser:

• errores de sintaxis
• Código poco intuitivo o dificil de mantener
• Uso de "malas practicas"
• O uso de estlios de codigo inconsistentes.

Estos errores pueden ser incluso más comunes que otros más graves dado a que son menos evidentes.
Capturar errores antes de que tu código se ejecute puede salvarte, no sólo del error en si mismo, si no, también ahorrarte mucho tiempo en la cacería de esos errores.

En la actualidad, se utiliza este término para designar a herramientas que realizan estas tareas de comprobación en cualquier lenguaje de programación. Las herramientas de tipo lint generalmente funcionan realizando un análisis estático del código fuente. - Wikipedia https://es.wikipedia.org/wiki/Lint

En otras palabras, es una herramienta de software que revisa y "observa" tu código en busca de errores que puedan afectar tu código. Algunos "linteres" incluso pueden darte sugerencias de como arreglar el error o incluso arreglarlo ellos mismos.

Las herramientas de linting pertenecen a un grupo de programas conocidos como herramientas de análisis estático , un proceso de revisión de un programa sin ejecutar dicho programa, por lo general la revisión se realiza sobre el código fuente o alguna clase de código objeto. Visto de otra forma es como tener a un revisor de tu pull request pero automatizado y siempre observando lo que escribes.

Un ejemplo de herramienta de "linting", y el que usaremos en este artículo es ESLint.

¿Qué es ESLint?

ESLint es una herramienta de código abierto enfocada en el proceso de "lintig" para javascript (o más correctamente para ECMAScript). ESLint es la herramienta predominante para la tarea de "limpiar" código javascript tanto en el servidor (node.js) como en el navegador.

Dado que javascript es un lenguaje dinámico y de tipado débil, es especialmente fácil caer en errores humanos a la hora de escribir código. ESLint utiliza un sistema de reglas que permiten definir que es y que no es posible dentro del código. ESLint está escrito en Nodejs y es posible instalarlo desde npm.

¿Qué puede hacer ESLint por mi?

Bueno, ESLint es una herramienta de "linting", por lo que te puede ayudar a:

• Mostrarte errores de sintaxis.
• Mostrarte errores cuando no se siguen buenas prácticas.
• Proveer sugerencias para mejorar tu código.
• Mantener un estilo consistente en tu código o reforzar reglas internas de tu propio equipo.

Aquí ESLint es el motor que te ayudará a definir reglas y revisará tu código. ESLint está disponible a travez de [npm](https://www.npmjs.com/package/eslint).

ESLint se compone de al menos 3 partes: el Parser, las Reglas y el Resultado.

Parser

El parseador se encarga de convertir tu código, que es escrito para ser leído por un ser humano, a una representación o abstracción que permite que el computador pueda entender tu código. ESLint convierte tu código a un Árbol de Sintaxis Abstracto o AST (del inglés Abstract Syntax Tree). Es esta representación la utilizada por ESLint para aplicar las diferentes reglas necesarias.

Este árbol es básicamente un gran objeto json que representa cada parte de tu código (existen diferentes tipos de AST generados por diferentes parsers), esta representación es fácil de recorrer y consultar.

ESLint, recorre este árbol visitando cada uno de los nodos, en cada visita, recorre la lista de reglas y aplica las que corresponden al tipo de nodo visitado.

Puedes ver una representación de un AST utilizando https://astexplorer.net

Un ejemplo de AST es

function setCount(v) {
    return v + 1;
}

y el AST correspondiente

{
  "type": "Program",
  "start": 0,
  "end": 41,
  "body": [
    {
      "type": "FunctionDeclaration",
      "start": 0,
      "end": 40,
      "id": {
        "type": "Identifier",
        "start": 9,
        "end": 17,
        "name": "setCount"
      },
      "expression": false,
      "generator": false,
      "async": false,
      "params": [
        {
          "type": "Identifier",
          "start": 18,
          "end": 19,
          "name": "v"
        }
      ],
      "body": {
        "type": "BlockStatement",
        "start": 21,
        "end": 40,
        "body": [
          {
            "type": "ReturnStatement",
            "start": 25,
            "end": 38,
            "argument": {
              "type": "BinaryExpression",
              "start": 32,
              "end": 37,
              "left": {
                "type": "Identifier",
                "start": 32,
                "end": 33,
                "name": "v"
              },
              "operator": "+",
              "right": {
                "type": "Literal",
                "start": 36,
                "end": 37,
                "value": 1,
                "raw": "1"
              }
            }
          }
        ]
      }
    }
  ],
  "sourceType": "module"
}

Las Reglas

El siguiente paso en el proceso es aplicar las reglas. Una regla es una colección de cierta lógica (función) que permite identificar un potencial problema en el código. El resultado de la aplicación de estas reglas puede contener un reporte del error encontrado incluyendo el nodo y otra información que permite arreglar el error.

Estas reglas son aplicadas por medio de un "transformador". El transformador es quien permite que las reglas (funciones) puedan consultar que nodo del AST esta siendo visitado.

Un ejemplo de definición de regla es:

export default function(context) {
  return {
    Identifier(node) {
      if(node.name === 'console'){
        context.report(node, 'Left in log statement');
      } 
    }
  };
};

Esta función es ejecutada cuando el Identificador del nodo es console y reporta que el código contiene el uso de console.log.

El Resultado

Este es e último paso del proceso. Aquí es donde se define cómo se muestran los reportes de las reglas que se "infringieron". Por defecto la ejecución de ESLint será en consola pero los resultados también pueden ser desplegados en tu editor de texto favorito.

¿Cómo comienzo?

La forma más simple de comenzar es primer, tener un proyecto javascript en el que utilizar ESLint.
Creemos entonces un simple proyecto al que agregar ESLInt, comienza por crear un directorio en donde almacenar tu proyecto, puedes hacer todo esto directamente en tu terminal.

mkdir linting

Ahora ingresa en el directorio para comenzar a trabajar

cd linting

Creemos nuestro primer archivo javascript, que para este ejemplo será muy simple

touch app.js

Ahora, agreguemos algo de código en este archivo, ábrelo en tu editor favorito y escribe

const nombre = 'Matias'

const persona = {nombre}

console.log(persona)

const saludar = (fNombre) => {
console.log(`Hola! ¿que tal, ${fNombre}?`);
};
const persona = { nombre: 'Otra persona' }

Es claro a simple vista algunos problemas de formato con este simple código además de un problema de sintaxis.

Ahora inicia este proyecto utilizando npm

npm init

Este comando creará el archivo package.json, archivo que describe la configuración de tu proyecto y la lista de dependencias del mismo.

Ahora con el proyecto javascript preparado agreguemos eslint.

Configurando ESLint

Lo primero es instalar ESLint en nuestro proyecto, para ello volveremos a nuestra terminal y utilizaremos npm para instalar esta dependencia

npm install eslint --save-dev

Utilizamos el argumento  --save-dev para indicarle a npm que queremos guardar esta dependencia para uso de desarrollo. ESLint es un paquete que solo necesitamos durante el proceso de desarrollo y no se necesita para ejecutar tu aplicación.

Una vez instalado,  puede iniciar la configuración al ejecutar

npx eslint --init

este comando ( en particular el argumento--init) es el que activará ESLint en tu proyecto, esto se realiza mediante la creación de un archivo de configuración que vivirá en el directorio principal de tu proyecto.

El proceso de creación de este archivo se ejecutará en la consola y te hará algunas preguntas comenzando por: ¿Cómo te gustaría usar ESLint?

? How would you like to use ESLint? …
  To check syntax only
  To check syntax and find problems
❯ To check syntax, find problems, and enforce code style

Selecciona la última opción "Para revisar sintaxis, encontrar problemas y reforzar el estilo de código".

La siguiente pregunta será:

What type of modules does your project use? …
  JavaScript modules (import/export)
❯ CommonJS (require/exports)
  None of these

En este caso seleccionas CommonJS ya que no usaremos ninguna herramienta externa (bundlers) para manejar los módulos de nuestro proyecto.

La siguiente pregunta será:

? Which framework does your project use? …
  React
  Vue.js
❯ None of these

¿Qué framework usarás? Por ahora seleccionarás "None of these"

Luego te preguntará si usas Typescript o no.

? Does your project use TypeScript? › No / Yes

Seleccionarás No

La siguiente pregunta será sobre el estilo de código que quieres usar: ¿Cómo te gustaría definir un estilo para tu proyecto?

✔ How would you like to define a style for your project? …
❯ Use a popular style guide
  Answer questions about your style
  Inspect your JavaScript file(s)

Selecciona la primera opción: Usar una guía de estilo popular y en la siguiente pregunta selecciona Airbnb

Luego se te preguntará por el tipo de archivo para la configuración cuyas opciones son YAML,Javascript y JSON.

Finalmente verás el mensaje de aviso que se instalarán algunas dependencias extras y la siguiente pregunta

? Would you like to install them now with npm? › No / Yes

¿Quieres instalar las dependencias ahora con npm? Selecciona Yes

Al terminar este proceso podrás notar que un nuevo archivo fue creado en el directorio raíz del proyecto .eslintrc.json (o . js o .yaml dependiendo de lo seleccionado).

Finalmente agreguemos algunas reglas simples en el archivo de configuración. Abre el archivo .eslintrc.js (Si elegiste el formato javascript) y verás lo siguiente:

module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es2021: true,
  },
  extends: [
    'airbnb-base',
  ],
  parserOptions: {
    ecmaVersion: 12,
  },
  rules: {
  },
};

Ahora, agreguemos una nueva guía al arreglo extends y algunas reglas al objeto rules

module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es2021: true,
  },
  extends: [
    'airbnb-base',
    'eslint:recommended',
  ],
  parserOptions: {
    ecmaVersion: 12,
  },
  rules: {
    semi: ['error', 'always'],
    quotes: ['error', 'double'],
  },
};

Aquí agregamos eslint:recommended al arreglo  extends indicando que también usaremos las reglas recomendadas de ESLint. Además agregamos dos nuevas reglas en el objeto rules indicando que utilizar punto y coma semi al final de cada linea de código es requerido y  que se usaran comillas dobles en los strings.

Utilizar ESLint

El uso más simple que puedes darle a ESLint es revisar tu código de forma manual ejecutando un script en la terminal, para esto puedes escribir npx eslint  . --ext .js cada vez o configurar este comando como un script de npm.

Abre el archivo package.json en tu editor de texto favorito y agrega la sección scripts

...
"scripts": {
  ...
  "lint": "eslint .  --ext .js"
  ...
},
...

Con este comando estarás ejecutando ESLint en todo los archivos con extensión js en tu proyecto.

Ahora vuelve a tu terminal y puedes ejecutar

npm run lint

y verás el resultado que mostrará los errores del código que tienes escrito en app.js

/Users/matias/Development/linting/.eslintrc.js
   8:5   error  Strings must use doublequote  quotes
   9:5   error  Strings must use doublequote  quotes
  15:12  error  Strings must use doublequote  quotes
  15:21  error  Strings must use doublequote  quotes
  16:14  error  Strings must use doublequote  quotes
  16:23  error  Strings must use doublequote  quotes

/Users/matias/Development/linting/app.js
  10:7  error  Parsing error: Identifier 'persona' has already been declared

✖ 7 problems (7 errors, 0 warnings)
  6 errors and 0 warnings potentially fixable with the `--fix` option.

Las primeras líneas indican: error: los Strings deben usar dobles comillas

y luego: 10:7 error de Parsing: El identificador persona ya fue declarado.

Podemos intentar que ESLint arregle algunos de estos problemas automáticamente utilizando el argumento --fix. Abre tu archivo package.json para agregar un nuevo script:

"lint-fix": "eslint . --ext .js --fix"

Y ahora en la terminal

npm run lint-fix

Y el resultado será

/Users/matias/Development/linting/app.js
  10:7  error  Parsing error: Identifier 'persona' has already been declared

✖ 1 problem (1 error, 0 warnings)

10:7  error de Parsing: El Identificador persona ya ha sido declarado

Conclusión

El proceso de linting se han convertido en una herramienta básica y necesaria en todo proyecto de software, sobre todo en el mundo del desarrollo web con javascript.

Sus beneficios van más allá de lo que ESLint hace técnicamente ya que ayuda a los desarrolladores a enfoncarse en lo más importante: desarrollar soluciones.
Este tutorial introduce algunas de las cosas que puedes lograr utilizando ESLint y una breve descripción de cómo ESLint funciona.

Si quieres leer más información sobre las reglas que puedes utilizar y cómo personalizar las reglas de ESLint puedes revisar la  documentación.

Otras herramientas de linting que vale la pena conocer.

• JSHint: una alternativa a ESLint
• Stylelint: una herramienta de linting para tu código CSS.
• Awesome ESLint: Una lista de configuraciones, parsers, plugins y otras herramientas para mejorar tu propia configuración de ESLint.

? Sígueme en Twitter           ✉️ Únete al newsletter                    ❤️ Apoya mi trabajo

Closure es un concepto confuso por que su uso es “invisible”.

A diferencia de otros conceptos como funciones, variables u otros. Los closures no son siempre utilizados a conciencia y de forma directa. No dices: Oh aquí usaré un closure como solución.

Pero al mismo tiempo, lo más probable es que ya lo has usado cientos de veces. Aprender closure es más sobre identificar cuando lo estas utilizando que aprender un nuevo concepto en sí.

TLDR;

Tienes una closure cuando una función cualquiera accede a una variable fuera de su contexto.

const valor = 1
function obtenerModulo() {
    let datos = [1,2,3,4,5,6,7,8,9,10,11]
    return datos.filter(item => item % valor === 0)
}

Aqui la función `obtenerModulo` hace uso de `valor`. Pero también la función `item => item % valor === 0` que también puede ser escrita como

function(item){
    return item % valor === 0
}

utiliza el valor de la variable `value` que fue definida fuera de la función.

Las funciones pueden acceder valores fuera de su contexto

Como en el ejemplo anterior, una función puede acceder y utilizar valores que están definidos fuera de su “cuerpo” o contexto, por ejemplo

let count = 1
function contador() {
    console.log(count)
}
contador() // imprime 1
count = 2
contador() // imprime 2

Esto, permite que podamos modificar el valor de la variable `count` desde cualquier parte del módulo y, cuando la función contador sea llamada, sabrá usar el valor actual.

¿Por qué usamos funciones?

Pero, por que utilizamos funciones en nuestros programas?, Ciertamente es posible - dificil, pero posible - escribir un programa sin utilizar funciones definidas por nosotros mismos, entonces ¿por qué creamos funciones propias?

Imagina un trozo de código que hace algo maravilloso , lo que sea, y está compuesto por X número de lineas

/* Mi trozo de codigo maravilloso */

Ahora, supón que debes utilizar este trozo de codigo maravilloso en varias partes de tu programa, ¿Qué harías?.
La opción “natural” es juntar este trozo de código en un conjunto que pueda ser reutilizable, y ese conjunto reutilizable es lo que llamamos función. Las funciones son la mejor forma de reutilizar y compartir código dentro de un programa.

Ahora, puedes utilizar tu función cuantas veces sean y - ignorando algunos casos particulares- llamar tu función N veces es lo mismo que escribir ese trozo de código maravilloso N veces. Es un simple reemplazo.

¿Pero dónde está el closure aquí?

Usando el ejemplo del contador, consideremos ese como el trozo de código maravilloso

let count = 1
function contador() {
    console.log(count)
}
contador() // imprime 1

Ahora, queremos reutilizarlo en muchas partes, por lo que lo "envolveremos" en una función.

function miFuncion() {
    let count = 1
    function contador() {
        console.log(count)
    }
    contador() // imprime 1
}

ahora, que tenemos?

Una función: `contador` que utiliza un valor que fue declarado fuera de ella `count`. Y un valor: `count` que fue declarado en la función `miFuncion` pero que es usado dentro de la función `contador`.

Es decir, tenemos una función que utiliza un valor que fue declarado fuera de su contexto: un closure.

¿Simple no? Ahora, ¿qué pasa cuándo se ejecuta la función `miFuncion`?, ¿qué ocurre con la variable `count` y la función `contador`?
Una vez ejecutada la función padre, las variables y funciones declaradas en su cuerpo “desaparecen” (garbage collector).

Ahora, modifiquemos un poco el ejemplo:

function miFuncion() {
    let count = 1
    function contador() {
        count++
        console.log(count)
    }
   setInterval(contador, 2000)
}
miFuncion()

¿Qué ocurrirá ahora con la variable y función declaradas dentro de `marvel`?
En este ejemplo, le decimos al browser que ejecute `contador` cada 2 segundos. Por lo que el engine de javascript debe mantener una referencia a la función y tambien a la variable que es utilizada por ella. Entonces, incluso una vez que la función padre `miFuncion` termine su ciclo de ejecución, la función `contador` y el valor `count` seguiran “viviendo”.

Este “efecto” de tener closures ocurre por qué javascript soporta la anidación de funciones, o en otras palabras: Las funciones son ciudadanos de primera clase en el lenguaje y pueden ser utilizadas como cualquier otro objeto: anidadas, pasadas como argumento, como valor de retorno, etc.

¿Qué puedo hacer con closures?

Expresión de Función Inmediatamente invocada - Immediately-invoked Function Expression (IIFE)

Es una ténica utilizada mucho en los días de ES5 para implementar el patrón de diseño de “modulo” (antes de que esto fuese soportado nativamente).
La idea es “envolver” tu módulo en una función que es inmediatamente ejecutada

(function(arg1, arg2){
...
...
})(arg1, arg2)

Esto permitía el uso de variables privadas que sólo podían ser utilizadas por el propio módulo dentro de la función, es decir, permitía emular los modificadores de acceso.

const modulo = (function(){
	function metodoPrivado () {
	}
	const valorPrivado = "algo"
	return {
	  get: valorPrivado,
	  set: function(v) { valorPrivador = v }
	}
})()

var x = modulo()
x.get() // "algo"
x.set("Otro valor")
x.get() // "otro valor"
x.valorPrivado //Error

Function Factory

Otro patrón de diseño implementado gracias a los closures es la “Fábrica de Funciones” (Function Factory),  funciones que crean funciones u objetos, por ejemplo, una función que te permite crear objetos usuarios.

const crearUsuario = ({ userName, avatar }) => ({
      id: crearUnID(),
      userName,
      avatar,
      cambiarUserName (userName) {
        this.userName = userName;
        return this;
      },
      cambiarAvatar (url) {
        // ejecuta logica para obtener el avatar desde la url
        const nuevoAvatar = obtenerAvtarDesdeUrl(url)
        this.avatar = nuevoAvatar
        return this
      }
    });
    
        console.log(crearUsuario({ userName: 'Bender', avatar: 'bender.png' }));
    
    {
      "id":"17hakg9a7jas",
      "avatar": "bender.png",
      "userName": "Bender",
      "cambiarUsername": [Function cambiarUsername]
      "cambiarAvatar": [Function cambiarAvatar]
    
    }
    */

Y utilizando este patrón, es posible implementar una idea proviniente de la programación funcional: Currying

Currying

Es un patrón de diseño ( y característica de algunos lenguajes ) en donde una función, es inmediatamente evaluada y retorna una segunda función.
Este patrón permite ejecutar especialización y composición.

Estas funciones “curried” son creadas utilizando closures, definiendo y retornando la función interna del closure.

function multiplicar(a) {

    return function (b) {
        return function (c)  {
            return a * b * c
        }
    }
}
let mc1 = multiplicar(1);
let mc2 = mc1(2);
let res = mc2(3);
console.log(res);

let res2 = multiplicar(1)(2)(3);
console.log(res2);

Este tipo de funciones toman un solo valor o argumento y retornan otra función que también recibe un argumento. Es una aplicación parcial de los argumentos. También es posible reesscribir este ejemplo utilizando ES6.

let multiplicar = (a) => (b) => (c) => {

    return a * b * c;
}

let mc1 = multiplicar(1);
let mc2 = mc1(2);
let res = mc2(3);
console.log(res);

let res2 = multiplicar(1)(2)(3);
console.log(res2);

¿Dónde podemos aplicar el uso de currying?, en composición, digamos que tienes una función que crea elementos html.

function crearElemento(elemento){
    const el = document.createElement(elemento)
    return function(contenido) {
        return el.textNode = contenido
    }
}

const negrita = crearElemento('b')
const italica = createElemento('i')
const contenido = 'Mi contenido'
const miElemento  = negrita(italica(contenido)) // <b><i>Mi contenido</i></b>

Event Listeners

Otro lugar en donde puedes utilizar y aplicar closures es en los manejadores de eventos utilizando React.

Supongamos que estas utilizando una librería de terceros para renderizar los items de tu colección de datos, esta libraría expone un componente llamado `RenderItem` que tiene sólo una prop disponible `onClick`. Esta prop no recibe parámetro alguno y tampoco retorna un valor.

Ahora, en tu particular app, requieres que al hacer click en el item se muestre una alerta con el título del item, pero el evento onClick que tienes dispobile no acepta argumentos, que puedes hacer?
Closures al rescate:

// Esta es el closure
// en es5
function onItemClick(titulo) {
    return function() {
      alert("Click en " + titulo)
    }
}
// en es6
const onItemClick = titulo => () => alert(`Click en ${titulo}`)

return (
  <Contenedor>
{items.map(item => {
return (
   <RenderItem onClick={onItemClick(item.titulo)}>
    <Titulo>{item.titulo}</Titulo>
  </RenderItem>
)
})}
</Contenedor>
)

En este simplificado ejemplo lo que hacemos es crear una función que recibe el titulo que quieres mostrar y retorna otra función que cumple con la definición de la función que RenderItem recibe como prop.

Conclusión

Si bien puedes desarrollar una app sin siquiera saber que estás utilizando closures, el conocer su existencia, definición y uso desbloquea nuevas posibilidades a la hora de crear una solución. Closures es uno de esos conceptos que se complican en entender cuando estás empezando, pero hacer el intento de utilizarlos con conocimiento puede permitirte aumentar tus herramientas y avanzar en tu carrera.

? Sígueme en Twitter           ✉️ Únete al newsletter                    ❤️ Apoya mi trabajo

El 21 de Diciembre se publicó la grabación de una charla en donde Dan Abramov, Lauren Tan, Joseph Savona, y Sebastian Markbåge, explican el razonamiento trás esta característica y algunos casos de uso.

Cabe destacar que esta característica es aún completamente experimental y no tiene documentación más allá del RFC publicado por el equipo.

Estamos compartiendo este trabajo en el espíritu de la transparencia y para obtener opiniones y comentarios de la comunidad de React. Tendremos mucho tiempo para ello, no te sientas precionado de hacerlo ahora mismo.

We are sharing this work in the spirit of transparency and to get initial feedback from the React community. There will be plenty of time for that, so don’t feel like you have to catch up right now!

Entonces ¿de que se trata?

Comencemos por aclarar algunos términos y así diferenciar esta nueva propuesta de algunas técnicas que ya están disponibles hoy en día.

Es similar a server-side rendering (SSR renderizado en el lado del servidor) pero funciona diferente. SSR es tomar un componente React y hacer que el servidor renderice su contenido al recibir una petición generando así un string de HTML que se envía al navegador para que lo muestre, después se carga el javascript necesario y se vuelve al ciclo estándar de una aplicación Client Side Rendering.

Similar a lo que hace Next.js con getInitialProps, los Server Components pueden obtener datos y pasar esa información a los componentes del cliente, sin embargo, a diferencia de esta técnica de SSR, los Server Components son más "dinámicos". Es posible obtener un árbol de componentes desde el servidor e inyectarlo en la aplicación cliente sin perder el estado del cliente.

Otra diferencia es que con SSR, el código javascript genera y renderiza un string HTML en el servidor, creando así la parte visible del sitio web a modo de template HTML. Este template es enviado al cliente junto al código javascript necesario para habilitar interactividad, permitiendo una carga inicial muy veloz, pero con interactividad que puede tomar algo más de tiempo en el proceso de hidratación.

Server Components

La nueva técnica e implementación presentada complementa SSR habilitando el renderizado por medio de una abstracción intermedia sin la necesidad de agregar javascript al bundle inicial de tu aplicación.

Pero ten en cuenta que Server Componentes no buscan ser un reemplazo para SSR, sino más bien, para ser utilizados en conjunto. Utiliza SSR para los componentes del cliente, consiguiendo así una disminución significativa en el tamaño del bundle. Los primeros experimentos del equipo de React pudieron medir una disminución ente 18% y 29%.

[RFC]: If we migrate the above example to a Server Component we can use the exact same code for our feature but avoid sending it to the client - a code savings of over 240K (uncompressed):

¿Será Next.js reemplazado por Server Components?

No. Son implementaciones y soluciones diferentes. La adopción inicial de SC muy probablemente será inicialmente realizada por frameworks como Next y Gatsby.

• El código de SC nunca llega al cliente. Las implementaciones de SSR que utilizando React, el código del componente es enviado al cliente en el bundle aumentando la cantidad de código que el browser necesita parsear y ejecutar.
• SC permiten acceder al backend en cualquier parte del árbol de componentes. Al utilizar soluciones cómo Next.js puedes acceder a datos del backend de forma limitada al utilizar el método getServerProps() que a su vez tiene la limitación de solo poder utilizarse en una página de primer nivel, no puedes obtener datos del servidor desde cualquier otro componente o incluso de algún paquete de npm.
• SC pueden ser re-obtenidos mientras se mantiene el estado del cliente dentro del árbol. Esto es porque el mecanismo de transporte utilizado no es simple HTML, sino más bien un objeto similar a la definición de un node dentro del árbol de  componentes.

¿Quieres saber más?

Te recomiendo ver la charla original, leer el RFC y revisar el demo de la propuesta.

Y recuerda, no necesitas utilizar ni aprender esta propuesta ahora, y probablemente tampoco será pronto, pero si es adecuado mantener esta propuesta en tu visión periférica.

? Sígueme en Twitter             ✉️ Únete al newsletter                  ❤️ Apoya mi trabajo