Al igual que hicimos el año pasado, es hora de mirar atrás y analizar el mundo JavaScript del 2017.

Usando los datos que hemos recopilado, veamos qué proyectos han tenido más peso en 2017 comparando el número de estrellas de GitHub ganadas en los últimos 12 meses y averigüemos cuáles han sido los JavaScript Rising Stars del 2017.


Los siguientes gráficos comparan el número de estrellas añadidas en GitHub durante los últimos 12 meses. Hemos analizado proyectos procedentes de Best of JS, una lista de los proyectos más destacados del mundo web cuidadosamente seleccionados. Si lo deseas, puedes hacer click en cualquier proyecto para conseguir más información.

Categorías

  1. Proyectos más populares del 2017
    Vue.jsReactCreate React AppPuppeteerAxiosVS CodePrettierReact NativeElementElectron
  2. Frameworks Front-end
    Vue.jsReactAngularPreactHyperapp
  3. Frameworks Node.js
    ExpressKoaFastifyGunmicro
  4. Ecosistema React
    Create React AppAnt DesignNext.jsStorybookGatsby
  5. Ecosistema Vue
    ElementiViewVuexWeexNuxt
  6. Móvil
    React NativeWeexIonicQuasarNativeScript
  7. Compiladores JS
    TypeScriptBabelFlowReasonPurescript
  8. Build
    ParcelWebpackGulpRollupPoi
  9. Testing
    JestAVAMochaJasmineTape
  10. Editores
    VS CodeAtomReactideBracketsNuclide
  11. CSS en JavaScript
    Styled ComponentsCSS ModulesPolishedGlamorousEmotion
  12. SSG
    GatsbyHexoReact StaticPhenomicMetalsmith
  13. GraphQL
    GatsbyReact Starter KitApollo clientGraphQLGraphiQL
  14. Conclusión

Proyectos más populares del 2017

1
Vue.js

Vue.js

🖖 A progressive, incrementally-adoptable JavaScript framework for building UI on the web.
+40.0k☆

Tendencias en 2017

3.0k
3.5k
3.9k
3.1k
3.2k
3.1k
3.6k
3.3k
3.6k
3.4k
3.1k
3.0k
E
F
M
A
M
J
J
A
S
O
N
D

Datos de GitHub

Creado
2013-07
Total estrellas
80.7k☆

Links

2
React

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
+27.8k☆
3
Create React App

Create React App

Create React apps with no build configuration.
+22.5k☆
4
Puppeteer

Puppeteer

Headless Chrome Node API
+22.0k☆
5
Axios

Axios

Promise based HTTP client for the browser and node.js
+21.9k☆
6
VS Code

VS Code

Visual Studio Code
+20.2k☆
7
Prettier

Prettier

Prettier is an opinionated code formatter.
+17.7k☆
8
React Native

React Native

A framework for building native apps with React.
+15.6k☆
9
Element

Element

A Vue.js 2.0 UI Toolkit for Web
+14.9k☆
10
Electron

Electron

Build cross platform desktop apps with JavaScript, HTML, and CSS
+14.8k☆

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:
  • 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.

Frameworks Front-end

1
Vue.js

Vue.js

🖖 A progressive, incrementally-adoptable JavaScript framework for building UI on the web.
+40.0k☆
2
React

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
+27.8k☆
3
Angular

Angular

One framework. Mobile & desktop.
+12.2k☆
4
Preact

Preact

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
+10.4k☆
5
Hyperapp

Hyperapp

1 KB JavaScript library for building web applications.
+8.1k☆

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!.

Frameworks Node.js

1
Express

Express

Fast, unopinionated, minimalist web framework for node.
+6.7k☆
2
Koa

Koa

Expressive middleware for node.js using ES2017 async functions
+5.8k☆
3
Fastify

Fastify

Fast and low overhead web framework, for Node.js
+5.8k☆
4
Gun

Gun

A realtime, decentralized, offline-first, graph database engine.
+3.2k☆
5
micro

micro

Asynchronous HTTP microservices
+3.2k☆

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.

Ecosistema React

1
Create React App

Create React App

Create React apps with no build configuration.
+22.5k☆
2
Ant Design

Ant Design

🐜 A UI Design Language
+13.3k☆
3
Next.js

Next.js

Framework for server-rendered or statically-exported React apps
+12.7k☆
4
Storybook

Storybook

Interactive UI component dev & test: React, React Native, Vue, Angular
+9.7k☆
5
Gatsby

Gatsby

⚛️📄🚀 Blazing fast static site generator for React
+9.7k☆

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").

Ecosistema Vue

1
Element

Element

A Vue.js 2.0 UI Toolkit for Web
+14.9k☆
2
iView

iView

A high quality UI Toolkit built on Vue.js 2.0
+9.5k☆
3
Vuex

Vuex

🗃️ Centralized State Management for Vue.js.
+7.2k☆
4
Weex

Weex

A framework for building Mobile cross-platform UI.
+6.5k☆
5
Nuxt

Nuxt

Versatile Vue.js Framework
+6.3k☆
6
Vuetify

Vuetify

Material Component Framework for Vue.js 2
+6.3k☆
7
Mint UI

Mint UI

Mobile UI elements for Vue.js
+5.5k☆
8
vux

vux

Mobile UI Components based on Vue & WeUI
+4.6k☆
9
vue-router

vue-router

🚦 The official router for Vue.js.
+4.6k☆
10
Vue material

Vue material

Material design for Vue.js
+3.7k☆

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?

Guest Writer evan

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.

Móvil

1
React Native

React Native

A framework for building native apps with React.
+15.6k☆
2
Weex

Weex

A framework for building Mobile cross-platform UI.
+6.5k☆
3
Ionic

Ionic

Build amazing native and progressive web apps with open web technologies. One app running on everyth
+5.5k☆
4
Quasar

Quasar

Quasar Framework
+3.7k☆
5
NativeScript

NativeScript

NativeScript is an open source framework for building truly native mobile apps with JavaScript. Use
+2.9k☆

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":

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!

Compiladores JS

1
TypeScript

TypeScript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
+11.6k☆
2
Babel

Babel

:tropical_fish: Babel is a compiler for writing next generation JavaScript.
+5.7k☆
3
Flow

Flow

Adds static typing to JavaScript to improve developer productivity and code quality.
+5.1k☆
4
Reason

Reason

Simple, fast & type safe code that leverages the JavaScript & OCaml ecosystems
+2.1k☆
5
Purescript

Purescript

A strongly-typed language that compiles to Javascript
+1.2k☆

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.

Loading
Loading
Loading
Loading
Loading
Loading

Conclusión

Esperamos que hayas disfrutado de esta síntesis sobre el universo JavaScript en el 2017.

Los números nos han mostrado que Vue.js es de nuevo el ganador del año y que su éxito no parece detenerse.

El ecosistema React continúa creciendo después de haber solventado los problemas relacionados con su licencia.

Pero si tenemos que decantarnos por un proyecto entre los 2017 Rising Stars es Prettier. Es una maravilla poder escribir código sin tener que preocuparnos por el formateo de éste.

Si deseas tener un enfoque más cualitativo sobre las últimas tendencias en el universo JavaScript, no dudes en visitar State of JavaScript 2017 survey, donde recopilamos y analizamos respuestas de más de 23.000 desarrolladores.

Así que, mirando al futuro, ¿qué proyectos piensas que serán los próximos JavaScript Rising Stars del 2018?

  • ¿Un nuevo framework basado en GraphQL?
  • ¿Una nueva librería que se aproveche del estándar WebAssembly para crear una experiencia única en el navegador?

¡Muchas gracias por tu atención! no dudes en compartir este artículo o contactarnos en GitHub si quieres contarnos qué opinas...¡nos vemos el año que viene!


Spanish version

Authors

Sacha Greif

Author of Discover Meteor and creator of Vulcan, a React+GraphQL open-source framework.

Available Translations

English

中文

日本語

Français

Indonesia