Ionic - The UI Framework for the Web

Presentation based on the official Ionic presentation.

Transcript

1. BUILDING HYBRID APPS WITH ANGULARJS AND IONIC BUILDING HYBRID APPS WITH ANGULARJS AND IONIC
2. OVERVIEW OVERVIEW 1. Native vs Hybrid Apps 2. Intro to Ionic 3. UI Components 4. Ionic CLI 5. Demos
3. “I want a native app!”
4. THE DOWNSIDES OF NATIVE THE DOWNSIDES OF NATIVE Proficiency in each platform required Entirely separate code bases Timely & expensive development Diminishing returns
5. “Is there an alternative?”
6. ENTER HYBRID APPS! ENTER HYBRID APPS! HTML5 with platform-specific UI Full access to native APIs and SDKs Familiar web development environment Single code base across native and the web
7. Hybrid Apps: HTML5 that acts like native Phonegap renamed to Cordova Web wrapped in native layer Direct access to native APIs Familiar web dev environment Develop a single code base (web platform)
8. “Hybrid apps are slow!”
9. MUCH BETTER MUCH BETTER WEB APIS! WEB APIS! Performant animation with GPU compositing Advanced mobile device features and APIs Web-workers to offload tasks from UI Modern Chromium for Android
10. NATIVE SDKS ARE GREAT NATIVE SDKS ARE GREAT Common UI Views Navigation and stack history Transitions Gestures
11. THERE'S NO WEB SDK THERE'S NO WEB SDK It's the wild-west for hybrid apps We need to bridge the gap between web and native We need rich, native-style UI components and interactions We need UI APIs, not just jQuery widgets
12. IONIC TO THE RESCUE! IONIC TO THE RESCUE!
14. WEB TECHNOLOGIES YOU ALREADY WEB TECHNOLOGIES YOU ALREADY KNOW & LOVE KNOW & LOVE (Build websites? You'll feel right at home)
15. SUPERPOWERED BY SUPERPOWERED BY ANGULAR ANGULAR Extends HTML with new tags Built on the future of JavaScript Optimized for large-scale app development High performance for fast and fluid mobile apps
16. TYPESCRIPT! TYPESCRIPT! Modern JavaScript, today Perfect for large teams and app development Powerful IDE support: autocompletion, intellisense, refactoring
17. 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
18. HOW IT ALL COMES TOGETHER HOW IT ALL COMES TOGETHER Your App Ionic Angular Cordova Native SDKs
20. IONIC UI COMPONENTS IONIC UI COMPONENTS
21. COMPLEX LISTS COMPLEX LISTS AngularJS Directive Buttons exposed by swiping Reorder Delete <ion-list> <button ion-item *ngFor="let item of items"> {{ item.title }} </button> </ion-list>
22. VIRTUAL SCROLLING VIRTUAL SCROLLING Replacement for Angular's ng-for Inspired by iOS’s UICollectionView Scroll through thousands of items Only renders the viewable items Smooth scrolling! <ion-list [virtualScroll]="items"> <ion-item *virtualItem="let item"> <ion-avatar item-start> <ion-img [src]="item.avatarUrl"></ion-img> </ion-avatar> {{ item.firstName }} {{ item.lastName }} </ion-item> </ion-list>
23. NAVIGATION NAVIGATION Native-app style navigation Transitions follow direction of nav Updates the app's URL Supports parallel histories Swipe to go back <ion-tabs selectedindex="2"> <ion-tab [root]="tab1Root"></ion-tab> <ion-tab [root]="tab2Root"></ion-tab> <ion-tab [root]="tab3Root"></ion-tab> </ion-tabs>
24. OTHER COMPONENTS OTHER COMPONENTS Side Menus Actionsheet Modal Pull To Refresh Spinners Slidebox Infinite Scroll Swipeable List Options Popup Popover Loading Overlay Inputs Buttons etc.
25. MIT LICENSED MIT LICENSED Free to use (even commercially) Free to use (even commercially)
26. IONICONS IONICONS 700+ MIT licensed font-icons included ionicons.com
27. npm install -g ionic cordova ionic start myApp
28. GET STARTED WITH IONIC! GET STARTED WITH IONIC! Getting started guide ionicframework.com/getting-started Documentation ionicframework.com/docs Visit the Community Forum forum.ionicframework.com