Los mejores proyectos JavaScript del 2017

Resumen

En esta sección encontraremos los proyectos más populares del año, independientemente de su categoría.

Vue.js golpea de nuevo

Una vez más, Vue.js vuelve a ser el proyecto más popular del año, con más de 40.000 estrellas en GitHub ganadas durante 2017.

Muchas más de las 26.000 estrellas que consiguió en 2016 y además se distancia de su competidor más cercano (React).

Pero, ¿qué es lo que hace a Vue.js tan especial?

• Su curva de aprendizaje es pequeña, con un enfoque orientado a componentes parecido al de React pero con una sintaxis más sencilla.
• Su ecosistema está bien definido, incluyendo soluciones para tareas como:
  • routing: vue-router
  • control del estado de la aplicación: Vuex
• El concepto de componente en un solo fichero .vue que incluye plantilla, lógica y estilos, siendo además algo opcional si no te convence la idea.
• Laravel, uno de los frameworks PHP más populares, lo usa por defecto como su motor en la vista.
• No está respaldado por una gran empresa como Facebook o Google, sin embargo, está mantenido por Evan You como proyecto open-source patrocinado a través de crowd-sourcing.

Vue.js es muy popular entre desarrolladores procedentes de China. Es usado por la mayor plataforma e-commerce China (Alibaba) y también por empresas como GitLab o Adobe.

React, ¡de nuevo en el segundo puesto!

Al igual que en 2016, React es el número 2, con más de 27.000 estrellas conseguidas en GitHub (recalcar que hablamos de estrellas conseguidas a lo largo del año, no del número total de estrellas).

Create React App, el tercero en la lista, es la forma recomendada de empezar un proyecto nuevo con React, su éxito ha quitado popularidad a muchas de las React boilerplates, anteriormente muy extendidas.

Dan Abramov (el creador de Redux, ahora trabajando en Facebook) hizo un buen trabajo, encontrando el equilibrio perfecto entre simplicidad y utilidad. Por ejemplo, no se implementa ninguna solución sofisticada para el estilo (simplemente CSS plano) y no hay server-side rendering por defecto, pero todo el build está preconfigurado y listo para empezar, ayudando a tener una mejor experiencia de desarrollo.

Axios

La librería Axios es el cliente HTTP más usado.

Funciona tanto en el lado front-end (llamadas AJAX desde el cliente) como en el lado servidor (llamadas HTTP en un entorno Node.js).

Su éxito debe estar relacionado con Vue.js, ya que muchos tutoriales sobre éste utilizan Axios para hacer llamadas a APIs externas mediante HTTP.

Puppeteer

Puppeteer es una de las historias más interesantes del año. Creado por el equipo de Google Chrome, es una librería Node que implementa lo llamado headless browser, un Chrome o Chromium que se ejecuta en background y que es controlado por código.

Este puede ser usado para cosas como:

• Automatizar tests para UI de aplicaciones web en navegadores reales.
• Crear snapshots de páginas web para hacer server-side rendering.
• Generar ficheros PDF usando la funcionalidad de Google Chrome para guardar páginas como PDF.

En la categoría "framework front-end", se ha librado una larga batalla que parece que se va apaciguando, con 3 importantes actores dominando el juego.

Los 3 grandes: Vue, React y Angular

No es ninguna sorpresa que los 3 frameworks destacados sean Vue.js, React y Angular.

Normalmente son llamados frameworks, sin embargo, para ser más exactos el único framework es Angular, Vue.js y React deberían ser llamados librerías.

Anteriormente hemos hablado sobre el éxito de Vue.js.

Por otro lado, el ecosistema de React continúa siendo mucho más fragmentado, dejando al desarrollador mayor libertad para crear una solución "a la carta", teniendo la necesidad de hacerse preguntas sobre:

• Routing entre páginas.
• Acceso a API remotas.
• Cómo controlar el estado de la aplicación.

En cambio, el ecosistema de Angular está más controlado, más estable. Hay un Angular Way para trabajar.

Probablemente, es por esto que Angular tiene una imagen más "corporativa". Esta imagen ha sido acentuada con el uso de tipado estático con TypeScript, lo cual atrae la atención de desarrolladores back-end familiarizados con lenguajes como C# o Java.

Menos es más

Detrás de estos tres colosos, es interesante destacar que Preact ocupa el cuarto puesto. Preact es una alternativa más ligera a React: misma API, pero en menos de 3KB.

De la misma manera, otros aspirantes en esta categoría, se centran en reducir su peso al máximo para conseguir un mejor rendimiento en el navegador y así intentar diferenciarse de los 3 ganadores.

Un buen ejemplo de esta consigna es Hyperapp, un proyecto que ha sido muy popular durante las últimas semanas del año. Este mezcla un enfoque funcional, la sintaxis JSX de React y un control del estado de la aplicación inspirado en Redux... ¡en menos de 1KB!.

Como bien sabemos, JavaScript no está limitado a solo crear la parte front-end de nuestras aplicaciones web. Cada vez es más usado en el back-end y Mikeal Rogers, un influyente miembro de la comunidad node.js, predice que Node.js Will Overtake Java Within a Year ("Node.js alcanzará a Java en un año").

A diferencia de otros lenguajes que a lo largo de los años se han ido acogiendo a determinados estándares (Ruby on Rails para Ruby, Django para Python o Laravel para PHP), no hay una forma estándar o arquitectura recomendada cuando queremos crear un servidor node.js.

A pesar de su edad, Express no solo fue el framework node.js más popular en 2017, sino que además es usado como esqueleto de muchos otros frameworks o CMS, incluyendo Feathers, Keystone o Nest.

A la vista está que el enfoque minimalista de Express, encaja perfectamente con la tendencia de micro-servicios, que promueve la creación de pequeñas aplicaciones desacopladas en contraposición de una única aplicación monolítica.

Comparando con el año pasado, 3 recién llegados se han unido al TOP 10 de frameworks node.js:

• Fastify, creado como un framework web de propósito general, inspirado en Hapi, es apropiado para construir veloces JSON HTTP APIs.
• Server.js intenta ser una experiencia del tipo: todo funciona sin apenas configuración.
• Nest implementa una arquitectura que resulta familiar entre los desarrolladores de Angular, hecha de módulos y controladores, escrito en TypeScript.

React, siendo una librería dedicada a la parte visual de la aplicación, abre camino a un completo ecosistema que está creciendo muy rápido.

En 2016, Create React App mitigó la dificultad inicial de crear una aplicación React, proporcionando una serie de preajustes, permitiendo al desarrollador centrarse en el código y no en configuraciones. Facebook publica nuevas versiones frecuentemente, Create React App ha sido el proyecto más popular con diferencia dentro del ecosistema de React en 2017.

Como ejemplo de su éxito, podemos mencionar StackBlitz, un IDE online que permite ejecutar aplicaciones creadas con Create React App directamente en el navegador en solo unos segundos.

Pero aunque Create React App es normalmente considerado el "starter kit" por excelencia para React, puede que nuestras necesidades requieran funcionalidades más específicas preconfiguradas, en este escenario tenemos a React boilerplate, uno de los proyectos más populares en esta categoría, proporcionando funcionalidades como integración con GraphQL.

Ant Design, Ant Design Pro y Material UI proporcionan un conjunto de componentes React con estilo predeterminado, ayudando a crear aplicaciones web React sin centrarnos en el estilo.

En el puesto número 10 encontramos a Recompose, su popularidad es resultado de la pasión de muchos desarrolladores por el enfoque "funcional" de React, esta librería proporciona un conjunto de herramientas para ir en esta dirección, como dicen en su web: "Think of it like lodash for React" ("consideralo el lodash para React").

Invitado especial: Evan You

Por mucho que admiremos a Vue.js, debemos admitir que no estamos muy familiarizados con su ecosistema.

Por esta razón, buscamos a un experto para que nos diera su opinión sobre las estadísticas de este año ¿y quién mejor que el propio creador de Vue.js?

Con la creciente popularidad de Vue, muchos de los proyectos que componen su ecosistema han experimentado un rápido crecimiento también en 2017.

Element y iView son los dos kits de componentes más populares, ambos centrados en agilizar el desarrollo de UI de escritorio. Por otro lado Mint UI y vux son los más famosos en UI móvil.

Vuetify es un framework que provee componentes Material Design tanto para aplicaciones web móvil como de escritorio y es probablemente el más rico en funcionalidades para server-side rendering, con soporte para plantillas PWA y CLI. También tenemos Vue material que se centra en proporcionar un conjunto de componentes que se adhieren a la especificación Material Design.

Nuxt es un framework construido sobre Vue que facilita la creación de aplicaciones con server-rendering. Además es muy versátil, permitiendo reusar el mismo código tanto para crear una SPA como para un sitio estático.

Weex es un framework que permite al usuario crear aplicaciones móviles nativas, usando sintaxis y API similares a la de Vue. Ha sido desarrollado por Alibaba y usado en producción en algunas de las aplicaciones móviles con más tráfico a nivel mundial, poniendo mucha atención en el rendimiento.

La versatilidad de JavaScript nos permite además crear aplicaciones móviles, pudiendo compartir componentes creados para la web con sistemas nativos móviles.

Dentro de esta categoría encontramos de nuevo a los 3 principales actores de los "frameworks front-end":

• React con React Native
• Vue con Weex y Quasar
• Angular con Ionic y NativeScript

Al igual que en 2016, React Native es la solución más popular, basada en JavaScript, nos permite construir aplicaciones para plataformas iOS, Android y Windows.

Como se resalta en este vídeo Cross platform apps with React Native, la promesa: "Write Once, Run Everywhere" ¡se hace realidad!

Aquí hablaremos sobre lenguajes que compilan código JavaScript.

Puede que necesites un compilador en tu proceso de build por dos razones:

• Si quieres utilizar todas las funcionalidades de la última versión de JavaScript (ES7), manteniendo tu código compatible con la máxima variedad de navegadores. Esto ha ayudado al éxito de Babel, del que dependen muchos proyectos.
• Si deseas incluir nuevas funcionalidades al lenguaje como "type checking".

Una de las cuestiones más populares que suele dividir a desarrolladores es: ¿tipado o no tipado?

JavaScript tiene tipado dinámico pero no estático. Muchos desarrolladores prefieren el fuerte tipado en su código, especialmente en proyectos grandes, para hacerlo más robusto y fácil de leer/entender.

Así que, si eres de los que necesita tipado, los 2 principales contendientes son: TypeScript de Microsoft y Flow de Facebook (usado en sus principales proyectos: React, React Native, Jest...).

Echa un vistazo a este artículo de James Kyle para conocer sus diferencias: A Comparison Between Adopting Flow or TypeScript.

Es probablemente una de las mayores sorpresas del año, la herramienta de building más popular es Parcel, un nuevo proyecto que ha reunido 14.000 estrellas desde que fue lanzado en GitHub el pasado agosto.

Parcel ofrece todo tipo de herramientas para el desarrollo web actual y una característica clave: ¡configuración cero!

Esta es la mayor diferencia con Webpack, que depende de todo un ecosistema de plugins llamados "loaders".

Pero no malinterpretemos los números, Webpack continúa siento el bundler más popular para aplicaciones modernas, con un total de 35.000 estrellas en GitHub y más de 500 colaboradores.

Muchos proyectos lo usan por debajo, incluyendo Create React App y Gatsby, 2 de los proyectos más populares del año.

Webpack continúa evolucionando, la versión 2 permite implementar fácilmente funcionalidades tales como "code splitting", mediante imports dinámicos.

Mientras Webpack y Parcel se centran en el proceso de build de aplicaciones web, Rollup lo hace en librerías, enfocándose en el rendimiento y aprovechándose de los módulos ES6.

Rollup es usado en librerías muy importantes, merece la pena mencionar que el equipo de React ha migrado su sistema de build de Browserify a Rollup en 2017.

Desde el blog de React

Rollup is a perfect fit for libraries like React that can be pre-built and then integrated into apps.

Poi tiene la misma meta que Parcel: una herramienta para el build de aplicaciones web modernas, pero su alcance está limitado a proyectos de React, Preact y Vue.js.

Como predijimos el año pasado (¡la primera vez que predecimos algo que se cumple!), Jest se ha convertido en el framework más popular del 2017.

Inicialmente fue diseñado por Facebook con el fin de crear tests para React, pero su evolución ha sido tal durante los últimos meses (¡ya van por la versión 22!) que actualmente puede ser usado para hacer tests tanto en el front-end como en el back-end.

Jest destaca en los siguiente puntos:

• No requiere configuración inicial, normalmente los valores por defecto se ajustan a las necesidades más comunes.
• Buena experiencia desde el punto de vista del desarrollador (detección avanzada de cambios en los ficheros, buen reporte de errores...).
• Sintaxis similar a la de Mocha, es una ventaja ya que muchos desarrolladores ya están familiarizados con describe o it por ejemplo.
• No necesita de ninguna otra librería, contiene todo lo necesario para realizar tus tests.
• Implementa un modo "snapshot" que registra automáticamente la respuesta esperada para futuros tests.

AVA, el número 1 del año pasado, continúa siendo muy popular. Creado por Sindre Sorhus y usado por él mismo en todos sus extraordinarios proyectos.

Comparándolo con Jest, este se centra en la velocidad con la que se ejecutan los tests (haciéndolo en paralelo). Es más ligero y cercano a los estándares, con una sintaxis semejante a la de frameworks como Tape.

Aquí hablaremos de editores de texto pertenecientes al mundo del open source y creados con tecnologías web (¡lo sentimos por los usuarios de Sublime!).

En 2016, VS Code y Atom respaldados respectivamente por Microsoft y GitHub estuvieron realmente cerca en la cima de esta categoría.

Ambos continúan liderando en 2017, sin embargo, VS Code ha tomado la delantera sobre su rival.

Cada mes, una nueva versión de VS Code es publicada, incluyendo nuevas funcionalidades y cuidando el impacto en el rendimiento.

Por defecto, sin necesidad de instalar nada adicionalmente, contiene un gran repertorio de herramientas:

• Integración con Git
• Funciones de autocompletado: Sintaxis JavaScript, rutas de ficheros al usar require o import, nombre de paquetes NPM...
• Sintaxis de React

Y si además añadimos Prettier a la fórmula, invitando al editor a formatear nuestros ficheros cada vez que guardemos, tendremos la perfecta combinación para disfrutar del ¡máximo confort!

No hay consenso sobre cuál es la mejor manera para dar estilo a nuestros componentes de React.

Puedes disponer de componentes predefinidos usando Material UI o Ant Design si no necesitas mucha personalización.

Si quieres tener mayor flexibilidad, puedes hacerlo a la vieja usanza, usando estilos CSS globales con Bootstrap or Bulma y asignando className a tus componentes, pero de este modo no estarán completamente encapsulados, teniendo el estilo controlado externamente.

Para abordar esta cuestión, ha aparecido el concepto "CSS dentro de JavaScript".

La idea es sencilla: con React manejamos tanto la lógica como la plantilla del componente usando JavaScript. ¿Por qué no ir un poco más allá y encapsular los estilos dentro de nuestros componentes usando JavaScript?

Styled Components ha sido de lejos el proyecto más popular del año en esta categoría. Permite incluir CSS dentro de nuestros componentes React usando tagged template literals, una funcionalidad añadida recientemente a JavaScript.

CSS Modules, número 2 en esta categoría, adopta un enfoque híbrido. Permite a los desarrolladores escribir en una gama de lenguajes a su elección (CSS, Sass, Less, Stylus), usando ficheros ubicados junto a los componentes relacionados e importados en estos.

Mark Dalgleish, uno de los autores de CSS Modules, escribió uno de los artículos más interesantes sobre el enfoque "CSS-en-JavaScript": A Unified Styling Language. El artículo es muy recomendable para gente que se siente un poco escéptica en relación a esta nueva técnica.

Los generadores de páginas estáticas, también conocidos como "SSG" (Static site generators), son herramientas que generan ficheros .html, .css y JavaScript preparados para ser desplegados en cualquier servidor web sin preocuparse de configurar una base de datos. La páginas estáticas son rápidas, robustas y fáciles de mantener.

Ocupando el segundo puesto en 2016, Gatsby lidera la lista en 2017 con nuevas funcionalidades para optimizar tu web estática.

Gatsby usa React en su UI y GraphQL para recopilar su contenido en tiempo de compilación.

Es respaldado por una gran comunidad e incluso la propia página oficial de React ha sido creada con Gatsby.

React Static es un recién llegado en esta categoría, que pretende ser una alternativa más ligera a Gatsby, centrándose en rendimiento y simplicidad, inspirado por Create React App.

Merece la pena mencionar que tanto Next.js como Nuxt también pueden ser usados como SSG.