Angular js in mobile
-
Upload
sergio-contreras -
Category
Documents
-
view
589 -
download
3
Transcript of 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
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
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
Angular JS -‐ CaracterísYcas
• Patrones de diseño – Inyección de dependencias. – Módulo. – Factoría.
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!!”
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…
Performance. OpYmizaciones en Angular JS
Se incluyen 2 $watch en la lista de $watch
Performance. OpYmizaciones en Angular JS
Se incluyen 1 $watch en la lista de $watch
Performance. OpYmizaciones en Angular JS
Se incluyen (2*n) + 1 $watch en la lista de $watch
Performance. OpYmizaciones en Angular JS
• $digest loop
Performance. OpYmizaciones en Angular JS
• Dirty checking
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
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
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
Performance. OpYmizaciones en Angular JS
• 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]