Archive for AngularJS

marzo 19th 2018

¿AngularJS vs ReactJS? Cómo confundir la velocidad con el tocino

Número de lecturas: 1894
{lang: 'es-419'}

Últimamente no hago otra cosa que encontrarme post comparando frameworks JavaScript. Y es que si nos ponemos a pensarlo, es normal que existan tantos post explicativos de este tipo. Cada año, mes, incluso día, existe un nuevo framework JavaScript en el planeta que nos promete el mejor rendimiento y la mejor forma para desarrollar aplicaciones robustas, mantenibles y escalables.

Es lógico que con la velocidad a la que crecen las alternativas, necesitemos ayuda para elegir la mejor solución. No es lo mismo desarrollar con EmberJS, que montar una aplicación compleja con BackboneJS, por lo que cuanto antes nos ayuden a abrirnos los ojos con que podemos hacer y que no con tanto framework, mejor.

Sin embargo, últimamente veo muy obsesionada a la comunidad creando una batalla ficticia entre dos ecosistemas que, bajo mi punto de vista, no tienen nada que ver el uno con el otro y en el que hacer cualquier comparación puede llegar a ser bastante odiosa.

Cada vez que leo un post donde se comparan las virtudes y bondades que existen entre AngularJS y ReactJS pienso que algo no va bien o que el propio escritor no ha entendido algo. Me pasaba algo parecido a cuando la comunidad comparaba jQuery con AngularJS. Me resultaba una comparación tan ficticia que esos post más que ayudar, al final hacian liar mas a los desarrolladores que querían acercarse por primera vez a AngularJS.

Como os digo, algo parecido está ocurriendo con AngularJS y ReactJS y me da cierto miedo a que creando estas comparaciones los desarrolladores vayan con unas expectativas hacia ReactJS diferentes a lo que son, como si, por culpa de estos primeros post introductorios, se nos estuviese vendiendo ReactJS como una evolución natural desde AngularJS y la decepción sea mayúscula.

Por eso es importante saber que AngularJS y ReactJS juegan en dos ligas diferentes por dos motivos muy esclarecedores:

Primer motivo: ReactJS no es un framework, es una librería

El primer motivo es que AngularJS se presenta como un framework total. Un framework donde podemos hacer todo lo necesario en una aplicación front compleja. Podemos incluir ciertas extensiones al framework, pero por lo general, el core de AngularJS nos va a permitir realizar un porcentaje altísimo de aplicaciones sin tener que incluir grandes cambios.

ReactJS en cambio se define como una librería. Una librería que tiene como fin un propósito muy definido: ReactJS solo quiere encargarse de gestionar la vista de tu aplicación. Si te acercas a esta librería, te cansarás de que Facebook te diga que si nuestra aplicación está diseñada como un MVC, ReactJS se encargará de dar forma a la V de nuestro patrón.

Por esto está gustando tanto ReactJS. Es una librería ligera que solo se encarga de hacer bien una cosa y nada más. AngularJS ha sufrido muchas críticas en su core. Existen personas que no son partidarias de su sistema de routing por lo poco flexible que es. Otros desarrolladores tienen ciertas dudas en la forma en que trabaja el $scope. Otras en cambio no son partidarias de su filosofía en directivas y el resto, por ejemplo, preferiría usar otro inyector de dependencias diferente al actual.

Menos en el caso del routing, que se encuentra extraído fuera del núcleo, a día de hoy cambiar cualquiera de esas piezas es complicado, ya que tienen una dependencia muy alta de cómo debe funcionar Angular, por lo que cambiar una pieza es harto complejo o nos va a dar más problemas que soluciones el cambiarlo. Como siempre me gusta decir, si decides casarte con AngularJS, será para siempre con sus pros y sus contras.

Con ReactJS esto no pasa. Si nos gusta la forma en que trabaja la librería, simplemente la usaremos para la interacción del usuario y el resto de los módulos software típicos con los que cuenta una aplicación front podrán ser realizadas por las librerías que más nos gusten o por nuestras propias soluciones si ninguna nos convence. Incluso podría llegar un día que ReactJS deje de parecernos la mejor opción y que cambiarla por otra librería nos pueda parecer hasta fácil.

Como vemos es complicado comparar un framework contra una librería, porque sería como comparar una navaja multiusos con un cuchillo. La navaja sabemos que hace muchas cosas que el cuchillo no puede. Lo único que sabemos es que el cuchillo corta muy bien.

Segundo motivo: El paradigma de ReactJS no es el de AngularJS

ReactJS nació como una solución para realizar programación declarativa en la capa de interfaz de una aplicación. ReactJS se presenta como una opción muy válida para desarrollar aplicaciones JavaScript por medio del paradigma funcional. Es decir, aplicaciones que solo contengan un único flujo, donde las funciones no contengan estado y si lo contienen, este sea  inmutable, en la medida de lo posible.

Donde la abstracción se consiga por medio de funciones que contengan entradas y salidas sin saber cómo se comportan internamente, simplemente que funcionen como cajas negras que siempre funcionen de la manera esperada, es decir, que dada siempre la misma entrada, siempre devuelvan la misma salida.

Todo esto se traduce a que ReactJS crea interfaces por medio de componentes. Componentes mínima, con funcionalidad mínima que se van componiendo los unos a los otros para formar jerarquías de componentes. Donde los datos fluyen desde las capas más genéricas de componentes hacia los más simples y específicas, formando un árbol donde las entradas son datos y las salidas son html.

Todas estas ideas no son consideradas en AngularJS. AngularJS apostó en su día por ser más tradicional y diseñarse dentro de un patrón estructural MVC que con el tiempo irá dando paso a un MVVM y que a día de hoy tiene la flexibilidad suficiente como para permitir al desarrollador usar el que necesite, denominándose a esto el patrón MVW o MV* (Model-View-Whatever).

Las vistas y los controladores de las aplicaciones AngularJS comparten módelos en los que se cambia el estado y donde no existe nada inmutable. Suelen ser aplicaciones muy parecidas a lo que nos encontrabamos en MVC.NET o Spring de Java pero ahora en la parte cliente. Aplicaciones llenas de clases que son instanciadas por medio del framework según las necesidades.

Y si ReactJS es una librería que se encarga de la vista ¿Por qué no lo usamos junto con AngularJS?

Al igual que se está poniendo muy de moda el comparar AngularJS con ReactJS. Existen muchos tutoriales de cómo usarlos juntos. Esto es algo que se puede hacer. Podemos hacer que ReactJS se encargue de gestionar la jerarquía de componentes visuales de nuestra aplicación y que AngularJS funcione en el resto de capas.

Particularmente yo no lo recomiendo. Creo que AngularJS cuenta con un motor de vistas por medio de directivas y componentes bastante potente y que se adapta mejor a las necesidades de su framework a como lo hace ReactJS. Creo que ReactJS pierde esencia usándose con AngularJS y creo que migrar aplicaciones a Angular 2 en el futuro se complicaría demasiado.

No soy partidario de crear estos ‘frankensteins’. Me parece más un empecinamiento por usar dentro de nuestra aplicaciones todo aquello nuevo que sale al mercado y seguir las modas, que una necesidad principal para nuestra aplicación. Por lo que no nos dejemos llevar por estas arquitecturas raras.

Si ya tenemos aplicaciones hechas en AngularJS en producción, mejorémoslas para que se adapten mejor al mantenimiento y la reusabilidad que necesitemos actualizando Angular a su versión 1.5 por ejemplo, que nos va a permitir mejorar nuestra aplicación por medio de la  nueva funcionalidad angular.component o con su nuevo router más flexible que el anterior.

Si por el contrario precisamos una aplicación nueva, pero nos da miedo lanzarnos a ReactJS tan pronto. No pasa nada. Sigamos con AngularJS. Aprovechemos todo nuestro conocimiento y experiencia y orquestemos una mejor arquitectura. Quizá una arquitectura orientada a componentes que pueda migrarse en el futuro a Angular 2. No hace falta seguir modas.

Pero si en cambio, sabes de ReactJS, te convence su paradigma y filosofía, no lo dudes y embárcate. Creo que tu workflow y tu ciclo de desarrollo mejorará y que tus aplicaciones serán igual o más competentes.

Nos leemos ?

PD: Si aun no sabes nada sobre AngularJS o ReactJS, este y este post puede que te interesen.

Fuente:

https://elabismodenull.wordpress.com

agosto 3rd 2016

Desarrolla tu app básica a la velocidad de flash

Número de lecturas: 3197
{lang: 'es-419'}

Crear una app móvil a veces puede conllevar un proceso muy complejo y tedioso, pero puede traer grandes beneficios para un negocio. 

Ionic nos facilita este proceso puesto que no es necesario poseer amplios conocimientos sobre programación nativa de aplicaciones, de modo que con HTML, JS, CSS y algunos conocimientos de AngularJS podemos tener nuestra propia app en pocas horas.

Aún no sabes qué es una app Híbrida

Ionic es un Framework de desarrollo de aplicaciones móviles HTML5 dirigida a la creación de aplicaciones móviles híbridas.

Las aplicaciones híbridas son esencialmente pequeños sitios web que se ejecutan en el navegador del dispositivo,y ejecutan una aplicación que tiene acceso a la capa de plataforma nativa. Las aplicaciones híbridas tienen muchas ventajas sobre las aplicaciones nativas puras, específicamente en términos de soporte de la plataforma, la velocidad de desarrollo.

Para la creación de la mismas se usan frameworks basados en lenguajes de programación web como HTML, CSS y JS,o AngularJs para desarrollos más complejos

¡En nuestro caso el framework será Ionic!

Ionic no es sólo un marco HTML 5, si no que además define directivas y servicios Angular, estilos e incluso un conjunto de herramientas de terminal, que necesita una envoltura nativa  (“un puente de javascript a nativo”) como Cordova o PhoneGap con el fin de funcionar como una aplicación nativa.

Actualmente la fluidez y el tiempo de respuesta no es igual al de una app nativa pero van camino de conseguirlo, de hecho es uno de los principales objetivos de Ionic(en su web dicen estar obsesionados por el rendimiento). Y podríamos decir que  es cierto puesto que desde los inicios de ionic hasta ahora se aprecia un gran aumento en la fluidez y capacidad de procesamiento de las aplicaciones generadas.

Para ampliar información sobre el concepto de app híbrida podéis mirar aquí.

Vayamos a lo importante, qué es Ionic

Ya sabemos que es un app híbrida, así que ahora vamos a ver qué es Ionic.

Ionic es un framework libre y de código abierto, que proporciona la optimización para dispositivos móviles de HTML,CSS y JS, proveyendo de las herramientas necesarias para crear un aplicación básicamente con estos 3 lenguajes. Ionic está construido con Sass y optimizado por AngularJS.

*http://ionicframework.com/


El grueso de una aplicación IONIC se basará en HTML, Javascript y CSS. Los desarrolladores que quieran adentrarse más en el mundo Ionic  también podrán trabajar en la capa nativa, creando plugins personalizados con Cordova o código nativo, pero no es necesario para obtener una gran aplicación.

Ionic utiliza como envoltura nativa (“un puente de javascript a nativo”), Cordova, lo que significa que en su
núcleo es una aplicación PhoneGap con el fin de funcionar como una aplicación nativa.

Ionic también utiliza AngularJS para una gran parte de la funcionalidad básica del framework. No es totalmente necesario conocer angular,pero sí se recomienda invertir tiempo en aprender, ya que es una de las mejores maneras de construir aplicaciones basadas en navegadores de hoy.

No es una app nativa pero a pesar de ello sigue el modelo de desarrollo de un app móvil nativa, por lo que es fácil de entender para cualquier persona que ha construido una aplicación nativa para iOS o Android. De aquí surge el término platform continuity del que podemos saber más e este artículo que te dejo aquí.

Por qué híbrida y no nativa

Ya hemos visto muchas de las ventajas que aporta Ionic, ahora veremos algunas más.
Desarrollamos un código único multiplataforma de modo que con nuestra base HTML, CSS, JS y AngularJS podremos generar nuestra app tanto para Android como para iOS.Lo que nos aporta rapidez y eficiencia en el desarrollo.

Se trata de código abierto mantenido por una comunidad muy amplia de desarrolladores y respaldado por el propio Ionic.

Documentación y API sencilla. El código y los distintos componentes de Ionic está muy bien explicados y documentados los que nos ayuda en gran medida.

La velocidad del desarrollo es notable puesto que se basa en tecnologías sencillas pero muy potentes de modo que con poco tiempo podemos hacer grandes cosas.

Como ya hemos visto Ionic tiene una comunidad de desarrollo bastante amplia. Ionic posee un foro para dudas y bugs que puedas tener en tu código donde gente de lacomunidad o los propios desarrolladores de Ionic pueden ayudarte.

*http://ionicframework.com/

Vamos a aprender Ionic

Ejemplos. Si te surge alguna duda durante este tutorial o después de leerlo hay numerosos tutoriales, demos y ejemplos por toda la red con los que aprender Ionic.

Foro/comunidad. Si nos surge un problema seguro que le haya ocurrido a alguien antes así que seguro podrán ayudarte

Si tienes alguna duda no dudes en hacerlo los comentarios de este post 😉
Algunas páginas que podrían ayudarte son estas:

Manos a la obra

Bueno vamos a lo importante  cómo creamos un app con Ionic desde la base.

Primero vamos a instalar los paquetes necesario, en esta sección veremos cómo hacerlo en un sistema Linux.

Debemos instalar node.js y cordova.

Node

 $ curl -sL https://deb.nodesource.com/setup_0.12|sudo bash -
 $ sudo apt-get install nodejs
 $ sudo apt-get install -y build-essential

para comprobar que está instalado

 node -v

Cordova

$ sudo npm install -g cordova

Bower

$ sudo npm install bower -g

Ionic

$ sudo npm install -g ionic

En esta web tenemos las instrucciones necesarias para instalar el módulo androidpara poder generar las apps para esta plataforma (adb y sdk):
http://cordova.apache.org/docs/en/3.4.0/guide/platforms/android/index.html#Android%20Platform%20Guide

Para iOS:
http://cordova.apache.org/docs/en/3.4.0/guide/platforms/ios/index.html#iOS%20Platform%20Guide

¿Tienes todo listo?

Pues vamos a comenzar a desarrollar con Ionic. Pasaremos a crear el proyecto.

 Aquí podemos optar por tres tipos de starter para la app, una app en blanco, una basada en pestañas, y por último una basada en menú lateral. Para ello debemos hacerlo desde la terminal ejecutando los siguientes comandos:

*http://ionicframework.com/

Generará  el siguiente árbol de directorios:

bower.json     // dependencias bower
config.xml     // configuración cordova
gulpfile.js    // tareas gulp
hooks          // configuración cordova para ejecutar comandos específicos
ionic.project  // configuración ionic
package.json   // dependencias de node
platforms      // construcción del código para iOS/Android
plugins        // donde tus plugins cordova/ionic se instalarán
scss           // código scss,donde se obtendrá la salida para www/css/
www            // app – código JS and libs, CSS, imágenes, etc.

Ya tenemos la base para nuestra app ya sólo tenemos que personalizarla con los elementos Ionic que deseemos.

Generar y compilar nuestra app.

Entramos en el directorio que previamente hemos creado para almacenar nuestra app:

$ cd myApp



Añadimos la plataforma del tipo de app que deseamos emular:

$ ionic platform add ios / $ ionic platform add android

 



$ ionic build ios / $ ionic build android

 



$ ionic emulate ios / $ ionic emulate android

 



Si queremos probarla directamente en nuestro dispositivo, conectándolo a nuestro pc podemos instalarla de forma directa ejecutando:

$ ionic run ios / $ ionic run android

 



También podemos probarla en el navegador de nuestro pc de desarrollo con:

$ ionic serve -scss

 



Bueno una vez tenemos la base de nuestra app, solamente tenemos que personalizar como queramos añadir componentes, añadir secciones y páginas a nuestra app, etc.

Trabajaremos básicamente sobre el directorio /www/ que nos crea automáticamente. y ahí añadiremos nuestro o código o modificaremos a nuestro antojo el que nos genera Ionic. Si queremos añadir vistas debemos modificar el fichero /www/js/app.js


Para modificar el aspecto es aconsejable usar las clases que el propio Ionic proporciona, pero si aun así queremos modificar el aspecto podemos modificar /www/css/style.css.

Nuestras plantilla debemos añadirlas en /www/templates y añadirlas en el /www/js/app.js.

Por último nuestras imágenes o archivos externos podemos añadirlos en /www/img/, también podremos añadir los directorios que necesitemos pero en principio bastaría con eso.

Tunea tu app

Además de crear tu app, hay diversos temas que podremos acoplar a nuestra aplicación para cambiar su aspecto. Aquí veremos IonicMaterial de Zach Fitzgerald. Podemos ver como añadirlo en http://ionicmaterial.com/ y un ejemplo de ello en http://ionicmaterial.com/demo/.

En esta web:


podemos descargar un modelo base para crear nuestra app. En que tenemos una demo de juego de tronos y una demo con los distintos componentes

         


Nosotros hemos modificado este ejemplo  y le hemos dado nuestro toque mobile haciendo solamente unos cuantos cambios y nos ha quedado así.

Ahora…¡A darle vida a nuestra app!

Además de las funcionalidades básicas hay plugins o addons que pueden complementar nuestra app aportando más funcionalidad a nuestra app.

Aquí podemos encontrar algunos.
https://market.ionic.io/plugins

O simplemente describiendo la funcionalidad brevemente en google seguido de la palabra Ionic plugin podremos encontrar el plugin que buscamos.
Los pluglin los podemos instalar:


$ ionic plugin add

 



$ cordova plugin add

 



Hemos visto las nociones básicas de cómo hacer una app híbrida con Ionic.

Fuente:

intelligenia.com