creating an hybrid app in minutes with ionic framework
Post on 14-Jul-2015
3.326 Views
Preview:
TRANSCRIPT
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
Build iOS
• $ ionic platform add ios
• $ ionic build ios
• $ sudo npm install -g ios-sim
• $ ionic emulate ios
iOS Simulator
Prerequisite: OSX, Xcode
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
top related