Presentation about Ionic Framework to local community at JSDay 2015, hosted in Feira de Santana, Bahia, Brazil.

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

2. MATHEUS
CARDOSO
WEB AND MOBILE
DEVELOPER AT MAQUIN
Salvador, BA, BRA
@matheuscas
matheuscas

3. 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!)

4. HTML5 ON MOBILE?
THIS THING IS SLOW!

5. PLEASE...

6. “It's not 2007
anymore”

7. YEAR DEVICE PROCESSOR RAM
2007 iPhone 620 MHz 128 MB
2009 Samsung Galaxy 528 MHz 128 MB
2010 iPhone 4 1 GHz 512 MB
2011 Samsung Galaxy S II 1.2 GHz dual-core 1 GB
2014 Moto X 2nd generation 2.5 GHz quad-core 2 GB
2015 iPhone 6 1.4 GHz dual-core 1 GB

8. WEB-STANDARDS
HAVE IMPROVED!
is lookin' pretty good nowadays
Android is now Chromium-based
iOS users keep their devices up-to-date
caniuse.com

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

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

11. NATIVE SDKS...
ARE GREAT!
Common UI, APIs, views, navigation,
stack history, transitions, interactions,
gestures, etc.

13. UNTIL NOW!

16. WEB TECHNOLOGIES YOU ALREADY
KNOW & LOVE

17. STANDING ON GIANT'S SHOULDERS
ANGULAR JS
Extends the HTML vocabulary
Proven for large-scale app development
UI Components using Directives & Services

18. 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

19. HOW IT ALL COMES TOGETHER
Your App
Ionic
Angular
WebView (Cordova)
Native App

21. COLLECTION REPEAT
Replacement for Angular's ng-repeat
Inspired by iOS’s UICollectionView
Scroll through thousands of items
Only renders the viewable items
Smooth scrolling!
<div class="list">
<div collection-repeat="c in contacts">
<h2>{{ c.name }}</h2>
<p>{{ c.email }}</p>
</div>
</div>
A
Patrick Adams
1
JeremyAdams
2
JudyAdams
3
Jessica Adams
4
Gloria Adams
5
Matthew Adams
6
My 3000 Cats

22. NAVIGATION
Uses AngularUI Router
Shows back button when possible
Transitions follow direction of nav
Updates the app's URL
Multi-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

23. CACHED VIEWS
View elements left in the DOM
$scope disconnected when cached
State maintained
Scroll positions maintained
Life Cycle events
Highly configurable

24. SWIPE TO GO BACK
Swipe back to previous view
Interactive transition
Benefit of cached views
Still updates the app's URL
WebView (Cordova) only
Page 2
Page 1

25. OTHER COMPONENTS
Side Menus
Actionsheet
Modal
Pull To Refresh
Slidebox
Infinite Scroll
Swipeable List Options
Popup
Popover
Loading Overlay
Inputs
Buttons
etc.
Popups
Item 1 
Item 2 
Toggle
Checkbox
Lightsaber Green
 
Components 

26. IONICONS
700+ MIT licensed font-icons included
ionicons.com

27. SPINNERS
Animated SVGs
More than just rotating icons
Defaults to platform's spinner
Style with CSS
<ion-spinner></ion-spinner>
<ion-spinner icon="dots"></ion-spinner>
<ion-spinner class="spinner-light"></ion-spinner>

28. NATIVE SCROLL

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

30. npm install -g ionic cordova
Boilerplate app structure ready for customization
LiveReload both local and native builds
Build and run native apps

31. MODERN
CHROMIUM!
Chromium for Android WebViews
Upgrade Android 4.0+ and above
Same hardware, modern software
Amazing performance improvements

37. IONIC PLAYGROUND

38. IONIC TEMPLATES FOR VISUAL STUDIO

40. IONIC'S ADOPTION
16,000+ Github Stars
Top 40 most starred Github repos
Consistently Top 10 trending JS Github repos
Ionic CLI 70,000 downloads/month
600,000+ Ionic apps have been started from our CLI
Released Alpha: November 2013
Released Beta: March 2014

42. WHAT'S NEXT!
Component Modularity
Customized Animations
Webworkers and Multi-threading
Add more Ionic.io services
...and much more to come. o/

43. OH, ONE MORE THING...

46. </MOHAMMED>
@matheuscas
http://matheuscas.github.io/ionic-present