Build HTML5 Mobile Apps with


Eddie Lau

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

  1. Intro Ionic
  2. Release 1.0
  3. 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

ionicons.com

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

Code with us

@42labs_coder

3dd13@42la.bs

</html>

http://3dd13.github.io/ionic-present