AngularJS y nuevas posibilidades para las aplicaciones Web

AngularJS

AngularJS Architectural Overview

Recientemente en Arckanto software estoy desarrollando una aplicación Web para automatizar un proceso de negocios operativo de una institución microfinanciera. Al margen de las características funcionales, el desarrollo técnico está basado principalmente en una base de datos MySQL y en el framework de desarrollo Yii, el cual por cierto ha resultado una gratísima sorpresa para mi. Perfectamente podemos imaginar a Yii como el Rails pero para el mundo PHP: Un sólido framework basado en el patrón MVC y la filosofía de “Convention over Configuration”.

Pero en realidad, este post no está dedicado a Yii (quizá en otro post futuro comentaré más de él) sino a otra tecnología: AngularJS. Resulta que para poder desarrollar alguna de las características de la aplicación mencionada, requería muchos elementos de programación del lado del cliente en lenguaje javascript (o sea, programación a ser ejecutada por el Navegador mismo). Aunque antes había hecho algunas pequeñas cosas en javascript, principalmente en jQuery, en realidad no había profundizado mucho en el tema.

Esta vez requería un poco más de “inteligencia” del lado del Browser porque requería calcular totales, subtotales y validaciones relacionadas, antes de “postear” (enviar) la información al servidor y la aplicación Yii. Así que decidí investigar un poco el tema y vi que existen muchos frameworks javascript para desarrollar modernas aplicaciones Web (single-page applications) que requieran mucha interactividad en el Navegador. Algunas de los frameworks más relevantes son Backbone.js, Ember.js, Knockout.js y otros. Pero el que más me llamó la atención fue AngularJS (la razón bastante técnica para describirla en este post pero en síntesis puedo decir que fue debido a su filosofía de no manipular el DOM desde los controladores sino separarlo completamente usando Directivas: Controlador imperativo y View Declarativo).

AngularJS es un framework javascript desarrollado e impulsado por Google (así que imaginarán el respaldo que tiene) orientado a lo que se llama “Single-Page Applications” que se traduce en Aplicaciones de una sola Página (este tema por sí solo merecería otro post). Llamadas así porque todo el sistema reside en un solo archivo HTML, y desde él se llaman a todos los controladores javascript que le dan forma al funcionamiento del sistema. ¿Impresionante, no? Todo el sistema en una sola página. Bueno, aunque así se llaman y efectivamente una página puede contener todo el sistema, la realidad es que uno puede tener varias páginas Web (especie de módulos) que juntas forman un amplio sistema Web. Dicho de otro modo, no es necesario que estén en una sola página pero esa es la intención.

Eso da una interactividad enorme a la aplicación pues mucho de la lógica es ejecutada por el Navegador mismo. AngularJS quedó como “anillo al dedo” para lo que yo requería. Pero lo más importante para mi fue que en el proceso entendí (o más bien, estoy entendiendo) todo lo que significa desarrollar en AngularJS (o con un framework javascript; javascript puro en el caso de AngularJS) y cómo puede interrelacionarse este tipo de aplicaciones con aplicaciones del lado del servidor (como Rails o Yii) basadas en una base de datos central.

En mi opinión, todo este movimiento de frameworks javascript, con AngularJS como un ejemplo icónico, vendrá a fortalecer muchísimo el desarrollo de aplicaciones de Nube. Es el complemento ideal de Rails o de Yii, estos siempre necesarios para darle solidez al backend y la persistencia de datos. Pero ahora el desarrollo Web logra emular en interactividad, sino es que superar, los antiguos desarrollos para Desktop. Ergo: Es la tendencia. Por ahí está gran parte del futuro de las aplicaciones Web de Nube, sin duda.

Reflexión final: ¿No será que todo tiende a ser cíclico? De Mainframes a PCs. De PCs a Cliente/Servidor. Y se reinicia el ciclo: De sistemas centrales Web a sistemas distribuidos y comunicados con arquitectura REST (algo así como de nuevo en cliente-servidor). Pero claro, esta vez yo obviamente no apostaría por VisualBasic y MS-SQL-Server como amplia base de difusión tecnológica. Apostaría por AngularJS (en el cliente), más algún framework MVC de servidor (preferiblemente Ruby on Rails), más MySQL y/o MongoDB como Bases de Datos. ¿Qué tal suena? Veremos…!

Mientras, aquí “Hola Mundo” en AngularJS:

, , , ,

  1. #1 por alfredo el octubre 15, 2013 - 6:14 am

    sabes donde hay algún tutorial que explique como integrar yii y angularjs?

    • #2 por Leopoldo el octubre 18, 2013 - 4:13 pm

      Hola Alfredo,

      No. No conozco ningún tutorial específico para eso. Pero es algo relativamente sencillo integrarlos.

      Por ejemplo, en el “View” Yii (o sea, en ese PHP) donde quieras usar funcionalidad AngularJS debes incluir angular, ya sea desde el sitio de Angular o en tu directorio donde tengas Angular. Algo así como:
      Yii::app()->clientScript->registerScriptFile(‘https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js’);

      Y además, en ese mismo “View” file, debes incluir tu código javascript correspondiente a la funcionalidad angular que requieras. Algo así como:
      Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . ‘/js/miArchivoPropioJSDondeTengoMiCodigoAngular.js’, CClientScript::POS_HEAD);

      Llamando esos, podrías usar en ese view file (PHP de Yii), funcionamiento Angular JS.

      Ok; espero te sirva. Saludos!

      Leopoldo

  2. #3 por Javier el mayo 12, 2014 - 9:12 am

    Hola amigo, llevo algunos meses desarrollando en angularjs y me parece una maravilla, luego de desarrollar en Sencha. Pero me quedo una duda en tu articulo (que esta muy interesante),
    ¿Por que usarias el MVC de angularjs y otro MVC del lado del servidor? ¿Es necesario? En mi proyecto solamente use la arquitectura de angularjs, me parece mas que suficiente, ya que los datos llegan al servidor listos para acceder a la base de datos. Saludos!

    • #4 por leopoldorojas el mayo 12, 2014 - 4:36 pm

      Hola Javier,

      Bueno; imagino que a lo que te refieres es que los datos desde el servidor o base de datos te llegan listos para ser usados por AngularJS. Si es así, tienes razón, ya no necesitas ninguna tecnología de servidor pues seguramente ya eso está resuelto en tu caso.

      Pero, imagina que no tienes aún una Base de Datos. Tendrías que seleccionar una y también alguna forma (tecnología de servidor, lenguaje de servidor o un framework MVC de server) de acceder a los datos para así, poder proporcionárselos a AngularJS.

      Normalmente un MVC de servidor (como Ruby on Rails o cualquier otro) te podría dar muchas ventajas para acceder a los datos de la BD, tales como servicios de autenticación, servicios de autorización o simplemente mayor seguridad. O inclusive, ¿qué pasa si requieres el sistema no solo a nivel browser o celular (con AngularJS) sino también un desarrollo Web tradicional? Necesariamente usarías algo en el servidor.

      En general, en el sever deberás tener un API (REST API, por ejemplo) a la cul accederás desde AngularJS. Para crear esa API es que requieres un MVC en el server o cualquier tecnología de server de acceso a datos. Me parece que en tu caso ya no es necesario pues pareciera que ya te proporcionan los datos en algún lado y los accesas en Angular.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s

A %d blogueros les gusta esto: