Upload
hugo-rodrigues
View
505
Download
1
Tags:
Embed Size (px)
Citation preview
Hugo Rodrigues
Full-stack Developer (and Full-time HackHands expert)
www.hackhands.com/hugorodrigues www.hugorodrigues.com [email protected]
@hugorodrigues
WTF is Hybrid Mobile/Desktop HTML5?
HYBRID HTML5APPS
HTML5APPS
Everything you already know
about HTML5
All from HTML5 +
Native OS API’s
runs in browser runs inside a native app
When you need to go Hybrid?
HYBRID HTML5APPS
Hybrid Desktop
- Full filesystem access - Use NPM Packages - Shell Access - Interact with system …
Hybrid Mobile
Access Native OS API - Plugin Access -
Hardware Access - Camera, GPS, Vibration -
…
Cordova?
★ Phonegap started everything ★ Phonegap Core moved to Apache foundation when Adobe acquires Phonegap. ★ I like to call it “the abstraction layer” ★ Can be used without any other tool ★ It’s extendable by using plugins
Plugins… Plugins everywhere!
Battery Status Camera Console
Contacts
Device
FileSystem
File Transfer
GeolocationMediaVibration
Native stack
Phone Operative System (iOS, Android, Windows Phone)
Your NATIVE App(Java, objectiveC, swift)
CameraAPI
FileAPI
GPSAPI
MediaAPI
Hybrid HTML5 Stack
Phone Operative System (iOS, Android, Windows Phone)
CameraAPI
FileAPI
GPSAPI
MediaAPI
Hybrid HTML5 Stack
Phone Operative System (iOS, Android, Windows Phone)
CameraAPI
FileAPI
GPSAPI
MediaAPI
Cordova bridge (Abstraction layer)
Hybrid HTML5 Stack
Phone Operative System (iOS, Android, Windows Phone)
CameraAPI
FileAPI
GPSAPI
MediaAPI
Cordova bridge (Abstraction layer)
CameraJS
FileJS
GPSJS
MediaJS
Hybrid HTML5 Stack
Phone Operative System (iOS, Android, Windows Phone)
CameraAPI
FileAPI
GPSAPI
MediaAPI
Cordova bridge (Abstraction layer)
Rendering layer (Safari, Chrome, webkit)
CameraJS
FileJS
GPSJS
MediaJS
Hybrid HTML5 Stack
Phone Operative System (iOS, Android, Windows Phone)
CameraAPI
FileAPI
GPSAPI
MediaAPI
Cordova bridge (Abstraction layer)
Your HTML5 App(Html5 + CSS3 + JS)
Rendering layer (Safari, Chrome, webkit)
CameraJS
FileJS
GPSJS
MediaJS
Hybrid HTML5 vs NATIVE stack
Phone Operative System (iOS, Android, Windows Phone)
CameraAPI
FileAPI
GPSAPI
MediaAPI
Cordova bridge (Abstraction layer)
Your HTML5 App(Html5 + CSS3 + JS)
Rendering layer (Safari, Chrome, webkit)
CameraJS
FileJS
GPSJS
MediaJS
Phone Operative System (iOS, Android, Windows Phone)
Your NATIVE App(Java, objectiveC, swift)
CameraAPI
FileAPI
GPSAPI
MediaAPI
Hybrid HTML5 Native APP
Hybrid HTML5 vs NATIVE stack
Phone Operative System (iOS, Android, Windows Phone)
CameraAPI
FileAPI
GPSAPI
MediaAPI
Cordova bridge (Abstraction layer)
Your HTML5 App(Html5 + CSS3 + JS)
Rendering layer (Safari, Chrome, webkit)
CameraJS
FileJS
GPSJS
MediaJS
Phone Operative System (iOS, Android, Windows Phone)
Your NATIVE App(Java, objectiveC, swift)
CameraAPI
FileAPI
GPSAPI
MediaAPI
Hybrid HTML5 Native APP
Plugins
Cordova App
Webview
The same codebase runs everywhereYour HTML5 App
(Html5 + CSS3 + JS)
Phone Operative System iOS
CameraAPI
FileAPI
GPSAPI
MediaAPI
Cordova bridge (Abstraction layer)
Rendering layerSafari
CameraJS
FileJS
GPSJS
MediaJS
Phone Operative SystemAndroid
CameraAPI
FileAPI
GPSAPI
MediaAPI
Cordova bridge (Abstraction layer)
Rendering layerChrome or webkit
CameraJS
FileJS
GPSJS
MediaJS
Phone Operative System Windows Phone
CameraAPI
FileAPI
GPSAPI
MediaAPI
Cordova bridge (Abstraction layer)
Rendering layerInternet Explorer
CameraJS
FileJS
GPSJS
MediaJS
Nexus iPhone Lumia
So what the other projects do?
★ Extra Tools (CLI/Console tools) ★ Helpers (IDE’s, WYSIWYG tools) ★ Mobile UI Frameworks (User Interface) ★ Cloud building ★ CI & Deployment ★ Auto submission to App store’s ★ Extra Cordova Plugins ★ …
What makes a great user Mobile UI framework?
✓ Performance ✓ Native look and feel ✓ Usability ( for users and developers )
What makes a great user Mobile UI framework?
✓ Performance ✓ Native look and feel ✓ Usability ( for users and developers ) ✓ SPA ( Single-page application )
What makes a great user Mobile UI framework?
✓ Performance ✓ Native look and feel ✓ Usability ( for users and developers ) ✓ SPA ( Single-page application ) ✓ Large number of UI components/widgets
What makes a great user Mobile UI framework?
✓ Performance ✓ Native look and feel ✓ Usability ( for users and developers ) ✓ SPA ( Single-page application ) ✓ Large number of UI components/widgets ✓ Well tested agains multiple devices
What makes a great user Mobile UI framework?
✓ Performance ✓ Native look and feel ✓ Usability ( for users and developers ) ✓ SPA ( Single-page application ) ✓ Large number of UI components/widgets ✓ Well tested agains multiple devices
ionic + ngCordova = Epic win!
✓ Great Documentation ✓ Quality set of JS Components ✓ Large set of CSS Components ✓ Build on AngularJS ✓ ngCordova for efective use of Cordova plugins on Angular
Key points for build great apps
✓ Understand how it works ( To avoid common pitfalls ) ✓ Know that everything is Cordova ( To find plugins & know how they are connected )
Key points for build great apps
✓ Understand how it works ( To avoid common pitfalls ) ✓ Know that everything is Cordova ( To find plugins & know how they are connected ) ✓ How Native plugins work ( So you can write you own )
Key points for build great apps
✓ Understand how it works ( To avoid common pitfalls ) ✓ Know that everything is Cordova ( To find plugins & know how they are connected ) ✓ How Native plugins work ( So you can write you own ) ✓ Choose a great UI Framework ( To deliver great UX and smooth UI )
Key points for build great apps
✓ Understand how it works ( To avoid common pitfalls ) ✓ Know that everything is Cordova ( To find plugins & know how they are connected ) ✓ How Native plugins work ( So you can write you own ) ✓ Choose a great UI Framework ( To deliver great UX and smooth UI )
Install SDK for your target platforms
Xcodefor building iOS Apps
Android SDKfor building Android Apps
Scaffolding your Project - Add Plugins
$ cordova plugin add org.apache.cordova.camera
Find more plugin: http://plugins.cordova.io/
Installing "org.apache.cordova.camera" for android Installing "org.apache.cordova.camera" for ios
Scaffolding your Project - Directory tree
myApp|-- platforms| |-- android| `-- ios|-- plugins| `-- org.apache.cordova.camera`-- www |-- css |-- img |-- js |-- lib `-- templates
Scaffolding your Project - Directory tree
myApp|-- platforms| |-- android| `-- ios|-- plugins| `-- org.apache.cordova.camera`-- www |-- css |-- img |-- js |-- lib `-- templates
One folder for everyplatform you have targeted
Scaffolding your Project - Directory tree
myApp|-- platforms| |-- android| `-- ios|-- plugins| `-- org.apache.cordova.camera`-- www |-- css |-- img |-- js |-- lib `-- templates
All the installedplugins will go here
Scaffolding your Project - Directory tree
myApp|-- platforms| |-- android| `-- ios|-- plugins| `-- org.apache.cordova.camera`-- www |-- css |-- img |-- js |-- lib `-- templates
This is whereyou will code!
Debugging - Android - Chrome
chrome://inspect/
https://www.jshybugger.com
Android 4.4+
Previous versions
Debugging - iOS
$ defaults write com.apple.Safari IncludeDebugMenu 1
Activate Safari Dev/Debug Menu (or use the GUI)
Select the simulator or a connected device and start debugging