Angular js in mobile

Angular JS in Mobile Devices

@sergicontre

Sobre mi

•  So5ware Mobile Developer

@sergicontre

h9ps://github.com/sergicontre

h9p://plnkr.co/users/sergicontre

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.

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


•  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


•  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


•  Patrones de diseño –  Inyección de dependencias. – Módulo. – Factoría.


•  Facilita realizar tesYng. – Test unitarios. Demo: h0p://embed.plnkr.co/gtp2jtGfmgoibd4cuFBr

– End to End.

“NUNCA LO OLVIDES….DOS VECES AL DÍA!!”

Angular JS -‐ Tendencia

Angular JS

Backbone JS Ember JS Knockout

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.

¿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.

Performance. OpYmizaciones en Angular JS

•  Angular JS uYliza dirty checking para actualizar sus views y comprobar si un valor ha cambiado.

•  $digest loop, $watch…


Se incluyen 2 $watch en la lista de $watch


Se incluyen 1 $watch en la lista de $watch


Se incluyen (2*n) + 1 $watch en la lista de $watch


•  $digest loop


•  Dirty checking


•  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


•  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


•  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


•  Minimizar el código Angular JS: ngMin

ngMin

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

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

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

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

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

Angular JS cómo aplicación naYva

GRACIAS

@sergicontre [email protected]

Documents

Angular js in mobile