Creating an hybrid app in minutes with Ionic Framework. * Technology presentation * Creating a ionic project * Building android/iOS apps * Debugging tools * Splashscreens and icons helper

1. Building Hybrid apps
Ionic - AngularJS - Cordova

2. Summary
• Native Apps vs Hybrid Apps
• Hybrid technologies
• Creating an Hybrid project with Ionic
• Build Android / iOS
• Debug Android / iOS
• Splashscreens & Icons
• Q & A

3. Native Apps
• Platform specific
• Respective development languages/tools
• Best performance
• Expensive development
More Platforms, More Problems

4. 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

5. 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

6. 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

7. 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)

9. 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/

10. Dev
ionic serve
HTTP server + live reload
ionic serve —lab
HTTP server + live reload with Android
& iOS preview

11. 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

12. Android Debug
• Chrome DevTools with an Android device connected

13. Build iOS
• $ ionic platform add ios
• $ ionic build ios
• $ sudo npm install -g ios-sim
• $ ionic emulate ios
iOS Simulator
Prerequisite: OSX, Xcode

14. iOS debug
https://github.com/google/ios-webkit-debug-proxy
• Chrome DevTools and iOS simulator

15. Android Performance
• at least ionic CLI 1.3.10
• $ ionic browser add crosswalk
• $ ionic build android
• .apk 3Mb => 24Mb
Crosswalk https://crosswalk-project.org

16. Splashscreens and
Icons…
• Width and Height
• Density
• OS
• Landscape / Portrait
• config.xml …
…are a pain
config.xml

17. 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!

18. Built with Ionic
• Installs: 500,000 - 1,000,000
• Reviews: 4.4/5
Sworkit
…Hybrid and quality can be friends

19. Q & A
http://julienrenaux.fr/2015/02/17/creating-an-hybrid-app-in-
minutes-with-ionic-framework/
Presentation:
Twitter: https://twitter.com/julienrenaux