Cuadro comparativo de frameworks
Al crear una web, el desarrollo front-end es un área amplia de desarrollo donde nos encontramos una increíble cantidad de alternativas. Todas muy buenas y con estupendas comunidades. Sin embargo, tantas alternativas pueden producir confusión entre las personas que quieren escoger la que más se adapta a sus necesidades y gustos.
Para escoger la mejor es necesario probar los frameworks o librerías y realizar una pequeña aplicación usando cada una de ellas de modo que podamos entender cuáles son sus diferencias y flujos de trabajo. Sin embargo no siempre es posible, por falta de tiempo o simplemente porque no podemos abarcar todas las alternativas. Por ello queremos arrojar un poco de luz de manera comparativa.
¿Framework o librería?
Para comenzar queremos expresar que algunas de las alternativas que vamos a tratar están consideradas como frameworks y otras como librerías o micro-librerías.
La diferencia puede ser sustancial, porque generalmente el alcance y posibilidades son diferentes. Pero lo cierto es que con todas las herramientas podremos llegar al mismo punto. La diferencia es que un framework nos ofrece un completo set de utilidades y características, mientras que en una librería lo tenemos que montar por nuestra cuenta, con la suma de diversas bibliotecas de código distintas.
El framework por tanto nos permite un desarrollo más homogéneo, ya que marca una línea muy definida de trabajo, lo que suele ser interesante en proyectos con equipos de desarrollo mayores. La librería permite una personalización mucho más detallada de los flujos de desarrollo, optimización y adaptabilidad, por lo que muchas veces es preferida por las personas que les gusta tomar sus propias decisiones.
Reactivo vs acceso al DOM
En este análisis nos limitamos únicamente a las librerías con las cuales conseguimos componentes reactivos. Los componentes reactivos son aquellos que son capaces de actualizar automáticamente las vistas cuando los datos de la aplicación cambian, sin necesidad de acceder al DOM para manipular la página. En el desarrollo de este tipo de componentes se toma un enfoque declarativo, mediante el cual indicamos los lugares de la vista donde se deben presentar los datos de la aplicación. Al cambiar los datos, simplemente cambiarán las vistas que los representan.
Alternativas de frameworks / librerías Javascript más populares
React
React Se define a sí mismo como una librería para la construcción de interfaces de usuario. Básicamente nos ofrece un sistema para crear componentes reactivos… y nada más. Sin embargo, existe todo un ecosistema de librerías adicionales usadas por los desarrolladores de React para implementar cualquier pieza que podríamos encontrar en un framework complejo.
Actualmente, React es la librería más usada en todo el mundo para el desarrollo basado en componentes. El desarrollo con React ha permanecido muy estable, lo que le ha ayudado a mantener a su numerosa comunidad en una zona de confort.
Angular
Angular es un framework Javascript avanzado y con una prácticamente infinita cantidad de posibilidades, sin requerir librerías adicionales. Permite construir aplicaciones completas y no únicamente componentes. Tiene una comunidad menor que React, aunque en España ambas alternativas están muy igualadas. Es excelente para aplicaciones medianas y grandes. No quiere decir que no sea adecuada para aplicaciones pequeñas, sino que no le sacaremos tanto jugo. Su curva de aprendizaje es más desafiadora.
VueJS
VueJS se anuncia como «Framework progresivo», lo que significa que puedes ir incrementando su funcionalidad a medida que resulta necesario. Por tanto, tiene cabida tanto para el desarrollo de componentes de interfaz gráfica en sitios web como para desarrollar aplicaciones completas, como harías con el framework Angular. Puedes elegir qué parte necesitas y vas a usar.
Dentro de un panorama dominado por grandes actores (React es de Facebook mientras que Angular está impulsado por Google) destaca VueJS incluso sin tener una gran empresa detrás. Su comunidad es muy fiel, aunque está por ver cómo reacciona a los cambios severos que introducirá su versión 3. Aquí te contamos cuáles son sus ventajas.
Ionic
Ionic es un framework para el desarrollo de aplicaciones Javascript, capaz de desarrollar casi cualquier tipo de software, desde aplicaciones para web, móviles y desktop. En realidad, lo que Ionic ofrece es un marco de trabajo compatible con cualquier framework o librería, ya que básicamente se limita a ofrecer una serie de componentes de interfaz gráfica listos para usar, junto con unas librerías para acceder a lo nativo en dispositivos.
Ionic es una herramienta destacada por la cantidad de entornos en la que se puede usar. Sin embargo, es diferente a las anteriores porque generalmente requerirá otros productos para funcionar, como Angular, React o VueJS. Esto es porque no incluye un motor de aplicación por debajo, por lo que necesitaremos otras herramientas para realizar lo que sería la estructura de aplicación y los mecanismos de propagación de los datos (la parte reactiva).
Desarrollo basado en Web Components
Sin lugar a dudas, las alternativas anteriores son las más populares para el desarrollo de aplicaciones. En concreto React, Angular y VueJS (por ese orden) son las claras dominadoras. Sin embargo hay una serie de alternativas a las que todavía les falta ganar popularidad pero que tienen una filosofía más cercana al navegador.
Se trata de las librerías basadas en Web Components, que es un estándar Javascript disponible en todos los navegadores actuales (Excepto Internet Explorer, para el que es necesario usar polyfills).
Las librerías basadas en Web Components ofrecen características similares a React, pero con mucho menor peso, ya que usan todo lo que los navegadores ofrecen para conseguir los mismos efectos pero de manera estándar. Así consiguen en muchos casos tamaños hasta 10 veces mejor en lo que respecta al peso de la librería. Pero además, al tratarse de productos que usan las características nativas del navegador la dependencia de productos de terceros es mucho menor, lo que redunda positivamente en el ciclo de vida del software.
Algunos ejemplos de librerías basadas en Web Components son LitElement, StencilJS o HyperHTML. El uso de estos productos cada vez se va popularizando más y esperamos que se conviertan en las primeras alternativas con el paso de los años y a medida que más desarrolladores y empresas confíen en los estándares abiertos.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.