Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Frameworks para Frontend más populares en 2020

Pablo Huet Carrasco
  • Escrito por Pablo Huet Carrasco el 17 de Julio de 2020
  • 3 min de lectura Frameworks
Frameworks para Frontend más populares en 2020

Hoy en día, a la hora de realizar un desarrollo frontend solemos elegir un framework o librería que pueda hacernos más llevaderas las tareas de renderizado, crear aplicaciones single page o solucionen los problemas que encontramos frecuentemente.

Sin embargo, este mundo es cambiante y las distintas opciones existentes nos ofrecen soluciones que están aún lejos de encontrarse estandarizadas.

Es por ello que a continuación haremos un repaso de las tendencias actuales para este año 2020 así como de las características que definen a los frameworks y librerías frontend mejor valorados por las empresas y los desarrolladores.

Mejores Frameworks Frontend en 2020

Angular

En el año 2010 apareció un nuevo y fuerte contendiente en el mundo frontend de manos del creador de Android, elevándose como precursor del concepto moderno de framework Javascript, incluyendo una orientación MVC y diversas ideas realmente innovadoras como:

  • Enlace de datos bidireccional - O two-way data binding, que permite que una determinada propiedad de nuestro modelo sea asignada, por ejemplo, a cualquier input de nuestro HTML y pueda ser modificada por cualquiera de los dos extremos. De esta forma, al cambiar nuestra propiedad cambiará el valor mostrado en el input y al cambiar el valor del input cambiará el valor de nuestra propiedad.
  • Inyección de dependencias - Este patrón de diseño tan práctico nos permite, por ejemplo, inyectar servicios en nuestras clases. De esta forma nos aseguramos que para todas las clases necesarias dispongamos de una única instancia compartida de dicho servicio.
  • Routing - Y, sin duda, otra de las geniales características que trajo AngularJS fue la inclusión de un sistema de gestión de rutas en la parte front. Esto permite realizar una gestión de rutas totalmente gestionada por la aplicación web, a diferencia de la gestión habitual a nivel de servidor.

Sin embargo, esta primera versión, llamada AngularJS o Angular 1, pronto llegó a un punto de complejidad no deseado por sus creadores, donde ciertos procedimientos que tenían como objetivo simplificar el desarrollo llegaban a ser más complejos que las soluciones tradicionales.

Por ello, el equipo de Google decidió utilizar toda su experiencia con AngularJS para crear un nuevo proyecto completamente remodelado que terminaría conociéndose simplemente como Angular (O Angular 2). En este nuevo producto se introdujeron una gran cantidad de cambios y características novedosas:

  • Introducción de Typescript - El primer cambio y más llamativo por parte del equipo. Se decide realizar un cambio de Javascript puro a favor de Typescript: Un superset de ES6 que incluye interesantes características como tipado (Al igual que lenguajes como Java), retrocompatibilidad con ES5 a la hora de la transpilación y otras características modernas como operadores lamba e iteradores.
  • Controladores versus componentes - Se deshecha la noción clásica de controlador y scope de AngularJS y se pasa a una orientación basada en la jerarquía de componentes como concepto arquitectural. De esta forma los componentes son considerados una unidad formada por una directiva y un template que a su vez pueden llamar a otros componentes distintos.
  • Introducción del CLI - Con el nuevo proyecto se introduce una suite de herramientas para consola de comandos que permite generar nuevos proyectos con facilidad así como generar componentes o diversas clases específicas de Angular como servicios o módulos.

Por todo ello actualmente Angular sigue siendo una de las soluciones más populares entre los desarrolladores web con más 60.000 estrellas en Github y 1.306.632 descargas semanales en NPM.

Vue.js

De forma similar a Angular, Vue es un framework de orientación MVC utilizado para el desarrollo de interfaces web así como de aplicaciones SPA.

Nació de manos del ex-ingeniero de Google Evan You que tras trabajar con AngularJS en un gran número de proyectos llegó a la conclusión de que sería posible crear un framework similar, pero más ligero, que mantuviera y ampliara sus características más relevantes.

Vue introduce ciertas novedades interesantes que lo diferencian de otras tecnologías, y que definen su ecosistema:

  • Es incremental - A diferencia de otros frameworks, no requiere de un proyecto exclusivo creado para el propio fin de usar Vue. Es posible integrar este framework de forma sencilla a un proyecto ya existente y, poco a poco, ir ampliando sus capacidades o su alcance.
  • Es progresivo - Vue partió con el objetivo de crear una solución muy ligera que soportara las funcionalidades de gestión de renderizado y componentes. Sin embargo es posible ampliar sus funcionalidades con facilidad añadiendo una serie de módulos o bibliotecas adicionales. De esta forma un proyecto ligero no tendrá que cargar con un bundle excesivo, y un proyecto más completo puede elegir exclusivamente las características extra que necesita (Routing, redux…etc).
  • Renderizado más rápido - Como podemos observar aquí Vue es sin duda más rápido a la hora de renderizar sus propios componentes en comparación con frameworks como React o Angular. Esto se debe a una gestión inteligente del cambio de propiedades en Vue que asegura que los cambios solo se apliquen cuando sean necesarios y se eviten renderizaciones innecesarias.

A pesar de sus similitudes Vue consigue desmarcarse de Angular gracias a estas características que lo hacen una alternativa ideal, sobre todo, para integrar en proyectos antiguos y modernizarlos. Por todo ello tiene más de 160.000 estrellas en Github y cuenta con 1.314.032 descargas semanales en NPM.

React.js

Finalmente, y no por ello menos importante, nos encontramos con una famosa biblioteca para la creación de interfaces web llamada React.js . Esto quiere decir que React no es en sí un framework, es únicamente una librería de gestión del renderizado, y esto se hace patente por varios motivos:

  • React no define un flujo de trabajo - Esta biblioteca únicamente te proporciona métodos, hooks y recomendaciones para realizar todo el trabajo de renderizado a través de ella, sin embargo no te obliga a trabajar con ella de ninguna forma concreta para que esta funcione; Una misma tarea en React puede llegar a realizarse de varias formas alternativas y perfectamente funcionales.
  • React únicamente gestiona el renderizado - El resto de funcionalidades esperables en un framework como el routing o similares deben de ser agregados por librerías adicionales de terceros, no están incluidos en el paquete principal.

El hecho de que React no sea un framework puede, de hecho, llegar a ser una ventaja sobre todo para los desarrolladores más apegados al desarrollo javascript tradicional y para aquellos que deseen tener una libertad de trabajo mayor, ya que entre sus ventajas encontramos:

  • Se basa en la filosofía de la programación funcional - Nociones como funciones puras o funciones de orden superior son conceptos claramente arraigados en React y aplicados a sus propios componentes. Es por ello que en React podemos encontrar los llamados componentes puros, cuyos procesos de renderizado únicamente dependen de sus propiedades, e incluso componentes que reciben componentes para crear nuevos componentes (High Order Components o HOCs).
  • Utiliza un motor de templating muy flexible - React renderiza usando JSX, una sintaxis de etiquetas como Blade en Laravel o Jinja en Python, con un gran parecido a HTML pero que se diferencia en el uso de una serie de extensiones que se basan en la sintaxis de Javascript.
  • La detección de cambios es implementable por componente - Los componentes funcionales y de clase tienen implementados métodos para escribir las condiciones necesarias para que se produzca un nuevo renderizado del componente.
  • Integrar librerías Javascript existentes es sencillo - Pese a utilizar un DOM virtual, la creación de referencias a componentes virtuales nos permite acceder a los elementos del DOM real vinculados e integrar de forma sencilla otras librerías de javascript que realizan modificaciones directas sobre el propio DOM.

Por todo ello React es en 2020 y a día de hoy la solución más utilizada del lado Frontend por los desarrolladores. Lo que es fácil de comprobar, ya que posee más de 150.000 estrellas en Github y 6.346.240 descargas semanales en NPM.

Futuro de los Frameworks Frontend

Para poder debatir sobre el futuro del frontend es primero necesario observar la tendencia de uso de los diferentes frameworks a lo largo del tiempo, lo que podemos ilustrar fácilmente gracias a la siguiente gráfica de popularidad proporcionada por Stack Overflow:

Imagen 2 en Frameworks para Frontend más populares en 2020

En 2012 aparece AngularJS experimentando un rápido crecimiento para, nada más aparecer Angular 2, pasar a una tendencia igualmente decreciente a favor del nuevo proyecto de Google. Igualmente Vue y React subieron progresivamente desde su creación, hasta que finalmente el uso de React ha adelantado al de Angular, sufriendo este en consecuencia una importante caída de popularidad.

Por ello podemos pensar que a día de hoy parece que las propuestas de React resultan más atractivas para el desarrollador, y que Vue aún no siendo tan popular sigue atrayendo a nuevos adeptos cada día.

Nadie sabe qué deparará el futuro del frontend, pero al menos ahora sabemos que estos son los frameworks más requeridos actualmente, y si alguno te ha parecido interesante no dejes de pasarte por nuestros cursos de frontend donde podrás aprender más sobre ellos y poner a prueba tus recién adquiridas habilidades.

Más de 300 empresas confían en nosotros

Oesia
Vass
Everis
Ayesa
Altran
Ibermatica
Atmira
GFI
Accenture
GMV
Concatel
Telefonica
Caser
Banco de España
kpmg
Mapfre
Randstad