Cross-Platform Development

using HTML, CSS & JS 

2

JavaScript Engine• What are they?• Is a program or library which executes JavaScript code• JavaScript interpreter or JavaScript implementation

• Major Implementation• SpiderMonkey (Netscape)• Rhino• V8 (Chrome)

• V8 developed by Lars Bak• Compiles JavaScript to native machine code• Better performance for game on browser

3

JavaScript vs NodeJS• JavaScript is a language•  Asynchronous

• NodeJS is dialect of JavaScript• JavaScript in Browser• Client-side• DOM, AJAX, Local Storage, Cookie

• JavaScript on Machine• Process JavaScript independent of browser• eg. NodeJS, MarkLogic• Server, DOM, File system…

4

Software/App Development• Electron by Github• Cross platform desktop app• JS (Code) + HTML (GUI) = exe• eg. Atom and Visual Code source code editor

• Phonegap by Nitobi (Adobe)• Cross platform mobile app• Target 13 different platforms

• Android, WP, Ubuntu Mobile, Firefox OS, BADA, Blackberry…

• PhoneGap open-source version • Cordova

5

Who uses Cordova!• Wikipedia• Facebook• Salesforce (CRM)• Intel• Microsoft• Adobe• Zynga – Mafia Wars•  Vodafone McLaren F1 – 1 million download

6

How does it work?• Utilizes web view of every platform• Cordova API link for device functionality• Example phone functionality through cordova.js• Media• File• Contact• Connection• More…

• Third Party Plugins• Barcode, Admob, SQLite

7

Apache Cordova - Default Plugins• Battery • Camera• Console• Contacts• Device• Device Motion• Orientation• Dialogs

• Geo location• In App Browser• Media• Media Capture• Network Information• Splash Screen• Vibration• File Transfer• File

8

Creating Interface• Every thing is based on HTML, JavaScript and CSS• We have to create our own UI• Frameworks• Provide native look of iOS and Android• Ionic Framework (Recommended and popular one) • Onsen Framework• Phonon• Microsoft Ace

9

Installation• Download Node.js• Check installation in cmd by running • npm -version

• Install cordova • npm install -g cordova• npm install -g ionic

10

Creating First Application• cd c:/dev/cordova• ionic start HelloWorld (blank|tabs|sidemenu)• Create app using Ionic framework with side menu

• cd HelloWorld• Get into the application folder

• ionic platform add (ios|android|win8|browser)• Add platform to the project.

• ionic serve• Check site on browser.

11

Running on Android• ionic platform add android• ionic build android• Generate .apk file if Android SDK is install on computer.

• ionic run android

Installing Android SDK- Download and Install Android SDK, JDK and Apache Ant- Install platform API 22 using SDK Manager- Add ANDROID_HOME, platform-tools and tools to path env

12

Other solution for building• build.phonegap.com (only build in cloud)• monaca.io (build with online IDE)• appery.io (not free)• Intel XDK • Visual Studio 2015

13

14

Cordova vs Native Development• Least expensive to develop• Biggest target market• Low Barrier to Entry• Creates an App that you can publish in the App Stores• Easier to maintain• Prototype very quickly• Utilize all of the many JavaScript libraries already available

• Best end user experience• Highest ceiling for performance• Directly access device features and services via API• Easily provide appropriate interfaces depending on device• Utilize Native IDE, Documentation and Development tools

15

Ionic Framework 1.0

16

Ionic Framework 2.0 – Native Look (Alert)

iOS Android Windows Phone

17

Ionic Framework 2.0 – Native Look (Buttons)

iOS Android Windows Phone

18

Ionic 1.0 vs Ionic 2.0• 1.0• iOS design• Angular JS• http://ionicframework.com/docs/components/ 

• 2.0 • Native look for iOS, Android and WP• Angular2 (Re-written Angular JS)

• Dart or Typescript• http://ionicframework.com/docs/v2/components/#icon-buttons

19

Electron App• Install NodeJS and Git• Clone the Quick Start repository• git clone https://github.com/electron/electron-quick-start

• Go into the repository• cd electron-quick-start

• Install the dependencies and run• npm install && npm start

• Building for Windows• http://electron.atom.io/docs/development/build-instructions-windows/

20

My Applications• NeON Student for Mobile • http://bit.ly/NeONAndroid• http://bit.ly/NeONWP8

• Asma ul Husna• Image Analyzer

Thank you!

Reference• https://www.quora.com/What-are-some-of-the-best-apps-developed-using-PhoneGap• https://build.phonegap.com/plugins• http://www.tricedesigns.com/2012/03/27/who-uses-phonegapapache-cordova/• http://www.slideshare.net/mikejf12/an-introduction-to-apache-cordova• https://en.wikipedia.org/wiki/Node.js• https://en.wikipedia.org/wiki/MarkLogic• https://en.wikipedia.org/wiki/JavaScript• http://wijmo.com/blog/mobile-app-development-how-to-decide-on-hybrid-vs-native/