Creamos la misma aplicación con ReactJS y Angular y te contamos las diferencias

👉 Conoce nuestras vacantes actuales de tecnología en bit.ly/talento...
En este vídeo creamos la misma aplicación con Angular y React para contarte las diferencias
Aquí tienes los repositorios:
github.com/Gar...
github.com/Gar...
Si quieres aprender más de programación, te dejamos por aquí otros Garaje Code Pills que seguro que te gustarán:
CRUD con Angular y Firebase (Firestore): • CRUD con Angular y Fir...
Sube y descarga archivos con Firebase Storage en Angular: • Sube y descarga archiv...
Taller de Composition API en Vue 3: • Taller de Composition ...
Esta introducción a Firebase con Angular fue impartida por Mario Girón, Senior Full Stack Developer:
/ mariogironm
Si quieres estar al tanto de todo lo que hacemos, puedes inscribirte aquí 👇
garajedeideas....
----------
Garaje de Ideas es un estudio de Diseño, Tecnología y Data. En este canal encontrarás tutoriales, cursos y ejemplos prácticos paso a paso de desarrollo web y programación.
Podrás encontrar desde cursos de JavaScript, Node.js, D3.js, Vue3, Typescript, HTML, CSS, React... hasta cómo optimizar tu proceso de trabajo.

[@queen420nft]

Conclusión: Angular es un framework

[@wanderrojasb]

Continúa mi sólida preferencia por Angular, excelente material!

[@Yoko-0x0]

material es horrible. cuando hice un software grande. me fue mal. mejor compré kendo para angular

[@erichhc9698]

Angular 💟

[@fabioescobar5463]

Angular > React. Sin embargo, en la mayoría de empresas trabajan con React. Una paradoja.

[@urtaav639]

muy chulo angular con su nueva sintaxis y lo que se viene !!!

[@Z4yx]

Seria interesante ver paralelismo con Vue, React y Angular

[@RetroGameCO]

Angular me da de comer y pago mi departamento; React esta bien gracias xD

[@lericode]

Conclusión: Angular es una bestia 🔥

[@mariogiron]

Es una opción muy interesante sin duda. Lo bueno es manejar todas sus posibilidades

[@lericode]

@@mariogiron Muy interesante y en constante evolución, me gusta lo que se ve en el panorama para el framework.

[@nico6346]

dependiendo el proyecto , cada uno es una bestia

[@sokka7460]

Una de las grandes ventajas de angular es su cli y su sistema de actualizaciones, cuanto más te quedes cerca de su core y menos dependencias externas uses, actualizar puede ser cuestión de minutos. Yo he actualizado aplicaciones de angular 8 a angular 15 en media hora, en otros casos donde usamos más librerías externas no fue tan sencillo, pero vaya, una maravilla solo por eso

[@andresfelipeordonez1333]

la verdad es que me gustan los tres, vue - Angular - React , son tres bestias 2 frameworks y una librería que si las aprendes muy bien sabrás cual elegir en cada uno de los proyetos.

[@ArkTemplarioMaster]

Like por Angular

[@yoanestradablanco1608]

Like por los dos incluso para vue que buenos 3 frameworks nos han dado la verdad, no me gusta solid

[@WylderQuiceno]

Sería bueno una comparación entre frameworks Angular vs Next

[@Garajedeideas]

Nos lo anotamos a ver si lo podemos encajar en algún vídeo. Gracias por el aporte!

[@juantriana821]

​@@GarajedeideasYo quiero esa comparación

[@Lanzelord]

@@juantriana821 x2

[@sokka7460]

Angular y Next tienen objetivos diferentes y no se pueden comparar directamente, Next es un meta framework😊. La comparación sería de Next (react) y Analog (Angular)

[@cityfight6665]

Manejo los 2, pero la verdad Angular me gusta mas.

[@sgofdez]

Muy interesante. Hubiese sido un momento clave haber enfocado el codigo de angular con signals, ya que se usan literalmente los mismos hooks que en React: useState = signal | useEffect == effect De la misma forma, en lugar de tener 3 archivos por "componente", podias haberlos introducido todo dentro del .ts . Así se vería mas claro que una de las mayores diferencias es que un framework viene con stack por defecto y otro tienes que preparar tu mismo el entorno. Aún con todo buen vídeo!

Tener todo en un solo archivo, al principio de un proyecto parece cómodo, pero cuando ya se hace muy grande el código y el proyecto, es un asco tener todo en un solo archivo

[@Yoko-0x0]

conozco a muchos que se pasaron de ReactJS a Angular. y simplemente dicen. "WOW ya estoy enamorado de Angular"

[@jacktroncospizarro6344]

Muy buena comparativa. Estoy aprendiendo React pero sin dudas se ve bastante bien la estructura de Angular.

[@Garajedeideas]

Gracias por tu comentario! Nos alegramos mucho de que te haya parecido interesante 😉

[@fernandoangelrodriguezgonz1393]

Sería más lógico comparar Angular con Next. Sería una mejor comparación así.

[@wilsonmori949]

Angular sin didarlo.

[@CarlosJurado]

MUY MAL! El titulo del vídeo se queda corto... debería ser: "MASTERCLASS DE ANGULAR Y REACTJS". Este vídeo es OBLIGATORIO para conocer las diferencias y elegir de forma correcta una tecnología principal de trabajo. Y todo en menos de 30 minutos... Ufff

[@geraldbustos]

buena idea esa comparación para la gente que viene de angular y quiere usar react y viceversa. gracias

[@Garajedeideas]

Gracias! Nos alegramos mucho de que nuestro contenido te sirva de ayuda y te guste :)

[@Novel-xl4vs]

Es mentira la diferencia en la linea de aprendizaje entre React y Angular. Ambos son fáciles de entender. Asi que les recomiendo Angular 😈, pero si te ves cojo, comienza por React.

[@JesusRodriguez-eg8po]

Desde mi punto de vista, aunque la curva de aprendiza es menor en React, formarte con Angular hace que se estructure mejor los conceptos en tu cabeza. El libertinaje de React puede ser un poco caótico ...

[@magranadosb]

En lo personal me encuentro casado con Angular (Desde la versión 9 hasta la actual versión 18). Team Angular ☝🤓

[@raulbolanos4920]

La comparación estuvo súper genial

[@Garajedeideas]

Gracias! Nos alegramos mucho de que nuestro contenido te sirva de ayuda y te guste :)

[@andresmauriciofajardoolaya2721]

muy bueno el video pero en lo que fue angular hicieron falta muchas mejoras que se han implementado como selftag, signals, el uso de pipes para manejar observables, los forms tipados y si queria tambien podia usar promise en angular con lastValueFrom, 1 solo archivo si asi lo queria y en apartado de tests angular ya viene configurado para jasmine y jest

[@mariogiron]

Lo bueno es que se puede empezar con una base y luego usar todas las nuevas herramientas para mejorar el desarrollo exponencialmente

[@munozjavier]

Me faltó saber la diferencia en peso tanto del proyecto en general como de las distribuciones, pero si eso no es muy diferente me sigo quedando con angular... de todos modos el mercado parece preferir react más que angular

[@albertgutierrez886]

Muy buen planteamiento del video. La verdad es que me ha quedado más claro React (decir que tengo una base de angular) 👏🏼

[@Garajedeideas]

¡Gracias! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)

[@LatinosHablandoInglés]

Excelente!. Para el desarrollo movil, puedes hacer una comparación entre las dos tecnologias mas usadas?, puede ser entre Flutter y React Native

[@edgardomolinagonzalez3121]

Angular muestra su solidez.

[@BoxCarRacer937]

El servicio en 12:10, otra forma de inyectar dependencias es en el provider del componente si es standalone o del módulo.

[@DenisHernandezMichel]

para mi no hay un mejor framework frontend que Angular, se que con todos se hace lo mismo, pero en estructura, organización, desacoplamiento, es el tipo, y ahora con SSR, le puso la tapa al pomo

[@wilmer4890]

La inyección lo jóde a Angular😢 .. React ❤

[@sokka7460]

Angular forever :P nah, dependiendo de las necesidades del proyecto puede cuadrar más uno u otro

[@nicolasestevez41]

Un video excepcional que muestra el potencial de ambas tecnologías, sin embargo pienso que la comparativa habría estado bastante bien hacerla entre 2 frameworks y no entre 1 framework y 1 librería, lo que quiero decir es que habría estado mejor comparar Angular con NextJS

[@Garajedeideas]

Gracias por tu comentario y nos alegramos de que te haya gustado el vídeo! Tenemos en el radar grabar también Angular vs Next, así que todo llegará ;)

[@ginimessersmith]

bueno me gusto mas angular xd

[@maclaren33]

Mucho más simple react una vez q. Se tienen las librerías instaladas

[@mariogiron]

Es cuestión de experiencia. Los dos tienen cosas buenas y malas. Depende del proyecto, se le puede sacar más partido a uno u a otro

[@jluisOlivares]

¡Muy buena explicación, muchas gracias!

[@Garajedeideas]

Gracias a ti! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)

[@carloschacon8751]

puedes hacer uno de angular vs blazor

[@mariogiron]

No controlo Blazor, pero seguro que es interesante salirse por una vez del stack JS

[@Garajedeideas]

Hola! Por aquí un dev ha hecho el proyecto en Blazor, por si quieres echarle un ojo al repo: github.com/harveytriana/CodePills-Blazor-CRMEmpleados

[@daniel-peiro]

El proyecto de angular está adaptado al de React para que se parezcan ... De crearlo sin intención de compararse estoy seguro que sería bastante distinto.

[@S4MBENTZ]

Angular es mucho más elegante

[@stevemart6778]

Este ejemplo no es suficiente para hacer una diferencia consistente entre angular y react, lo que mas nos daría una idea importante es la implementación del manejo de estado en react redux es más complejo que al desarrollarlo en angular, ya que este cuenta con diferentes features o clases para el estado global de la app, lo cuán resulta más manejable y escalable en proyectos grandes ya que react se necesitan más archivos y esto puede crear un desorden y perder legibilidad incluso más tiempo al Implementar.

[@paulomirandaarias9544]

Pero... Redux es una sola forma, ya antigua, de manejar los estados, por qué habría de compararlo con Redux?

[@stevemart6778]

@@paulomirandaarias9544 me refiero a la implementación de estado dentro de la app puede ser redux u otro (sigue siendo la más ocupada para react) lo cual hace que el proyecto se vuelva engorroso y complejo y ahí esta la diferencia con angular mucho más legible y escalable.

[@erikmunozbravo]

Yo programo en los Angular y React he tenido que aprender los dos ya que trabajo en diferentes proyectos, y me quedo con Angular tengo compañeros que se quedan con React, es cosa de gusto los dos son excelentes. Aprendan los dos tendrán más opciones de trabajo. Saludos.

[@delmarnovelo7418]

3:25 también en angular se puede utilizar el html y css en el componente .ts Hubiera estado excelente el uso de signals en angular.

[@rodolfolopezp]

Metale next.js 14 React necesita un Framework

[@almatute]

Sin lugar a dudas angular tiene muchas cosas ya integradas en una arquitectura solida, pero su performance aún tiene que mejorar.

[@JeudryPeñaPeña]

El resumen del video: angular lo tiene, react no, necesitas librerias o workarounds xd Angular hasta la muerte

[@cristian_developer]

La diferencia es que React es una libreria y Angular es un framework, en todo caso mejor comparar Next con Angular

[@rafaelfeliz1615]

​@@cristian_developerSi Next le pasa muy por encima a Angular 😂

[@mariogiron]

No es cuestión quizá de determinar cuál es mejor o cuál peor. Cada uno tiene sus pros y sus contras y depende del proyecto y de la experiencia del desarrollador decantarse por uno o por otro

[@sebastianguasace7027]

Y aún con librerías el código de React se ve más simple que Angular

[@ArkTemplarioMaster]

Like por React

[@iSaan86]

Justo lo que estaba buscando 🫶🏻🫶🏻 gracias

[@juancastrillon5255]

Me gustan los videos así, pero siento que hace falta mostrarnos las comparativas en cuanto a peso de la aplicación y velocidad de carga.

[@Garajedeideas]

Gracias por tu comentario, Juan. Le daremos una vuelta y a ver si es posible incluirlo en los siguientes vídeos :)

[@manuelaguirre4751]

Excelente material! muy buena comparativa 😊. Y por los que dicen que no se pueden usar clases en React, tranquilo, se entiende perfectamente que no estás usando clases para los componentes (que fue lo que react desaconsejó), pero que tranquilamente puedes usar las clases que quieras a nivel de servicios, utils y demás.

[@Garajedeideas]

Gracias por tu comentario y tu feedback, Manuel! Nos alegramos mucho de que te guste nuestro contenido :)

[@clustersnake]

Angular = bloated, react = pobre... sigo con vue. Muchísimas gracias por el vídeo!

[@Garajedeideas]

Gracias por tu comment! Nos alegramos mucho de que nuestro contenido te sirva de ayuda y te guste :)

[@DanielPicuasi]

Excelente explicación...

[@Garajedeideas]

Gracias! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)

[@JuanDavidQuiñonezCeron]

excelente video

[@Garajedeideas]

Gracias! Nos alegramos mucho de que nuestro contenido te sirva de ayuda y te guste :)

[@foxdie8106]

Nunca hay que confiar en una libreria externa, por eso Angular es el mejor camino en el frontend.

[@mariogiron]

Hay librerías súper establecidas. Por esa misma norma no podríamos confiar en ningún tipo de código que no estuviese generado por nosotros mismos

[@foxdie8106]

@@mariogiron las que todos combinan con react no son establecidas, solo son famosas, si se produce un cambio de paradigma van a quedar abandonadas o con poco mantenimiento como jQuery. Incluso el propio facebook e instagram no usan el mismo react que nosotros usamos y ademas lo combinan con herramientas que nosotros no podemos tener. Por eso hay que elegir un framework ya que es una gran inversion de los creadores, es muy dificil que queden obsoletos, mira .Net, Angular, Spring etc.. existen hace decadas y se van adaptando a cada cambio. Cuando usas angular practicamente no necesitas ninguna libreria externa.

[@marcossalvo7503]

Me encanta la programación funcional con React y la capacidad de generar tus propias arquitecturas a pico y pala. Angular está muy chulo, pero demasiado estricto, declarativo y enfocado a OOP para mi gusto...

Cuando trabajes en equipos grandes, sabrás porque hay que ser estrictos a la hora de escribir código.

[@marcossalvo7503]

Sí, he trabajo en equipos muy grandes, y entiendo la utilidad de la estructura que te da Angular, simplemente digo que para mí la programación es una forma de vida y una actividad creativa, no sólo una herramienta, y en ese sentido, con React disfruto mucho más, porque tengo que pensar mucho más para crear arquitecturas desde 0 lo más eficientes posibles, y yo decido qué lineas de JS exactas se ejecutan en cada momento 😍

[@Calcerbis]

​@@marcossalvo7503créeme que con tanta librería externa que debes usar en React no tienes idea de que estás ejecutando... Al final es lo mismo en uno que en otro, el control es una ilusión que solo lleva al desorden. Mantener y migrar proyectos de React es un asco... Sobretodo cuando una librería externa que algún dev genio se le ocurrió usar se depreca.

[@daniel-peiro]

@@marcossalvo7503 Con Angular puedes crear la arquitectura que te de la gana

[@ryan-gmusic8157]

Vue dónde queda?

[@fabriqr2930]

En australia :V pero con ingles

[@chepzel]

Creo que debías usar nextjs el cual es el framework de react para hacer una comparación justa.

[@Garajedeideas]

También lo tenemos: kzbin.info/www/bejne/an63imtuad2FZqs ;)

[@emilzonjeronimo8898]

Nada de lo que aporta Next JS lo uso en Angular (que tambien tiene features parecidas o iguales) en este video, y tampoco uso nada de lo novedoso de Angular, asi que la comparativa es justa porque tampoco usó React puro si no con librerías externas para comparar solo esas features basicas como fetching de datos, templates y un poco del ciclo de vida de los componentes. Es una comparación básica y justa. Pero la comparativa con Next JS estaría muy interesante para que enfrente las features como signals vs useState, router de Angular vs File Routing de Next; SSR, SSG de Angular vs SSR, SSG de Next JS; estrategias de caching, performance, comparativa para desarrollo fullstack de ambos. Eso no solo seria justo si no un poco más complejo e interesante.

[@chepzel]

@@emilzonjeronimo8898 React 19 se habla de que incorporará signals

[@brayan_baez]

La sintaxis de angular es mas legible y para cambiar los valores de las variables es mucho mas sencillo

[@erichhc9698]

falta los signals de angular mas simplificado :D

[@Garajedeideas]

Hola! Tenemos varios vídeos de Signals en la playlist de Angular, por si los quieres ver: kzbin.info/www/bejne/qpC8hKWun5Wqfbs

[@juanca-dev]

Angular está muy completo pero así mismo pesara en tanto react al ser "modular" su peso será menor,

[@mariogiron]

En principio, cuando construyes la aplicación de Angular, únicamente se incluyen los módulos que estés utilizando

[@fernandoa8512]

Angular papus!!

[@derlisruizdiaz]

Que horrible es angular, además vives con el miedo que google lo abandone

[@derianmarchan3414]

La próxima versión de ANGULAR es la fusión/integración con WIZ otro Framework interno que usa GOOGLE en la mayoría de sus plataformas, la intención de Google va por usarlo en todos sus productos para darle más firmeza de la que tiene. Afirmo que ANGULAR irá más sólido a partir de eso

[@sergioandresjaimespimiento6953]

Un framework que lo vienen actualizando cada 6 meses y que en su última actualización se fijaron para dentro de 10 años con angular y dices que viven con el miedo de que Google lo abandone? Cuánta incoherencia en tu comentario

[@derlisruizdiaz]

@@sergioandresjaimespimiento6953 mira el cementerio de google entonces pibe

[@bobobo1673]

Gracias

[@Garajedeideas]

Gracias a ti! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :)

[@franciscomunoz1377]

Aqui el team React!

[@valp_co]

Conclusión, penal para Argentina!.

[@sebastianestrada1311]

No se que haces usando clases en react a estas alturas

[@mariogiron]

No has visto el vídeo bien

[@sebastianestrada1311]

​@@mariogironcreaste un servicio para hacer un fetch en react con una clase.

[@sebastianestrada1311]

Creo que ignoraste varias cosas de react en vez de clases ahora son hooks, creo que la comparativa no fue adecuada.

[@mariogiron]

No he hablado de clases en ningún momento para React. Los componentes se crean a través de funciones, como se ve en el vídeo y se usan hooks para ciertas funcionalidades como useState, useEffect o incluso hooks externos como useForm

[@sebastianestrada1311]

claramente el de la derecha es react: "export default class EmpleadosService", eso claramente es una clase, los hooks pueden reemplazar las clases completamente.

[@sebastianestrada1311]

​@@mariogironpara algo existen los custom hooks, dices que no y en el video claramente usaste una clase para un servicio, por eso se que no aplicaste 100% el conocimiento en react moderno.

[@mariogiron]

@@sebastianestrada1311 eso es un servicio, una clase totalmente justificada para manejar las peticiones externas. Tú prefieres hacer hooks para todo? Perfecto, son diferentes formas de trabajar, pero no hay una verdad absoluta sobre cómo generamos arquitecturas para nuestras aplicaciones

[@mariogiron]

@@sebastianestrada1311 ok. Un saludo

[@88goeth]

Los hooks hicieron de React un delicioso plato de spaghetti...