Coucou les copains

Faite du bruit ! #CaenJS

Yacine Rezgui

Développeur Web

Franco-Tunisien

Niçois devenu Londonien

London Phonegap Meetup

Fan de l'Asie

Histoire du Web

HTML5, c'est quoi au fait ?

• Dernier standard en date du HTML
• Désigné pour pouvoir délivrer du contenu riche, intéractif
• Nouvelles balises sémantiques, graphiques et multimédias
• Nouveaux éléments de formulaires
• Multiplate-forme

HTML5, par extension,

c'est aussi

• CSS3
• APIs HTML5
• Des évolutions dans JavaScript

Résultat, on a des web apps de plus en plus intelligentes

• Gmail
• Google Docs
• Slack
• Dropbox
• Sqwiggle

Tellement intelligentes qu'on s'est dit...

Remplaçons les apps natives !

Intelligentes mais quelles sont les plateformes accessibles ?

• Browsers
• Desktops
• Smartphones
• Tablets
• TVs
• Internet of things
• Cars

Différentes manières de créer une app HTML5

• Website
• Hosted app
• Hybrid
• Engine Embedded
• Native HTML

Website

• Site classique
• Maîtrise du versioning
• Installation non requise
• Support universel

• Support offline limité
• Accès limité aux APIs natives
• Intégration inexistente au système

Website

Hosted app

• Accès aux APIs
• Maîtrise du versioning
• Installation requise
• Traitement en arrière-plan

• Support offline limité
• Le multi-plateforme n'est pas totalement assuré
• Intégration limitée au système

Google Hosted App, Firefox (OS) Hosted App

Hosted App

Hybrid

• Accès complet aux APIs
• Très bonne intégration
• Support complet offline 
• Indépendance du browser

• Ça reste un hack
• Le multi-plateforme dépend de la solution choisie
• Debugging contraignant

Hybrid

Engine embedded

• Accès complet aux APIs
• Très bonne intégration
• Support complet offline 
• Indépendance de l'OS

• Ça reste un hack
• Taille d'app plus importante
• Support mobile limité à cause des conditions d'utilisation

Node Webkit, Atom Shell, XULrunner

Engine Embedded

Native HTML

• Accès complet aux APIs
• Excellente intégration
• Same Look'n'feel as native

• Limitée à l'OS
• C'est pas vraiment multi-plateforme

Firefox OS, Chrome OS, Windows 8

Native HTML

Quels logic frameworks choisir ?

• AngularJS
• EmberJS
• BackboneJS
• ReactJS
• PolymerJS

Quels UI frameworks choisir ?

• Bootstrap
• Ionic Framework
• Onsen UI
• PolymerJS
• Foundation
• Kendo UI

Questions ?

Faite pas les timides 

Merci !

www.yrezgui.com

twitter.com/yrezgui

github.com/yrezgui