The Cordova framework Recurrent app architecture Cordova CLI Debugging Cordova applications My development environment This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2015. http://www.ivanomalavolta.com

1. Gran Sasso Science Institute
Ivano Malavolta
Apache Cordova

2. Roadmap
• The Cordova framework
• Recurrent app architecture
• Cordova CLI
• Debugging Cordova applications
• My development environment

3. PhoneGap VS Cordova
Adobe/Nitobi donated the PhoneGap codebase to the Apache foundation
à wider audience and contributors
à transparent governance
Better documentation
à easier contributions for companies
Apache Licensing
There was only one problem....
trademark ambiguity à CORDOVA
PhoneGap is a distribution of
Apache Cordova

4. Cordova
You develop your app using the usual three guys
You use the same web view of the native OS
• iOS = UIWebView
• Android = android.webkit.WebView
http://phonegap.com/blog/2013/06/20/coming-soon-phonegap30/

5. Cordova
The UI layer is a web browser view
• 100% width
• 100% height
Headless web browser
• No URL bar
• No decorations
• No zooming
• No text selection

6. Can I use HTML5, JS and CSS libraries I use
everyday?

7. How does Cordova work?

8. Features
coverage

9. When Cordova API is not enough...
Sometimes Cordova is not enough as is for our purposes
• unsupported feature
• heavyweight data processing is faster in native code
ex. images manipulation
• background processing is better handled natively
ex. files sync
• complex business logic
à You can develop a
Cordova plugin

10. Cordova plugins
Purpose:
To expose a Phone native functionality to the browser
This is done by developing
• a custom Native Component
it will be different for each platform
• a custom JavaScript API
it should be always the same
Mobile Web app
JavaScript
Plugin A
JavaScript
Plugin B
iOS
Plugin A
iOS
Plugin B
Native Platform

11. Cordova plugin architecture
Since the 3.0 version, Cordova has a slim core with only the very basic native to web bridge
technology
All other APIs are optionally installable
Plugins are installed and removed using the Cordova CLI instrument
Developers
Can compose a version of
Cordova suited to their
project needs
Cordova contributors
Can revision APIs
independently + it is easier
to upgrade and extend APIs
Users
Smaller and faster apps

12. Cordova plugin architecture
Cordova core is now
composed of 17 repos
Comparing it to the old plugin architecture...
http://phonegap.com/blog/2013/06/20/coming-soon-phonegap30/

13. Examples of available plugins

14. Roadmap
• The Cordova framework
• Recurrent app architecture
• Cordova CLI
• Debugging Cordova applications
• My development environment

15. Recurrent app architecture
The app acts as a client for user interaction
The app communicates with an application server to receive data
The application server handles business logic and communicates with a back-end data
repository
App
Application server
Data repository

16. The app
It generally uses the single-page application model
• the application logic is inside a single HTML page
• this page is never unloaded from memory
• data will be displayed by updating the HTML DOM
• data is retrieved from the application server using Ajax

17. The server
It is a classical web server
• server-side scripting language such as Java, .NET, PHP, etc…
• communication can be based on:
- RESTful services (XML, JSON, etc.)
- SOAP
• it performs business logic, and generally gets or pushes data from a separate repository

18. The data repository
It may be:
• a standard DB (even deployed in the same machine of the application server)
• an external API
Both application server and back-end repository can be provided as a service à BaaS

19. Roadmap
• The Cordova framework
• Recurrent app architecture
• Cordova CLI
• Debugging Cordova applications
• My development environment

20. Cordova CLI
The main tool to use for the cross-platform workflow
It allows you to:
• create new projects
• add platforms
• build a project w.r.t. different platforms
• emulate a project on platform-specific emulators
• run a project on device
• include specific plugins into a project
CLI = Command-Line Interface
If you prefer to use platform-
specific SDKs, you can still use it
to initialize your project

21. Creates template project
• PATH the folder that will contain your project
• ID package identifier in reverse-domain style (optional)
• NAME display name of the app (optional)
Project creation

22. The create command creates a
predefined project structure
• hooks special Node.js scripts that are executed before/after other Cordova-specific commands
• platforms platform specific projects (ex. an Eclipse project for Android, XCode for iOS)
• plugins installed plugins (both JS files and native resources)
• www contains your HTML, JS, CSS files
Project structure
config.xml contains core Cordova API
features, plugins, and platform-specific
settings. See here for the iOS values:
http://goo.gl/wjvjst
https://github.com/apache/cordova-app-hello-
world/blob/master/hooks/README.md
https://github.com/apache/cordova-app-hello-
world/blob/master/hooks/README.md

23. With this command you add a target platform of your project.
The platform will appear as subfolder of platforms
containing the platform-specific project
mirroring the www folder
• PLATFORM_NAME
the name of the platform (e.g., ios, android, wp8)
Add platforms
If you do something like this:
cordova
platform
remove
ios
you are removing a specific platform
You can use an SDK such as Eclipse or
Xcode to open the project you created

24. The emulate command will run the app on a platform-specific emulator
The run command will run the app on a previously setup device (e.g., connected via USB and
configured for being used as device for testing purposes)
• PLATFORM_NAME
the name of the platform to be built (e.g., ios, android, wp8)
emulate/run the app

25. This generates platform-specific code within the project's platforms subdirectory
• PLUGIN_ID
the id of the repository containing the source code of the plugin to be added to the project
add plugins A list of plugins can be found here
http://plugreg.com
If the plugin you want to add is
not in the cordova.io registry, you
can directly refer to the URL of his
GitHub repository

26. Examples of available plugins

27. Sometimes it may happen to need different JavaScript code, CSS stylesheets or generic assets for
a specific platform
ex.Android-specific CSS stylesheet
iOS-specific assets for managing the back button graphics
...
In these cases you can put the platform-specific assets into the merges/PLATFORM_NAME folder
Cordova’s build command will take care of integrating them in your deployed app for the specific
platform
Platform custom code

28. Roadmap
• The Cordova framework
• Recurrent app architecture
• Cordova CLI
• Debugging Cordova applications
• My development environment

29. The killer app!
• Check console
• Breakpoints
• Update the DOM at run-time
• Access to all local DBs
• Network profiling
• CPU and memory profiling
• Monitor event listeners
• Monitor elements’ rendering time

30. Desktop Browser
• very quick
• very handy functions
• see Chrome’s Web Development Tools
• Breakpoints
PRO
• browsers’ small differences and bugs
• cannot test all Cordova’s specific functionalities
• you need Phonegap shims
CONS

31. Desktop Browser

32. Chrome Security Restriction
If you need to test your JSON calls from a local web app, you need to relax Chrome’s security policies
with respect to local files access and cross-domain resources access
• OSX
open
-­‐a
Google
Chrome.app
-­‐-­‐args
“
-­‐-­‐disable-­‐web-­‐security“
• Windows
chrome.exe
-­‐-­‐disable-­‐web-­‐security
DO IT ONLY FOR
DEBUGGING!

33. Simulator
• Officially supported by platform vendors
• You use the “real” device’s browser
PRO
• device’s performance is not considered
• this is iOS-specific
• Android’s emulator is a joke
CONS

34. On device
• accurate
• still handy
• real performance tests
• real browser tests
PRO
• Deployment takes some time (~6 seconds for iOS)
CONS

35. Ripple
• very quick
• can use Chrome’s Web Development Tools
• You can test Cordova’s API from the Desktop
• browsers’ small differences and bugs
• cannot test the interaction with external apps
PRO
CONS
It is based on Ripple, a Chrome
plugin for mobile dev
from Cordova 3.0.0, you need to use
the Ripple available at Apache
npm
install
-­‐g
ripple-­‐emulator
ripple
emulate

36. Apache Ripple

37. Remote Debugging
From iOS 6, Apple provided Mobile Safari with a remote web inspector
à You can debug your app by using the classical web inspector of Desktop Safari
It can connect both to
• The iOS emulator
• The real device
Since Android 4.4, this feature is
available via Chrome’s web dev kit

38. Remote Debugging for older platforms
Weinre http://people.apache.org/~pmuellr/weinre/docs/latest/
3 main components:
Debug Server
the HTTP server for debug data
Debug Target
the (web) app you are debugging
Debug Client
the Web Inspector user interface
Public debug server:
debug.phonegap.com

39. Debugging reference table
Make a favor to yourself,
don’t debug craftsman way:
console.log()
+
alert()
iOS Android
Desktop Browser
Ripple
Device/simulator
Weinre
Safari Web
Inspector
X
Chrome Web
Inspector
X

40. Roadmap
• The Cordova framework
• Recurrent app architecture
• Cordova CLI
• Debugging Cordova applications
• My development environment and workflow

41. My development environment
Sublime Text 2
http://www.sublimetext.com
SublimeText Package Control
http://wbond.net/sublime_packages/package_control
Sidebar Enhancer
https://github.com/titoBouzout/SideBarEnhancements
HTML Prettify
https://github.com/victorporof/Sublime-HTMLPrettify
SublimeLinter
https://github.com/SublimeLinter/SublimeLinter
JsFormat
https://github.com/jdc0589/JsFormat
ITG Flat theme
http://itsthatguy.com/post/70191573560/sublime-text-
theme-itg-flat

42. My development workflow
1. Code & test using Ripple (very quick)
Quick sketch of layout and complete business logic
2. Run and debug in the XCode simulator (handy & accurate)
Complete the UI for iOS devices and ~99% confidence about business logic
3. Run and debug on devices (complete control & confidence)
Complete the UI for Android too and ~99% confidence about business logic

43. Remarks
These are MY development environment and development workflow
There are many tools and IDEs out there
à Consider this as a starting point & feel free to use the ones that fit well with your
attitude

44. References
http://cordova.apache.org/docs/en/edge

45. Contact
Ivano Malavolta |
Gran Sasso Science Institute
iivanoo
ivano.malavolta@gssi.infn.it
www.ivanomalavolta.com