Este documento presenta una introducción a Ionic 2, el nuevo framework para desarrollar aplicaciones móviles híbridas utilizando Angular 2. Ionic 2 ofrece simplicidad, continuidad entre plataformas, alto rendimiento gracias a Angular 2, libertad creativa y la capacidad de programar una sola vez para múltiples plataformas. El documento también describe las nuevas características de Ionic 2 como componentes, navegación, temas personalizables, animaciones web nativas y acceso más fácil a funcionalidades nativas.

1. h"p://sg.com.mx/mobileday
#mobiledaysg
Ionic 2:
El Futuro de las Apps híbridas
Israel
Guzmán
@israelgp4

2. ¿Qué es AngularJS?
Es un framework de Google que nos permite
crear aplicaciones web escalables, robustas y
seguras.
AngularJS nos permite extender el vocabulario de
HTML para un desarrollo rápido, legible y
expresivo.

3. Estado actual de AngularJS
Angular 1.5 es la versión actual
Angular 2.0 se encuentra en Beta

4. Enfoque de Angular 2.0
1. Velocidad & Performance
2. Simple & expresivo
3. Multiplataforma
4. Soporta navegadores Legacy. No solo las
últimas versiones de Chrome, Edge, Firefox y
Safari, sino tambien IE9+ y Android 4.1+
5. Animaciones
6. I18n & accesibilidad

5. Angular 2.0

6. Ionic
Es un framework hecho con Angular para el
desarrollo de aplicaciones móviles con tecnología
web.
• Mobile first
• Fácil de personalizar
• Angular como su estructura de código

7. Ionic V1
Se han hecho más de UN MILLÓN de apps
• Básicamente se creó un SDK híbrido que no
existía en su tiempo
• Fue hecho durante iOS 6 y Android 2.3

8. Ionic 2
• El framework mejorado, gracias a las lecciones
aprendidas de la v1
• Utiliza nuevas APIs de la web
• Performance increíble gracias a Angular 2
• Muchas cosas nuevas

9. Enfoque de Ionic 2
• Simplicidad
• Continuidad de plataforma
• Performance
• Libertad de creatividad
• Programar solo una vez

10. Simplicidad
• Modelo a base de componentes
• Elementos y atributos
• Listo para personalizarse
• JavaScript limpio

11. Componente

12. Componente de aplicación

13. Continuidad de Plataforma
• iOS : Android
• Una sola base de código
• Mismo HTML y JS
• Libertad de creatividad
• Más que solo diferente
CSS

14. Ionicons
• ~900 íconos
• SVGs
• iOS
• Material Design

15. Ionicons

16. Nueva Navegación
• Tipo Push/Pop
• Similar a iOS/Android
• iOS
• Soporta url y deep-linking

17. Temas y personalización
• Fácil de crear temas
• Diseñar para tu marca
• Todo es variable

18. API Animaciones Web
• Motor de animaciones del browser
• Flexibilidad de JavaScript
• Spec de la W3C
• Nativa en Chrome/Android
• Polyfill de iOS

19. Todo es configurable
• Config. Global
• Config. de Plataforma
• Config. de Atributos
• Config. De Instancia de
componentes

20. Multiplataforma
• ES5
• ES6
• Typescript

21. Poder Nativo
• No más ng-cordova
• Mucho más fácil de utilizar las
funcionalidades nativas
• Solo cordova y JS

22. ¿Preguntas?
Twi"er:
h"ps://twi"er.com/israelgp4
Youtube:
h"ps://www.youtube.com/user/angularjstutoriales
Xpertys:
h"p://xpertys.com.mx/