ionic framework: let's build amazing apps. no excuses!

IONIC FRAMEWORK:IONIC FRAMEWORK:LET'S BUILD AMAZING APPS.LET'S BUILD AMAZING APPS.

MATHEUSMATHEUSCARDOSOCARDOSOWEB AND MOBILEWEB AND MOBILEDEVELOPER AT MAQUINDEVELOPER AT MAQUIN

Salvador, BA, BRA

@matheuscas

matheuscas

HYBRID APPS?HYBRID APPS?HTML5 that acts like native

Web wrapped in native layer

Direct access to native APIs

Familiar web dev environment

A single code base (web platform!)

HTML5 ON MOBILE?HTML5 ON MOBILE?THIS THING IS SLOW!THIS THING IS SLOW!

PLEASE...PLEASE...

“It's not 2007anymore”

YEAR DEVICE PROCESSOR RAM2007 iPhone 620 MHz 128 MB2009 Samsung Galaxy 528 MHz 128 MB2010 iPhone 4 1 GHz 512 MB2011 Samsung Galaxy S II 1.2 GHz dual-core 1 GB2014 Moto X 2nd generation 2.5 GHz quad-core 2 GB2015 iPhone 6 1.4 GHz dual-core 1 GB

WEB-STANDARDSWEB-STANDARDS

HAVE IMPROVED!HAVE IMPROVED! is lookin' pretty good nowadays

Android is now Chromium-based

iOS users keep their devices up-to-date

caniuse.com

https://mixpanel.com/trends/#report/ios_8/from_date:-141,report_unit:day,to_date:0

https://mixpanel.com/trends/#report/android_os_adoption

NATIVE SDKS...NATIVE SDKS...

ARE GREAT!ARE GREAT!Common UI, APIs, views, navigation,stack history, transitions, interactions,

gestures, etc.

UNTIL NOW!UNTIL NOW!

WEB TECHNOLOGIES YOU ALREADYWEB TECHNOLOGIES YOU ALREADY

KNOW & LOVEKNOW & LOVE

STANDING ON GIANT'S SHOULDERSSTANDING ON GIANT'S SHOULDERS

ANGULAR JSANGULAR JSExtends the HTML vocabulary

Proven for large-scale app development

UI Components using Directives & Services

Sass!Sass!CSS generated from the Sass preprocessor

Quickly give your app its own look and feel

CSS designed to be easily overridden

Variables based with default settings

HOW IT ALL COMES TOGETHERHOW IT ALL COMES TOGETHER

Your App

Ionic

Angular

WebView (Cordova)

Native App

COLLECTION REPEATCOLLECTION REPEATReplacement for Angular's ng-repeatInspired by iOS’s UICollectionViewScroll through thousands of itemsOnly renders the viewable itemsSmooth scrolling!

<div class="list"> <div collection-repeat="c in contacts"> <h2>{{ c.name }}</h2> <p>{{ c.email }}</p> </div></div>

A

Patrick Adams1

Jeremy Adams2

Judy Adams3

Jessica Adams4

Gloria Adams5

Matthew Adams6

My 3000 Cats

NAVIGATIONNAVIGATIONUses AngularUI RouterShows back button when possibleTransitions follow direction of navUpdates the app's URLMulti-history stack

<ion-tabs>

<ion-tab title="Home" icon="ion-ios-home"> <ion-nav-view name="home"></ion-nav-view> </ion-tab>

<ion-tab title="About" icon="ion-ios-information"> <ion-nav-view name="about"></ion-nav-view> </ion-tab>

<ion-tab title="Contact" icon="ion-ios-world"> <ion-nav-view name="contact"></ion-nav-view> </ion-tab>

</ion-tabs>

Scientific Facts

Home

Home

CACHED VIEWSCACHED VIEWSView elements left in the DOM$scope disconnected when cachedState maintainedScroll positions maintainedLife Cycle eventsHighly configurable

SWIPE TO GO BACKSWIPE TO GO BACKSwipe back to previous viewInteractive transitionBenefit of cached viewsStill updates the app's URLWebView (Cordova) only

Page 2

Page 1

OTHER COMPONENTSOTHER COMPONENTSSide MenusActionsheetModalPull To RefreshSlideboxInfinite ScrollSwipeable List OptionsPopupPopoverLoading OverlayInputsButtonsetc.

Popups

Item 1

Item 2

Toggle

Checkbox

Lightsaber Green

Components

IONICONSIONICONS

700+ MIT licensed font-icons included

ionicons.com

SPINNERSSPINNERSAnimated SVGsMore than just rotating iconsDefaults to platform's spinnerStyle with CSS

<ion-spinner></ion-spinner>

<ion-spinner icon="dots"></ion-spinner>

<ion-spinner class="spinner-light"></ion-spinner>

NATIVE SCROLLNATIVE SCROLL

...but there's more. Meet the Ionic SDK!

npm install -g ionic cordova

Boilerplate app structure ready for customization

LiveReload both local and native builds

Build and run native apps

MODERNMODERNCHROMIUM!CHROMIUM!Chromium for Android WebViews

Upgrade Android 4.0+ and above

Same hardware, modern software

Amazing performance improvements

IONIC PLAYGROUNDIONIC PLAYGROUND

IONIC TEMPLATES FOR VISUAL STUDIOIONIC TEMPLATES FOR VISUAL STUDIO

IONIC'S ADOPTIONIONIC'S ADOPTION16,000+ Github StarsTop 40 most starred Github reposConsistently Top 10 trending JS Github reposIonic CLI 70,000 downloads/month600,000+ Ionic apps have been started from our CLIReleased Alpha: November 2013Released Beta: March 2014

WHAT'S NEXT!WHAT'S NEXT!Component ModularityCustomized AnimationsWebworkers and Multi-threadingAdd more Ionic.io services...and much more to come. \o/

OH, ONE MORE THING...OH, ONE MORE THING...

</MOHAMMED></MOHAMMED>@matheuscas@matheuscas

http://matheuscas.github.io/ionic-presenthttp://matheuscas.github.io/ionic-present