State of JS 2022

Desde el año 2016, esta encuesta recopila información sobre las preferencias de los desarrolladores dentro del ecosistema de tecnologías Javascript, con el objetivo de identificar tendencias actuales y futuras en este ámbito.

Nosotros, desde innusual, estamos convencidos de que el universo Javascript está lleno de oportunidades y nos gusta estar al día de todas las novedades, incluso de aquellas que no son tan conocidas en nuestra geografía pero que están mostrando un gran potencial al otro lado del globo. De hecho, un punto importante a tener en cuenta es la demografía de los perfiles que han respondido a las preguntas, ya que el país más representado es Estados Unidos, casi doblando en participantes al siguiente.

El informe de resultados que analiza el uso de estas tecnologías a lo largo del año 2022, se puede encontrar en el siguiente enlace. Vamos a repasar los datos más significativos, atendiendo a las categorías en las que se encuentra estructurada la encuesta.

Frontend frameworks

La categoría por excelencia de State of JS es la que recoge la información sobre los frameworks frontend así que empezaremos por ella.

React sigue siendo el líder indiscutible, en lo que a uso se refiere, en la categoría principal de la encuesta. Más del 80% de los encuestados usa la librería desarrollada por Facebook, manteniendo un liderato que ha permanecido desde los inicios de State of JS.

En mi opinión, en este punto se nota especialmente la demografía de los desarrolladores que han respondido a las preguntas de este sondeo, ya que React siempre ha sido la principal opción en el continente americano, pero no siempre en el continente europeo, donde Angular ha tenido una gran aceptación, aunque actualmente React ya se ha hecho hueco en el mercado europeo y su uso cada vez es más extendido.

El ecosistema JS ha crecido ampliamente desde 2016 y se ha diversificado, pero aún así, React sigue siendo la prinicipal elección de los desarrolladores, teniendo en cuenta que durante este período se han incorporado nuevas features que han supuesto cambios profundos en el uso de la librería, como los hooks que se añadieron en la versión 16.8. Si bien este cambio conllevaba una tranformación de los conceptos básicos, no rompío bruscamente con la utilización de las clases, lo que permitío una adaptación progresiva de la comunidad.

Con todo ello, su comunidad de desarrolladores no ha parado de crecer llegando a las 18 millones de descargas diarias según datos de npmtrends, lo que supone un soporte muy importante por parte de los desarrolladores, así como una continua publicación de herramientas y librerías que pueden mejorar nuestras aplicaciones en React.

Como era de imaginar, Angular y Vue siguen a React en la categoría de uso de frameworks frontend. ¿Significa esto que hay un estancamiento en el desarrollo de frameworks frontend? ¡Ni mucho menos! De hecho tanto en interés como en retención, lideran tres tecnologías muy diferentes y que no tienen tanto renombre como las anteriores: Svelte, Qwik y Solid.

Svelte es una librería que se define como una aproximación disruptora en la construcción de interfaces de usuario ya que deja a un lado la popular técnica de diferenciación del DOM virtual que utilizan React o Vue en tiempo de ejecución y opta por compilar el código desarrollado con Svelte, para obtener código Javascript que optimiza las actualizaciones del DOM cuando el estado de la aplicación cambia.

SolidJS se apoya en la filosofía de React, por lo que si ya lo has utilizado, SolidJS no te será dificil de aprender, ya que conocerás conceptos como los hooks y estarás familiarizado con el mismo flujo de datos unidireccional. A pesar de parecerse a React en este sentido, su implementación es muy diferente, ya que, al igual que Svelte hay un compilador que trabaja para obtener actualizaciones del DOM nativas óptimas.

En este sentido podemos ver que el enfoque del uso de un compilador que genere un DOM cuyas actualizaciones sean lo más eficientes posibles de forma nativa, está tomando fuerza respecto a enfoques como el Virtual DOM, por lo que no debemos pasarlo por alto.

Qwik es un framework que, a la hora de desarrollar es muy similar a React, aunque cambia la forma en la que está implementado, ya que su principal objetivo es la carga de aplicaciones instantaneas descargando y ejecutando el código mínimo para el funcionamiento de la aplicación. Para ello, intenta retrasar la descarga y ejecución de Javascript lo máximo posible. Se trata de un nuevo enfoque que, según los resultados, despierta el interés de los desarrolladores, aunque su uso es mínimo en la actualidad.

Rendering frameworks

Una de las novedades de esta edición es que la categoría ´Backend frameworks' que anteriormente tenía la misma relevancia que categorías como 'Frontend frameworks' o 'Testing', ha pasado a segundo plano al englobarse en 'Otras herramientas', mientras que ha tomado más relevancia la categoría 'Rendering frameworks' que se centra en los frameworks de renderizado estático.

En este ámbito, NextJS es la tecnología más utilizada por los desarrolladores. Este framework esta construido sobre React y destaca por su rendimiento y velocidad. Como podemos ver el ecosistema de herramientas que rodean React es muy amplio y tiene una gran aceptación en la comunidad.

NextJS también tiene un nivel alto de retención e interés pero ha sido superado por Astro, un creador de sitios estáticos que tiene como objetivo alcanzar un rendimiento ultrarápido, ofreciendo una buena experiencia de desarrollo. Se trata de una tecnología creada sobre Vite que se ha publicado muy recientemente por lo que, según sus propios creadores, se encuentra en una etapa muy temprana en la que tiene que ir dando forma al framework, mejorándolo y corrigiendo los bugs que vaya surgiendo. Una de las características que me llama especialmente la atención de Astro es la capacidad que tiene de usar componentes desarrollados con otros frameworks como React, Vue, Svelte o SolidJS entre otros. A la hora de desarrollar, creo que aporta más uniformidad y mantenibilidad usar un mismo framework y no mezclar varios dentro de un mismo proyecto, pero en casos concretos podría llegar a ser útil.

Finalmente, podemos ver que Gatsby se mantiene como segunda opción en uso, aunque su aceptación ha bajado considerablemente, a pesar de las nuevas funcionalidades que ha introducido en su última versión como el soporte a Server Side Rendering o a Deferred Static Generation.

Lo que se demuestra en esta categoría es que estos frameworks están en auge y su cuota de mercado aumenta gradualmente. Si bien anteriormente, estas opciones tenían muy poca aceptación, en la actualidad el desarrollador debe discernir qué enfoque dará a su aplicación según su uso y sus características, potenciando aquellas funcionalidades que más le interesen, mejorando así la caliddad y la experiencia que se le ofrece al usuario.

Testing

LLegamos a las herramientas que nos permiten testear nuestro código. En esta categoría se juntan tecnologías de testing de diferentes tipos como testing unitario, workshops o testing end-to-end.

Respecto a testing unitario, Jest es la opción más utilizada. Jest es un framework que te permite implementar pruebas unitarias usando diferentes frameworks de desarrollo tales como React, Angular o Vue entre otros. Su configuración mínima a la hora de arrancar las pruebas de una aplicación, así como sus herramientas de mocks y su librería de aserciones o la documentación que ofrece a los desarrolladores le han valido un liderato que lleva manteniendo desde 2019.

En este punto me sorprende el poco uso, entorno al 35%, de Testing library, una librería de utilidades que mejoran en gran medida la experiencia de testing unitario, poniendo el foco en el comportamiento final de un componente en concreto sin fijarse tanto en sus flujos internos. Aún así, la retención que tiene es bastante alta, por lo que es posible que en sucesivas ediciones su uso se vaya incrementando.

Finalmente, destaca Vitest en lo que se refiere a interés y retención, aunque su uso sigue siendo bajo. Vitest es un framework de test unitario construido para Vite, tecnología de la que hablaremos más adelante. Es compatible con Jest y pretende simplificar alguna de sus funcionalidades.

Respecto a tests end-to-end, Cypress es la principal elección. Esta herramienta facilita el desarrollo de test que nos permiten probar una aplicación de una forma global, desde la interfaz hasta su API y su lógica de datos, automatizando las pruebas funcionales que podría llevar a cabo un usuario. Todo ello nos permite tener control sobre la aplicación y su funcionamiento de forma global para identificar errores en los flujos de la aplicación. También destaca PlayWright, una biblioteca de NodeJS para automatizar Chromium, Firefox y WebKit con una sola API, además soporta múltiples lenguajes como Java, Python, y .NET, además de Javascript. Todavía Playwright no tiene la aceptación que tiene Cypress por lo que el soporte que tiene por parte de la comunidad es menor.

Por último aparecen otras tecnologías que permiten probar los desarrollos implementados, como Storybook, que se define como un workshop para construir y probar de forma aislada componentes de la interfaz de usuario. En este caso no se trata de una herramienta de testing a través de códig como las anteriores, sino un entorno que permite al usuario probar los componentes visuales desarrollados y publicar una aplicación web en la que poder comprobar sus funcionalidades y leer su documentación, lo que resulta de especial utilidad cuando se desarrollan librerías de componentes.

Esta categoría deja claro la cantidad de herramientas que tenemos a nuestra disposición para probar el código implementado y la importancia que tiene la realización de todo tipo de tests, que siempre aportarán un plus de calidad a nuestro código.

Mobile and desktop

Esta categoría aglutina dos tipos de tecnologías que, según mi punto de vista deberían constituir categorías separadas ya que tienen objetivos diferentes.

Por un lado, las tecnologías dedicadas a la construcción de aplicaciones móviles, están en cabezadas (ya no debería sorprendernos) por React Native, la librería que permite desarrollar aplicaciones móviles nativas para iOS y Android utilizando React. Esta librería, aunque tenga ya un largo recorrido, ya que su primera versión data de 2015, sigue en evolución, de hecho actualmente se encuentra en fase experimental la nueva arquitectura que se puede implementar desde la versión 0.68. Tras hacer un análisis crítico de la anterior arquitectura, se detectaron puntos de mejora clave lo suficientemente importantes como para que se plantearan remodelar la arquitectura de React Native, por lo que el nuevo enfoque, que deja a un lado el concepto de bridge como mecanismo de comunicación con la plataforma nativa para utilizar JSI (Javascript Interface), además introduce la ejecución síncrona o la concurrencia como principales novedades para mejorar en rendimiento y flexibilidad.

Tras React Native, la comunidad opta por Cordova e Ionic. Cordova nos da las herramienta para desarrollar una aplicación con HTML, CSS y Javascript que se ejecutará sobre un wrapper nativo de cada plataforma objetivo, permitiendo acceder a funcionalidades nativas del dispositivo, mientras que Ionic nos permite construir la interfaz de usuario para este tipo de aplicaciones. Debemos tener en cuenta la aparición de Capacitor que emerge como el sucesor de Cordova al mejorar alguna de sus funcionalidades como el soporte a PWA y aplicaciones de escritorio, una mejor integración con las app stores y la mejora de la experiencia de desarrollo al ser más rápido de instalar y ejecutar.

En lo relativo a aplicaciones de escritorio, Electron es la preferencia en uso de los desarrolladores del mundo Javascript. El framework mantenido por Github utiliza Chromium y Node para permitir al desarrollador construir aplicaciones de escritorio compatibles con Windows, macOS y Linux usando código Javascript y sin experiencia previa en desarrollo nativo de este tipo de aplicaciones.

Con un porcentaje de uso mucho más bajo, pero liderando en interés y retención, aparece Tauri un framework que también nos permite crear aplicaciones de escritorio, pero en este caso para construirlas utiliza Rust y diversos frameworks web que podemos elegir como NextJS o SvelteKit entre otros. Al no utilizar Chromium el ejecutable creado es menos pesado y gestiona la memoria de forma más optimizada. Se trata de una tecnología con mucho potencial y que supondrá un serio competidor para Electron.

Build tools

En el ámbito de los compiladores y bundlers de código, Webpack se mantiene como la referencia en este campo, aunque debemos tener en el radar otras opciones minoritarias que han entrado en el mercado con mucha fuerza como es Vite, una herramienta creada por Evan You, el creador de VueJS, que pretende mejorar la experiencia de desarrollo basándose en dos pilares principales: por un lado, un servidor de desarrollo mejorado que ofrece funcionalidades como HMR con una velocidad muy alta y por otro lado, un comando de construcción que genera el bundle de la aplicación a través de Rollup, optimizando lo máximo posible los estáticos resultantes al aprovechar el soporte de la mayoria de navegadores a los módulos ES nativos.

Vite tiene una mención especial al ser considerado por los encuestado como la tecnología con un mayor ratio de interés (81%), con un mayor ratio de retención (98%) y con un mayor aumento de su uso, ya que, a pesar de contar con tan solo dos años en el mercado, ha aumentado su uso un 18.8% en el último año.

Other Tools

Respecto a la categoría de otras herramientas solo destacaré algunos puntos:

• El amplio uso que sigue teniendo Moment aunque los creadores de la propia librería la consideraron como deprecated en 2020, recomendando que no se utilizarán en proyectos nuevos.

• Lodash sigue teniendo una gran aceptación entre la comunidad de desarrolladores, pero con las nuevas funcionalidades nativas que se han ido incorporando en las últimas versiones de ECMAScript, muchos de sus métodos no son necesarios y nos podemos ahorrar una buena cantidad de código.

• A pesar de la novedad que supuso la creación de Deno como runtime multiplataforma basado en V8, al igual que Node, su uso sigue siendo muy bajo respecto a su principal competidor.

Conclusiones

En primer lugar y tras haber revisado las categorías que forman esta encuesta, la principal conclusión que podemos obtener es la gran versatilidad que tiene Javascript en la actualidad. Hemos repasado librerías para frontend, backend, SSR, aplicaciones móviles o aplicaciones de escritorio entre otras, por lo que indudablemente estamos ante uno de los lenguajes con mayor potencial del panorama de desarrollo de software.

También hay que destacar el impacto de React y de todo su ecosistema en esta encuesta, liderando tanto la categoría de frontend frameworks, como la de rendering frameworks con NextJS y la categoría de aplicaciones móviles con React Native. Esto significa que, hoy en día, aprender React te ofrece muchas posibilidades, pudiendo construir aplicaciones de muchos tipos con él y también facilita las curvas de aprendizaje de otros muchos frameworks y librerías que se han basado en React y sus conceptos base para construir nuevas herramientas. Esto no creo que sea casualidad, sino más bien es fruto del convencimiento de una buena parte de la comunidad de desarrolladores de que los conceptos y enfoques que utiliza React funcionan y proporcionan un buena experiencia de desarrollo. React es el presente de las librerías frontend, pero va a tener mucho que decir respecto al futuro que viene en este ámbito, ya que muchas de las nuevas tecnologías se cimentan en React.

Finalmente, hemos podido observar la gran cantidad de nuevas herramientas que están surgiendo añadiendo enfoques diferentes a los que estabamos acostumbrados como es el caso de Svelte y Solid, que han querido buscar otra forma de mejorar el rendimiento sin utilizar el DOM Virtual. Lo que es claro, es que el ecosistema Javascript es un mundo en constante evolución, siempre buscando mejoras y nuevos planteamientos para mejorar los resultados obtenidos.

A continuación dejo un pequeño resumen a modo de esquema de las categorías principales.

Bonus track

• Si te interesan los reportes de uso de tecnologías en la actualidad, además de State of JS, te recomiendo que visites:

  • 2022 Developer Survey de Stack Overflow, aunque no sea especifico de Javascript.

  • State of CSS

  • Jamstack Community Survey

  • Design Tools Survey

• Si te gusta el contenido tecnológico en otros formatos, en la categoría de Resources de State-of-JS puedes encontrar una lista de podcasts y de creadores de contenido muy recomendables