Los mejores proyectos JavaScript del 2017

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 JavaScript, 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.

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☆
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
2
React

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
+27.8k☆
2.0k
2.0k
2.6k
2.3k
2.3k
2.0k
2.6k
2.2k
2.5k
2.8k
2.5k
2.2k
E
F
M
A
M
J
J
A
S
O
N
D
3
Create React App

Create React App

Create React apps with no build configuration.
+22.5k☆
2.1k
1.8k
2.3k
1.8k
2.2k
1.8k
1.9k
2.3k
1.5k
1.7k
1.7k
1.5k
E
F
M
A
M
J
J
A
S
O
N
D
4
Puppeteer

Puppeteer

Headless Chrome Node API
+22.0k☆
3.9k
2.9k
3.0k
2.2k
1.9k
E
F
M
A
M
J
J
A
S
O
N
D
5
Axios

Axios

Promise based HTTP client for the browser and node.js
+21.9k☆
1.5k
1.7k
2.2k
2.0k
1.9k
1.8k
1.9k
1.9k
1.7k
1.7k
1.9k
1.7k
E
F
M
A
M
J
J
A
S
O
N
D
6
VS Code

VS Code

Visual Studio Code
+20.2k☆
897
1.4k
1.8k
1.7k
1.5k
1.3k
1.4k
1.6k
1.6k
2.5k
2.6k
1.8k
E
F
M
A
M
J
J
A
S
O
N
D
7
Prettier

Prettier

Prettier is an opinionated code formatter.
+17.7k☆
114
1.1k
1.3k
2.6k
1.0k
1.8k
1.0k
1.3k
721
1.4k
956
1.5k
E
F
M
A
M
J
J
A
S
O
N
D
8
React Native

React Native

A framework for building native apps with React.
+15.6k☆
1.2k
1.3k
1.6k
1.3k
1.3k
1.3k
1.3k
1.2k
1.1k
1.2k
1.3k
1.2k
E
F
M
A
M
J
J
A
S
O
N
D
9
Element

Element

A Vue.js 2.0 UI Toolkit for Web
+14.9k☆
1.4k
1.2k
1.8k
1.2k
1.1k
1.0k
1.1k
1.1k
1.3k
1.4k
1.3k
1.1k
E
F
M
A
M
J
J
A
S
O
N
D
10
Electron

Electron

Build cross platform desktop apps with JavaScript, HTML, and CSS
+14.8k☆
1.3k
1.2k
1.4k
1.3k
1.3k
1.1k
1.2k
1.2k
1.1k
1.3k
1.2k
1.2k
E
F
M
A
M
J
J
A
S
O
N
D

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☆
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
2
React

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
+27.8k☆
2.0k
2.0k
2.6k
2.3k
2.3k
2.0k
2.6k
2.2k
2.5k
2.8k
2.5k
2.2k
E
F
M
A
M
J
J
A
S
O
N
D
3
Angular

Angular

One framework. Mobile & desktop.
+12.2k☆
827
949
1.4k
1.0k
884
911
983
989
925
1.1k
1.2k
930
E
F
M
A
M
J
J
A
S
O
N
D
4
Preact

Preact

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
+10.4k☆
779
498
575
634
829
920
729
2.0k
1.9k
545
401
532
E
F
M
A
M
J
J
A
S
O
N
D
5
Hyperapp

Hyperapp

1 KB JavaScript library for building web applications.
+8.1k☆
1.2k
779
148
113
2.1k
671
321
746
333
189
1.5k
E
F
M
A
M
J
J
A
S
O
N
D

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☆
542
586
613
587
583
552
512
525
485
610
560
524
E
F
M
A
M
J
J
A
S
O
N
D
2
Koa

Koa

Expressive middleware for node.js using ES2017 async functions
+5.8k☆
422
510
609
486
479
489
421
517
465
441
481
460
E
F
M
A
M
J
J
A
S
O
N
D
3
Fastify

Fastify

Fast and low overhead web framework, for Node.js
+5.8k☆
109
15
87
56
17
91
99
60
2.1k
2.2k
611
342
E
F
M
A
M
J
J
A
S
O
N
D
4
Gun

Gun

A realtime, decentralized, offline-first, graph database engine.
+3.2k☆
181
234
128
106
223
1.3k
162
183
87
128
198
184
E
F
M
A
M
J
J
A
S
O
N
D
5
micro

micro

Asynchronous HTTP microservices
+3.2k☆
434
277
272
252
273
177
244
419
230
198
223
157
E
F
M
A
M
J
J
A
S
O
N
D

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.1k
1.8k
2.3k
1.8k
2.2k
1.8k
1.9k
2.3k
1.5k
1.7k
1.7k
1.5k
E
F
M
A
M
J
J
A
S
O
N
D
2
Ant Design

Ant Design

🐜 A UI Design Language
+13.3k☆
936
1.1k
971
910
928
941
1.1k
887
1.2k
1.3k
1.6k
E
F
M
A
M
J
J
A
S
O
N
D
3
Next.js

Next.js

Framework for server-rendered or statically-exported React apps
+12.7k☆
893
664
2.1k
1.3k
1.2k
745
1.2k
856
697
1.2k
864
960
E
F
M
A
M
J
J
A
S
O
N
D
4
Storybook

Storybook

Interactive UI component dev & test: React, React Native, Vue, Angular
+9.7k☆
467
429
666
627
807
940
704
1.0k
671
837
1.3k
1.2k
E
F
M
A
M
J
J
A
S
O
N
D
5
Gatsby

Gatsby

⚛️📄🚀 Blazing fast static site generator for React
+9.7k☆
717
481
508
438
573
505
2.1k
664
698
1.1k
796
1.2k
E
F
M
A
M
J
J
A
S
O
N
D

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☆
1.4k
1.2k
1.8k
1.2k
1.1k
1.0k
1.1k
1.1k
1.3k
1.4k
1.3k
1.1k
E
F
M
A
M
J
J
A
S
O
N
D
2
iView

iView

A high quality UI Toolkit built on Vue.js 2.0
+9.5k☆
351
613
485
566
929
626
576
1.3k
788
585
E
F
M
A
M
J
J
A
S
O
N
D
3
Vuex

Vuex

🗃️ Centralized State Management for Vue.js.
+7.2k☆
547
597
713
632
588
579
553
582
600
569
638
555
E
F
M
A
M
J
J
A
S
O
N
D
4
Weex

Weex

A framework for building Mobile cross-platform UI.
+6.5k☆
26
116
1.4k
839
764
668
550
563
608
538
456
E
F
M
A
M
J
J
A
S
O
N
D
5
Nuxt

Nuxt

Versatile Vue.js Framework
+6.3k☆
164
354
625
515
537
481
592
732
532
606
635
498
E
F
M
A
M
J
J
A
S
O
N
D
6
Vuetify

Vuetify

Material Component Framework for Vue.js 2
+6.3k☆
322
191
363
385
402
360
569
554
1.1k
777
615
585
E
F
M
A
M
J
J
A
S
O
N
D
7
Mint UI

Mint UI

Mobile UI elements for Vue.js
+5.5k☆
116
E
F
M
A
M
J
J
A
S
O
N
D
8
vux

vux

Mobile UI Components based on Vue & WeUI
+4.6k☆
306
382
510
392
361
383
394
399
373
311
409
426
E
F
M
A
M
J
J
A
S
O
N
D
9
vue-router

vue-router

🚦 The official router for Vue.js.
+4.6k☆
408
400
460
411
396
407
370
352
374
403
351
313
E
F
M
A
M
J
J
A
S
O
N
D
10
Vue material

Vue material

Material design for Vue.js
+3.7k☆
328
405
449
320
307
304
303
293
251
273
245
234
E
F
M
A
M
J
J
A
S
O
N
D

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.

Móvil

1
React Native

React Native

A framework for building native apps with React.
+15.6k☆
1.2k
1.3k
1.6k
1.3k
1.3k
1.3k
1.3k
1.2k
1.1k
1.2k
1.3k
1.2k
E
F
M
A
M
J
J
A
S
O
N
D
2
Weex

Weex

A framework for building Mobile cross-platform UI.
+6.5k☆
26
116
1.4k
839
764
668
550
563
608
538
456
E
F
M
A
M
J
J
A
S
O
N
D
3
Ionic

Ionic

Build amazing native and progressive web apps with open web technologies. One app running on everyth
+5.5k☆
500
443
515
530
509
437
439
419
421
465
510
311
E
F
M
A
M
J
J
A
S
O
N
D
4
Quasar

Quasar

Quasar Framework
+3.7k☆
17
297
341
244
314
266
298
397
360
343
301
331
E
F
M
A
M
J
J
A
S
O
N
D
5
NativeScript

NativeScript

NativeScript is an open source framework for building truly native mobile apps with JavaScript. Use
+2.9k☆
241
224
245
238
255
224
217
211
299
280
271
233
E
F
M
A
M
J
J
A
S
O
N
D

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☆
738
855
972
1.1k
928
936
976
1.0k
818
1.2k
1.1k
992
E
F
M
A
M
J
J
A
S
O
N
D
2
Babel

Babel

Babel is a compiler for writing next generation JavaScript.
+5.7k☆
390
382
447
395
361
336
371
412
397
564
1.1k
587
E
F
M
A
M
J
J
A
S
O
N
D
3
Flow

Flow

Adds static typing to JavaScript to improve developer productivity and code quality.
+5.1k☆
335
303
505
577
484
447
381
420
372
433
392
417
E
F
M
A
M
J
J
A
S
O
N
D
4
Reason

Reason

Simple, fast & type safe code that leverages the JavaScript & OCaml ecosystems
+2.1k☆
186
79
186
143
115
85
72
151
284
266
201
395
E
F
M
A
M
J
J
A
S
O
N
D
5
Purescript

Purescript

A strongly-typed language that compiles to Javascript
+1.2k☆
123
77
96
101
63
96
92
106
99
121
123
108
E
F
M
A
M
J
J
A
S
O
N
D

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.

Build

1
Parcel

Parcel

📦🚀 Blazing fast, zero configuration web application bundler
+14.0k☆
1
1
13.9k
E
F
M
A
M
J
J
A
S
O
N
D
2
Webpack

Webpack

A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting a
+13.1k☆
1.4k
1.2k
1.2k
1.1k
1.1k
1.2k
1.1k
995
714
1.0k
1.0k
1.0k
E
F
M
A
M
J
J
A
S
O
N
D
3
Gulp

Gulp

The streaming build system
+3.6k☆
344
313
376
391
303
254
291
302
237
286
270
228
E
F
M
A
M
J
J
A
S
O
N
D
4
Rollup

Rollup

Next-generation ES6 module bundler
+3.5k☆
338
267
270
498
288
289
254
260
200
203
297
362
E
F
M
A
M
J
J
A
S
O
N
D
5
Poi

Poi

Delightful web development.
+2.7k☆
127
132
94
129
82
78
54
165
178
200
1.3k
E
F
M
A
M
J
J
A
S
O
N
D

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.

Testing

1
Jest

Jest

🃏 Delightful JavaScript Testing.
+7.1k☆
498
519
647
549
884
499
549
476
473
705
664
675
E
F
M
A
M
J
J
A
S
O
N
D
2
AVA

AVA

Futuristic JavaScript test runner
+4.8k☆
1.0k
522
452
377
358
304
315
303
260
321
294
245
E
F
M
A
M
J
J
A
S
O
N
D
3
Mocha

Mocha

☕️ simple, flexible, fun javascript test framework for node.js & the browser
+3.1k☆
242
253
266
244
251
230
231
259
238
269
295
287
E
F
M
A
M
J
J
A
S
O
N
D
4
Jasmine

Jasmine

Simple JavaScript testing framework for browsers and node.js
+1.2k☆
93
95
128
97
106
94
96
120
88
76
109
83
E
F
M
A
M
J
J
A
S
O
N
D
5
Tape

Tape

tap-producing test harness for node and browsers
+1.0k☆
149
90
135
105
91
63
65
70
79
54
57
51
E
F
M
A
M
J
J
A
S
O
N
D

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.

Editores

1
VS Code

VS Code

Visual Studio Code
+20.2k☆
897
1.4k
1.8k
1.7k
1.5k
1.3k
1.4k
1.6k
1.6k
2.5k
2.6k
1.8k
E
F
M
A
M
J
J
A
S
O
N
D
2
Atom

Atom

The hackable text editor
+9.1k☆
838
766
764
604
798
695
774
871
921
763
724
557
E
F
M
A
M
J
J
A
S
O
N
D
3
Reactide

Reactide

Reactide is the first dedicated IDE for React web application development. http://reactide.io
+7.4k☆
2.2k
181
109
66
76
34
71
38
73
E
F
M
A
M
J
J
A
S
O
N
D
4
Brackets

Brackets

An open source code editor for the web, written in JavaScript, HTML and CSS.
+1.9k☆
138
164
233
142
172
126
189
161
192
142
112
106
E
F
M
A
M
J
J
A
S
O
N
D
5
Nuclide

Nuclide

An open IDE for web and native mobile development, built on top of Atom
+1.4k☆
152
167
154
152
145
101
127
75
123
68
82
76
E
F
M
A
M
J
J
A
S
O
N
D

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!

CSS en JavaScript

1
Styled Components

Styled Components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without
+8.7k☆
852
545
899
861
874
744
703
697
625
677
555
703
E
F
M
A
M
J
J
A
S
O
N
D
2
CSS Modules

CSS Modules

Documentation about css-modules
+2.9k☆
234
227
272
234
313
307
246
254
194
210
234
217
E
F
M
A
M
J
J
A
S
O
N
D
3
Polished

Polished

A lightweight toolset for writing styles in JavaScript ✨
+2.9k☆
518
262
210
139
96
94
129
96
103
E
F
M
A
M
J
J
A
S
O
N
D
4
Glamorous

Glamorous

💄 Maintainable CSS with React
+2.9k☆
531
273
206
196
292
139
151
120
165
E
F
M
A
M
J
J
A
S
O
N
D
5
Emotion

Emotion

⚡️ The Next Generation of CSS-in-JS
+2.5k☆
488
257
190
352
186
298
E
F
M
A
M
J
J
A
S
O
N
D

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.

SSG

1
Gatsby

Gatsby

⚛️📄🚀 Blazing fast static site generator for React
+9.7k☆
717
481
508
438
573
505
2.1k
664
698
1.1k
796
1.2k
E
F
M
A
M
J
J
A
S
O
N
D
2
Hexo

Hexo

A fast, simple & powerful blog framework, powered by Node.js.
+6.2k☆
664
519
609
487
469
431
494
537
471
509
476
486
E
F
M
A
M
J
J
A
S
O
N
D
3
React Static

React Static

⚛️ 🚀 A progressive static-site generator for React.
+3.0k☆
2.2k
341
338
E
F
M
A
M
J
J
A
S
O
N
D
4
Phenomic

Phenomic

Modular website compiler ⚡️
+1.4k☆
140
392
123
103
127
125
92
59
50
77
42
67
E
F
M
A
M
J
J
A
S
O
N
D
5
Metalsmith

Metalsmith

An extremely simple, pluggable static site generator.
+1.0k☆
107
90
72
85
82
72
136
73
81
72
80
61
E
F
M
A
M
J
J
A
S
O
N
D

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.

GraphQL

1
Gatsby

Gatsby

⚛️📄🚀 Blazing fast static site generator for React
+9.7k☆
717
481
508
438
573
505
2.1k
664
698
1.1k
796
1.2k
E
F
M
A
M
J
J
A
S
O
N
D
2
React Starter Kit

React Starter Kit

React Starter Kit — isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel, Post
+4.3k☆
414
371
363
417
449
358
350
367
308
347
313
258
E
F
M
A
M
J
J
A
S
O
N
D
3
Apollo client

Apollo client

A fully-featured, production ready caching GraphQL client for every UI framework and GraphQ
+4.1k☆
64
338
348
285
295
327
295
331
414
438
393
E
F
M
A
M
J
J
A
S
O
N
D
4
GraphQL

GraphQL

GraphQL is a query language and execution engine tied to any backend service.
+2.8k☆
127
165
266
250
323
250
220
210
250
244
212
276
E
F
M
A
M
J
J
A
S
O
N
D
5
GraphiQL

GraphiQL

An in-browser IDE for exploring GraphQL.
+2.6k☆
213
222
242
E
F
M
A
M
J
J
A
S
O
N
D

Cuando futuros historiadores estudien la trayectoria de GraphQL, probablemente 2017 será un punto de inflexión.

Empresas de la talla de The New York Times han empezado a usar GraphQL, y tanto Relay como Apollo (las principales librerías cliente para GraphQL) han lanzado importantes actualizaciones este año.

Más allá de estos dos importantes proyectos, empresas como Graphcool han sacado una amplia gama de herramientas y librerías. Frameworks vitaminados por GraphQL, como Vulcan, están empezando a crearse su propio hueco.

Merece la pena mencionar que el generador de páginas estáticas más popular del año, Gatsby, también utiliza GraphQL como mediador entre la página estática y su fuente de datos.

Con tantos proyectos girando entorno al mundo GraphQL, es sólo cuestión de tiempo que esta tecnología se convierta pronto en una alternativa a REST.

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 Grief
Author of Discover Meteor and creator of Vulcan, a React+GraphQL open-source framework.