Building Hybrid appsIonic - AngularJS - Cordova

Summary

• Native Apps vs Hybrid Apps

• Hybrid technologies

• Creating an Hybrid project with Ionic

• Build Android / iOS

• Debug Android / iOS

• Splashscreens & Icons

• Q & A

Native Apps

• Platform specific

• Respective development languages/tools

• Best performance

• Expensive development

More Platforms, More Problems

Hybrid apps

• Platform independent (iOS, Android etc.)

• HTML5, CSS3 & JS

• Limited performance

• Quick & Cheap development

• Direct access to native APIs with Cordova

Cross Platform Technologies

AngularJS

• Created by Miško Hevery and Adam Abrons in 2009

• JavaScript MVC

• 106 kb production version (minified)

• 35310 stars on GitHub

• 2nd most popular open source project

Cordova

• 2009: 1st developed at an iPhoneDevCamp event

• 2009: Developers form a company, Nitobi

• 2011: Adobe acquires Nitobi

• 2011: Adobe open sources PhoneGap project to Apache

• 2012: Apache gives the project the name Cordova

Ionic Framework

• Started in 2014

• 13700 stars on Github

• Top 50 most popular open source projects in the world

• Over 320,000 apps created 2014 (Every month, over 50,000 new apps)

• Based on AngularJS

• Set of tools to create hybrid apps: Directives, Services, Web server, Cli, design helpers (sass, splashscreens, logo)

Install

• $ sudo npm install -g cordova ionic

• $ ionic start my-app sidemenu (sidemenu is a scaffolding shared by ionic)

• $ cd my-app

Prerequisite: NodeJS http://nodejs.org/

Dev

ionic serve

HTTP server + live reload

ionic serve —lab

HTTP server + live reload with Android & iOS preview

Build Android

• export ANDROID_HOME=~/Library/Android/sdk (.bashrc or .bash_profile file)

• $ ionic platform add android

• $ brew install ant (iOS) / sudo apt-get install ant (linux)

• $ ionic build android

• $ ionic emulate android / ionic run android (if a android device is connected through USB)

Prerequisite: Android SDK

Android Debug

• Chrome DevTools with an Android device connected

Build iOS

• $ ionic platform add ios

• $ ionic build ios

• $ sudo npm install -g ios-sim

• $ ionic emulate ios

iOS Simulator

Prerequisite: OSX, Xcode

iOS debug

https://github.com/google/ios-webkit-debug-proxy

• Chrome DevTools and iOS simulator

Android Performance

• at least ionic CLI 1.3.10

• $ ionic browser add crosswalk

• $ ionic build android

• .apk 3Mb => 24Mb

Crosswalk https://crosswalk-project.org

Splashscreens and Icons…

• Width and Height

• Density

• OS

• Landscape / Portrait

• config.xml …

…are a pain

config.xml

Splashscreens and Icons…

• Create 2 .png or .psd files (one for icons and one for splashscreens) in a “/resources” folder

• $ ionic resources

…but are easy with ionic!

Built with Ionic

• Installs: 500,000 - 1,000,000

• Reviews: 4.4/5

Sworkit

…Hybrid and quality can be friends

Q & A

http://julienrenaux.fr/2015/02/17/creating-an-hybrid-app-in-minutes-with-ionic-framework/

Presentation:

Twitter: https://twitter.com/julienrenaux