Angular vs. React vs. Vue: una comparación de 2017

Decidir sobre un marco de JavaScript para su aplicación web puede ser abrumador. Angular y React son muy populares en estos días, y hay un advenedizo que ha estado recibiendo mucha tracción últimamente: VueJS . Además, estos son solo algunos de los nuevos niños en el bloque .

Javascripts en 2017: ¡las cosas no son fáciles en estos días!

Entonces, ¿cómo se supone que debemos decidir? Una lista de pros y contras nunca duele. Haremos esto al estilo de mi artículo anterior, " 9 pasos: elegir una pila tecnológica para su aplicación web ".

Antes de comenzar, ¿SPA o no?

Primero debe tomar una decisión clara sobre si necesita una aplicación de una sola página (SPA) o si prefiere adoptar un enfoque de varias páginas. Lea más sobre esto en mi publicación de blog, " Aplicación de una sola página (SPA) frente a aplicaciones web de varias páginas (MPA) " (próximamente, síganme en Twitter para obtener actualizaciones ) .

Los titulares de hoy: Angular, React y Vue

Primero, me gustaría analizar el ciclo de vida y las consideraciones estratégicas. Luego, pasaremos a las características y conceptos de los tres marcos javascript. Finalmente, llegaremos a una conclusión .

Aquí están las preguntas que abordaremos hoy:

  • ¿Cuán maduros son los marcos / bibliotecas ?
  • ¿Es probable que los marcos estén disponibles por un tiempo ?
  • ¿Cuán extensas y útiles son sus comunidades correspondientes ?
  • ¿Qué tan fácil es encontrar desarrolladores para cada uno de los marcos?
  • ¿Cuáles son los conceptos básicos de programación de los marcos?
  • ¿Qué tan fácil es usar los marcos para aplicaciones pequeñas o grandes ?
  • ¿Cómo se ve la curva de aprendizaje para cada marco?
  • ¿Qué tipo de rendimiento puede esperar de los marcos?
  • ¿Dónde puedes mirar más de cerca debajo del capó ?
  • ¿Cómo puede comenzar a desarrollarse con el marco elegido?

¡En sus marcas, listos, fuera!

1. Ciclo de vida y consideraciones estratégicas

Reacción vs. Angular vs. Vue

1.1 Algo de historia

Angular es un marco de Javascript basado en TypeScript. Desarrollado y mantenido por Google, se describe como un " Marco MVW de JavaScript superheroico ". Angular (también "Angular 2+", "Angular 2" o "ng2") es el sucesor reescrito, en su mayoría incompatible con AngularJS (también "Angular.js" o "AngularJS 1.x"). Mientras que AngularJS (el anterior) se lanzó inicialmente en octubre de 2010, todavía está recibiendo correcciones de errores , etc. – el nuevo Angular (sans JS) se presentó en septiembre de 2016 como versión 2. El último lanzamiento importante es la versión 4, como la versión 3 fue omitida . Angular es utilizado por Google, Wix, weather.com, healthcare.gov y Forbes (según madewithangular , stackshare y libscore.com ).

React se describe como " una biblioteca JavaScript para construir interfaces de usuario ". Inicialmente lanzado en marzo de 2013, React fue desarrollado y mantenido por Facebook, que utiliza componentes de React en varias páginas (no como una aplicación de una sola página, sin embargo). Según este artículo de Chris Cordle , React se usa mucho más en Facebook que Angular en Google. React también es utilizado por Airbnb, Uber, Netflix, Twitter, Pinterest, Reddit, Udemy, Wix, Paypal, Imgur, Feedly, Stripe, Tumblr, Walmart y otros (según Facebook , stackshare y libscore.com ).

Facebook está trabajando en el lanzamiento de React Fiber . Cambiará Reaccionar bajo el capó, se supone que la reproducción será mucho más rápida como resultado, pero las cosas serán compatibles con versiones anteriores después de los cambios. Facebook habló sobre los cambios en su conferencia de desarrolladores en abril de 2017, y se publicó un artículo no oficial sobre la nueva arquitectura . React Fiber se lanzó con React 16 en septiembre de 2017.

Vue es uno de los frameworks JS de más rápido crecimiento en 2016. Vue se describe a sí mismo como un " MVVM intuitivo, rápido y composable para construir interfaces interactivas ". Fue lanzado por primera vez en febrero de 2014 por el ex empleado de Google Evan You (BTW: Evan escribió una interesante publicación en el blog sobre las actividades de marketing y los números en la primera semana en ese momento). Ha sido todo un éxito, especialmente teniendo en cuenta que Vue está obteniendo tanta tracción como un espectáculo de un solo hombre sin el respaldo de una gran compañía. Evan actualmente tiene un equipo de doce desarrolladores principales. En 2016, se lanzó la versión 2. Vue es utilizado por Alibaba, Baidu, Expedia, Nintendo, GitLab, una lista de proyectos más pequeños se puede encontrar en madewithvuejs.com .

Los tres Frameworks están disponibles bajo la licencia de MIT.

Reacciona enviado con una licencia especial BSD3 archivo hasta septiembre de 2017. Hubo muchas discusiones sobre el archivo de la patente . Si está interesado en la historia de esto, puede leer esta discusión sobre el tema de Github , las razones y la historia detrás del archivo de la patente (por el ingeniero de Ex-Facebook James Ide ), ¿Por qué no debería tener miedo? (Por Dennis Walsh ), advertencia contra el uso para nuevas empresas (por Raúl Kripalani ) y una declaración anterior de Facebook sobre este tema: Explicación de la licencia de React . De todos modos, ya no debería importar nada, ya que Facebook finalmente anunció, que React obtendrá la licencia de MIT .

1.2 Desarrollo del núcleo

Como ya se mencionó, Angular y React son compatibles y son utilizados por grandes compañías. Facebook, Instagram y Whatsapp lo están usando para sus páginas. Google lo usa en muchos proyectos: por ejemplo, la nueva interfaz de usuario de Adwords se implementó usando Angular & Dart . Una vez más, Vue es realizado por un grupo de personas cuyo trabajo es respaldado a través de Patreon y otros medios de patrocinio. Puedes decidir por ti mismo si esto es positivo o negativo. Matthias Götzke cree que el pequeño equipo de Vue es un beneficio porque conduce a un código / API más ingenioso y menos sobredimensionado .

Echemos un vistazo a algunas estadísticas: Angular enumera 36 personas en su página de equipo, Vue enumera 16 personas y React no tiene una página de equipo. En Github, Angular tiene> 25,000 estrellas y 463 colaboradores, React tiene> 70,000 estrellas y> 1,000 colaboradores, y Vue tiene casi 60,000 estrellas y solo 120 contribuidores. También puedes consultar el historial de Github Stars para Angular, React y Vue . Una vez más, Vue parece tener una tendencia muy buena. Según bestof.js , en los últimos tres meses Angular 2 obtuvo un promedio de 31 estrellas por día, Reacciona 74 estrellas y Vue.JS 107 estrellas.

Una historia de Github Stars para Angular, React y Vue ( Fuente )

Actualización: Gracias a Paul Henschel por señalar las tendencias de npm . Muestran la cantidad de descargas para los paquetes npm dados y son incluso más útiles como una mirada pura a las estrellas de Github:

Los números de descarga npm para los paquetes npm dados en los últimos 2 años.

1.3 Ciclo de vida del mercado

Es difícil comparar Angular, React y Vue en Google Trends debido a los diversos nombres y versiones. Una forma de aproximarse podría ser buscar en la categoría "Internet y tecnologías". Aquí está el resultado:

Oh bien. Vue no se creó antes de 2014, entonces algo está mal aquí. La Vue es francés para "vista", "vista" u "opinión". Quizás es eso. Una comparación de "VueJS" y "Angular" o "Reaccionar" tampoco es justa, ya que VueJS apenas tiene resultados en comparación con los demás.

Probemos algo más, entonces. El radar de tecnología de ThoughtWorks da una buena impresión de cómo las tecnologías evolucionan con el tiempo. Redux está en la etapa de adopción (¡para ser adoptado en proyectos!), Y ha sido invaluable en varios proyectos de ThoughtWorks. Vue.js está en la etapa de prueba (¡pruébalo!). Se describe como una alternativa ligera y flexible a Angular con una curva de aprendizaje más baja. Angular 2 se encuentra en la etapa de evaluación : los equipos de ThoughtWork lo utilizan con éxito, pero aún no es una recomendación sólida.

Según la última encuesta de Stackoverflow 2017 , React es amado por el 67% de los desarrolladores encuestados y AngularJS en un 52%. "Sin intereses para seguir desarrollando" registra números más altos para AngularJS (48%) frente a React (33%). Vue no está en el Top 10 en ninguno de los casos. Luego está la encuesta statejs.com que compara " frameworks de font-end ". Los hechos más interesantes: React y Angular tienen una conciencia del 100%, y Vue es desconocido para el 23% de las personas encuestadas. Con respecto a la satisfacción, React obtuvo un 92% de "usaría de nuevo", Vue 89% y Angular 2 solo 65%.

¿Qué pasa con otra encuesta de satisfacción del cliente? Eric Elliott comenzó uno en octubre de 2016 para evaluar Angular 2 y React. Solo el 38% de las personas encuestadas volvería a usar Angular 2, mientras que el 84% volvería a utilizar React.

1.4 Soporte y migraciones a largo plazo

Las API React son bastante estables, como Facebook afirma en sus principios de diseño . También hay algunos scripts para ayudarte a pasar de tu API actual a una más nueva: echa un vistazo a react-codemod . Las migraciones son bastante fáciles y no existe tal cosa (necesaria) como una versión de soporte a largo plazo. En esta publicación de Reddit, la gente nota que las actualizaciones nunca fueron realmente un problema . El equipo de React escribió una publicación en el blog sobre su esquema de control de versiones . Cuando agregan una advertencia de obsolescencia, la mantienen para el resto de la versión de lanzamiento actual antes de que se modifique el comportamiento en la próxima versión principal. No hay un cambio planificado para una nueva versión principal: v14 se lanzó en octubre de 2015, v15 se publicó en abril de 2016 y v16 aún no tiene fecha de lanzamiento. La actualización no debería ser un problema, como lo notó recientemente un desarrollador central de React .

En cuanto a Angular, hay una publicación en el blog sobre versiones y lanzamiento de Angular comenzando con la versión v2. Habrá una actualización importante cada seis meses, y habrá un período de desaprobación de al menos seis meses (dos versiones principales). Hay algunas API experimentales marcadas en la documentación con períodos de obsolescencia más cortos. Todavía no hay un anuncio oficial, pero de acuerdo con este artículo , el equipo Angular ha anunciado versiones de soporte a largo plazo a partir de Angular 4 . Esos serán compatibles durante al menos un año más allá del próximo lanzamiento de la versión principal. Esto significa que Angular 4 será compatible hasta al menos septiembre de 2018 con correcciones de errores y parches importantes. En la mayoría de los casos, actualizar Angular de v2 a v4 es tan fácil como actualizar las dependencias angulares. Angular también ofrece una guía con información sobre si se necesitan más cambios.

El proceso de actualización de Vue 1.xa 2.0 debe ser fácil para una aplicación pequeña: el equipo de desarrolladores ha afirmado que el 90% de las API permanecen iguales. Hay una buena herramienta de actualización y ayuda para la migración de diagnósticos que funciona en la consola. Un desarrollador notó que la actualización de v1 a v2 todavía no era divertida en una gran aplicación. Desafortunadamente, no existe una hoja de ruta clara (pública) sobre la próxima versión principal o información sobre planes para versiones LTS.

Una cosa más: Angular es un marco completo y ofrece muchas cosas juntas. React es más flexible que Angular, y probablemente termines utilizando librerías más independientes, inestables y de rápido movimiento, esto significa que debes encargarse de las actualizaciones y migraciones correspondientes por tu cuenta. También podría ser perjudicial si ciertos paquetes ya no se mantienen o algún otro paquete se convierte en el estándar de facto en algún momento.

1.5 Recursos humanos y reclutamiento

Si tiene desarrolladores HTML internos que no quieren aprender más Javascript, es mejor que elija Angular o Vue. Reaccionar implica más Javascript (hablamos de esto más adelante).

¿Tienes diseñadores trabajando cerca del código? El usuario "pier25" señala en Reddit que React tiene sentido si trabajas para Facebook, donde todos son desarrolladores de superhéroes . En el mundo real, no siempre encontrará un diseñador que pueda modificar JSX; por lo tanto, trabajar con plantillas HTML será mucho más fácil.

Lo bueno del marco angular es que un nuevo desarrollador de Angular 2 de otra empresa se familiarizará rápidamente con todas las convenciones necesarias. Los proyectos React son diferentes en términos de decisiones arquitectónicas, y los desarrolladores deben familiarizarse con la configuración particular del proyecto.

Angular también es bueno si tienes desarrolladores con un fondo orientado a objetos o que no les gusta Javascript. Para llevar ese punto a casa, aquí hay una cita de Mahesh Chand :

No soy un desarrollador de JavaScript. Mi experiencia es construir sistemas empresariales a gran escala utilizando plataformas de software "reales". Empecé en 1997 creando aplicaciones usando C, C ++, Pascal, Ada y Fortran. (…) Puedo decir claramente que JavaScript es solo un galimatías para mí. Al ser un MVP y experto de Microsoft, tengo una buena comprensión de TypeScript. Tampoco veo a Facebook como una empresa de desarrollo de software. Sin embargo, Google y Microsoft ya son los innovadores de software más grandes. Me siento más cómodo trabajando con un producto que tiene un fuerte respaldo de Google y Microsoft. También (…) con mi formación, sé que Microsoft tiene planes aún mayores para TypeScript.

Bueno, entonces … probablemente debería mencionar que Mahesh es un Director Regional en Microsoft.

2. Comparación de React, Angular & Vue

2.1 Componentes

Los marcos en cuestión están basados ??en componentes. Un componente obtiene una entrada, y después de un comportamiento / computación interna, devuelve una plantilla de UI procesada (un área de inicio de sesión / cierre de sesión o un elemento de la lista de tareas pendientes) como salida. Los componentes definidos deben ser fáciles de reutilizar en la página web o dentro de otros componentes. Por ejemplo, podría tener un componente de cuadrícula (compuesto por un componente de encabezado y varios componentes de fila) con varias propiedades (columnas, información de encabezado, filas de datos, etc.) y poder reutilizar el componente con diferentes conjuntos de datos en otra página. Aquí hay un artículo completo sobre los componentes , en caso de que quiera obtener más información al respecto.

React y Vue son excelentes para manejar componentes tontos: funciones pequeñas sin estado que reciben una entrada y elementos de retorno como salida.

2.2 Typescript contra ES6 contra ES5

React se centra en el uso de Javascript ES6. Vue utiliza Javascript ES5 o ES6.

Angular depende de TypeScript . Esto ofrece más consistencia en ejemplos relacionados y proyectos de código abierto (los ejemplos de React se pueden encontrar en ES5 o ES6). Esto también introduce conceptos como decoradores y tipos estáticos. Los tipos estáticos son útiles para las herramientas de inteligencia de código, como refactorización automática, saltar a las definiciones, etc. También se supone que reducen el número de errores en una aplicación, aunque ciertamente no hay consenso sobre este tema. Eric Elliott no está de acuerdo en su artículo " El secreto sorprendente sobre tipos estáticos ". Daniel C Wang dice que el coste del uso de tipos estáticos no hace ningún daño y que es bueno tener tanto el desarrollo guiado por pruebas (TDD) y tipos estáticos.

También debería saber que puede usar Flow para habilitar la verificación de tipo en React . Es un comprobador de tipos estático desarrollado por Facebook para JavaScript. Flow también se puede integrar en VueJS .

Si escribe su código en TypeScript, ya no está escribiendo JavaScript estándar. A pesar de que está creciendo, TypeScript todavía tiene una pequeña base de usuarios en comparación con la de todo el lenguaje de JavaScript. Uno de los riesgos podría ser que usted se está moviendo en la dirección equivocada, porque puede mecanografiado – sin embargo poco probable que se – también desaparecen con el tiempo. Además, TypeScript agrega una gran cantidad de sobrecarga (de aprendizaje) a los proyectos; puede leer más sobre esto en la comparación Angular 2 vs. Reacción de Eric Elliott .

Actualización : James Ravenscroft escribió en un comentario a este artículo, que TypeScript tiene soporte de primera clase para JSX : los componentes pueden verificarse sin problemas. Entonces, si te gusta TypeScript y quieres usar Reaccionar, esto no debería ser un problema.

2.3 Plantillas – JSX o HTML

Reacciona rompiendo con las mejores prácticas de larga data. Durante décadas, los desarrolladores intentaron separar las plantillas de interfaz de usuario y la lógica de Javascript en línea, pero con JSX, se entremezclaron de nuevo. Esto puede sonar terrible, pero debe escuchar la charla de Peter Hunt " Reaccionar: Repensar las mejores prácticas " (desde octubre de 2013). Señala que separar plantillas y lógica es simplemente una separación de tecnologías, no de preocupaciones. Debe compilar componentes en lugar de plantillas. Los componentes son reutilizables, compostables y comprobables por unidad.

JSX es un preprocesador opcional para la sintaxis similar a HTML que se compilará en Javascript más adelante. Tiene algunos caprichos: por ejemplo, necesita usar className en lugar de clase, porque este último es un nombre protegido en Javascript. JSX es una gran ventaja para el desarrollo, porque tiene todo en un solo lugar, y la finalización del código y las comprobaciones en tiempo de compilación funcionan mejor. Cuando crea un error tipográfico en JSX, Reaccionar no se compilará e imprimirá el número de línea donde ocurrió el error tipográfico. Angular 2 falla silenciosamente en tiempo de ejecución (este argumento es probablemente inválido si usa AOT con Angular).

JSX implica que todo en React es Javascript: se usa tanto para las plantillas JSX como para la lógica. Cory House señala esto en su artículo de enero de 2016: " Angular 2 continúa poniendo 'JS' en HTML. React pone 'HTML' en JS. ". Esto es algo bueno, porque Javascript es más poderoso que HTML.

Las plantillas angulares son HTML mejorado con lenguaje angular especial (cosas como ngIf o ngFor ). Si bien React requiere conocimiento de JavaScript, Angular te obliga a aprender la sintaxis específica de Angular .

Vue cuenta con " componentes de archivo ingle ". Esto parece una disyuntiva con respecto a la separación de intereses: las plantillas, los scripts y los estilos están en un solo archivo, pero en tres secciones diferentes ordenadas. Esto significa que obtiene resaltado de sintaxis, compatibilidad con CSS y un uso más sencillo de preprocesadores como Jade o SCSS. He leído en otros artículos que JSX es más fácil de depurar porque Vue no mostrará errores de sintaxis HTML. Esto no es cierto porque Vue convierte HTML para funciones de representación , por lo que los errores se muestran sin problemas (¡gracias a Vinicius Reis por los comentarios y la corrección!).

Nota al margen: si le gusta la idea de JSX y desea usarla en Vue, puede usar babel-plugin-transform-vue-jsx .

2.4 Marco vs. biblioteca

Angular es un marco en lugar de una biblioteca, ya que proporciona opiniones sólidas sobre cómo debe estructurarse su aplicación y también tiene más funciones listas para usar. Angular es una "solución completa", con baterías incluidas y lista para brindarle un comienzo agradable. No necesita analizar bibliotecas, soluciones de enrutamiento o similares, puede simplemente comenzar a trabajar.

React y Vue, por otro lado, son universalmente flexibles. Sus bibliotecas se pueden vincular a todo tipo de paquetes (hay mucho para React on npm , pero Vue tiene menos paquetes porque todavía es bastante joven). Con React, incluso puedes intercambiar la biblioteca por alternativas compatibles con API como Inferno . Sin embargo, con gran flexibilidad viene una gran responsabilidad: no hay reglas y orientación limitada con React. Cada proyecto requiere una decisión sobre su arquitectura, y las cosas pueden salir mal más fácilmente.

Angular, por otro lado, viene con un nido confuso de herramientas de compilación, repetitivo, borradores y adaptadores de tiempo para tratar. Esto también es cierto para React si se usan kits de inicio o plantillas estándar. Naturalmente son muy útiles, pero React funciona de la caja, y esa es probablemente la forma en que debes aprenderlo. A veces, la variedad de herramientas necesarias para trabajar en un entorno de Javascript se conoce como "fatiga Javascript". Eric Clemmons tiene un artículo al respecto que dice lo siguiente:

Todavía hay un montón de herramientas instaladas, que no está acostumbrado, al comenzar con el marco. Se generan, pero es probable que muchos desarrolladores no entiendan lo que sucede bajo el capó, o les lleva mucho tiempo hacerlo.

Vue parece ser el más limpio y liviano de los tres marcos. GitLab tiene una publicación en el blog sobre su decisión con respecto a Vue.js (octubre de 2016):

Vue.js viene con el equilibrio perfecto entre lo que hará por usted y lo que debe hacer usted mismo. (…) Vue.js está siempre a su alcance, una red de seguridad sólida pero flexible lista para ayudarlo a mantener su programación eficiente y su sufrimiento infligido por DOM a un mínimo.

Les gusta la simplicidad y la facilidad de uso: el código fuente es muy legible y no se necesita documentación ni librerías externas. Todo es muy directo. Vue.js "no hace grandes suposiciones sobre mucho de nada tampoco". También hay un podcast sobre la decisión de GitLab .

Otro blog sobre un cambio hacia Vue proviene de Pixeljets. Reaccionar " fue un gran paso adelante para el mundo de JS en términos de conciencia del estado , y mostró a mucha gente la verdadera programación funcional de una manera buena y práctica ". Uno de los grandes contras de React vs. Vue es el problema de dividir componentes en componentes más pequeños debido a las restricciones de JSX. Aquí hay una cita del artículo:

Para mí y para mi equipo, la legibilidad del código es importante, pero sigue siendo muy importante que la escritura del código sea divertida. No es divertido crear 6 componentes cuando está implementando un widget de calculadora realmente simple. En muchos casos, también es malo en términos de mantenimiento, modificaciones o la aplicación de revisión visual a algún widget, ya que necesita saltar alrededor de múltiples archivos / funciones y verificar cada pequeño fragmento de HTML por separado. Una vez más, no sugiero escribir monolitos: sugiero usar componentes en lugar de microcomponentes para el desarrollo diario.

Hay discusiones interesantes sobre la publicación del blog sobre noticias de Hacker y Reddit : hay argumentos de disidentes y otros partidarios de Vue por igual.

2.5 Gestión del estado y enlace de datos

Construir interfaces de usuario es difícil, porque hay estados en todas partes. Los datos que cambian con el tiempo implican complejidad. Los flujos de trabajo de estado definido son de gran ayuda cuando las aplicaciones crecen y se vuelven más complejas. Para aplicaciones limitadas, esto es probablemente excesivo y algo así como Vanilla JS sería suficiente.

¿Como funciona? Los componentes describen la IU en cualquier punto en el tiempo. Cuando los datos cambian, el marco vuelve a representar todo el componente de la interfaz de usuario: los datos mostrados siempre están actualizados. Podemos llamar a este concepto "UI como función".

Reaccionar a menudo funciona incluido con Redux. Redux se describe a sí mismo en tres principios fundamentales :

  • Única fuente de verdad
  • El estado es de solo lectura
  • Los cambios se realizan con funciones puras

En otras palabras: el estado de la aplicación completa se almacena en un árbol de objetos dentro de una sola tienda. Esto ayuda a depurar la aplicación, y algunas funcionalidades son más fáciles de implementar. El estado es de solo lectura y solo se puede cambiar a través de acciones para evitar condiciones de carrera (también ayuda con la depuración). Los reductores se escriben para especificar cómo los estados se pueden transformar mediante acciones.

La mayoría de los tutoriales y plantillas contienen Redux ya integrado, pero puedes usar Reaccionar sin él (y es posible que no necesites Redux en tu proyecto). Redux introduce complejidad y restricciones bastante fuertes en su código. Si estás aprendiendo a reaccionar, deberías pensar en aprender a reaccionar directamente antes de dirigirte a Redux. Definitivamente deberías leer " No necesitarás Redux " de Dan Abramov .

Algunos desarrolladores sugieren el uso de Mobx en lugar de Redux . Puedes pensar que es un "Redux automático", lo que hace que todo sea mucho más fácil de usar y entender desde el principio. Si quieres echarle un vistazo, deberías comenzar con la introducción . También puede leer esta útil comparación entre Redux y MobX por Robin. El mismo autor también ofrece información sobre cómo pasar de Redux a MobX . Esta lista es útil si desea consultar otras bibliotecas de Flux. Y si vienes de un MVC-world, querrás leer el artículo " Thinking in Redux (cuando todo lo que has conocido es MVC) " de Mikhail Levkovsky .

Vue puede hacer uso de Redux, pero ofrece Vuex como su propia solución.

Una gran diferencia entre React y Angular es la unión de una vía vs. la de dos vías . El enlace bidireccional de Angular cambia el estado del modelo cuando se actualiza el elemento UI (por ejemplo, una entrada del usuario). Reaccionar solo va en una dirección: actualiza primero el modelo y luego representa el elemento UI. El método de Angular es más limpio en el código y más fácil de implementar para el desarrollador. La forma de Reac resulta en una mejor visión general de los datos, porque los datos solo fluyen en una dirección (esto facilita la depuración).

Ambos conceptos tienen sus pros y sus contras. Debe comprender los conceptos y determinar si esto influye en su decisión marco. El artículo " Enlace de datos bidireccional: Angular 2 y React " y esta pregunta Stackoverflow ofrecen una buena explicación. Aquí puede encontrar algunos ejemplos de códigos interactivos (3 años, solo para Angular 1 y React). Por último, Vue es compatible tanto con el enlace unidireccional como el enlace bidireccional (unidireccional por defecto).

Hay un largo artículo sobre diferentes tipos de estados y la gestión del estado en aplicaciones angulares (por Victor Savkin ) si desea leer más.

2.6 Otros conceptos de programación

Angular incluye inyección de dependencia, un patrón en el que un objeto suministra las dependencias (un servicio) a otro objeto (un cliente). Esto lleva a una mayor flexibilidad y un código más limpio. El artículo " Comprensión de la inyección de dependencia " explica este concepto con más detalle.

El patrón modelo-vista-controlador (MVC) divide un proyecto en tres componentes: modelo, vista y controlador. Angular como MVC-framework tiene MVC fuera de la caja. Reaccionar solo tiene la V: necesitas resolver el M y el C por tu cuenta.

2.7 Flexibilidad y reducción de tamaño a microservicios

Puede trabajar con React o Vue simplemente agregando la biblioteca Javascript al código fuente. Esto no es posible con Angular debido a su uso de TypeScript.

Ahora nos estamos moviendo más hacia microservicios y microapps. React y Vue le dan más control para dimensionar una aplicación seleccionando solo las cosas que realmente son necesarias. Ofrecen más flexibilidad para pasar de un SPA a microservicios utilizando partes de una aplicación anterior. El trabajo angular es mejor para SPA, ya que probablemente esté demasiado hinchado para ser utilizado en microservicios.

Como señala Cory House :

JavaScript se mueve rápido, y React le permite intercambiar pequeñas partes de su aplicación por mejores bibliotecas en lugar de esperar y esperar que su marco innovará. La filosofía de herramientas pequeñas, compostables y de un solo propósito nunca pasa de moda.

Algunas personas también usan React para sitios web que no son SPA (por ejemplo, para formularios complejos o asistentes). Incluso Facebook usa React, no para la página principal, sino para páginas y funciones específicas.

2.8 Tamaño y rendimiento

Hay un lado opuesto a toda la funcionalidad: el marco angular está bastante hinchado. El tamaño del archivo gzip es 143k, comparado con 23K para Vue y 43k para React.

React y Vue tienen un DOM virtual, que se supone que mejora el rendimiento. Si estás interesado en esto, puedes leer acerca de las diferencias entre el DOM virtual y el DOM , así como los beneficios reales del DOM virtual en reaccionar.js . Además, uno de los autores del Virtual-DOM contesta una pregunta relacionada con el rendimiento en Stackoverflow.

Para verificar el rendimiento, eché un vistazo al gran js-framework-benchmark . Puede descargarlo y ejecutarlo usted mismo, o echar un vistazo a la tabla de resultados interactivos . Antes de verificar los resultados, debe saber que los marcos están infringiendo los puntos de referencia , por lo que una verificación de rendimiento no debe utilizarse para tomar decisiones.

El rendimiento de la asignación de memoria angular, de reacción y de Vue ( fuente ) en MB ( fuente )

Para resumir: Vue tiene un gran rendimiento y la asignación de memoria más profunda, pero todos estos marcos son muy similares entre sí en comparación con marcos especialmente lentos o rápidos (como Inferno ). Una vez más: los puntos de referencia de rendimiento solo deben considerarse como una nota al margen, no como un veredicto.

2.9 Prueba

Facebook usa Jest para probar su código React. Aquí hay una comparación entre Jest y Mocha , y hay un artículo sobre cómo usar Enzyme con Mocha . Enzyme es una utilidad de prueba de JavaScript utilizada en Airbnb (junto con Jest, Karma y otros corredores de prueba). Si desea leer más, hay algunos artículos más antiguos sobre pruebas en React ( aquí y aquí ).

Luego está Jasmine como un marco de prueba en Angular 2. Hay una diatriba en un artículo de Eric Elliott que dice que Jasmine " da como resultado millones de formas de escribir pruebas y afirmaciones, necesitando leer cuidadosamente cada una para comprender lo que está haciendo". La salida también es muy hinchada y laboriosa de leer. Hay algunos artículos informativos sobre la integración de Angular 2 con Karma y Mocha . Aquí hay un video viejo (de 2015) sobre las estrategias de prueba con Angular 2 .

Vue carece de orientación para las pruebas, pero Evan escribió en su vista previa de 2017 que el equipo planea trabajar en esto . Recomiendan usar Karma . Vue trabaja junto con Jest , y también hay avoriaz como utilidad de prueba .

2.10 Aplicaciones universales y nativas

Las aplicaciones universales también están introduciendo aplicaciones en la web, en el escritorio y en el mundo de las aplicaciones nativas.

React y Angular son compatibles con el desarrollo nativo. Angular tiene NativeScript (respaldado por Telerik) para aplicaciones nativas y Ionic Framework para aplicaciones híbridas. Con React, puede consultar el reproductor de reacciones reactivas para crear aplicaciones de iOS y Android de plataforma cruzada o nativo de las versiones para aplicaciones nativas. Una gran cantidad de aplicaciones (incluyendo Facebook, verifique el Showcase para más información) están compiladas con react-native.

Los marcos de Javascript renderizan páginas en el cliente. Esto es malo para el rendimiento percibido, la experiencia general del usuario y el SEO. La pre representación del lado del servidor es un plus. Los tres marcos tienen bibliotecas para encontrar ayuda con eso. Para React hay next.js , Vue tiene nuxt.js , y Angular tiene … Angular Universal .

2.11 Curva de aprendizaje

Definitivamente hay una curva de aprendizaje pronunciada para Angular. Tiene una documentación completa, pero a veces puede sentirse frustrado porque las cosas son más difíciles de lo que parecen. Incluso cuando tiene una comprensión profunda de Javascript, necesita aprender lo que está sucediendo bajo el capó del framework. La configuración es mágica al principio, y ofrece una gran cantidad de paquetes y códigos incluidos. Esto puede verse como negativo porque hay un gran ecosistema preexistente que necesita aprender a lo largo del tiempo. Por otro lado, podría ser bueno en una situación dada porque ya se han tomado muchas decisiones. Con React, probablemente deba tomar muchas decisiones imponentes con respecto a las bibliotecas de terceros. Hay 16 paquetes de flujo diferentes para que la administración estatal pueda elegir en React solo.

Vue es bastante fácil de aprender. Las empresas cambian a Vue porque parece ser mucho más fácil para los desarrolladores junior. Aquí puedes leer acerca de alguien que describe el movimiento de su equipo de Angular a Vue . Según otro usuario , la aplicación React en su compañía era tan compleja que un nuevo desarrollador no podía mantenerse al día con el código. Con Vue, la brecha entre los desarrolladores junior y senior se reduce, y pueden colaborar más fácilmente y con menos errores, problemas y tiempo para desarrollarse.

Algunas personas afirman que las cosas que han hecho en React hubieran sido mejor escritas en Vue. Si usted es un desarrollador de JavaScript inexperto, o si trabajó principalmente con jQuery en la última década, debe pensar en usar Vue. El cambio de paradigma es más pronunciado cuando se mueve a Reaccionar. Vue se parece más al Javascript simple y al mismo tiempo presenta algunas ideas nuevas: componentes, un modelo impulsado por eventos y flujo de datos unidireccional. También tiene una huella pequeña.

Mientras tanto, Angular y React tienen su propia forma de hacer las cosas. Es posible que se interpongan en su camino, porque necesita ajustar sus prácticas para que las cosas funcionen a su manera . Eso puede ser perjudicial porque es menos flexible y hay una curva de aprendizaje más pronunciada. También podría ser un beneficio porque estás obligado a aprender los conceptos correctos mientras aprendes la tecnología. Con Vue, puedes hacer las cosas a la antigua usanza de Javascript. Esto puede ser más fácil al principio, pero podría convertirse en un problema a largo plazo si las cosas no se hacen correctamente.

Cuando se trata de depuración, es una ventaja que React y Vue tengan menos magia. La búsqueda de errores es más fácil porque hay menos lugares para buscar y los rastros de pila tienen mejores distinciones entre su propio código y el de las bibliotecas. Las personas que trabajan con React informan que nunca tienen que leer el código fuente de la biblioteca. Sin embargo, al depurar su aplicación angular, a menudo necesita depurar las partes internas de Angular para comprender el modelo subyacente. En el lado positivo, se supone que los mensajes de error deben ser más claros y más informativos, comenzando con Angular 4.

2.12 Angular, React y Vue bajo el capó

¿Quieres verificar el código fuente tú mismo? ¿Quieres ver cómo se sienten las cosas?

Probablemente quieras consultar primero los repositorios de Github: Reaccionar ( github.com/facebook/react ) , Angular ( github.com/angular/angular ) y Vue ( github.com/vuejs/vue )

¿Cómo se ve la sintaxis? ValueCoders compara la sintaxis de Angular, React y Vue .

También es bueno ver cosas en producción, junto con el código fuente subyacente. TodoMVC enumera docenas de la misma aplicación Todo, escrita con diferentes marcos de JavaScript: puede comparar las soluciones Angular , React y Vue . RealWorld crea una aplicación en el mundo real (una clonación media), y tienen soluciones para Angular (4+) y React (con Redux) listas. Vue es un trabajo en progreso.

También hay algunas aplicaciones del mundo real que podrías echarle un vistazo. Aquí hay soluciones para Reaccionar:

Hay algunas aplicaciones para Angular:

También hay soluciones para Vue:

Conclusión

Decide un marco ahora

React, Angular y Vue son geniales, y ninguno de ellos está claramente por encima de los demás. Confía en tu instinto. Este último poco de cinismo entretenido puede ayudar a su decisión:

El pequeño y sucio secreto es que la mayoría del "desarrollo moderno de JavaScript" no tiene nada que ver con la construcción de sitios web. Se trata de crear paquetes que pueden ser utilizados por personas que crean bibliotecas que pueden ser utilizadas por personas que crean marcos que las personas que escriben tutoriales y enseñan cursos. puedo enseñar. No estoy seguro de que alguien esté realmente construyendo algo para que interactúen los usuarios reales.

Esto es una exageración, por supuesto, pero es probable que haya algo de verdad en ello. Sí, hay un montón de zumbido en el ecosistema Javascript. Probablemente encuentre muchas otras alternativas atractivas durante su búsqueda: trate de no cegarse ante el marco más nuevo y brillante.

¿Qué debería elegir?

Si trabajas en Google: Angular

Si te encanta TypeScript: Angular ( o React )

Si adoras la programación orientada a objetos (OOP): Angular

Si necesita orientación, estructura y una mano amiga: Angular

Si trabajas en Facebook: reacciona

Si te gusta la flexibilidad: reacciona

Si amas los grandes ecosistemas: reacciona

Si le gusta elegir entre docenas de paquetes: Reaccionar

Si te encanta JS y el "enfoque todo-lo-es-javascript": reacciona

Si te gusta el código realmente limpio: Vue

Si quieres la curva de aprendizaje más fácil: Vue

Si quieres el marco más ligero: Vue

Si desea separar las preocupaciones en un solo archivo: Vue

Si trabajas solo o tienes un pequeño equipo: Vue (o React)

Si tu aplicación tiende a ser realmente grande: Angular (o Reaccionar)

Si quieres construir una aplicación con react-native: React

Si desea tener muchos desarrolladores en el grupo: A ngular o React

Si trabajas con diseñadores y necesitas archivos HTML limpios: Angular o Vue

Si te gusta Vue pero temes al ecosistema limitado: reacciona

Si no puede decidir, primero aprenda React , luego Vue , luego Angular .

Entonces, ¿has tomado tu decisión?

¡Sí, lo hiciste!

¡Bien hecho! Lea sobre cómo comenzar a desarrollar en Angular, React o Vue (próximamente, síganme en Twitter para obtener actualizaciones).

Más recursos

Gracias por tu interés. Olvidé algo importante? ¿Tienes una opinión diferente? Siempre estoy contento de recibir comentarios.

Sígueme en Twitter para actualizaciones y más: @jensneuhaus – ?