Este documento describe las características y ventajas de usar AngularJS para el desarrollo de aplicaciones móviles híbridas. Explica que AngularJS es un framework JavaScript para la creación de aplicaciones web dinámicas que facilita el desarrollo de aplicaciones móviles híbridas debido a su enfoque en el uso de JavaScript, su capacidad de crear componentes reutilizables y su soporte para pruebas unitarias. También recomienda módulos como Ionic para mejorar el rendimiento en dispositivos móviles

1. Angular
JS
in
Mobile
Devices
@sergicontre

2. Sobre
mi
• So5ware
Mobile
Developer
@sergicontre
h9ps://github.com/sergicontre
h9p://plnkr.co/users/sergicontre

3. Angular
JS
• Es
un
framework
‘Model-­‐View-­‐Whatever’
• 100%
Javascript
• Constante
crecimiento
– Primera
Release
Octubre
de
2010
(versión
0.9.0)
– Versión
actual:
1.2.16
/
1.3.0-­‐beta.7
– Versión
2.0:
¿?
• Soportada
por
los
navegadores
modernos.

4. Angular
JS
-­‐
CaracterísYcas
• Data-­‐binding
bidireccional.
– Enlace
automáYco
para
actualizar
la
vista
cuando
el
modelo
cambia,
ó
actualizar
el
modelo
cuando
la
vista
cambia.
Evita
que
realices
la
manipulación
del
DOM.
Demo:
h0p://embed.plnkr.co/ZcS3a4

5. Angular
JS
-­‐
CaracterísYcas
• DirecYvas
– Es
una
marca
sobre
un
elemento
del
DOM
• Atributo
• Elemento
• CSS
– Permite
enlazar
un
comportamiento
específico
o
transformación
del
elemento
DOM.
Demo:
h0p://embed.plnkr.co/9WEytxN8wUsNxp973Zzg

6. Angular
JS
-­‐
CaracterísYcas
• Controladores
– Es
una
función
constructora
Javascript
que
permite
instanciar
un
objeto
$scope,
que
servirá
de
pegamento
con
la
vista
(HTML).
Demo:
h0p://embed.plnkr.co/ZcS3a4

7. Angular
JS
-­‐
CaracterísYcas
• Patrones
de
diseño
– Inyección
de
dependencias.
– Módulo.
– Factoría.

8. Angular
JS
-­‐
CaracterísYcas
• Facilita
realizar
tesYng.
– Test
unitarios.
Demo:
h0p://embed.plnkr.co/gtp2jtGfmgoibd4cuFBr
– End
to
End.
“NUNCA
LO
OLVIDES….DOS
VECES
AL
DÍA!!”

9. Angular
JS
-­‐
Tendencia
Angular
JS
Backbone
JS
Ember
JS
Knockout

10. Problemas
que
nos
plantea
un
desarrollo
híbrido
• Fragmentación
del
Market.
• CaracterísYcas
especificas
de
cada
plataforma.
• Sensación
de
aplicación
naYva.
• UI
muy
bonitas
==
mucho
CSS.
• CSS
es
una
parte
críYca
de
tu
App.
• ExpectaYvas
de
usuario
muy
altas.

11. ¿Por
qué
Angular
JS
en
un
desarrollo
híbrido?
• Javascript
con
soporte
cross
browser.
• Menos
código
=
menos
bugs.
• Menos
código
=
mejor
mantenimiento.
• Patrón
modulo,
encapsulado
del
código.
• Componentes
reusables
(direcYvas,
filtros…).
• Testeable.
(unit
tesYng,
e2e…)
• Comunidad.

12. Performance.
OpYmizaciones
en
Angular
JS
• Angular
JS
uYliza
dirty
checking
para
actualizar
sus
views
y
comprobar
si
un
valor
ha
cambiado.
• $digest
loop,
$watch…

13. Performance.
OpYmizaciones
en
Angular
JS
Se
incluyen
2
$watch
en
la
lista
de
$watch

14. Performance.
OpYmizaciones
en
Angular
JS
Se
incluyen
1
$watch
en
la
lista
de
$watch

15. Performance.
OpYmizaciones
en
Angular
JS
Se
incluyen
(2*n)
+
1
$watch
en
la
lista
de
$watch

16. Performance.
OpYmizaciones
en
Angular
JS
• $digest
loop

17. Performance.
OpYmizaciones
en
Angular
JS
• Dirty
checking

18. Performance.
OpYmizaciones
en
Angular
JS
• Dirty
checking
– Ocurre
un
evento
dentro
del
contexto
de
angular.
– $digest
loop:
pregunta
a
cada
$watch
si
ha
cambiado.
– Si
algún
$watch
reporta
un
cambio,
vuelve
a
lanzar
$digest
loop.
– El
nuevo
$digest
loop
no
reporta
un
cambio.
– Actualización
del
DOM

19. Performance.
OpYmizaciones
en
Angular
JS
• Minimizar
el
tamaño
del
DOM.
• Pre
carga
templates
(grunt-­‐html2js)
– h9ps://github.com/karlgoldstein/grunt-­‐html2js
• Uso
FastClick.
– h9p://5labs.github.io/fastclick/
• Prevenir
page-­‐zooming.
• Uso
librerias
JS/CSS
opYmizadas
para
móviles
– Ionic
Framework.
h9p://ionicframework.com/
– Demo:
h9p://embed.plnkr.co/N5BjFK

20. Performance.
OpYmizaciones
en
Angular
JS
• Transiciones
entre
vistas
basadas
completamente
en
CSS
• Uso
de
3D
transforms.
• Listen
$routeChangeStart
para
actualizar
la
dirección
de
transición
de
la
vista.
• Demo:
h9p://embed.plnkr.co/lrIay2

21. Performance.
OpYmizaciones
en
Angular
JS
• Minimizar
el
código
Angular
JS:
ngMin
ngMin

22. Módulos
mobile
friendly
• Bindonce:
enlaza
una
vez
y
despues
destruye
watchers
innecesarios.
• Ejemplo:
en
listas
con
muchos
elementos
Resultado:
1
watcher
en
lugar
de
1
+
(6*n)
h0ps://github.com/Pasvaz/bindonce

23. Módulos
mobile
friendly
• angular-­‐carousel:
permite
crear
un
carrusel
touch
a
parYr
de
una
expresión
ng-­‐repeat.
• Usa
3D
transformaYon,
DOM-­‐buffering…
h0ps://github.com/revolunet/angular-­‐carousel
DEMO:
h0p://embed.plnkr.co/ULicic

24. Módulos
mobile
friendly
• angular-­‐snap:
permite
crear
menu
lateral
oculto
con
soporte
swipe,
mulYple
drawers,
diferentes
Ypos
de
transiciones
h0ps://github.com/jtrussell/angular-­‐snap.js
DEMO:
h0p://embed.plnkr.co/zKu1GXEqW4MxuwtN4GQT

25. Módulos
mobile
friendly
• angular-­‐gestures:
permite
capturar
acciones
touch
sobre
los
elementos
del
DOM.
• Es
un
wrapper
de
hammer.js
h0ps://github.com/wzr1337/angular-­‐gestures

26. Futuro:
Angular
2.0
• ECMAScript
6
è
Traceur
compiler
• Mejora
databinding
con
Object.observer()
• Angular
logging
è
diary.js
• Modular
è
versión
Desktop
/
Mobile.
• DI
è
a
traves
de
anotaciones.
• Mejora
performance
templaYng.
• !
Más
orientado
al
disposiYvo
móvil
!
h0p://blog.angularjs.org/2014/03/angular-­‐20.html

27. Angular
JS
cómo
aplicación
naYva

28. GRACIAS
@sergicontre
sergio.contreras@sopra.com