Develop a HTML5 mobile app in 2014

By @yrezgui for LNUG

Le me


Yacine Rezgui

French Tunisian developer living in London,

Organizer of London Phonegap Meetup

http://www.yrezgui.com


Yes because HTML5 has disadvantages


  • Not 100% System APIs coverage
  • Lack of debugging tools (not true anymore)
  • Slower (not true 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 friendly !


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 

Screenshot


Ok cool bro but what are 

the tools for developing that ?


   

Loggly




  • Perfect way to log anything in the cloud
  • Easy to get analytics
  • Available for a lot of platforms, languages
  • You can drop the console.log in production

Mixpanel



  • The Google Analytics for apps
  • Track per user
  • One of the best UI that I saw for analytics
  • Send notifications to mobile users

Safari Devtools



  • Similar as Chrome Devtools (WebKit)
  • Inspect virtual and physical devices
  • No need of console.log and alert anymore

Phonegap Build



  • Compile your Phonegap app in the cloud
  • Build for iOS, Android & Windows Phone
  • Hydration feature

Testflight



  • Deploy easily your app
  • Much friendlier than Phonegap Build
  • SDK for testing
  • Easy to install an app without enable the developer mode

Phonegap App



  • Test your app on devices
  • Available on iOS and Android
  • No need of having a developer licence

GulpJS


  • GulpJS  >  Grunt
  • Same plugins and code as your desktop
  • It's damn fast

Ionic Rocket


  • A bunch of code to bootstrap your mobile app easily
  • Gulp taks + NPM & Bower packages + Organized architecture
  • I made it ;)

What are you waiting for ?





Presentation by @yrezgui

Develop a HTML5 Mobile app in 2014 - LNUG

By Yacine Rezgui

Made with Slides.com

Develop a HTML5 Mobile app in 2014 - LNUG

  • 3,092

More from Yacine Rezgui