rapid mobile development with ionic framework - voxxdays ticino 2015

@YourTwitterHandle#Voxxed @YourTwitterHandle#Voxxed

Rapid mobile development

with Ionic frameworkAlessio Delmonti

Wiralist

{{Alessio Delmonti }}

alessio.d@gmail.com@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

● Facebook

integration

● Native sharing

● Sidemenu

● Intro tour

● Sign up / Login

● Pull to refresh

● Splashscreen

● REST api

● Authentification

● Facebook

integration

● Native sharing

● Sidemenu

● Intro tour

● Sign up / Login

● Pull to refresh

● Splashscreen

● REST api

● Authentification

● Facebook

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