Ionic Framework: Let's build amazing apps. No Excuses!

Download Ionic Framework: Let's build amazing apps. No Excuses!

Post on 03-Aug-2015

73 views

Category:

Software

5 download

TRANSCRIPT

<p> 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. 12. UNTIL NOW! 13. WEB TECHNOLOGIES YOU ALREADY KNOW &amp; LOVE 14. STANDING ON GIANT'S SHOULDERS ANGULAR JS Extends the HTML vocabulary Proven for large-scale app development UI Components using Directives &amp; Services 15. 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 16. HOW IT ALL COMES TOGETHER Your App Ionic Angular WebView (Cordova) Native App 17. COLLECTION REPEAT Replacement for Angular's ng-repeat Inspired by iOSs UICollectionView Scroll through thousands of items Only renders the viewable items Smooth scrolling! </p> <div> <div> {{ c.name }} <p>{{ c.email }}</p> </div> </div> <p> A Patrick Adams 1 JeremyAdams 2 JudyAdams 3 Jessica Adams 4 Gloria Adams 5 Matthew Adams 6 My 3000 Cats 18. NAVIGATION Uses AngularUI Router Shows back button when possible Transitions follow direction of nav Updates the app's URL Multi-history stack Scientific Facts Home Home 19. CACHED VIEWS View elements left in the DOM $scope disconnected when cached State maintained Scroll positions maintained Life Cycle events Highly configurable 20. 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 21. 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 22. IONICONS 700+ MIT licensed font-icons included ionicons.com 23. SPINNERS Animated SVGs More than just rotating icons Defaults to platform's spinner Style with CSS 24. NATIVE SCROLL 25. ...but there's more. Meet the Ionic SDK! 26. npm install -g ionic cordova Boilerplate app structure ready for customization LiveReload both local and native builds Build and run native apps 27. MODERN CHROMIUM! Chromium for Android WebViews Upgrade Android 4.0+ and above Same hardware, modern software Amazing performance improvements 28. IONIC PLAYGROUND 29. IONIC TEMPLATES FOR VISUAL STUDIO 30. 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 31. WHAT'S NEXT! Component Modularity Customized Animations Webworkers and Multi-threading Add more Ionic.io services ...and much more to come. o/ 32. OH, ONE MORE THING... 33. @matheuscas http://matheuscas.github.io/ionic-present </p>