Aplicaciones Mobile Híbridas
Aplicaciones Mobile Híbridas
Técnico desarrollador de Software
- Consultor
- FullStack dev
- Frontend dev
- Mobile dev
- Game dev
- La Punta, San Luis
- @malaniz
- github.com/malaniz
Proyecto
- 20 min / clase : Diseños de app
- 20 min / clase : Tareas / teoría
- Práctica / Programación en Clase
- Avances para próxima clase
Aplicaciones Mobile Híbridas
Contenido
Apps Nativas vs Híbridas Intro Ionic Componentes UI Ionic CLI DemosMas Plataformas. Mas Problemas.
- Desarrollo para cada plataforma
- Código totalmente separado para cada una
- Desarrollo caro en Tiempo & Recursos
Aplicaciones Híbridas!
HTML5 que funciona como nativo!
Encapsulados en una capa Web nativa
Acceso directo a API nativas
Muy Familiar a el ambiente web dev
Un unico código base (web platform!)
Web-standards
Mejoraron!
caniuse.com se ve muy bien en la actualidad
Android es ahora Chromium-based
iOS users mantienen sus Dispositivos actualizados en hard y soft
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 Nativos...
Son Geniales!
UI Común, APIs, views, navigation, stack history, transitions, interactions, gestures, etc.
Tecnologías Web que
Conocémos & Amamos
(Te sentís como en tu casa)
Superpowered by
Angular
Extiende el vocabulario HTML
Totalmente probado en desarrollo de aplicaciones large-scale
Componentes UI usan Directives & Services
Arquitectura
- Tu App
- Ionic
- Angular
- WebView (Cordova)
- App Nativa
Proxima Clase
- HTML
- CSS
- Nodejs, npm, bower (instalación)
Conclusiones
Complex Lists
- AngularJS Directive
- Buttons exposed by swiping
- Reorder
- Delete
List Item {{ item.id }}
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!
{{ c.name }}
{{ c.email }}
Navigation
- Uses AngularUI Router
- Shows back button when possible
- Transitions follow direction of nav
- Updates the app's URL
- Multi-history stack
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)
Ionicons
700+ MIT licensed font-icons included
npm install -g ionic cordova
Boilerplate app structure ready for customization
LiveReload both local and native builds
Build and run native apps
Modern
Chromium!
Chromium for Android WebViews
Upgrade Android 4.1+ and above
Same hardware, modern software
Amazing performance improvements
Ionic's Adoption
- 16,000+ 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: May 2015
Get Started with Ionic!
Getting started guide ionicframework.com/getting-started
Documentation ionicframework.com/docs
Visit the Community Forum forum.ionicframework.com
Contribute on GitHub github.com/driftyco/ionic