ANGULAR JS

En la actualidad el uso de frameworks se ha convertido en parte fundamental

para los desarrolladores, ya que estos buscan tecnologas que brinden una mejor
solucin a las aplicaciones que desarrollan, adems por que el uso de un framewok tiene
ventajas como disminucin en lneas de cdigo, mejor presentacin; AngularJS no es la
excepcin este framework permite la creacin de aplicaciones web dinmicas, es decir
en las cuales no se realiza una recarga a la pgina. Este es brindado por Google pero
puede descargarse desde su pgina oficial ya que es open source, en otras palabras le
permite a los desarrolladores modificar parte de su cdigo de acuerdo a ala finalidad a la
cual se dirigen sus proyectos; tambin puede integrase con otras tecnologas de lado
servidor como Laravel para crear aplicaciones cliente-servidor de una sola pgina.

AngularJS es una tecnologa del lado del cliente, un framework JavaScript

open source desarrollado por Google utilizado principalmente para crear aplicaciones
web de una sola pgina; funciona con las tecnologas web ms asentadas a lo largo del
tiempo (HTML, CSS y JavaScript) para hacer el desarrollo de aplicaciones web ms
fcil y rpido que nunca. El cdigo fuente de Angular est disponible gratuitamente en
Github bajo la licencia MIT. Esto significa que cualquier persona puede contribuir y
ayudar en su desarrollo. (Avils, 2014).

ANGULARJS 1.5

Esta versin de AngularJS es una de las que se adapta mejor a los

desarrolladores, ya que es la transicin entre la primera versin con las futuras, adems
porque adquiere unas pequeas variaciones de acuerdo a su antecesora.

AngularJS 1.5 da un gran paso hacia la preparacin de los desarrolladores

para una transicin ms suave al angular en el futuro. La arquitectura de sus
aplicaciones utilizando componentes, transclusin de mltiples ranuras, los enlaces
unidireccionales en mbitos aislar, utilizando ganchos del ciclo de vida de los
controladores de directiva y depender de caractersticas ES6 nativas (tales como clases
y funciones de flecha) ahora todos son posibles con AngularJS 1.5. [AngularJS 1.5
takes a big step towards preparing developers for a smoother transition to Angular in the
future. Architecting your applications using components, multi-slot transclusion, one-
way bindings in isolate scopes, using lifecycle hooks in directive controllers and relying
on native ES6 features (such as classes and arrow functions) are now all possible with
AngularJS 1.5.] [1]

Esta versin incluye numerosas correcciones de errores y de seguridad, as

como mejoras en el rendimiento a los servicios bsicos, directivas, filtros y funciones de
ayuda. Las aplicaciones existentes pueden empezar a disfrutar de los beneficios de tales
cambios en $compile, $parse, $animate, $animateCss, $sanitize, ngOptions,
currencyFilter, numberFilter, copy () (por nombrar slo algunos) sin ningn cambio en
el cdigo. [This release includes numerous bug and security fixes, as well as
performance improvements to core services, directives, filters and helper functions.
Existing applications can start enjoying the benefits of such changes in $compile,
$parse, $animate, $animateCss, $sanitize, ngOptions, currencyFilter, numberFilter,
copy() (to name but a few) without any change in code][1]

Esta versin incluye nuevas funciones tales como: [1]

angular.component (): un tipo fcil un tipo especial de directiva que

son fciles de configurar y promover las mejores prcticas (adems
puede acercar las aplicaciones de AngularJS al estilo de arquitectura
de Angular).
Transclusin de mltiples ranuras [Multi-slottransclusion]:
Habilitacin del diseo de elementos de interfaz de usuario ms
potentes y complejos con una configuracin mucho ms sencilla y con
menor nmero de clicks.
$onInit lifecycle hook: Esto permite acceder a los controladores
requeridos desde el controlador de una directiva, sin tener que
depender de la funcin de enlace.
ngAnimateSwap : Una nueva directiva en ngAnimate, por lo que es
muy fcil crear componentes giratorios de tipo banner
Asistentes de prueba: Nuevas funciones de ayuda en ngMock,
simplificando las pruebas de animaciones, controladores de
componentes y enrutamiento.
 Imagen 1. Descripcin de AngularJS
Fuente: Codorniz & Garca (2015)

De acuerdo a la imagen 1 se definen los siguientes conceptos para los

diversos elementos que conforman AngularJS:

Vistas: es la parte que se muestra al cliente.

Directivas: permiten que se haga posible la reutilizacin de cdigo.
Filtros: permite que dados los datos de entrada, se obtenga una salida
depurada segn sea los requerimientos.
Factoras: son contenedores de cdigo, con los que se pueden
implementar libreras de funciones o almacenar datos.
Servicios: permite simplificar a los controladores, extrayendo detalles
especficos o separar responsabilidades, por ejemplo hacer peticiones
http.

En lo que se refiere a servicios ($parse), esta versin admite una nueva

propiedad especial $locals, de acuerdo a esto sus expresiones deben cambiar para tener
acceso a este tipo de propiedades existentes, es decir de $this.$locals a $locals.$locals.
[1]

De acuerdo a los cambios ocurridos en las Directivas (ngOptions) en esta

versin los valores falso, es decir (' ', 0, false y null) estn debidamente reconocidos
como identificadores de grupo de opciones para las opciones pasadas ngOptions. Otro
cambio es con respecto a los errores emitidos cuando no se encuentre ngModel, antes
daban lugar a errores difciles de depurar, con esta versin se pretende que esos errores
sean identificables. [1]

En la utilizacin de Filtros (orderBy) cuando se intenta pasar un valor no

similar al array (que no sea undefined o null) a travs del filtro orderBy, generara un
error, lo que anteriormente devuelve una entrada sin cambios, as esto generaba errores
muy difciles de detectar. [1]

ANTECEDENTES

Pea & Cambisaca (2015) realizaron un estudio comparativo denominado

anlisis comparativo entre los frameworks JavaScript MVC, AngularJS y Ember JS para
el desarrollo de aplicaciones web, tomando como caso prctico un prototipo de un
sistema de control de botiqun veterinario para el MAGAP, Morona Santiago.

En esta investigacin se realiz la construccin de dos prototipos uno por cada

tecnologa con la finalidad de evaluarlo en las mismas condiciones para ello se utiliz
los siguientes indicadores de comparacin: CPU, RAM, red, tarjeta grfica, Disco.

Del indicador CPU, se hicieron ocho pruebas, cuatro con mtodo Get y cuatro
con el mtodo Post para cada uno de los frameworks obteniendo lo siguiente:

AngularJS EmberJS
Indicador
GET POST GET POST
1,8 0,2 2,2 0,6
1,4 0,3 2,3 0,5
%CPU
1,6 0,3 1,9 0,6
1,5 0,3 2,4 0,5
Tabla 1. Resultados de CPU en %

Fuente: Pea & Cambisaca (2015)

As mismo de acuerdo con la capacidad de procesamiento del microprocesador

para este caso es 3,4 GHZ se establece la siguiente tabla

AngularJS EmberJS
Indicadores GET POST GET POST
CPU 0,0612 0,0068 0,0748 0,0204
0,0476 0,0102 0,0782 0,017
(GHz)
0,0544 0,0102 0,0646 0,0204
0,051 0,0102 0,0816 0,017
Tabla 2. Resultados de CPU en GHZ
Fuente: Pea & Cambiasaca (2015)
 De acuerdo al segundo indicador que es la memoria RAM, en el cual los dos
frameworks de acuerdo al prototipo ejecutado se analizan de acuerdo al tamao de
memoria que utilizan en MB.

AngularJS EmberJS

Indicador GET POST GET POST

Memoria RAM 77,0 86,6 91,7 120,7

(MB) 77,7 87,1 91,1 120,5

79,1 82,7 89,1 118,0

80,8 84,2 90,8 118,6

Tabla 3. Resultados de Memoria RAM expresados en Mb

Fuente: Pea & Cambisaca (2015)

Para el indicador tamao ocupado en Disco tambin se realiz la prueba a los

dos prototipos con la finalidad de comparar cuanto ocupan en disco segn KB/s.

AngularJS EmberJS
Indicador
GET POST GET POST

kB/s Disco 972 320 960 264

976 272 960 316
728 268 690 312
508 268 512 251.25
Tabla 4. Resultados de Disco expresados en Kb/s.
Fuente: Pea & Cambisaca (2015)

De acuerdo a los dos indicadores sus resultados se observan en las tablas 5 y 6

respectivamente para red y tarjeta grfica.

AngularJS EmberJS
Indicador
GET POST GET POST
12410 8880 51049 4111
12362 8629 51117 4216
b/s Red
12379 5750 51033 8432
12393 5751 50562 5619
Tabla 5. Resultados de Red expresados en b/s.
Fuente: Pea & Cambisaca (2015)

Indicador AngularJS EmberJS

 GET GET
MB Tarjeta 13 14
8 12
Grfica
11 13
9 11
Tabla 6. Resultados de tarjeta grfica expresados en MB.
Fuente: Pea & Cambisaca (2015)

Segn los resultados obtenidos de acuerdo a los indicadores planteados en el

grafico 1 se observa el consolidado de la informacin:

89.29%
86.83%

73.21%
67.66%
59.78%
AngularJS 55.23%54.63% 55.30%
EmberJS

40.22%

19.21%

Grfico 1. Consumo total de recursos

Fuente: Pea & Cambisaca (2015)
 Teniendo como conclusin que el framework AngularJS es el que consume
menos recursos, sin afectar esto en su funcionalidad, en cambio el framework EmberJS
de acuerdo a la informacin consolidada se puede ver que en comparacin con
AngularJs consume ms recursos ejecutando la misma aplicacin.
REFERENCIAS BIBLIOGRFICAS

[1] informacin recuperada el 26/01/07 de la pgina oficial de framework AngularJs

https://docs.angularjs.org/guide/migration

Avils, J. (2014). Desarrollo de una aplicacin web para compartir medio de

transporte con AngularJS, (Trabajo de grado). Universidad Politcnica de
Cartagena, Cartagena, Colombia.

Codorniz, E. & Garca, J. (2015). Sistema de informacin de control de proyectos,

(Tesis pregrado). Universidad Tecnolgica de Quertaro, Santiago de Quertaro,
Mxico.

Pea, J. & Cambisaca, M. (2015). Desarrollo de aplicaciones web. Caso prctico:

sistema de control de botiqun veterinario para el MAGAP, Morona Santiago,
(Tesis de pregrado). Universidad Superior Politcnica de Chimborazo, Macas,
Ecuador.