The BADASS HTML5 Mobile Framework

By @yrezgui

Le me


Yacine Rezgui

French Tunisian

Web Developer @ GovernorHub

http://www.yrezgui.com




Before showing you the awesomeness,

let me explain the current
state of mobile development 


If you like Native code


  • Objective C
    • iPhone, iPad, Mac
  • Java
    • Android phones, tablets and other devices
  • C#
    • Windows Phone, Windows 8 (including RT)

If you like JavaScript


  • Web Mobile
    • Just the normal way on the browser
  • Hybrid
    • Phonegap, Intel XDK
  • Web to Native Converter
    • Titanium, Game Closure
  • Native JavaScript
    • Chrome Apps, Firefox OS, Windows 8

Wait...


Yes because HTML5 has disadvantages


  • Not 100% System APIs coverage
  • Lack of debugging tools (not true anymore)
  • Slower (Less and less with iOS 7 and Android 4.1)
  • Not totally Multi platform




And definitely...

AN UGLY USER INTERFACE !

But there is jQuery Mobile, Sencha Touch...


No, you're doing it wrong !


 

So what about Bootstrap & co ?


Problems with these frameworks


  • A desktop legacy (Desktop != Mobile)
  • Too heavy
  • Useless components
  • Many mobile oriented interactions
    are not available
  • The 300 ms delay is awful

And please, just because your framework
is responsive, it doesn't mean your web app
is mobile ready !


So what should we have ?


  1. A bridge between JavaScript and Native APIs
  2. A framework which deals with the logic 
    and communicates with the UI
  3. A UI framework


Yeah bro, it exists !



Let's start the show !


Ionic is a bunch of UI elements

made in HTML5 & CSS3

that covers a lot of the mobile interactions

(When I say a lot, it's MUCH more than Bootstrap)

.
.
.

Wait...That's it ?


Hell no ! We just started !



The big advantage of Ionic is
all the UI components are AngularJS Directives

Basically that means, they're ready to work
with your logic system (controllers).

No need to wait for nice developers to create
another Angular-UI library !

You still need convincing ?


  • ✓ Tabs controllers
  • ✓ History of navigation service
  • ✓ Pull to refresh directive
  • ✓ Sidebar directive
  • ✓ Gestures manager
  • ✓ List directive like Gmail (delete by swiping)
  • ✓ And much more !

And of course, it's not only Phonegap !


It's production ready ?
Despite the fact that the project is in alpha
(they started it on August 2013),
it's a very mature and useable project
compared to its competitors.

And the guys behind the code are Drifty co.

They made  and   
They're kind of badass 

Examples

 

What are you waiting for ?


http://ionicframework.com/

@Ionicframework

https://github.com/driftyco/ionic


Presentation by @yrezgui

Made in love at

Made with Slides.com