0:00:03.680,0:00:05.480
Bien, bonjour à tous !

0:00:06.649,0:00:09.437
Oui, tu voulais dire quelque chose, Thomas ?

0:00:10.160,0:00:13.746
Très bien. Donc bonjour à tous, je m'appelle Romain.

0:00:13.746,0:00:18.840
Comme l'a dit Rudy, je vais vous présenter un petit peu les solutions qu'on a élaborées

0:00:18.840,0:00:21.000
dans le cadre de JoliCloud.

0:00:21.000,0:00:23.360
dont je suis confondateur et CTO

0:00:23.360,0:00:26.080
On a fait un usage intensif d'HTML5

0:00:26.080,0:00:28.328
Donc ma mission va être de vous maintenir eveillés

0:00:28.328,0:00:31.160
après cette pause déjeuner

0:00:31.160,0:00:33.560
Alors juste pour resituer un petit peu le contexte

0:00:33.560,0:00:36.840
pour bien comprendre les choix qu'on a fait et comment on a progressé

0:00:36.840,0:00:39.440
On est parti d'un constat qui est que le Cloud remet vraiment en question

0:00:39.440,0:00:41.633
les fondamentaux de l'informatique puisque

0:00:41.633,0:00:44.373
on l'a vu encore ce matin avec Cloud9

0:00:44.373,0:00:47.840
On utilise beaucoup plus d'applications en ligne maintenant

0:00:47.840,0:00:51.548
que ce soit pour le traitement d'emails ou la gestion de documents

0:00:51.548,0:00:55.380
et même maintenant avec Cloud9, l'édition de code dans le cloud

0:00:55.380,0:00:59.000
Et de la même manière, toutes nos données sont aussi plus dans le cloud qu'auparavant

0:00:59.000,0:01:02.600
c'est à dire qu'on a très peu de données localement sur nos machines

0:01:02.600,0:01:05.840
Et en même temps les systèmes qu'on utilisent aujourd'hui sont encore relativement anciens

0:01:05.840,0:01:11.280
axés sur la gestion du file system local d'un ordinateur

0:01:11.280,0:01:15.000
Et alors avec l'arrivée des ordinateurs ultra-portables, les netbooks

0:01:15.000,0:01:18.785
on voyait que l'usage des gens était vraiment lié à internet finalement

0:01:18.785,0:01:22.720
c'était vraiment clef 3G, on se connecte dans un café, dans un train

0:01:22.720,0:01:28.004
On se disait pourquoi finalement ne pas essayer de réinventer un peu l'usage de nos systèmes

0:01:28.004,0:01:32.440
en utilisant la plateforme web qui est en fait la plateforme universelle pour ça

0:01:32.440,0:01:35.040
Et c'était aussi pour nous une manière de dire

0:01:35.040,0:01:37.800
on va essayer de proposer la meilleure expérience utilisateur possible

0:01:38.846,0:01:44.080
et HTML5 et l'essor de la famille de toutes les technologies gravitant autour

0:01:44.080,0:01:48.043
était pour nous la meilleure solution pour arriver à ça

0:01:49.240,0:01:53.560
Donc la mission qu'on s'était fixée avec Jolicould avec Tariq Krim quand on a lancé ce projet

0:01:53.560,0:01:58.909
C'est vraiment de dire on va rendre le cloud plus ouvert, plus simple, plus accessible à tous

0:01:58.909,0:02:03.600
et proposer des solutions qui finalement vous aider les gens à accèder à internet

0:02:03.600,0:02:06.280
et à gérer leur cloud plus aisément

0:02:06.280,0:02:08.081
Donc on a développé plusieurs choses

0:02:08.081,0:02:14.583
On a développé d'abord un Operating System essentiellement basé sur des technos web

0:02:14.583,0:02:18.600
On a même été un peu fou puiqu'on a été jusqu'à commercialiser ça

0:02:18.600,0:02:20.240
c'est un jolibook, donc on commercialisé

0:02:20.240,0:02:25.080
c'est un objet un peu collector puisqu'il a été vendu exclusivment sur le marché anglais

0:02:25.080,0:02:27.168
Et plus récemment une application Jolicloud

0:02:27.168,0:02:30.360
qui est disponible pour tous les navigateurs modernes

0:02:30.360,0:02:34.200
Mais ce dont on va vraiment s'intéresser aujourd'hui c'est le point commun à tous ces produits

0:02:34.200,0:02:41.800
qui est le bureau HTML5 qui permet de finalement contrôler la machine

0:02:41.800,0:02:44.640
et même d'aller un peu plus loin comme on le verra

0:02:44.640,0:02:47.834
Alors tout d'abord je vais juste donner quelques fondamentaux

0:02:47.834,0:02:51.520
sur la base de l'application HTML5 qu'on a faite

0:02:51.520,0:02:54.880
Donc le web en 1997, c'était quand même ça ce qu'on pouvait faire de mieux

0:02:54.880,0:03:00.320
donc on a quand même parcouru un long chemin sur le web

0:03:00.320,0:03:04.480
Une application web avancée, qu'est ce que c'est finalement aujourd'hui ?

0:03:04.480,0:03:06.560
C'est avant tout un client riche autonome

0:03:06.560,0:03:09.280
Avant on avait un échange de pages avec le serveur

0:03:09.280,0:03:11.280
ça va être maintenant quelque chose de très complexe

0:03:11.280,0:03:13.480
qui va embarquer de la logique applicative

0:03:13.480,0:03:15.040
on parlait avant de templating

0:03:15.040,0:03:18.000
on va beaucoup être maintenant dans la programmation DOM

0:03:18.000,0:03:23.160
au niveau des échanges avec le serveur, ça va être maintenant de la synchronisation de données

0:03:23.160,0:03:25.822
et on parle aussi de persistence de l'état de l'application

0:03:25.822,0:03:29.080
et même de mode déconnecté

0:03:29.080,0:03:32.760
Donc là c'est un aperçu de l'application Jolicloud

0:03:32.760,0:03:38.360
qui est le bureau de l'operating system

0:03:38.360,0:03:39.986
Et on s'est dit d'abord

0:03:39.986,0:03:42.320
Comment on va pouvoir implémenter cette application

0:03:42.320,0:03:44.800
avec des technos modernes

0:03:44.800,0:03:46.080
sans avoir justement à

0:03:46.080,0:03:52.120
penser aux navigateurs anciens comme Internet Explorer

0:03:52.120,0:03:55.040
qui évolue un peu moins vite que les navigateurs modernes

0:03:55.040,0:04:00.164
Donc pour la structure, très succintement on a utilisé du flexible box model partout

0:04:00.164,0:04:01.840
alors son support est encore expérimental

0:04:01.840,0:04:04.160
ce qui fait qu'on a eu quelques petits soucis

0:04:04.160,0:04:06.000
parfois de performances notamment

0:04:06.000,0:04:12.285
sur les périphériques un peu... un peu comme les netbooks finalement

0:04:12.285,0:04:15.880
beaucoup de media queries aussi pour gérer les différentes tailles d'écrans

0:04:15.880,0:04:20.440
parce qu'il y a vraiment une grande diversité à ce niveau là

0:04:20.440,0:04:22.240
et au niveau des composants de l'interface

0:04:22.240,0:04:24.800
tout ce que vous pouvez voir sur cette interface

0:04:24.800,0:04:29.320
va être uniquement des CSS en fait, il y a très très peu d'images

0:04:29.320,0:04:31.360
donc au niveau des effets de la même façon

0:04:31.360,0:04:34.160
c'est uniquement des transitions et des animations CSS

0:04:34.160,0:04:37.960
parfois du canvas quand il s'agit de manipuler les images

0:04:37.960,0:04:41.120
alors il y a deux choses qu'on a observé qui sont importantes à retenir

0:04:41.120,0:04:44.400
si vous êtes amenés à utiliser des transitions ou des animations CSS

0:04:44.400,0:04:46.120
c'est d'éviter quand même les animations infinies

0:04:46.120,0:04:49.040
parce que sur des périphériques un peu low-spec comme des netbooks

0:04:49.040,0:04:51.880
vous alllez avoir tendance à utiliser beaucoup de CPU

0:04:51.880,0:04:56.751
et aussi ne jamais baser la logique applicative sur des callbacks de fin d'animation

0:04:56.751,0:05:00.002
vous savez comme des webkit animation end ou des moz animation end

0:05:00.002,0:05:02.120
parce que d'une part ils peuvent ne pas être supportés par le navigateur

0:05:02.120,0:05:04.040
que vous êtes en train de 'targeter'

0:05:04.040,0:05:10.160
bon voilà c'est une meilleure pratique d'avoir toujours la logique applicative séparée

0:05:10.160,0:05:12.494
des effets purement graphiques

0:05:12.494,0:05:15.280
Et rapidement au niveau du fonctionnement de l'application

0:05:15.280,0:05:21.800
donc l'application consiste en une seule page HTML qui finalement est très très succinte

0:05:21.800,0:05:26.496
c'est un mécanisme de chargement des scripts et des styles dynamiquement

0:05:26.496,0:05:29.520
et puis quelque chose qu'il faut bien retenir dans le cadre de vos développements

0:05:29.520,0:05:31.680
pour des applications un peu riches en HTML5

0:05:31.680,0:05:34.240
c'est vraiment avoir une logique MVC

0:05:34.240,0:05:38.000
c'est à dire qu'on est plus en train de dire on va modifier le DOM à la volée

0:05:38.000,0:05:39.824
pour modifier tel ou tel élément

0:05:39.824,0:05:42.360
c'est vraiment important d'avoir une vraie structure en place

0:05:42.360,0:05:45.880
pour pouvoir dire : OK je vais avoir des modèles pour représenter mes données

0:05:45.880,0:05:51.160
des vues qui vont me permettre justement de gérer la représentation de ces données à l'écran

0:05:51.160,0:05:54.040
et puis des controleurs qui maintiendront l'état de l'application

0:05:54.040,0:05:57.440
D'ailleurs y'a un excellent projet qui s'appelle Backbone.js que vous connaissez peut-être

0:05:57.440,0:06:01.200
qui permet justement d'avoir une très bonne base pour ce genre de chose

0:06:02.508,0:06:07.552
Donc là dans ce slide j'ai "embedder" l'application

0:06:07.552,0:06:10.505
donc le bureau de JoliCloud

0:06:11.351,0:06:15.160
donc tout ça c'est en CSS3

0:06:16.837,0:06:20.680
donc là idem pour tout ce qui est animation

0:06:20.680,0:06:23.920
la partie drag-n-drop par contre n'étant pas tout à fait finalisée

0:06:23.920,0:06:25.720
dans HTML5

0:06:25.720,0:06:30.444
elle est écrite un peu en javascript avec à la fois

0:06:30.444,0:06:32.200
des petites choses HTML5 mais aussi

0:06:32.200,0:06:35.064
des petites choses qui permettent d'avoir la compatibilité

0:06:36.560,0:06:38.720
Alors maintenant on va rentrer un peu dans le vif du sujet

0:06:38.720,0:06:41.403
parce que là on a quoi ? On a une application en HTML5

0:06:41.403,0:06:43.040
qui se connecte au cloud

0:06:43.040,0:06:45.040
qui finalement récupère des données

0:06:45.040,0:06:46.520
les affiche à l'écran

0:06:46.520,0:06:48.240
et ça fonctionne bien, ça se synchronise

0:06:48.240,0:06:51.225
le problème maintenant c'est que quand on veut faire un operating system avec ça

0:06:51.225,0:06:53.280
évidemment on va se retrouver dans des contextes où il faut absolument

0:06:53.280,0:06:55.280
que l'application fonctionne hors-ligne

0:06:55.280,0:07:00.320
Quand vous démarrez votre netbook ... ou votre ordinateur dans un train par exemple

0:07:00.320,0:07:01.907
vous n'avez pas forcément de connexion avec vous

0:07:01.907,0:07:03.903
donc il faut que ça marche hors-ligne

0:07:03.903,0:07:07.960
Alors d'abord pour ce qui est des ressources de l'application

0:07:07.960,0:07:11.440
c'est à dire faire que l'application va être fonctionnelle offline

0:07:11.440,0:07:16.680
on a utilisé appcache, la technologie qui permet justement de lister

0:07:16.680,0:07:20.800
l'ensemble des ressources que vous voulez mettre en cache dans le navigateur

0:07:20.800,0:07:24.000
on l'a utilisé uniquement pour du javascript et du CSS finalement

0:07:24.000,0:07:28.145
on a fait le choix de dire, l'ensemble des images

0:07:28.145,0:07:31.360
qui sert au fonctionnement de l'application

0:07:31.360,0:07:35.720
est converti en base64 et inliner dans les CSS

0:07:35.720,0:07:41.160
c'est quelque chose qu'on a testé et qu'on a vraiment bien apprécié

0:07:41.160,0:07:43.280
dans les tests qu'on a pu faire puisque

0:07:43.280,0:07:48.360
même si cette conversion peut avoir un petit overhead en terme de taille

0:07:48.360,0:07:52.360
vous allez avoir beaucoup moins de ressources à charger

0:07:52.360,0:07:55.520
et donc en terme de latence réseau notamment avec des clefs 3G

0:07:55.520,0:07:59.280
c'est quelque chose qui va vraiment améliorer les performances

0:07:59.280,0:08:03.520
donc là si on prend l'exemple ici de cette image

0:08:03.520,0:08:07.680
tous les navigateurs modernes sont capables d'afficher des images à partir de data

0:08:07.680,0:08:10.280
de data URI

0:08:10.280,0:08:12.720
donc maintenant l'application fonctionne en ligne

0:08:12.720,0:08:15.120
le problème c'est qu'elle a pas encore de données pour l'utilisateur

0:08:15.120,0:08:18.040
donc comment on va faire pour stocker les données de l'utilisateur

0:08:18.040,0:08:21.120
et les rendre fonctionnelles hors-ligne ?

0:08:21.120,0:08:24.520
Alors d'abord ce qu'on a fait, c'est une sorte d'abstraction de notre API

0:08:24.520,0:08:25.360
qui se connecte au cloud

0:08:25.360,0:08:27.320
de sorte que à chaque fois qu'on fait une requête

0:08:27.320,0:08:29.680
pour aller chercher des données sur le cloud

0:08:29.680,0:08:32.000
on va stocker l'ensemble de ces réponses JSON

0:08:32.000,0:08:34.360
dans localstorage

0:08:34.360,0:08:40.680
et en plus lorsque l'on récupère ces données localstorage pour le mode hors-ligne

0:08:40.680,0:08:44.320
on va pouvoir avoir le même fonctionnement que lorsque l'application est en ligne

0:08:44.320,0:08:47.070
autre avantage

0:08:47.070,0:08:49.800
lorsque les données sont très récentes dans localstorage

0:08:49.800,0:08:51.920
y compris lorsque vous êtes en ligne

0:08:51.920,0:08:55.120
inutile de refaire cette requête, je viens de la faire

0:08:55.120,0:08:58.657
de toute façon les données sont récentes, autant les exploiter

0:08:58.657,0:09:00.920
ce qu'on a fait en plus encore une fois

0:09:00.920,0:09:04.160
l'ensemble des images qui sont liées au bureau de l'utilisateur

0:09:04.160,0:09:06.880
ou qui sont par exemples des avatars des utilisateurs

0:09:06.880,0:09:09.988
sont également converties en base 64

0:09:09.988,0:09:11.120
mises dans localstorage

0:09:11.120,0:09:12.600
Alors il y a des technologies qui arrivent

0:09:12.600,0:09:14.920
notamment FileSytem APIs

0:09:14.920,0:09:17.600
le problème c'est qu'elle sont pas encore très répandues

0:09:17.600,0:09:21.160
Elles sont encore au stade expérimental dans Chrome notamment

0:09:21.160,0:09:26.480
donc on fait le choix de reprendre cette technique de LocalStorage qui fonctionne très bien

0:09:26.480,0:09:29.040
Et donc bien sur il y a à gérer la synchronisation

0:09:29.040,0:09:31.440
lorsqu'on revient online

0:09:31.440,0:09:35.640
Alors maintenant c'est bien on a une application qui est capable de fonctionner hors-ligne

0:09:35.640,0:09:41.056
mais comment on passe du mode hors-ligne au mode connecté ?

0:09:41.056,0:09:43.308
et c'est finalement une problématique assez intéressante

0:09:43.308,0:09:46.320
parce que dans les navigateurs y'a la propriété navigator.online

0:09:46.320,0:09:49.480
mais elle est pas vraiment utile, elle est pas vraiment helpful pour ça

0:09:49.480,0:09:50.400
puique finalement

0:09:50.400,0:09:54.480
elle va être liée au fait que vous soyez connectés ou non au réseau

0:09:54.480,0:09:58.480
et d'ailleurs elle est encore très peu implémentée dans les navigateurs

0:09:58.480,0:10:00.120
Alors la solution qu'on a mise en place pour ça c'est de dire

0:10:00.120,0:10:03.120
on va faire un test périodique de la connexion

0:10:03.120,0:10:05.840
avec un appel XMLHTTPRequest au serveur

0:10:05.840,0:10:07.920
l'avantage c'est que ça teste directement

0:10:07.920,0:10:10.480
la possibilité d'atteindre votre serveur sur le réseau

0:10:10.480,0:10:13.146
et donc de voir si vous êtes en ligne

0:10:13.146,0:10:17.349
donc ça peut être une requête très très simple de type head par exemple

0:10:17.349,0:10:20.785
et une stratégie qu'on a mis en place en supplément

0:10:20.785,0:10:25.320
c'est de dire ben finalement si j'essaye d'accèder à ne ressource sur une API REST

0:10:25.320,0:10:27.400
et qu'à ce moment précis, elle échoue

0:10:27.400,0:10:30.040
dans ce cas je peux en déduire et signifier à l'utilisateur

0:10:30.040,0:10:32.120
qu'il est passé en mode déconnecté

0:10:32.120,0:10:34.080
et autre chose aussi

0:10:34.080,0:10:38.320
supposons que vous soyez dans un train en train d'utiliser l'application en mode hors-ligne

0:10:38.320,0:10:40.480
vous fermez votre ordinateur, vous revenez

0:10:40.480,0:10:42.680
vous êtes dans un endroit maintenant connecté

0:10:42.680,0:10:46.560
il serait quand même intéressant et judicieux de signifier immédiatement à l'utilisateur

0:10:46.560,0:10:48.360
qu'il est maintenant en mode connecté

0:10:48.360,0:10:50.320
donc on procdède à une détection pour savoir

0:10:50.320,0:10:53.920
si l'utilisateur est actif, par exemple en regardant l'évènement mousemove

0:10:53.920,0:10:58.240
mais ça peut être également en regardant un touch par exemple sur le mobile

0:10:58.240,0:11:01.680
donc on va faire ici une rapide démo

0:11:01.680,0:11:05.080
donc là on est en mode connecté sur l'application

0:11:05.080,0:11:09.440
et je vais essayer de couper le réseau

0:11:09.440,0:11:12.160
alors là je pourrais attendre un test périodique qui va arriver

0:11:12.160,0:11:14.760
mais je vais immédiatement essayer d'accèder à une ressource

0:11:14.760,0:11:19.400
donc là on constate que ... comment dire ?

0:11:19.400,0:11:21.459
L'application est passée immédiatement en mode hors-ligne

0:11:21.459,0:11:24.240
désactivant donc certaines des fonctionnalités

0:11:24.240,0:11:27.480
parce qu'évidemment lorsque vous revenez en mode déconnecté

0:11:27.480,0:11:29.888
l'utilisateur s'attend à ce que toutes ses données soient synchronisées

0:11:29.888,0:11:31.467
dans le même état qu'il les a laissées

0:11:31.467,0:11:34.480
donc y'a certaines choses pour lesquelles ça a du sens, d'autres moins

0:11:34.480,0:11:36.640
et donc là je vais passer en mode connecté maintenant

0:11:40.255,0:11:41.532
voilà

0:11:41.540,0:11:43.600
et je vais immédiatement redevenir actif sur l'application

0:11:43.600,0:11:50.298
donc le navigateur a détecté qu'ici je suis repassé en mode en ligne

0:11:50.298,0:11:52.120
et l'application est de nouveau fonctionnelle

0:11:52.120,9:59:59.000
avec l'ensemble de ses fonctionnalités