\n Una pregunta que me hacen casi a diario es si debo comenzar con ReactJS o Angular. Sin embargo, antes de seguir adelante, d\u00e9jame darte un descargo de responsabilidad.\n<\/p>\n
\n No es un blog en el que voy a criticar uno u otro o decir que siempre debes usar uno sobre el otro. Cada desarrollador y cada proyecto son completamente diferentes y tienen un conjunto diferente de requisitos, por lo que decir que siempre debes usar ReactJS o siempre usar Angular es bastante est\u00fapido.\n<\/p>\n
\n Puede argumentar que Angular es un marco y React es t\u00e9cnicamente una biblioteca en s\u00ed misma. No estoy negando este hecho, pero este es el argumento en el que no quiero entrar ahora. Hay paquetes que puede agregar a React que lo convertir\u00e1n en un marco que compite directamente con Angular. Estamos comparando los dos ecosistemas, no el marco exacto con la biblioteca exacta.\n<\/p>\n
\n Comencemos con Angular. Otro descargo de responsabilidad: cuando digo Angular, me refiero a Angular 4, no a AngularJS.\n<\/p>\n
\n Angular es un marco grande, lo que significa que es poderoso e incluye mucho. Hay mucho que aprender. Vas a escuchar un mont\u00f3n de nuevo vocabulario intimidante como inyecci\u00f3n de dependencia, decoradores de directivas, canalizaciones, etc. Luego tienes que lidiar con Typescript, que es JavaScript m\u00e1s un mont\u00f3n de otras caracter\u00edsticas, incluida la escritura est\u00e1tica.\n<\/p>\n
\n Angular es m\u00e1s obstinado que React, lo cual es una de las ventajas en mi opini\u00f3n porque con React puedes hacer lo mismo de un mill\u00f3n de formas diferentes. Con Angular, generalmente hay una o dos formas de hacer ciertas cosas, lo que hace que sea m\u00e1s f\u00e1cil de seguir y le brinda instrucciones mucho m\u00e1s claras sobre lo que se supone que debe hacer.\n<\/p>\n
\n Pero, de nuevo, todo se reduce a la preferencia. Es posible que le guste la flexibilidad de hacer las cosas de diferentes maneras. Como mencion\u00e9, ReactJS es una biblioteca si estamos hablando solo de la biblioteca principal, es mucho m\u00e1s peque\u00f1a y mucho m\u00e1s f\u00e1cil de aprender que el marco Angular. Puedes decir que aprender\u00e1s React en menos tiempo. React es una gran biblioteca de visualizaci\u00f3n en s\u00ed misma, pero ni siquiera es tan poderosa para aplicaciones grandes. Si desea enrutamiento, validaci\u00f3n, solicitudes HTTP en React, tendr\u00e1 que instalar otros paquetes y eso se suma a la curva de aprendizaje.\n<\/p>\n
\n Si observa el c\u00f3digo React de dos desarrolladores diferentes, probablemente se ver\u00e1n completamente diferentes, ya sea que realicen solicitudes HTTP o manejen el estado y las propiedades. Todo eso se puede manejar de manera muy diferente y muchas veces puede ser de manera incorrecta.\n<\/p>\n
\n Encuentra las mejores pr\u00e1cticas y todos los problemas desaparecen, pero eso se suma a la curva de aprendizaje.\n<\/p>\n
\n A diferencia de Angular React, no usa plantillas. Utiliza algo llamado JSX o extensi\u00f3n de JavaScript o extensi\u00f3n de sintaxis de JavaScript, que nos permite incrustar HTML en JavaScript. Al principio esto puede parecer un poco peculiar. Especialmente, cuando probablemente te ense\u00f1aron a separar tu marcado y tu JavaScript.\n<\/p>\n
\n Piense en ello como poner HTML dentro de JavaScript con un par de cambios diferentes: no puede usar el atributo de clase y tiene que usar el nombre de clase.\n<\/p>\n
\n Por \u00faltimo, tenemos Redux. React se usa a menudo con Redux o Flux, que son administradores de estado de niveles de aplicaci\u00f3n. En mi opini\u00f3n, Redux est\u00e1 jodidamente duro simplemente configurarlo y aprender los conceptos es dif\u00edcil.\n<\/p>\n
\n Creo que est\u00e1 sobreutilizado. Creo que muchos desarrolladores usan redux donde no es necesario. No lo necesita para aplicaciones m\u00e1s peque\u00f1as, pero muchos desarrolladores insisten en usarlo. Eso nuevamente se reduce a la preferencia. Redux es muy poderoso, no quiero quitar eso. Cuando se habla de la curva de aprendizaje, es muy dif\u00edcil de entender.\n<\/p>\n
| \n Caracter\u00edsticas<\/span><\/span>\n <\/td>\n | \n Reaccionar<\/span><\/span>\n <\/td>\n | \n Angular<\/span><\/span>\n <\/td>\n<\/tr>\n| \n Lenguaje de programaci\u00f3n<\/span><\/span>\n <\/td>\n | \n JavaScript<\/span><\/span>\n <\/td>\n | \n Mecanografiado<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Estructura del c\u00f3digo<\/span><\/span>\n <\/td>\n | \n Dogm\u00e1tico<\/span><\/span>\n <\/td>\n | \n Flexible<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Biblioteca principal<\/span><\/span>\n <\/td>\n | \n Peque\u00f1a<\/span><\/span>\n <\/td>\n | \n Muy grande<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Plantillas<\/span><\/span>\n <\/td>\n | \n JSX<\/span><\/span>\n <\/td>\n | \n HTML<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Competencia<\/span><\/span>\n <\/td>\n | \n Peque\u00f1as Aplicaciones<\/span><\/span>\n <\/td>\n | \n Aplicaciones a gran escala<\/span><\/span>\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n | \n Ganador: Es un empate<\/strong>\n<\/p>\n \n No es justo comparar directamente el rendimiento de Angular con React. Angular es un marco completo de adelante hacia atr\u00e1s que incluye enrutamiento, herramientas de formulario, biblioteca HTTP, extensiones reactivas, etc. Todas estas caracter\u00edsticas inflan el marco y lo hacen m\u00e1s lento. Sin embargo, React por s\u00ed solo es solo una biblioteca de visualizaci\u00f3n, que es mucho m\u00e1s peque\u00f1a y r\u00e1pida.\n<\/p>\n \n Una vez que comienza a agregar paquetes como el enrutador, el cliente HTTP o lo que sea que vaya a agregar a su aplicaci\u00f3n React, comienza a acercarse un poco m\u00e1s a donde est\u00e1 Angular y luego puede comenzar a compararlos de manera justa, pero incluso despu\u00e9s de eso, React todav\u00eda gana el departamento de rendimiento. Es una tecnolog\u00eda muy r\u00e1pida en general.\n<\/p>\n \n El cambio de Angular 2 a Angular 4 debajo del cap\u00f3 hizo bastante para aumentar el rendimiento. Angular 4 funciona mejor que Angular 2. No obstante, React a\u00fan gana en el departamento de rendimiento.\n<\/p>\n \n \n Ganador: Reaccionar<\/strong>\n<\/p>\n \n Ambos marcos tienen muchas de las mismas caracter\u00edsticas y ventajas generales: organizan su c\u00f3digo, est\u00e1n basados \u200b\u200ben componentes, ofrecen marcado din\u00e1mico, etc. Est\u00e1n acostumbrados a hacer muchas de las mismas cosas y comparten un muchas de las mismas caracter\u00edsticas.\n<\/p>\n \n Veremos algunas de las caracter\u00edsticas individuales. Angular obviamente tiene muchas m\u00e1s caracter\u00edsticas que React en su n\u00facleo. Perm\u00edtame recordarle que estamos hablando de dos ecosistemas y paquetes comunes que se usan con React.\n<\/p>\n \n Angular es un marco todo incluido. Viene con enrutador de componentes, extensiones reactivas para observables, un cliente HTTP, un m\u00f3dulo de formulario para validaci\u00f3n y la lista contin\u00faa. Adem\u00e1s, ofrece enlace de datos bidireccional de una manera que ning\u00fan otro marco realmente lo hace. Vincular datos de la vista al modelo es extremadamente f\u00e1cil usando la directiva del modelo ng.\n<\/p>\n \n Angular tambi\u00e9n admite MVC (controlador de vista de modelo) o al menos aspectos diferentes de ese patr\u00f3n de dise\u00f1o. tambi\u00e9n viene con caracter\u00edsticas que le permiten implementar pruebas f\u00e1cilmente: tanto las pruebas unitarias como las pruebas de extremo a extremo. Angular est\u00e1 repleto de funciones para crear aplicaciones front-end de nivel empresarial. React, por otro lado, no incluye mucho en su n\u00facleo. Sin embargo, se pueden agregar cosas para darle las caracter\u00edsticas que Angular incluye listas para usar, adem\u00e1s de algunas adicionales.\n<\/p>\n \n React usa un DOM virtual que es muy poderoso. Crea su propia versi\u00f3n liviana del Dom real y solo incluye y actualiza lo que se necesita en lugar de actualizar todo. Virtual DOM es una de las principales razones por las que React es incre\u00edblemente r\u00e1pido.\n<\/p>\n \n React usa JSX, que es m\u00e1s poderoso que las plantillas est\u00e1ndar porque puede poner absolutamente cualquier tipo de JavaScript que desee. No se requiere JSX para usar React, pero hace que las cosas sean mucho m\u00e1s f\u00e1ciles. No puedo pensar en ninguna raz\u00f3n por la que no usar\u00edas JSX con Angular tambi\u00e9n. React tambi\u00e9n hace un muy buen trabajo al administrar el estado y las propiedades de los componentes. Hace que sea muy f\u00e1cil trabajar con los datos y transferirlos entre los componentes. Pasar datos entre componentes, Angular es mucho m\u00e1s dif\u00edcil que hacerlo en React.\n<\/p>\n \n Core React es dif\u00edcil de mantener el estado de nivel de la aplicaci\u00f3n. Component State es f\u00e1cil, pero si desea una verdadera administraci\u00f3n de estado a nivel de aplicaci\u00f3n, necesitar\u00e1 Redux o Flux, lo cual dije antes es bastante confuso de aprender. Los paquetes externos que se usan a menudo como la nueva versi\u00f3n 4 del enrutador React son un poco dif\u00edciles de comprender, pero tambi\u00e9n son muy poderosos una vez que aprende a ejecutarlos y configurarlos. Hay muchas maneras diferentes de usarlo tambi\u00e9n. React no tiene un componente HTTP central como Angular, pero puede usar Fetch o Axios, que es un cliente HTTP externo y luego Enzyme es popular para certificar React. Hay algunos de los diferentes paquetes que se usan com\u00fanmente con React, aunque no forman parte de la biblioteca real.\n<\/p>\n \n Si bien ambas tecnolog\u00edas comparten una buena cantidad de caracter\u00edsticas, si solo est\u00e1 comparando las tecnolog\u00edas principales, Angular es el ganador.\n<\/p>\n \n Ganador: Angular<\/strong>\n<\/p>\n \n Angular y React tienen algunas interfaces de l\u00ednea de comandos bastante agradables. La CLI de Angular y la aplicaci\u00f3n Create React son bastante buenas y realmente nos permiten agilizar el desarrollo. La CLI de Angular es un poco m\u00e1s poderosa porque podemos generar r\u00e1pidamente cosas como componentes y servicios. Create React no puede hacer eso. Tienes que crear todo t\u00fa mismo en cuanto a los archivos y la estructura b\u00e1sica. Ambos sistemas usan web pack, tienen sus propios servidores de desarrollo de carga autom\u00e1tica y tienen herramientas de compilaci\u00f3n y construcci\u00f3n. Obviamente, Angular tiene la tarea adicional de transpilar Typescript. La CLI tiene un script para eso cuando ejecutamos ng serve. Todo lo que sucedi\u00f3 detr\u00e1s de escena. Utiliza algo llamado TSC o Typescript Compiler para eso y ambos tambi\u00e9n tienen herramientas de prueba.\n<\/p>\n \n Si se trata de una aplicaci\u00f3n de pila completa, estos son realmente importantes. No es necesario que los uses. Puede crear una aplicaci\u00f3n React desde cero con el paquete web. Esto hace que sea mucho m\u00e1s f\u00e1cil no solo construir la aplicaci\u00f3n, sino tambi\u00e9n compilarla y construirla para producci\u00f3n.\n<\/p>\n \n Ambos son bonitos incluso en ese departamento.\n<\/p>\n \n Ganador: Angular<\/strong>\n<\/p>\n \n Como dije, ambas tecnolog\u00edas tienen sus propios ecosistemas que ahora se extienden mucho m\u00e1s all\u00e1 del navegador web.\n<\/p>\n \n Ionic es un marco h\u00edbrido popular que es una aplicaci\u00f3n Angular que se ejecuta dentro de un contenedor nativo para aplicaciones m\u00f3viles. Puede crear aplicaciones m\u00f3viles usando Angular. Las aplicaciones h\u00edbridas pueden ser un poco torpes en comparaci\u00f3n con las aplicaciones nativas. La experiencia del usuario puede no ser tan buena a veces, no tan r\u00e1pida y receptiva. Entre los diversos marcos h\u00edbridos, Ionic 3 es el mejor. Tambi\u00e9n est\u00e1 NativeScript, que nos permite crear verdaderas aplicaciones nativas para iOS y Android con Angular y JavaScript.\n<\/p>\n \n No obstante, NativeScript no parece ser tan bueno como React Native de Facebook, al menos en este momento. Angular tambi\u00e9n tiene una biblioteca de componentes de dise\u00f1o de materiales si eres fan\u00e1tico del dise\u00f1o de materiales. Angular Universal es un proyecto semilla que se puede usar para renderizar Angular en el lado del servidor. Tambi\u00e9n hay una tienda NgRx, que es una biblioteca de administraci\u00f3n de estado inspirada en Reax redux. Se basa en el estado mutado por reductores de pares. Tambi\u00e9n tiene integraci\u00f3n con extensiones Reactivas.\n<\/p>\n \n te hubieras dado cuenta Una vez, uno de ellos hace algo que el otro copia de manera diferente. React y Angular se han convertido en marcos de Microsoft y Apple de JavaScript.\n<\/p>\n \n React tiene bastante ecosistema. Tiene React native, que es popular. Es la mejor manera de crear aplicaciones m\u00f3viles con tecnolog\u00edas web. React Native es r\u00e1pido y muchas de las aplicaciones, si se construyen correctamente, est\u00e1n a la altura de las aplicaciones nativas que se construyen en Swift o Java. React tiene una biblioteca de dise\u00f1o de materiales llamada Material-UI que se parece mucho al componente de dise\u00f1o de materiales de Angular pero m\u00e1s maduro. JS es un marco para renderizar aplicaciones React del lado del servidor. Su objetivo es hacer esto de la manera m\u00e1s simple posible para que pueda compararse con Angular Universal. MobX es otra forma de administrar el estado. Funciona un poco diferente que redux. Proporciona un conjunto de decoradores para definir observables y observadores e introduce la l\u00f3gica reactiva en su estado.\n<\/p>\n \n Storybook es un entorno de desarrollo para React. Le permite explorar una biblioteca de componentes, ver diferentes estados de cada componente y desarrollar y probar componentes de forma interactiva. Reactive VR est\u00e1 llevando a React a la realidad virtual. React Desktop es una biblioteca de JavaScript construida sobre la biblioteca Reacts que supuestamente brinda una experiencia de escritorio nativa a la web, con muchos componentes de macOS y Windows 10. El ecosistema React es extremadamente grande y poderoso. React se est\u00e1 abriendo camino en todos los aspectos de la tecnolog\u00eda y es un claro ganador.\n<\/p>\n \n Ganador: Reaccionar<\/strong>\n<\/p>\n \n Si est\u00e1 decidiendo entre estos marcos, mire las diferentes categor\u00edas y vea qu\u00e9 le interesa. Pru\u00e9belos a ambos y vea cu\u00e1l elige m\u00e1s r\u00e1pido. Investigue un poco m\u00e1s que este blog. Nunca obtendr\u00e1s toda la informaci\u00f3n que necesitas de un blog, as\u00ed que lee un poco m\u00e1s.\n<\/p>\n \n Si est\u00e1 buscando un ecosistema m\u00e1s grande que incluya el desarrollo de aplicaciones m\u00f3viles nativas, elija React sin pensarlo dos veces. Si buscas caracter\u00edsticas, Angular es enorme. Hay m\u00e1s funciones de las que necesita.\n<\/p>\n<\/p>\n |