Building Hybrid Apps with AngularJS and Ionic

  
  {
    name: 'Nicolas Molina Monroy',
    twitter: '@nicobytes',
    github: 'https://github.com/nicobytes'
    jobs: [
        'Hybrid App Developer',
        'Front-End Developer'    
    ],
    relationship: lea_verou.relationship == 'single' ? 'single' : 'YOLO',
    organizer: [
        'http://www.meetup.com/es/Hybrid-Apps-Colombia',
        'http://www.meetup.com/es/Django-Bogota',
        'http://www.meetup.com/es/Meteor-Bogota'    
    ]
  }

Colombia

Peru

Bolivia

“Travel is the only thing you buy that makes you richer!”

Overview

Native vs Hybrid Apps
Intro Ionic
UI Components
Showcases
Ionic Services

“I want to build an app!”

More Platforms. More Problems.

Proficiency in each platform required
Entirely separate code bases
Timely & expensive development
Diminishing returns

Why are we still coding for multiple platforms?

“Is there an alternative?”

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!)

“Oh No! The Zuck has spoken!”

http://techcrunch.com/2012/09/11/mark-zuckerberg-our-biggest-mistake-with-mobile-was-betting-too-much-on-html5/

“Hybrid apps are slow!”

“The Times They Are a-Changin'”

“It's not 2007 anymore”

Year	Device	Processor	RAM
2007	iPhone	400 MHz	128 MB
2010	iPhone 4	1 GHz	512 MB
2015	iPhone 6	1.4 GHz dual-core	1 GB

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

Native SDKs...

Are Great!

Common UI, APIs, views, navigation, stack history, transitions, interactions, gestures, etc.

Web Technologies You Already

Know & Love

(You'll feel right at home)

Superpowered by

Angular

Extends the HTML vocabulary

Proven for large-scale app development

UI Components using Directives & Services

Native Focused

Modeled off of native SDKs
Built to work with Cordova

Performance Obsessed

Hardware accelerated animations
Minimal DOM Manipulation
Remove 300ms tap delay

Plain ol' CSS

Cohesive visual system
Clean and simple
Easy to customize
Stand-alone CSS (independent of Ionic's JavaScript)
ionicframework.com/docs/components

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

Ionicons

Over 700 MIT licensed font-icons included

Built by nerds (like you)

Built and maintained by developers and designers passionate about web technologies.

How it all comes together

Your App
Ionic
Angular
WebView (Cordova)
Native App

UI Component Overview

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

Swipe To Go Back

Swipe back to previous view
Interactive transition
Benefit of cached views
Still updates the app's URL
WebView (Cordova) only

Other Components

Side Menus
Actionsheet
Modal
Pull To Refresh
Spinners
Slidebox
Infinite Scroll
Swipeable List Options
Popup
Popover
Loading Overlay
Inputs
Buttons
etc.

ShowCase

http://showcase.ionicframework.com/

showcase

IBM Mobile

http://www.ibm.com/mobilefirst/ showcase

showcase

Apps

showcase

showcase

showcase

showcase

showcase

showcase

showcase

showcase

showcase

MIT LICENSED

Free to use (even commercially)

npm install -g ionic cordova

Boilerplate app structure ready for customization

LiveReload both local and native builds

Build and run native apps

Demo Time!

May the demo gods be with us

Ionic's Adoption

22,900+ 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

Questions?

Thanks a lot!!

`</html>`

@ionicframework

nicobytes.github.io/ionic-slides