rapid mobile development with ionic framework - voxxdays ticino 2015
TRANSCRIPT
@YourTwitterHandle#Voxxed @YourTwitterHandle#Voxxed
Rapid mobile development
with Ionic frameworkAlessio Delmonti
Wiralist
{{Alessio Delmonti }}
[email protected]@alexintoshFounder
Ionic Italia
CoFounder / CTO
CEO
HybridApps.io
Summary
IS HYBRID RIGHT FOR ME?
NOT 2007 ANYMORE
WHAT IS IONIC FRAMEWORK?
IONIC ENVIRONMENT- HELPERS AND TOOLS
CASE STUDIES
DEMO TIME
IS HYBRID RIGHT FOR
ME?
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
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
NOT 2007
ANYMORE
NOT 2007
ANYMORE
source: https://mixpanel.com
BETTER
PERFORMANCE
IOS
ADOPTION TREND
7 → 8
source: https://mixpanel.com
NOT 2007
ANYMORE
ANDROID
ADOPTION TREND
4.1 → 4.4
source: https://mixpanel.com
NOT 2007
ANYMORE
ANDROID >= 4.4
chromium-based
with fresh new api
NOT 2007
ANYMORE
WEBVIE
W
WHAT IS IONIC?
+15k
stars
mont
h
3.6Million
s
500,000
100,000
apps
installs
per
COMPONENTSSide Menus
Actionsheet
Modal
Pull To Refresh
Slidebox
Infinite Scroll
Swipeable List Options
Popup
Popover
Loading Overlay
Inputs
Buttons
etc.
COMPONENTSSide Menus
Actionsheet
Modal
Pull To Refresh
Slidebox
Infinite Scroll
Swipeable List Options
Popup
Popover
Loading Overlay
Inputs
Buttons
etc.
COMPONENTSSide Menus
Actionsheet
Modal
Pull To Refresh
Slidebox
Infinite Scroll
Swipeable List Options
Popup
Popover
Loading Overlay
Inputs
Buttons
etc.
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
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)
HELPE
RSAutomating
Icons and
Splash Screens
CORS issue
ionic serve - live
reload
live reload on
device
HELPERS - platform
continuity
ios android
HELPERS - ionic
view
HELPERS - ionic
creator
HELPERS - ionic
push
HELPERS - ionic
deploy
Update your app without
resubmitting to the app store.
HELPERS - ionic
analytics
● events
● Retention
● Heatmap
HELPERS -
crosswalk
Chrome
webview
for everyone
CASE
STUDIE
S
● Splashscreen
● REST api
● Authentification
integration
● Native sharing
● Sidemenu
● Intro tour
● Sign up / Login
● Pull to refresh
● Splashscreen
● REST api
● Authentification
integration
● Native sharing
● Sidemenu
● Intro tour
● Sign up / Login
● Pull to refresh
● Splashscreen
● REST api
● Authentification
integration
● Native sharing
● Sidemenu
● Intro tour
● Sign up / Login
● Pull to refresh
28Days
● Splashscreen
● Maps integration
● Geolocalization
● Setting page
● Native share
● Native mail
● About page
● Login / SignUp
● Protected area
● Rate my app
● Intro tour
● Splashscreen
● Maps integration
● Geolocalization
● Setting page
● Native share
● Native mail
● About page
● Login / SignUp
● Protected area
● Rate my app
● Intro tour
● Splashscreen
● Maps integration
● Geolocalization
● Setting page
● Native share
● Native mail
● About page
● Login / SignUp
● Protected area
● Rate my app
● Intro tour
10Days
● Splashscreen
● REST api
● SQL lite
● DB Sync
● Search
● Favorite engine
● Sidemenu
● Splashscreen
● REST api
● SQL lite
● DB Sync
● Search
● Favorite engine
● Sidemenu
● Splashscreen
● REST api
● SQL lite
● DB Sync
● Search
● Favorite engine
● Sidemenu
3Days
DEMO
TIMEVoxxDays Demo App
http://tinyurl.com/VoxxDemo
Thanks for coming!
You can throw tomatoes now!Want to know more about ionic?
Check out http://tinyurl.com/AwesomeIonic