Guía útil de Frameworks JavaScript

Artículo

Guía útil de Frameworks JavaScript  

¿Cómo saber cuáles son los frameworks JavaScript más adecuados para tus proyectos? Aquí tienes una guía útil para elegir el que mejor se adapte a tus necesidades.

Mantenerse al día con los frameworks JavaScript es un gran reto: son muchos los ya existentes y cada mes surgen dos o tres nuevos. ¿Cómo saber cuáles son los más adecuadas para tus proyectos? ¿Cuáles son sus fortalezas y debilidades? ¿Cómo se empieza? Ahí es donde entra en juego esta guía. En este caso, el término “framework" se utiliza en un sentido amplio: incluye librerías de interfaz de usuario (UI) como React, así como estructuras completas como Angular. Con esta guía no pretendemos cubrir todo el espectro de frameworks actualmente en el mercado, pero sí aquellos que están consolidados y algunos que pronto lo estarán.

 

Los tres frameworks del momento: dos consolidados y un recién llegado

React, Angular y Vue son los tres frameworks que actualmente dominan por su popularidad y su elevada demanda. React y Angular son frameworks maduros en el mercado y Vue es un recién llegado que está pisando muy fuerte.

Cada uno de ellos tiene grandes comunidades y muchos recursos de capacitación disponibles. Si eres un desarrollador nuevo que está aprendiendo un framework, estas tres son tus mejores opciones. 

Las descargas de npm en los últimos meses (de septiembre 2017 a enero 2018):

 

Deloitte

REACT

React fue presentado como un proyecto de código abierto en mayo de 2013 y su autor original fue Jordan Walke, ingeniero de Facebook. Este framework se denomina a sí mismo como "una biblioteca JavaScript para construir interfaces de usuario", enfoque que supone una contraposición a un framework completo como Angular.

Las preocupaciones como el enrutamiento, la gestión estatal y la búsqueda de datos se han dejado a terceros (como Flux) y esto ha derivado en un ecosistema grande y muy activo alrededor de ReactMuchas aplicaciones React de gran tamaño utilizarán la popular librería Redux para la gestión de estado y el enrutador React Router para enrutamiento, pero hay otras buenas alternativas disponibles.

Además, es responsable de popularizar los principios de programación funcional entre una nueva generación de desarrolladores. Aunque no es una librería puramente funcional, permite a los desarrolladores trabajar con un estilo en gran medida funcional, especialmente cuando se combina con Redux.

Pros

  • Muy popular con un mercado laboral fuerte
  • Muchos recursos de capacitación y bibliotecas de terceros para ayudar a acelerar el desarrollo
  • La mejor opción para equipos multiplataforma (web, móvil, escritorio, otros dispositivos)
  • Versátil
  • Soporte corporativo fuerte (Facebook)

Contras

  • La abundancia de opciones puede ser abrumadora al principio
  • Las mejores prácticas no siempre están claras para los recién llegados.
  • La curva de aprendizaje puede ser dura.
  • En aplicaciones grandes y complejas hay que elegir más compañeros de viajes para cubrir todas las necesidades de una aplicación de este estilo.

ANGULAR

Angular es el sucesor de AngularJS. Se trata de un framework completo y con muchas funciones y opiniones que proporciona valores predeterminados para la obtención de datos, administración del estado, lenguaje de desarrollo y construcción de cadenas de herramientas.

Quizás su característica más notable es el uso de TypeScript como lenguaje de desarrollo. Esto ha hecho que el framework se adapte bien a los lenguajes tradicionales orientados a objetos como Java y C#, ya que TypeScript se inspira en estos lenguajes.

Además, se ha dicho que las "empresas" son los usuarios de Angular. En el sentido de que muchas grandes empresas tienen equipos familiarizados con Java y otros lenguajes orientados a objetos, esto puede ser correcto.

Pros

  • Marco completo con funciones completas y valores por defecto bien probados
  • TypeScript proporciona un lenguaje familiar para aquellos con experiencia en programación orientada a objetos.
  • Soporte corporativo fuerte (Google)
  • Buenas prácticas claras

Contras

  • La curva de aprendizaje puede ser pronunciada
  • TypeScript puede ser una barrera para la adopción
  • Métricas de arranque deficientes en puntos de referencia

Vue. js

Aunque a menudo visto como el "nuevo", Vue ha estado presente desde 2013. Evan You es el creador y desarrollador principal, y a diferencia de React y Angular, Vue no está directamente soportado por una gran empresa. En cambio, depende de donaciones individuales y corporativas.

De los tres marcos más populares, Vue es ampliamente considerado como el más fácil de aprender. Es similar a React en muchos aspectos, pero también tiene cosas en común con AngularJS - por ejemplo, directivas y plantillas.

Su relativa simplicidad, su experiencia como desarrollador y su buen rendimiento han contribuido a un gran aumento de popularidad.

Una característica notable de Vue es que es un "framework progresivo" y puede ser usado como un reemplazo de jQuery así como para Single Page Applications.

Mientras Angular es un agnóstico de opinión y React sobre temas como enrutamiento y gestión estatal, Vue adopta un enfoque intermedio, con soluciones oficiales de enrutamiento y gestión de estados que son opcionales, pero se mantienen en sincronía con la biblioteca central.

Pros

  • Fácil de aprender
  •  Buena documentación
  • Aumento de popularidad y uso
  • El mejor rendimiento

Contras

  • El mercado laboral actual es menor que el de React and Angular.

Históricos

AngularJS

En 2013, AngularJS fue el marco más popular y algunos de los factores que contribuyeron a su popularidad durante ese período fueron su arquitectura MVC, estilo de programación declarativo, enlace de datos bidireccional y el conjunto de características robustas.

Asimismo tiene un enfoque de opinión y su objetivo es proporcionar a los desarrolladores una solución completa:

AngularJS no es una sola pieza en el rompecabezas general de la construcción del lado del cliente de una aplicación web. Maneja todo el código de cola DOM y AJAX que una vez escribiste a mano y lo coloca en una estructura bien definida. Esto hace que AngularJS opine acerca de cómo se debe crear una aplicación CRUD (Crear, Leer, Actualizar, Eliminar). Sin embargo, aunque es una opinión, también intenta asegurarse de que su opinión es sólo un punto de partida que se puede cambiar fácilmente.

A finales de 2013 se introdujo React. Reaccionó utilizando un flujo de datos unidireccional y argumentó que la unión de datos bidireccional dificultaba la comprensión de las aplicaciones, especialmente a medida que se ampliaban. Un año más tarde, en 2014, el equipo Angular anunció Angular 2, que posteriormente sería rebautizado como Angular. Esta nueva versión introduciría el flujo unidireccional de datos entre otros cambios importantes. Esto marcó el comienzo de un largo declive en la popularidad de AngularJS. A pesar del crecimiento de su proyecto sucesor, AngularJS sigue siendo ampliamente utilizado y se encuentra en desarrollo activo.

Pros

  • Abundantes recursos de capacitación
  • Buena documentación
  • Muy bien establecido
  • Completamente equipado

Contras

  • Encuadernación de datos bidireccional, otras cuestiones técnicas que pueden no ser deseables
  • Disminución de la popularidad
  • Performance

Polymer

Polymer es una biblioteca respaldada por Google centrada en Web Components, un grupo de tecnologías propuestas que actualmente no están bien soportadas en los navegadores. Polymer, junto con Polymer App Toolbox, ayuda a los desarrolladores a utilizar estas tecnologías para crear aplicaciones web.

Con Web Components, puede crear elementos personalizados reutilizables que se interpongan perfectamente con los elementos integrados del navegador, o dividir la aplicación en componentes de tamaño adecuado, lo que hace que el código sea más limpio y menos costoso de mantener.

El polímero esparce un poco de azúcar sobre las APIs estándar de Web Components, lo que facilita la obtención de excelentes resultados.

Una de las principales motivaciones del proyecto Polymer es hacer avanzar la plataforma web. El equipo de Polymer tiene un hashtag #UseThePlatform que explica en su página Acerca de: "Hay costos reales por hacer demasiado fuera y por encima de la plataforma misma - costos que tanto los desarrolladores como los usuarios pagan. Los costes de revelador vienen en forma de complejidad y lock-in.

Con el tiempo, las pilas que hemos construido en la parte superior de la plataforma han llevado el desarrollo web cada vez más lejos de la simplicidad de ver-fuente y shift-refresh, a un lugar donde cada proyecto comienza con un mar abrumador de opciones.

Gracias a las nuevas primitivas de la plataforma web, muchas de las necesidades que hemos abordado al construir sobre y alrededor de la plataforma ahora pueden ser satisfechas por la propia plataforma...". 

Creemos que los patrones, las bibliotecas y las herramientas en las que trabajamos son beneficiosos, y estamos contentos de verlos ampliamente adoptados. Pero nuestra campaña para #UseThePlatform no se trata en última instancia de obligar a la gente a usar las cosas que construye el Proyecto Polímero. Se trata de promover el uso de la plataforma web para ofrecer las mejores aplicaciones posibles.

Si usted ha seguido los apreciados esfuerzos de Google para promocionar la plataforma web a lo largo de los años, mucho de esto sonará familiar y en línea con otros esfuerzos de la empresa.

Pros

  • Soporte corporativo fuerte (Google)
  • Soporta estándares web emergentes

Contras

  • Quejas comunitarias en torno a la comunicación
  • Mala compatibilidad con el navegador limita las opciones/implementación de la visión

Los nuevos candidatos

Aurelia

Aurelia, escrito por Rob Eisenberg, puede verse como un decendente tanto de AngularJS como del marco anterior de Eisenberg, Durandal. Antes de la creación de Aurelia, Eisenberg formó parte del equipo Angular, dejándolo a finales de 2014 por desacuerdo con la dirección del proyecto Angular 2.

Es un marco completo. Aquí está el tono básico de la documentación: Aurelia proporciona capacidades básicas como la inyección de dependencias, plantillas, enrutamiento y pub/sub, para que no tengas que crear un montón de librerías para construir una aplicación. Además de este rico núcleo, Aurelia también proporciona una serie de plugins adicionales para la internacionalización, validación, diálogos modales, virtualización de la interfaz de usuario y mucho más.

Tampoco tienes que juntar un montón de herramientas diferentes. Aurelia proporciona un CLI para generar y construir proyectos, un plugin de navegador para depuración y un plugin de código VS. Sin embargo, no se ve obligado a utilizar ninguno de ellos, ya que está estructurada para permitirle cambiar cualquier detalle, incluso hasta el motor de plantillas/vinculación, con el fin de garantizar la máxima flexibilidad.

Pros

  • Solución completa
  • Lenguaje agnóstico, trabaja con JavaScript, TypeScript y otros lenguajes
  • API estable

Contras

  • Pequeña comunidad vs marcos superiores
  • Menos oportunidades de trabajo

Preact

Preact, cuyo autor es Jason Miller, es una alternativa bien establecida de React que enfatiza el tamaño pequeño de la biblioteca. Al llegar a 3KB gzipped, utiliza la misma API que React y es compatible con gran parte del ecosistema.

Preact en sí mismo no pretende ser una reimplementación de React y hay diferencias. Muchas de estas diferencias son triviales, o pueden ser completamente eliminadas usando preact-compat, que es una capa delgada sobre Preact que intenta lograr un 100% de compatibilidad con React.

La razón por la que Preact no intenta incluir todas y cada una de las características de React es para permanecer pequeño y enfocado - de lo contrario, tendría más sentido simplemente enviar optimizaciones al proyecto React, que ya es una base de códigos muy compleja y bien estructurada. Aunque Preact tiene un mejor rendimiento de arranque (carga de página, por ejemplo) que React, en los últimos benchmarks React es más rápido al actualizar la interfaz de usuario una vez que se carga la página.

Pros

  • Peso ligero
  • Buena documentación
  • Compatible con reactivos

Contras

  • Comunidad más pequeña que React (pero mucho solapamiento, mezcla)
  • El uso de preactuar-compat puede afectar el rendimiento

Julio Roche

Julio Roche es Specialist Director del área de System Development&Integration, en la práctica de DxD de Deloitte. Profesional con más de 25 años de experiencia en el mundo del desarrollo de soluciones tecnológicas, su labor se encuentra actualmente focalizada en el terreno de la movilidad y la transformación digital, lo que le ha llevado a estar involucrado en procesos de implantación de metodologías ágiles desempeñando todos los roles que estas enumeran. Ha sido Agile Coach&Trainer, Scrum Master, Product Owner y parte del Development Team.

Did you find this useful?