BUILDING HYBRID APPS WITH ANGULARJS AND IONIC
BUILDING HYBRID APPS WITH ANGULARJS AND IONIC
Slide 2
Slide 2 text
OVERVIEW
OVERVIEW
1. Native vs Hybrid Apps
2. Intro to Ionic
3. UI Components
4. Ionic CLI
5. Demos
Slide 3
Slide 3 text
“I want a native app!”
Slide 4
Slide 4 text
THE DOWNSIDES OF NATIVE
THE DOWNSIDES OF NATIVE
Proficiency in each platform required
Entirely separate code bases
Timely & expensive development
Diminishing returns
Slide 5
Slide 5 text
“Is there an alternative?”
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
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)
Slide 8
Slide 8 text
“Hybrid apps are slow!”
Slide 9
Slide 9 text
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
Slide 10
Slide 10 text
NATIVE SDKS ARE GREAT
NATIVE SDKS ARE GREAT
Common UI
Views
Navigation and stack history
Transitions
Gestures
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
IONIC TO THE RESCUE!
IONIC TO THE RESCUE!
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
WEB TECHNOLOGIES YOU ALREADY
WEB TECHNOLOGIES YOU ALREADY
KNOW & LOVE
KNOW & LOVE
(Build websites? You'll feel right at home)
Slide 15
Slide 15 text
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
Slide 16
Slide 16 text
TYPESCRIPT!
TYPESCRIPT!
Modern JavaScript, today
Perfect for large teams and app development
Powerful IDE support: autocompletion, intellisense, refactoring
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
HOW IT ALL COMES TOGETHER
HOW IT ALL COMES TOGETHER
Your App
Ionic
Angular
Cordova
Native SDKs
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!
{{ item.firstName }} {{ item.lastName }}
Slide 23
Slide 23 text
NAVIGATION
NAVIGATION
Native-app style navigation
Transitions follow direction of nav
Updates the app's URL
Supports parallel histories
Swipe to go back
Slide 24
Slide 24 text
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.
Slide 25
Slide 25 text
MIT LICENSED
MIT LICENSED
Free to use (even commercially)
Free to use (even commercially)
Slide 26
Slide 26 text
IONICONS
IONICONS
700+ MIT licensed font-icons included
ionicons.com
Slide 27
Slide 27 text
npm install -g ionic cordova
ionic start myApp
Slide 28
Slide 28 text
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