Construyendo Aplicaciones hibridas con AngularJS y Ionic
Vista General
¿Cómo funciona un aplicación híbrida?
Vista general de esta tecnica
Desarrollo nativo vs Desarrollo híbrido
Ionic Framework
Componentes
Casos de exito
Ionic 2 y Angular 2
“Quiero construir un app!”
Más Plataformas. Más Problemas.
- Conocimiento en cada plataforma
- Baes de codigo aparte
- Largos tiempos de desarrollo
¿Por qué seguimos programando para múltiples plataformas ?
“¿Hay alguna alternativa ?”
Aplicaciones Hibridas!
HTML5 que actua como nativo
Envueelto en unwebview
Acceso directo APIs nativas
Un entorno de desarrollo familiar
Una sola base de codigo
“Las aplicaciones hibridas son lentas!”
“Los tiempos han cambiado'”
Año
Dispositivo
Procesador
RAM
2007
iPhone
400 MHz
128 MB
2010
iPhone 4
1 GHz
512 MB
2015
iPhone 6
1.4 GHz dual-core
1 GB
https://mixpanel.com/trends/#report/ios_8/from_date:-141,report_unit:day,to_date:0
https://mixpanel.com/trends/#report/android_os_adoption
SDKs Nativas...
Son grandiosas!
Common UI, APIs, views, navigation, stack history, transitions, interactions, gestures, etc.
No Hay SDK Web
- Es el salvaje oeste para aplicaciones híbridas
- Tenemos que cerrar la brecha entre la web y nativas
- Necesitamos ricos , componentes e interacciones de interfaz de usuario de estilo nativo
- Necesitamos API de interfaz de usuario , no sólo a los widgets
Tecnologías Web que ya
conoces y amas
(Te sentirás como en casa)
Con los poderes de
Angular 1 y 2
Extendiendo el vocabulario HTML
Probada para el desarrollo de aplicaciones a gran escala
Usa componentes de UI comoDirectives & Services
Con AngularJS 2 componentes nativos web
Enfocado en nativo
- Siguiendo el modelo del SDK nativo
- Construido para trabajar con Cordova
Rendimiento Obsessed
- Animaciones de hardware acelerado
- Manipulación Mínimo DOM
Sass!
CSS generado desdeSass
Dar rápidamente a su aplicación su propia UI
CSS diseñado para ser facilmente sobre escrito
Ionicons
Over 700 MIT licensed font-icons included
ionicons.com
Construido por los nerds (como tú)
Construido y mantenido por los desarrolladores y diseñadores apasionados por las tecnologías web.
¿Como se organiza todo esto?
- Your App
- Ionic
- Angular
- WebView (Cordova)
- Native App
Complex Lists
- AngularJS Directive
- Buttons exposed by swiping
- Reorder
- Delete
<ion-list>
<ion-item ng-repeat="item in items" item="item">
List Item {{ item.id }}
</ion-item>
</ion-list>
Collection Repeat
- Replacement for Angular's ng-repeat
- Inspired by iOS’s UICollectionView
- Scroll through thousands of items
- Only renders the viewable items
- Smooth scrolling!
<div class="list">
<div collection-repeat="c in contacts">
<h2>{{ c.name }}</h2>
<p>{{ c.email }}</p>
</div>
</div>
Navigation
- Uses AngularUI Router
- Shows back button when possible
- Transitions follow direction of nav
- Updates the app's URL
- Multi-history stack
<ion-tabs>
<ion-tab title="Home" icon="ion-ios-home">
<ion-nav-view name="home"></ion-nav-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios-information">
<ion-nav-view name="about"></ion-nav-view>
</ion-tab>
<ion-tab title="Contact" icon="ion-ios-world">
<ion-nav-view name="contact"></ion-nav-view>
</ion-tab>
</ion-tabs>
Swipe To Go Back
- Swipe back to previous view
- Interactive transition
- Benefit of cached views
- Still updates the app's URL
- WebView (Cordova) only
Other Components
- Side Menus
- Actionsheet
- Modal
- Pull To Refresh
- Spinners
- Slidebox
- Infinite Scroll
- Swipeable List Options
- Popup
- Popover
- Loading Overlay
- Inputs
- Buttons
- etc.
MIT LICENSED
Free to use (even commercially)
Ionic's Adoption
- 21,600+ Github Stars
- Top 40 most starred Github repos
- Consistently Top 10 trending JS Github repos
- Ionic CLI 95,000 downloads/month
- 600,000+ Ionic apps have been started from our CLI
- Released Alpha: November 2013
- Released Stable: December 2015
Construyendo Aplicaciones hibridas con AngularJS y Ionic