ionic framework: let's build amazing apps. no excuses!
TRANSCRIPT
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
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