Building Cross-Platform applications using web technologies

1. MILANO 1863
POLITECNICO
Apache Cordova
BUILDING CROSS-PLATFORM APPS USING WEB TECHNOLOGIES
Carlo Bernaschina – carlo.bernaschina@polimi.it

2. Even before the Mobile era, developers that want to
target more than one Platform/OS would like their
framework to be:
WRITE ONCE RUN ANYWHERE
The Objective
CROSS-PLATFORM APPLICATIONS

3. WRITE ONCE RUN ANYWHERE
Examples:
• C is a WORA language
the application can be written without taking into account the underlying
hardware.
• Java is a WORA framework
you can write desktop applications without taking into account the underlying OS
• Cordova is a WORA framework for mobile
you can write mobile applications without taking into account the underlying
Mobile OS
The Objective
CROSS-PLATFORM APPLICATIONS

4. WRITE ONCE RUN ANYWHERE
How to write WORA applications on mobile platforms?
The Objective
CROSS-PLATFORM APPLICATIONS

5. The Idea
EVERY SMARTPHONE HAS A BROWSER
Every mobile OS has a browser.
Mobile browsers are becoming more and more powerful.

6. The Idea
EVERY SMARTPHONE HAS A BROWSER
Every mobile OS has a
native UI component that
allows one to integrate a
web browser inside an
application (WebView).
If our application is built with
standard web technologies
we just need to pack it
inside a native application
that loads it into a full screen
browser.

7. Apache Cordova is an open-source mobile application
framework. It allows you to use standard web
technologies such as HTML5, CSS3, and JavaScript
for cross-platform development, avoiding each mobile
platforms' native development language. Applications
execute within wrappers targeted to each platform.
Apache Cordova
WHAT IS IT?
Android iOS Windows Phone BlackBerry OS Tizen webOS Ubuntu Touch Firefox OS Fire OS

8. Apache Cordova
HOW IS THE FINALAPPLICATION BUILT?
The application is developed in HTML, CSS and
JavaScript. The generated files are packed as static
resources of a wrapper application. This application
takes care of initializing a WebView and loading the
home page.
HTML, CSS &
JavaScript
Platform Dependent
Wrapper
Static Resources
Final
Application

9. If your application behaves as a classic website you do
not need to take the lifecycle into account. Your
application will be automatically loaded, paused,
resumed and closed by the system.
If your application requires to react to lifecycle’s events
(e.g. initialize at application launch, save data at
application pause, refresh at application resume, …)
wrappers expose standard and platform independent
events that can be used to react accordingly.
Application lifecycle

10. Here is a list of the most common events exposed to the
application:
• Device Ready (The application is fully loaded)
• Application Pause (The application is going to be paused)
• Application Resume (The application has been resumed)
• Back Button Pressed
• Menu Button Pressed
• Search Button Pressed
• Start Call Button Pressed
• End Call Button Pressed
• Volume Down Button Pressed
• Volume Up Button Pressed
Application lifecycle
EVENTS

11. Non naïve applications require access to advanced
features of the device they are running on.
• Sensors
– Accelerometer
– …
• Location
• Storage
• User Information
– Contacts
– Photos
– …
• …
Plugins
WHAT ABOUT SENSORS, LOCATION, STORAGE, …?

12. The access to this information is non standard, each
platform defines different APIs, different access
policies, etc.
A solution to this problem is the plugins system.
It is possible to develop native code components that
will be included in the final application. These
components expose APIs to the WebView. These APIs
should be as platform independent as possible in order
to maintain the WORA property of the framework.
Plugins
WHAT ABOUT SENSORS, LOCATION, STORAGE, …?

13. Plugins
PLATFORM SUPPORT FOR THE BUILT-IN PLUGINS

14. Cordova is used as base framework by:
• Adobe PhoneGap
• Ionic
• Monaca
• Telerik
• Intel XDK
• Cocoon
• Framework7
• WebRatio
• …
DISTRIBUTIONS
CORDOVA IS USED IN OTHER FRAMEWORKS

15. Cordova CLI is a command line tool that allows one to
automatically follow a cross-platform workflow for
application development.
Let’s open a terminal.
Build a “Hello World” application
CORDOVA CLI

16. Cordova CLI is distributed by NPM (Node Package
Manager).
First of all you require node.js installed on your system.
http://nodejs.org
Node.js is a JavaScript runtime that allows one to build
cross-platform applications.
NPM is one of the package managers for node.js.
To install the Cordova CLI run the command:
npm install -g cordova
Build a “Hello World” application
CORDOVA CLI – INSTALLATION

17. To create a new HelloWorld Project run the command:
cordova create HelloWorld
As simple as that.
To start editing the project enter into it:
cd HelloWorld
Build a “Hello World” application
CORDOVA CLI – CREATE A PROJECT

18. To add target platforms to the project run the
command:
cordova platform add android
cordova platform add ios
…
(The SDK of the target platform is required on the
development system)
Build a “Hello World” application
CORDOVA CLI – ADD TARGET PLATFORMS

19. In order to build the application run the command:
cordova build
In order to build for a specific platform run the command:
cordova build android
You can run the application in an emulator with the
command:
cordova emulate android
You can run the application on a device with the command:
cordova run android
Build a “Hello World” application
CORDOVA CLI – BUILD / EMULATE / RUN

20. The project is composed as follow:
• www
The folder containing the application source code and assets (HTML, CSS,
JavaScript, Images, …)
• config.xml
A global configuration file
• platforms
The folder containing platform dependent assets. It contains the platform
specific temporary project files used during the building process.
• merges
The folder containing platform dependent files. Every subfolder will be
merged to the www during the build phase, adding additional files or
overriding some of them.
• plugins
The folder containing plugins
Build a “Hello World” application
THE PROJECT – STRUCTURE

21. The WWW folder contains all the platform independent
assets.
You will manage this folder as it contains a static
website.
Build a “Hello World” application
THE PROJECT – WWW

22. The config.xml it is a platform agnostic configuration
file.
<widget id="com.example.hello" version="0.0.1">
<name>HelloWorld</name>
<description>A Sample Apache Cordova application</description>
<author email=dev@callback.apache.org href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<access origin="*" />
</widget>
Build a “Hello World” application
THE PROJECT – CONFIG.XML

23. Some of the fields of the config.xml are:
• id
the app reverse domain identifier
• name
the name of the application
• description
a description for the application
• author
information regarding the author
• content
the main html file
• access
the list of the domain the application can communicate to (for security
reasons)
Build a “Hello World” application
THE PROJECT – CONFIG.XML

24. In the config.xml is possible to define some
preferences:
<preference name="Fullscreen" value="true" />
• Fullscreen
• DisallowOverscroll
• BackgroundColor
• Orientation
• …
Build a “Hello World” application
THE PROJECT – CONFIG.XML

25. In the config.xml is possible to add some platform
specific configurations.
<platform name="android">
…
</platform>
Build a “Hello World” application
THE PROJECT – CONFIG.XML

26. The plugins folder contains all the plugins used in the project.
It is possible to add a new plugin to the project using the
command:
cordova plugin add cordova-plugin-device
Or
cordova plugin add https://github.com/apache/cordova-plugin-
console.git
It will download the necessary files and configure the project
Build a “Hello World” application
THE PROJECT – PLUGINS

27. In the previous step we have installed the plugin cordova-
plugin-device that allows one to access information
regarding the current device.
A common way to communicate between the application
and the plugins is via global objects.
In this case we can access the data exposed by the plugin
via the global object “device”.
device.cordova // the cordova version
device.platform // the current platform
…
Build a “Hello World” application
THE PROJECT – PLUGINS

28. One of the major problems related to Cordova
applications is the low level of performance with
respect to native applications.
To boost performance we can use the techniques used
in web applications like:
• CSS and JavaScript minification
• HTML include vulcanization
• …
Build a “Hello World” application
THE PROJECT – PERFORMANCE

29. How to apply these techniques automatically while
developing?
A common solution is to develop the application inside
a temporary folder (e.g. src, sources, …) and use
automation tools to apply these techniques and copy
all the necessary files inside the www folder.
The most common build automation tools are Grunt
and Gulp
Build a “Hello World” application
THE PROJECT – AUTOMATION

30. While using vanilla JavaScript can be a solution for
small applications, it is a good choice to use
frameworks to organize the application following MVC
or MVVM architectural patterns.
• Angular.js
• Knockout.js
• Polymer
• …
Develop an application
JS FRAMEWORK

31. While using plain CSS can be a solution for some
applications, sometimes the native look and feel of the
current platform is required. Some CSS frameworks try
to fill the gap by mimicking the native look depending
on the identified platform.
• Materialize (Android Only)
• Ionic (iOS / Android)
• Ratchet (iOS / Android)
• …
Develop an application
UI FRAMEWORK

32. • https://cordova.apache.org/
• https://cordova.apache.org/docs/en/5.1.1/guide/overview/
• https://cordova.apache.org/docs/en/5.1.1/guide/support/index.html
• https://cordova.apache.org/docs/en/5.1.1/cordova/events/events.html
• https://cordova.apache.org/docs/en/5.1.1/guide/cli/index.html
• https://cordova.apache.org/docs/en/5.1.1/config_ref/
• http://gulpjs.com/
• http://gruntjs.com/
• https://angularjs.org/
• https://www.polymer-project.org/1.0/
• http://knockoutjs.com/
• http://materializecss.com/
• http://ionicframework.com/
• http://goratchet.com/
Reference