rapid mobile development with ionic framework - voxxdays ticino 2015
TRANSCRIPT
![Page 1: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/1.jpg)
@YourTwitterHandle#Voxxed @YourTwitterHandle#Voxxed
Rapid mobile development
with Ionic frameworkAlessio Delmonti
Wiralist
![Page 2: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/2.jpg)
{{Alessio Delmonti }}
[email protected]@alexintoshFounder
Ionic Italia
CoFounder / CTO
CEO
HybridApps.io
![Page 3: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/3.jpg)
Summary
IS HYBRID RIGHT FOR ME?
NOT 2007 ANYMORE
WHAT IS IONIC FRAMEWORK?
IONIC ENVIRONMENT- HELPERS AND TOOLS
CASE STUDIES
DEMO TIME
![Page 4: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/4.jpg)
IS HYBRID RIGHT FOR
ME?
![Page 5: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/5.jpg)
IS HYBRID RIGHT FOR
ME?
NATIVE
APPS● Skills in each platform required
● Different SDKs
● Higher learning curve
● More platforms = More Bugs
● More time = More Money
● Better performance
● Web development skills
● Single SDK
● Rapid development
● Low learning curve
● Debug just one time
● Browser features
● Perfect for prototypes
● Faster go-to market strategy
HYBRID
APPS
![Page 6: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/6.jpg)
IS HYBRID RIGHT FOR
ME?
NATIVE
APPS● Skills in each platform required
● Different SDKs
● Higher learning curve
● More platforms = More Bugs
● More time = More Money
● Better performance
● Web development skills
● Single SDK
● Rapid development
● Low learning curve
● Debug just one time
● Browser features
● Perfect for prototypes
● Faster go-to market strategy
HYBRID
APPS
![Page 7: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/7.jpg)
NOT 2007
ANYMORE
![Page 8: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/8.jpg)
NOT 2007
ANYMORE
source: https://mixpanel.com
BETTER
PERFORMANCE
![Page 9: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/9.jpg)
IOS
ADOPTION TREND
7 → 8
source: https://mixpanel.com
NOT 2007
ANYMORE
![Page 10: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/10.jpg)
ANDROID
ADOPTION TREND
4.1 → 4.4
source: https://mixpanel.com
NOT 2007
ANYMORE
![Page 11: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/11.jpg)
ANDROID >= 4.4
chromium-based
with fresh new api
NOT 2007
ANYMORE
WEBVIE
W
![Page 12: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/12.jpg)
WHAT IS IONIC?
![Page 13: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/13.jpg)
+15k
stars
mont
h
3.6Million
s
500,000
100,000
apps
installs
per
![Page 14: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/14.jpg)
COMPONENTSSide Menus
Actionsheet
Modal
Pull To Refresh
Slidebox
Infinite Scroll
Swipeable List Options
Popup
Popover
Loading Overlay
Inputs
Buttons
etc.
![Page 15: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/15.jpg)
COMPONENTSSide Menus
Actionsheet
Modal
Pull To Refresh
Slidebox
Infinite Scroll
Swipeable List Options
Popup
Popover
Loading Overlay
Inputs
Buttons
etc.
![Page 16: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/16.jpg)
COMPONENTSSide Menus
Actionsheet
Modal
Pull To Refresh
Slidebox
Infinite Scroll
Swipeable List Options
Popup
Popover
Loading Overlay
Inputs
Buttons
etc.
![Page 17: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/17.jpg)
ARCHITECT
URE
Routing
MVC pattern
UI components as
directive
+63 Cordova plugins
GEOLOCATION
TOUCH ID
OAUTH
CSS designed to be
easily overridden
Easy customization
Stand-alone css
![Page 18: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/18.jpg)
PERFORMANCE
ORIENTEDHardware accellerated
animationsCACHED VIEWS
● View elements left in the DOM
● $scope disconnected when
cached
● State maintained
● Scroll positions maintained
● Highly configurable
No jQuery
(you can still use is)
![Page 19: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/19.jpg)
HELPE
RSAutomating
Icons and
Splash Screens
CORS issue
ionic serve - live
reload
live reload on
device
![Page 20: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/20.jpg)
HELPERS - platform
continuity
ios android
![Page 21: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/21.jpg)
HELPERS - ionic
view
![Page 22: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/22.jpg)
HELPERS - ionic
creator
![Page 23: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/23.jpg)
HELPERS - ionic
push
![Page 24: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/24.jpg)
HELPERS - ionic
deploy
Update your app without
resubmitting to the app store.
![Page 25: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/25.jpg)
HELPERS - ionic
analytics
● events
● Retention
● Heatmap
![Page 26: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/26.jpg)
HELPERS -
crosswalk
Chrome
webview
for everyone
![Page 27: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/27.jpg)
CASE
STUDIE
S
![Page 28: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/28.jpg)
● Splashscreen
● REST api
● Authentification
integration
● Native sharing
● Sidemenu
● Intro tour
● Sign up / Login
● Pull to refresh
![Page 29: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/29.jpg)
● Splashscreen
● REST api
● Authentification
integration
● Native sharing
● Sidemenu
● Intro tour
● Sign up / Login
● Pull to refresh
![Page 30: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/30.jpg)
● Splashscreen
● REST api
● Authentification
integration
● Native sharing
● Sidemenu
● Intro tour
● Sign up / Login
● Pull to refresh
28Days
![Page 31: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/31.jpg)
● Splashscreen
● Maps integration
● Geolocalization
● Setting page
● Native share
● Native mail
● About page
● Login / SignUp
● Protected area
● Rate my app
● Intro tour
![Page 32: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/32.jpg)
● Splashscreen
● Maps integration
● Geolocalization
● Setting page
● Native share
● Native mail
● About page
● Login / SignUp
● Protected area
● Rate my app
● Intro tour
![Page 33: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/33.jpg)
● Splashscreen
● Maps integration
● Geolocalization
● Setting page
● Native share
● Native mail
● About page
● Login / SignUp
● Protected area
● Rate my app
● Intro tour
10Days
![Page 34: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/34.jpg)
● Splashscreen
● REST api
● SQL lite
● DB Sync
● Search
● Favorite engine
● Sidemenu
![Page 35: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/35.jpg)
● Splashscreen
● REST api
● SQL lite
● DB Sync
● Search
● Favorite engine
● Sidemenu
![Page 36: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/36.jpg)
● Splashscreen
● REST api
● SQL lite
● DB Sync
● Search
● Favorite engine
● Sidemenu
3Days
![Page 37: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/37.jpg)
DEMO
TIMEVoxxDays Demo App
http://tinyurl.com/VoxxDemo
![Page 38: Rapid mobile development with Ionic framework - Voxxdays Ticino 2015](https://reader030.vdocuments.site/reader030/viewer/2022032421/55a6c1491a28ab31688b48aa/html5/thumbnails/38.jpg)
Thanks for coming!
You can throw tomatoes now!Want to know more about ionic?
Check out http://tinyurl.com/AwesomeIonic