Build HTML5 Mobile Apps with
Eddie Lau
- Co-Organizer, Codeaholics HK
- CTO / Co-Founder, 42 Labs
- @tatonlto
- github.com/3dd13
What do we do ?
- Software consultation for local startups
- Incubate internal startup projects
- Coding mentorship
Tech Stack
- PostgreSQL / RethinkDB
- RubyOnRails / NodeJs
- AngularJs / ReactJs + Reflux / Swift
- Bootstrap / Ionic / SemanticUI
Overview
- Intro Ionic
- Release 1.0
- Live Demo
“I have this great apps idea!”
“I want to launch my business ASAP!”
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 Technologies You Already
Know & Love
(You'll feel right at home)
Web-standards
Have improved!
caniuse.com is lookin' pretty good nowadays
Android is now Chromium-based
iOS users keep their devices up-to-date
https://mixpanel.com/trends/#report/ios_8/from_date:-141,report_unit:day,to_date:0
https://mixpanel.com/trends/#report/android_os_adoption
Standing on the Shoulders
of Angular
Extends the HTML vocabulary
Proven for large-scale app development
UI Components using Directives & Services
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
Complex Lists
- AngularJS Directive
- Buttons exposed by swiping
- Reorder
- Delete
List Item {{ item.id }}
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!
{{ c.name }}
{{ c.email }}
Navigation
- Uses AngularUI Router
- Shows back button when possible
- Transitions follow direction of nav
- Updates the app's URL
- Multi-history stack
Side Menu
Left Menu
...
Other Components
- Side Menus
- Actionsheet
- Modal
- Pull To Refresh
- Slidebox
- Infinite Scroll
- Swipeable List Options
- Popup
- Popover
- Loading Overlay
- Inputs
- Buttons
- etc.
Spinners
- Animated SVGs
- More than just rotating icons
- Defaults to platform's spinner
- Style with CSS
Ionicons
700+ MIT licensed font-icons included
Ionic's Adoption
- 16,000+ Github Stars
- Top 40 most starred Github repos
- Consistently Top 10 trending JS Github repos
- Ionic CLI 95,000 downloads/month
- 600,000+ Ionic apps have been started from our CLI
- Released Alpha: November 2013
- Released Beta: March 2014
- Released RC: March 2015
MIT LICENSED
Free to use (even commercially)
Demo Time!
May the demo gods be with us
What's Next!
- Component Modularity
- Customized Animations
- Webworkers and Multi-threading
- Add more Ionic.io services
- ...and much more to come ;)
Get Started with Ionic!
Getting started guide
ionicframework.com/getting-started
Documentation
ionicframework.com/docs
Visit the Community Forum
forum.ionicframework.com
Contribute on GitHub
github.com/driftyco/ionic