4. Monaca: A PhoneGap IDE
Cloud-based PhoneGap/Cordova development environment
Supports iOS, Android, Windows 8, and Chrome Apps
Firefox OS support is coming in near future
Starts from free pricing
Has live-reload debugger
Lots of docs / sample apps
http://monaca.mobi/
5. Android Native Layer
What is a hybrid app?
HTML
Content
iOS Native Layer
HTML
Content
iOS App Android App
6. Browser comparison
Mobile Browser Hybrid App
Browser Engine
iOS:
Safari or UIWebView
Android:
WebView, Chrome, etc...
iOS:
UIWebView (Nitro disabled)
Android:
WebView
HTML5, CSS, and JS
Support Level
Same
Extend JavaScript APIs ✓
Same-Origin Policy
Controlled by CORS
header
Not applicable.
Controlled by access origin
configuration.
13. History of PhoneGap / Cordova
Nitobi folks developed PhoneGap.
Adobe acquired Nitobi.
PhoneGap became a product of Adobe.
And PhoneGap source code transferred to Apache
Foundation.
Nitobi team wanted a name that had a meaning to them.
So they re-named it "Cordova"
16. Difference ① Command
Action Option cordova phonegap Description
create ✓ ✓ Create a new project
serve ✓ ✓ Run on local Web server (Used by Developer App
etc.)
build ✓ ✓ Build
install ✓ Install on connected device
run ✓ ✓ Run on connected device
plugin ✓ ✓ Add / remove / search Cordova plugin
prepare ✓ Generate a build image
compile ✓ Do compile from prepared build image
emulate ✓ Run in emulator (same as run --emulator)
remote
login/logout/build/install/
run
✓ Commands for PhoneGap Build integration
local build/install/run/plugin ✓ Commands for local development
19. Other differences
Available Version
Cordova: 3.5
PhoneGap Build: 3.4
Native-code customizability
Cordova: You can customize code in any where
PhoneGap Build: Only Cordova plugins are supported
PhoneGap has more features
PhoneGap Enterprise
PhoneGap Developer App
20. Cordova and its family
PhoneGap
Monaca
Ionic Framework
MS Visual Studio
Google Chrome
Apps Mobile
IBM Worklight
All these tools will create the same types of apps, essentially.
21. Common problems
User interface
Delivering smooth native-like widgets and transition
Overall performance
More faster JavaScript
More faster rendering
Security
Encryption of the source code (HTML and JS)
Device API / native functions
You need to wrap every Android or iOS native API calls
22. Recent trends
New enhanced browser engines
Cordova-compatible Blink-based WebView
WKWebView coming in iOS 8. See my article here.
Modern HTML5 based UI frameworks
Based in AngularJS: Ionic Framework, Onsen UI
Optimized to CSS3 rendering: famo.us
Cordova Plugin Registry
23. New Android WebViews
Intel Crosswalk Project
Based on Chrominium.
Supports Tizen and Android.
Ludei WebView+ (Cocoon JS)
Browser engine with WebGL enabled.
Great for 3D games.
Amazon Silk
Browser engine for Kindle Fire.
Only available through Amazon HTML5/Web Apps Store.
24. New WebView benefits
No fragmentation in Android version anymore
Same HTML5/CSS3/JS for all Android 4 devices
Ease of debugging
Supports USB debugging via Chrome Dev Tools
JavaScript breakpoints, profile, network...
Less device testing
Increased performance
Can use the latest Blink engine
Tradeoffs:
File size getting big (8MB~15MB)
Slow startup
26. Modern JS UI Framework
Ionic Framework (http://ionicframework.com)
UI framework based on AngularJS.
Onsen UI (http://onsenui.io)
AngularJS + Topcoat. Supports tablet and Android 2.3.
Famo.us (http://famo.us)
Super-quick rendering using CSS3 tricks.
27. Cordova Plugin Registry
http://plugins.cordova.io/
Cordova core and plugin are separated as
of Cordova 3.4.
APIs are now implemented sa plugins.
Plugin registry like npm
Install with command
User can submit their own plugins.