¡Bienvenido a la 4ª edición de JavaScript Rising Stars!

Veamos que proyectos han destacado en GitHub durante el 2019 según sus números.


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 2019
    Vue.jsVS CodeReactVue Element AdminSvelteAxiosAnt DesignTypeScriptPuppeteerCreate React App
  2. Frameworks Front-end
    Vue.jsReactSvelteAngularOmi
  3. Frameworks Node.js
    NestNext.jsStrapiNuxtExpress
  4. Ecosistema React
    Ant DesignCreate React AppGatsbyNext.jsMaterial UI
  5. Ecosistema Vue
    Vue Element AdminElementVuetifyNuxtvue-cli
  6. Ecosistema Angular
    ngx-adminMaterial Design for AngularAngular CLING-ZORRONgRx
  7. Testing
    PuppeteerStorybookCypressJestReact Testing Library
  8. Móvil
    React NativeQuasarIonicExpocube-ui
  9. Compiladores JS
    TypeScriptBabelFlowReasonSucrase
  10. Build
    WebpackParcelRollupMicrobundleGulp
  11. CSS en JavaScript
    Styled ComponentsEmotionLinariastyled-systemCSS Modules
  12. GraphQL
    GatsbyHasura GraphQL EnginePrismaGridsomeApollo client
  13. Recursos de aprendizaje
    You Don't Know JS30 seconds of codeJS Algorithms & Data StructuresNode.js Best PracticesTech Interview Handbook
  14. Conclusión

Proyectos más populares del 2019

1
Vue.js

Vue.js

A progressive, incrementally-adoptable framework for building UI on the web
+31.4k☆

Tendencias en 2019

3.1k
2.3k
4.5k
3.3k
2.7k
2.4k
2.4k
2.1k
1.7k
2.2k
1.8k
1.7k
E
F
M
A
M
J
J
A
S
O
N
D

Datos de GitHub

Creado
2013-07
Total estrellas
155.6k☆

Links

2
VS Code

VS Code

Visual Studio Code
+23.0k☆
3
React

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
+22.9k☆
4
Vue Element Admin

Vue Element Admin

A magical vue admin
+22.7k☆
5
Svelte

Svelte

Cybernetically enhanced web apps
+20.0k☆
6
Axios

Axios

Promise based HTTP client for the browser and node.js
+15.1k☆
7
Ant Design

Ant Design

A UI Design Language and React UI library
+14.6k☆
8
TypeScript

TypeScript

A superset of JavaScript that compiles to clean JavaScript output.
+13.9k☆
9
Puppeteer

Puppeteer

Headless Chrome Node.js API
+13.9k☆
10
Create React App

Create React App

Set up a modern web app by running one command.
+13.5k☆

Por cuarto año consecutivo, Vue.js es el ganador del concurso, con más de 30,000 nuevas estrellas de GitHub en 2019.

No tenemos sorpresas en los siguientes puestos: React y el editor VS Code continúan en el mismo lugar que el año pasado.

El mayor salto en el ranking lo ha dado Vue Element Admin, un framework que nos permite crear dashboards usando componentes Vue.js, ha quedado cuarto este año.

Svelte ha estado rondando durante los últimos años, pero cuando realmente ha despegado ha sido este 2019, ocupando la quinta posición.

TypeScript entra en el TOP 10, su éxito ha generado uno de los mayores cambios en el ecosistema de JavaScript de los últimos tiempos.

Deno, el entorno de ejecución JavaScript desarrollado por el creador de Node.js, fue uno de los recién llegados en 2018. En 2019 continúa en el ranking ocupando la posición 13.

Frameworks Front-end

1
Vue.js

Vue.js

A progressive, incrementally-adoptable framework for building UI on the web
+31.4k☆
2
React

React

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

Svelte

Cybernetically enhanced web apps
+20.0k☆
4
Angular

Angular

One framework. Mobile & desktop.
+12.0k☆
5
Omi

Omi

Next Front End Framework
+3.8k☆

En 2019, Svelte ha descolocado la categoría de Frameworks Front-end, entrando en la 3ª posición justo detrás de Vue.js y React pero delante de Angular.

¿Significa esto que ahora tenemos 4 gigantes en vez de 3?

Svelte es muy diferente a los demás en esta categoría, ya que no es realmente un framework sino un compilador, ejecutando su mágia durante la creación del bundle y no en tiempo de ejecución.

Al igual que React o Vue, Svelte nos permite construir aplicaciones mediante la creación de componentes que se actualizan cuando sus datos cambian. Sin embargo, el bundle solo incluirá el código necesario para que funcione nuestra aplicación, a diferencia de React, Vue o Angular que necesitan incluir su propia librería además de nuestro código.

El compilador es capaz de generar código imperativo que manipula el DOM de los componentes creados por los desarrolladores directamente.

Por lo tanto el bundle resultante es pequeño y muy rápido de ejecutar (haciendo a Svelte un buen candidato para aplicaciones en dispositivos embebidos por ejemplo).

Además de su espectacular rendimiento, es sencillo crear complejas transiciones en CSS.

La versión 3 mejora el concepto de reactivity: actualizar una variable es todo lo que necesitas para disparar un cambio en la UI.

Es demasiado pronto para afirmar que Svelte será tan exitoso como los otros 3 pero definitivamente merece la pena seguirle la pista a lo largo del 2020.

Frameworks Node.js

1
Nest

Nest

A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications on top of TypeScript & JavaScript (ES6, ES7, ES8)
+11.5k☆
2
Next.js

Next.js

The React Framework
+10.6k☆
3
Strapi

Strapi

Open source Node.js Headless CMS to easily build customisable APIs
+10.2k☆
4
Nuxt

Nuxt

The Vue.js Framework
+7.4k☆
5
Express

Express

Fast, unopinionated, minimalist web framework for node.
+5.1k☆

En la categoría Frameworks Node.js, tenemos nuevo campeón: Nest!

Nest es un framework web con todo tipo de funcionalidades, que toma prestados muchos conceptos de Angular.

Next.js, el campeón de 2018, es el número 2 este año. Es una de las soluciones más completas para construir una aplicación web full-stack con React en el front-end y Node.js en el back-end.

En el número 3 tenemos a Strapi, un headless CMS que nos permite generar y administrar API endpoints rápidamente. "Comienza con tan solo cuatro comandos". ¡API Endpoints que pueden ser consumidos tanto por REST como GraphQL!

El siguiente es Nuxt, un framework full-stack para crear aplicaciones web con Vue.js, proporcionando diferentes estrategias como: server-side rendering, client-side only o sitio estático.

Express es casi tan antiguo como Node.js pero todavía aguanta en el top 5. Por supuesto, tiene un ecosistema enorme y muchos desarrolladores de Node.js están familiarizados con ello, pero cabe destacar que el último commit fue hecho hace 7 meses. ¿Significa esto que los tiempos están cambiando?

Ecosistema React

1
Ant Design

Ant Design

A UI Design Language and React UI library
+14.6k☆
2
Create React App

Create React App

Set up a modern web app by running one command.
+13.5k☆
3
Gatsby

Gatsby

Build blazing fast, modern apps and websites with React
+11.5k☆
4
Next.js

Next.js

The React Framework
+10.6k☆
5
Material UI

Material UI

React components for faster and easier web development. Build your own design system, or start with Material Design.
+10.2k☆

En las posiciones 1 y 5, Ant Design y Material UI han sido los proyectos más populares que proporcionan sets de componentes y widgets para React.

En la segunda posición Create React App, continúa siendo el estándar a la hora de crear una nueva aplicación React. Una nueva funcionalidad importante de este año: ahora soporta TypeScript.

Probablemente el mayor cambio en el mundo React de este año ha sido la introducción de los hooks.

Como compartir la lógica entre componentes siempre ha sido un tema controvertido en el mundo React. Parece que ha habido una evolución a lo largo de los años que podría ser descrita en los siguientes 4 pasos:

  • 2013: Mixins para compartir funcionalidades entre clases React
  • 2015: Higher Order Components para inyectar props en componentes React
  • 2017: Render prop pattern
  • 2019: Usar Hooks y crear componentes funcionales siempre que podamos

Este año hemos visto muchas librerías que aprovechan el poder ofrecido por los hooks para solventar problemas relacionados con:

  • state management: Redux ahora proporciona hooks para interactuar fácilmente con la store
  • routing: React Router nos facilita hooks para acceder al historial del navegador
  • form validation: React Hook Form tiene una forma única de gestionar la validación de formularios usando controles de formulario descontrolados.

¿Serán los hooks el último paso de la evolución?

Ecosistema Vue

1
Vue Element Admin

Vue Element Admin

A magical vue admin
+22.7k☆
2
Element

Element

A Vue.js 2.0 UI Toolkit for Web
+9.4k☆
3
Vuetify

Vuetify

Material Component Framework for Vue
+7.5k☆
4
Nuxt

Nuxt

The Vue.js Framework
+7.4k☆
5
vue-cli

vue-cli

Standard Tooling for Vue.js Development
+5.8k☆

Escritor invitado: Sébastien Chopin

Este año hemos preguntado a nuestro amigo Sébastien Chopin a hablar sobre el estado del mundo Vue.js.

Sébastien Chopin es el creador de Nuxt, el cual está en el top 5 de 2 categorías diferentes (Ecosistema Vue.js y Frameworks Node.js)

Guest Writer atinux

Vue Element Admin, es el proyecto más popular de esta categoría por segundo año consecutivo. Nos permite crear bonitos dashboards usando componentes Vue.js y está basado en Element.

En el número 2 nos encontramos Element, una librería UI con un gran repertorio de componentes.

Vuetify, el framework de componentes Material, lanzando su versión 2.0 en julio y entrando en el top 5 del 2019.

Nuxt, el framework web para construir aplicaciones Vue.js, continúa en el top 5 desde hace ya 3 años.

Finalmente, en el número 5, tenemos vue-cli, la herramienta oficial para empezar proyectos Vue.js con una potente interfaz gráfica de usuario.

Ecosistema Angular

1
ngx-admin

ngx-admin

Customizable admin dashboard template based on Angular 8+
+4.8k☆
2
Material Design for Angular

Material Design for Angular

Component infrastructure and Material Design components for Angular
+2.4k☆
3
Angular CLI

Angular CLI

CLI tool for Angular
+2.1k☆
4
NG-ZORRO

NG-ZORRO

An enterprise-class UI components based on Ant Design and Angular.
+1.7k☆
5
NgRx

NgRx

Reactive libraries for Angular
+1.3k☆

Escritor invitado: Benjamin Blackwood

Este 2019 hemos invitado a nuestro amigo Benjamin Blackwood a hablar sobre el panorama de Angular.

Benjamin es Frontend Developer en Australia Post y ha estado trabajando con Angular por más de 4 años.

Guest Writer bblackwo

ngx-admin, el proyecto Angular más popular de este año, nos facilita la tarea de crear paneles de administración.

En el número 2 tenemos Material Design for Angular, que incluye tanto componentes Material Design como el Angular CDK (Component Dev Kit).

De forma similar a React y Vue, la librería de componentes Ant Design NG-ZORRO está en el puesto número 4.

En 2019, Angular ha tenido un importante lanzamiento. La versión 8 salió en Mayo. Como parte de esta release, Angular CLI ahora crea dos bundles diferentes (moderno y legacy) haciendo hasta un 20% más pequeño el tamaño del bundle. Además incluye una nueva Builders API que nos permite modificar los comandos existentes de nuestra CLI o añadir nuevos.

La version 9 está actualmente en release candidate y se espera que salga a principios del 2020. Uno de los mayores cambios de esta versión será el nuevo compilador llamado Ivy which, que promete una mayor rapidez al recompilar y aún más pequeños bundles entre otras mejoras.

Testing

1
Puppeteer

Puppeteer

Headless Chrome Node.js API
+13.9k☆
2
Storybook

Storybook

UI component dev & test: React, Vue, Angular, React Native, Ember, Web Components & more!
+12.0k☆
3
Cypress

Cypress

Fast, easy and reliable testing for anything that runs in a browser.
+7.8k☆
4
Jest

Jest

Delightful JavaScript Testing.
+6.5k☆
5
React Testing Library

React Testing Library

Simple and complete React DOM testing utilities that encourage good testing practices.
+5.7k☆
Loading
Loading
Loading
Loading
Loading
Loading

Conclusión

Revisando las tendencias en el lado front-end, podemos preguntarnos cosas como:

¿continuará creciendo la popularidad de Svelte?

¿veremos una mayor adopción de los estándares web como los web components?

Una de las historias más interesantes del 2019 fue el hecho de que Apple lanzó su cliente web de música que usa Web components, está compilado con Stencil, uno de los frameworks UI más populares del año. ¡Un claro ejemplo del uso de los Web Components en el mundo real!

El hecho de que podamos tener nuestras aplicaciones web usando módulos nativos es una gran mejora.

Mirando al lado back-end, vemos que Node.js ha cumplido 10 años en 2019, pero no por ello dejan de salir nuevas funcionalidades con alta frecuencia.

En la versión 13.2.0, Node.js soporta ES modules por defecto y puede importar módulos de Web Assembly. Las API de Workers Threads permite pesadas operaciones de computación.

Por lo tanto, tanto si hablamos del navegador como de Node.js, la plataforma continúa evolucionando y esto es lo que hace que el desarrollo en JavaScript sea tan emocionante.

¡Muchas gracias por tu atención! ¡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

中文

日本語