{"id":634,"date":"2019-05-06T14:06:25","date_gmt":"2019-05-06T18:36:25","guid":{"rendered":"http:\/\/gregorgonzalez.com.ve\/blog\/?p=634"},"modified":"2019-05-06T14:11:54","modified_gmt":"2019-05-06T18:41:54","slug":"aprender-react-o-angular-diferencias","status":"publish","type":"post","link":"http:\/\/gregorgonzalez.com.ve\/blog\/aprender-react-o-angular-diferencias\/","title":{"rendered":"\u00bfAprender React o Angular? diferencias."},"content":{"rendered":"\n<p>Desde hace un tiempo que he estado\nbuscando la mejor opci\u00f3n para frontend y entre los cientos de\nart\u00edculos que hablan de este tema, nunca se hace una comparaci\u00f3n\ncompleta o no colocan informaci\u00f3n relevante para mi. Entonces\nintentar\u00e9 recopilar y explicar ciertas diferencias en este post.<\/p>\n\n\n\n<p><strong>Nota<\/strong>: No se incluye Vue porque nunca he tenido la oportunidad de utilizarlo. Mas adelante espero probarlo y realizar otras comparaciones.<\/p>\n\n\n\n<p><strong>Angular <\/strong>es un framework JavasScript escrito en TypeScript y creado por Google.<\/p>\n\n\n\n<p><strong>React <\/strong>es una librer\u00eda JavaScript creada por Facebook.<\/p>\n\n\n\n<p>Ambos son utilizados ampliamente en el\nmercado tecnol\u00f3gico pero en mayor medida React. Constantemente est\u00e1n\nen desarrollo y se van incluyendo mejoras adaptadas al d\u00eda de hoy.\nEs muy conveniente aprenderlas y est\u00e1n aqu\u00ed para quedarse, es\ndecir, son mantenidas por los creadores, no se espera que sean\nabandonadas o reemplazadas por otras, tienen bastante documentaci\u00f3n,\nson estables, no propensas a los bugs y con una gran comunidad.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Arquitectura<\/h2>\n\n\n\n<p>Aunque son muy similares, tambi\u00e9n\ntienen sus diferencias.<\/p>\n\n\n\n<p><strong>Angular <\/strong>se considera un completo Framework MVC por la estructura y funcionalidades que provee, esto te permiten empezar a trabajar inmediatamente. Angular te indica la estructura de trabajo y las herramientas, es una ventaja porque no tienes que buscar e incorporar para cada proceso, aunque algunos considera esto perdida de flexibilidad porque no te permite elegir.<\/p>\n\n\n\n<p>Angular nos provee:<\/p>\n\n\n\n<ul><li>Manejo de componentes, data binding (Two way binding), funcional en cualquier plataforma.<\/li><li>Plantillas HTML usando adicional caracter\u00edsticas propias de angular.<\/li><li>Encapsulaci\u00f3n de CSS<\/li><li>Inyecci\u00f3n de dependencias<\/li><li>Formularios a trav\u00e9s del componente @angular\/forms<\/li><li>Peticiones Ajax a trav\u00e9s del componente @angular\/HTTP<\/li><li>Manejo de Rutas a trav\u00e9s del componente @angular\/router<\/li><li>Protecci\u00f3n de XSS<\/li><li>Componentes para pruebas unitarias<\/li><\/ul>\n\n\n\n<p><strong>React <\/strong>solo provee la parte de la vista, la V de MVC. La desventaja es que tardaremos en empezar a trabajar mientras definimos que otros componentes agregar. La ventaja es que nos permite a nosotros mismos definir una estructura de trabajo y elegir solamente las herramientas que deseemos utilizar y pueden ser simple o complejas dependiendo del proyecto.<\/p>\n\n\n\n<p>React nos provee:<\/p>\n\n\n\n<ul><li>Manejo de componentes, data binding (One way binding), funcional en cualquier plataforma.<\/li><li>Plantillas JSX basados en javascript y xml  <\/li><li>Manejo de Virtual DOM  <\/li><li>Protecci\u00f3n de XSS.<\/li><li>Componentes para pruebas unitarias.<\/li><\/ul>\n\n\n\n<p>Las dem\u00e1s funcionalidades debemos\nagregarlas nosotros mismos. Existen muchas librer\u00edas las cuales nos\npueden ayudar para cada ocasi\u00f3n.<\/p>\n\n\n\n<p>Algunas librer\u00edas de React son:<\/p>\n\n\n\n<ul><li>React-router para las rutas<\/li><li>Redux para el manejo de states<\/li><li>Fetch o Axios para peticiones HTTP<\/li><li>Enzyme para pruebas unitarias<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Apps m\u00f3viles<\/h2>\n\n\n\n<p>Con <strong>Angular <\/strong>podemos desarrollar aplicaciones con el framework Ionic, utilizado en aplicaciones h\u00edbridas que luego se compilan para Android o ios. Ionic tiene una extensa librer\u00eda de componentes UI, que nos permite desarrollar r\u00e1pidamente interfaces atractivas para el usuario. Ionic utiliza contenedores web view, es decir, creas una aplicaci\u00f3n web que luego es embebida dentro del contenedor web del m\u00f3vil.  <\/p>\n\n\n\n<p>En mi experiencia es f\u00e1cil trabajar\ncon Ionic sin embargo como utiliza web view, el rendimiento depender\u00e1\ndel interprete web del m\u00f3vil y esto puede resultar problem\u00e1tico\npara aplicaciones grandes, disminuyendo el rendimiento y la\nrespuesta. Tambi\u00e9n hay funcionalidades del tel\u00e9fono a las cuales no\npodemos acceder desde una vista web, o que se podr\u00eda pero solo si\nincluimos plugins dedicados a esa funcionalidad y tendremos que\nenfocarnos en compatibilidad, verificando como afecta el rendimiento.\n<\/p>\n\n\n\n<p>Yo lo uso para p\u00e1ginas web que\nrequieran una versi\u00f3n m\u00f3vil, proyectos peque\u00f1os o medianos que no\nrequieran accesos a hardware del tel\u00e9fono o no requieran\nfuncionalidades especificas del tel\u00e9fono.<\/p>\n\n\n\n<p>Con <strong>React <\/strong>se puede desarrollar usando React Native, que a diferencia de Angular, la aplicaci\u00f3n se traduce a una verdadera aplicaci\u00f3n nativa, esto permite un gran rendimiento de la app. Tambi\u00e9n nos permite acceder f\u00e1cilmente a componentes del tel\u00e9fono y crear nuestros propios componentes a partir de Java, Objetive C, Swift para luego incorporarlo a nuestra app nativa.  <\/p>\n\n\n\n<p>Com\u00fanmente una aplicaci\u00f3n nativa es\nmas arduo de aprender y largo el proceso de desarrollar, por eso\nexisten frameworks h\u00edbridas como ionic, phonegap (ambos usan apache\ncordova), o de compilaci\u00f3n a nativa como Xamarin, React Native y\nmuchos otros mas, que nos permiten utilizar lo que ya conocemos para\ndesarrollar apps m\u00f3viles, facilitando el trabajo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">En conclusi\u00f3n<\/h3>\n\n\n\n<p>En React debemos aprender acerca de JSX, componentes funcionales, manejo de states, Props y Flow. Adicional podemos agregar: los comandos de consola Create React App, m\u00f3vil React Native, Material UI, Next.js, debug con la extensi\u00f3n del navegador React Developer Tools, etc.<\/p>\n\n\n\n<p>En Angular debemos aprender acerca de\nTypeScript, RxJS, elementos de Angular y su propio manejo de states.\nAdicional podemos agregar: los comandos de consola Angular CLI, m\u00f3vil\nIonic, Angular Material, Angular Universal, debug con la extensi\u00f3n\ndel navegador Augury, etc.<\/p>\n\n\n\n<p>Aunque en React tiene menos conceptos\nque aprender y esto implica una menor curvatura de aprendizaje en\ncomparaci\u00f3n con angular, ambos son relativamente similares, f\u00e1ciles\nde aprender pero complejas para dominarlas al 100%, m\u00e1s con sus\nrespectivas librer\u00edas a\u00f1adidas y tomando en cuenta que un proyecto\npuede incluir otros frameworks a los cuales se deben acoplar y\nmantener compatibilidad.<\/p>\n\n\n\n<p>En mi experiencia he usado ambos y los dos me gustan, la complejidad depende del proyecto y lo que se haya agregado, incluso he visto proyectos muy malos porque no sab\u00edan aprovechar correctamente los frameworks utilizados, as\u00ed que indicar si alguno fue \u00abbueno o malo\u00bb depende de lo que las personas hayan realizado con el framework. Trabajar\u00e9 con el que me indiquen en el trabajo o proyecto, pero si dejan a elegir uno puede verificar estas comparaciones y utilizar el que mejor te parezca.  <\/p>\n\n\n\n<p>En lo personal se me hizo mas f\u00e1cil\naprender angular y lo veo m\u00e1s organizado desde el principio. Por el\nmercado laboral el m\u00e1s solicitado es React y su versi\u00f3n m\u00f3vil\nReact Native, entonces si tuviese que enfocarme a uno solo, me\ndecidir\u00eda por React. Aprender toma tiempo y lo mejor es enfocarse en\nel que m\u00e1s beneficio ofrezca.<\/p>\n\n\n\n<p>En cuanto al c\u00f3digo, es dif\u00edcil de\ncomparar y la mejor manera es ir a la documentaci\u00f3n oficial,\naprender lo b\u00e1sico y realizar los tutoriales introductorios. Despu\u00e9s\ntendr\u00e1s una visi\u00f3n global de lo que trata cada tecnolog\u00eda y podr\u00e1s\nenfocarte en el que te guste.<\/p>\n\n\n\n<p>Documentaci\u00f3n <strong>Angular<\/strong>: <a href=\"https:\/\/angular.io\/guide\/quickstart\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (abre en una nueva pesta\u00f1a)\">https:\/\/angular.io\/guide\/quickstart<\/a> <\/p>\n\n\n\n<p>Documentaci\u00f3n <strong>React<\/strong>: <a href=\"https:\/\/reactjs.org\/docs\/hello-world.html\">https:\/\/reactjs.org\/docs\/hello-world.html<\/a> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Desde hace un tiempo que he estado buscando la mejor opci\u00f3n para frontend y entre los cientos de art\u00edculos que hablan de este tema, nunca se hace una comparaci\u00f3n completa o no colocan informaci\u00f3n relevante para mi. Entonces intentar\u00e9 recopilar y explicar ciertas diferencias en este post. Nota: No se incluye Vue porque nunca he [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":635,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[232,34,233],"tags":[237,235,236,234],"_links":{"self":[{"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/posts\/634"}],"collection":[{"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/comments?post=634"}],"version-history":[{"count":2,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/posts\/634\/revisions"}],"predecessor-version":[{"id":637,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/posts\/634\/revisions\/637"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/media\/635"}],"wp:attachment":[{"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/media?parent=634"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/categories?post=634"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/tags?post=634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}