[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:03.68,0:00:05.48,Default,,0000,0000,0000,,Bien, bonjour à tous !
Dialogue: 0,0:00:06.65,0:00:09.44,Default,,0000,0000,0000,,Oui, tu voulais dire quelque chose, Thomas ?
Dialogue: 0,0:00:10.16,0:00:13.75,Default,,0000,0000,0000,,Très bien. Donc bonjour à tous, je m'appelle Romain.
Dialogue: 0,0:00:13.75,0:00:18.84,Default,,0000,0000,0000,,Comme l'a dit Rudy, je vais vous présenter un petit peu les solutions qu'on a élaborées
Dialogue: 0,0:00:18.84,0:00:21.00,Default,,0000,0000,0000,,dans le cadre de JoliCloud.
Dialogue: 0,0:00:21.00,0:00:23.36,Default,,0000,0000,0000,,dont je suis confondateur et CTO
Dialogue: 0,0:00:23.36,0:00:26.08,Default,,0000,0000,0000,,On a fait un usage intensif d'HTML5
Dialogue: 0,0:00:26.08,0:00:28.33,Default,,0000,0000,0000,,Donc ma mission va être de vous maintenir eveillés
Dialogue: 0,0:00:28.33,0:00:31.16,Default,,0000,0000,0000,,après cette pause déjeuner
Dialogue: 0,0:00:31.16,0:00:33.56,Default,,0000,0000,0000,,Alors juste pour resituer un petit peu le contexte
Dialogue: 0,0:00:33.56,0:00:36.84,Default,,0000,0000,0000,,pour bien comprendre les choix qu'on a fait et comment on a progressé
Dialogue: 0,0:00:36.84,0:00:39.44,Default,,0000,0000,0000,,On est parti d'un constat qui est que le Cloud remet vraiment en question
Dialogue: 0,0:00:39.44,0:00:41.63,Default,,0000,0000,0000,,les fondamentaux de l'informatique puisque
Dialogue: 0,0:00:41.63,0:00:44.37,Default,,0000,0000,0000,,on l'a vu encore ce matin avec Cloud9
Dialogue: 0,0:00:44.37,0:00:47.84,Default,,0000,0000,0000,,On utilise beaucoup plus d'applications en ligne maintenant
Dialogue: 0,0:00:47.84,0:00:51.55,Default,,0000,0000,0000,,que ce soit pour le traitement d'emails ou la gestion de documents
Dialogue: 0,0:00:51.55,0:00:55.38,Default,,0000,0000,0000,,et même maintenant avec Cloud9, l'édition de code dans le cloud
Dialogue: 0,0:00:55.38,0:00:59.00,Default,,0000,0000,0000,,Et de la même manière, toutes nos données sont aussi plus dans le cloud qu'auparavant
Dialogue: 0,0:00:59.00,0:01:02.60,Default,,0000,0000,0000,,c'est à dire qu'on a très peu de données localement sur nos machines
Dialogue: 0,0:01:02.60,0:01:05.84,Default,,0000,0000,0000,,Et en même temps les systèmes qu'on utilisent aujourd'hui sont encore relativement anciens
Dialogue: 0,0:01:05.84,0:01:11.28,Default,,0000,0000,0000,,axés sur la gestion du file system local d'un ordinateur
Dialogue: 0,0:01:11.28,0:01:15.00,Default,,0000,0000,0000,,Et alors avec l'arrivée des ordinateurs ultra-portables, les netbooks
Dialogue: 0,0:01:15.00,0:01:18.78,Default,,0000,0000,0000,,on voyait que l'usage des gens était vraiment lié à internet finalement
Dialogue: 0,0:01:18.78,0:01:22.72,Default,,0000,0000,0000,,c'était vraiment clef 3G, on se connecte dans un café, dans un train
Dialogue: 0,0:01:22.72,0:01:28.00,Default,,0000,0000,0000,,On se disait pourquoi finalement ne pas essayer de réinventer un peu l'usage de nos systèmes
Dialogue: 0,0:01:28.00,0:01:32.44,Default,,0000,0000,0000,,en utilisant la plateforme web qui est en fait la plateforme universelle pour ça
Dialogue: 0,0:01:32.44,0:01:35.04,Default,,0000,0000,0000,,Et c'était aussi pour nous une manière de dire
Dialogue: 0,0:01:35.04,0:01:37.80,Default,,0000,0000,0000,,on va essayer de proposer la meilleure expérience utilisateur possible
Dialogue: 0,0:01:38.85,0:01:44.08,Default,,0000,0000,0000,,et HTML5 et l'essor de la famille de toutes les technologies gravitant autour
Dialogue: 0,0:01:44.08,0:01:48.04,Default,,0000,0000,0000,,était pour nous la meilleure solution pour arriver à ça
Dialogue: 0,0:01:49.24,0:01:53.56,Default,,0000,0000,0000,,Donc la mission qu'on s'était fixée avec Jolicould avec Tariq Krim quand on a lancé ce projet
Dialogue: 0,0:01:53.56,0:01:58.91,Default,,0000,0000,0000,,C'est vraiment de dire on va rendre le cloud plus ouvert, plus simple, plus accessible à tous
Dialogue: 0,0:01:58.91,0:02:03.60,Default,,0000,0000,0000,,et proposer des solutions qui finalement vous aider les gens à accèder à internet
Dialogue: 0,0:02:03.60,0:02:06.28,Default,,0000,0000,0000,,et à gérer leur cloud plus aisément
Dialogue: 0,0:02:06.28,0:02:08.08,Default,,0000,0000,0000,,Donc on a développé plusieurs choses
Dialogue: 0,0:02:08.08,0:02:14.58,Default,,0000,0000,0000,,On a développé d'abord un Operating System essentiellement basé sur des technos web
Dialogue: 0,0:02:14.58,0:02:18.60,Default,,0000,0000,0000,,On a même été un peu fou puiqu'on a été jusqu'à commercialiser ça
Dialogue: 0,0:02:18.60,0:02:20.24,Default,,0000,0000,0000,,c'est un jolibook, donc on commercialisé
Dialogue: 0,0:02:20.24,0:02:25.08,Default,,0000,0000,0000,,c'est un objet un peu collector puisqu'il a été vendu exclusivment sur le marché anglais
Dialogue: 0,0:02:25.08,0:02:27.17,Default,,0000,0000,0000,,Et plus récemment une application Jolicloud
Dialogue: 0,0:02:27.17,0:02:30.36,Default,,0000,0000,0000,,qui est disponible pour tous les navigateurs modernes
Dialogue: 0,0:02:30.36,0:02:34.20,Default,,0000,0000,0000,,Mais ce dont on va vraiment s'intéresser aujourd'hui c'est le point commun à tous ces produits
Dialogue: 0,0:02:34.20,0:02:41.80,Default,,0000,0000,0000,,qui est le bureau HTML5 qui permet de finalement contrôler la machine
Dialogue: 0,0:02:41.80,0:02:44.64,Default,,0000,0000,0000,,et même d'aller un peu plus loin comme on le verra
Dialogue: 0,0:02:44.64,0:02:47.83,Default,,0000,0000,0000,,Alors tout d'abord je vais juste donner quelques fondamentaux
Dialogue: 0,0:02:47.83,0:02:51.52,Default,,0000,0000,0000,,sur la base de l'application HTML5 qu'on a faite
Dialogue: 0,0:02:51.52,0:02:54.88,Default,,0000,0000,0000,,Donc le web en 1997, c'était quand même ça ce qu'on pouvait faire de mieux
Dialogue: 0,0:02:54.88,0:03:00.32,Default,,0000,0000,0000,,donc on a quand même parcouru un long chemin sur le web
Dialogue: 0,0:03:00.32,0:03:04.48,Default,,0000,0000,0000,,Une application web avancée, qu'est ce que c'est finalement aujourd'hui ?
Dialogue: 0,0:03:04.48,0:03:06.56,Default,,0000,0000,0000,,C'est avant tout un client riche autonome
Dialogue: 0,0:03:06.56,0:03:09.28,Default,,0000,0000,0000,,Avant on avait un échange de pages avec le serveur
Dialogue: 0,0:03:09.28,0:03:11.28,Default,,0000,0000,0000,,ça va être maintenant quelque chose de très complexe
Dialogue: 0,0:03:11.28,0:03:13.48,Default,,0000,0000,0000,,qui va embarquer de la logique applicative
Dialogue: 0,0:03:13.48,0:03:15.04,Default,,0000,0000,0000,,on parlait avant de templating
Dialogue: 0,0:03:15.04,0:03:18.00,Default,,0000,0000,0000,,on va beaucoup être maintenant dans la programmation DOM
Dialogue: 0,0:03:18.00,0:03:23.16,Default,,0000,0000,0000,,au niveau des échanges avec le serveur, ça va être maintenant de la synchronisation de données
Dialogue: 0,0:03:23.16,0:03:25.82,Default,,0000,0000,0000,,et on parle aussi de persistence de l'état de l'application
Dialogue: 0,0:03:25.82,0:03:29.08,Default,,0000,0000,0000,,et même de mode déconnecté
Dialogue: 0,0:03:29.08,0:03:32.76,Default,,0000,0000,0000,,Donc là c'est un aperçu de l'application Jolicloud
Dialogue: 0,0:03:32.76,0:03:38.36,Default,,0000,0000,0000,,qui est le bureau de l'operating system
Dialogue: 0,0:03:38.36,0:03:39.99,Default,,0000,0000,0000,,Et on s'est dit d'abord
Dialogue: 0,0:03:39.99,0:03:42.32,Default,,0000,0000,0000,,Comment on va pouvoir implémenter cette application
Dialogue: 0,0:03:42.32,0:03:44.80,Default,,0000,0000,0000,,avec des technos modernes
Dialogue: 0,0:03:44.80,0:03:46.08,Default,,0000,0000,0000,,sans avoir justement à
Dialogue: 0,0:03:46.08,0:03:52.12,Default,,0000,0000,0000,,penser aux navigateurs anciens comme Internet Explorer
Dialogue: 0,0:03:52.12,0:03:55.04,Default,,0000,0000,0000,,qui évolue un peu moins vite que les navigateurs modernes
Dialogue: 0,0:03:55.04,0:04:00.16,Default,,0000,0000,0000,,Donc pour la structure, très succintement on a utilisé du flexible box model partout
Dialogue: 0,0:04:00.16,0:04:01.84,Default,,0000,0000,0000,,alors son support est encore expérimental
Dialogue: 0,0:04:01.84,0:04:04.16,Default,,0000,0000,0000,,ce qui fait qu'on a eu quelques petits soucis
Dialogue: 0,0:04:04.16,0:04:06.00,Default,,0000,0000,0000,,parfois de performances notamment
Dialogue: 0,0:04:06.00,0:04:12.28,Default,,0000,0000,0000,,sur les périphériques un peu... un peu comme les netbooks finalement
Dialogue: 0,0:04:12.28,0:04:15.88,Default,,0000,0000,0000,,beaucoup de media queries aussi pour gérer les différentes tailles d'écrans
Dialogue: 0,0:04:15.88,0:04:20.44,Default,,0000,0000,0000,,parce qu'il y a vraiment une grande diversité à ce niveau là
Dialogue: 0,0:04:20.44,0:04:22.24,Default,,0000,0000,0000,,et au niveau des composants de l'interface
Dialogue: 0,0:04:22.24,0:04:24.80,Default,,0000,0000,0000,,tout ce que vous pouvez voir sur cette interface
Dialogue: 0,0:04:24.80,0:04:29.32,Default,,0000,0000,0000,,va être uniquement des CSS en fait, il y a très très peu d'images
Dialogue: 0,0:04:29.32,0:04:31.36,Default,,0000,0000,0000,,donc au niveau des effets de la même façon
Dialogue: 0,0:04:31.36,0:04:34.16,Default,,0000,0000,0000,,c'est uniquement des transitions et des animations CSS
Dialogue: 0,0:04:34.16,0:04:37.96,Default,,0000,0000,0000,,parfois du canvas quand il s'agit de manipuler les images
Dialogue: 0,0:04:37.96,0:04:41.12,Default,,0000,0000,0000,,alors il y a deux choses qu'on a observé qui sont importantes à retenir
Dialogue: 0,0:04:41.12,0:04:44.40,Default,,0000,0000,0000,,si vous êtes amenés à utiliser des transitions ou des animations CSS
Dialogue: 0,0:04:44.40,0:04:46.12,Default,,0000,0000,0000,,c'est d'éviter quand même les animations infinies
Dialogue: 0,0:04:46.12,0:04:49.04,Default,,0000,0000,0000,,parce que sur des périphériques un peu low-spec comme des netbooks
Dialogue: 0,0:04:49.04,0:04:51.88,Default,,0000,0000,0000,,vous alllez avoir tendance à utiliser beaucoup de CPU
Dialogue: 0,0:04:51.88,0:04:56.75,Default,,0000,0000,0000,,et aussi ne jamais baser la logique applicative sur des callbacks de fin d'animation
Dialogue: 0,0:04:56.75,0:05:00.00,Default,,0000,0000,0000,,vous savez comme des webkit animation end ou des moz animation end
Dialogue: 0,0:05:00.00,0:05:02.12,Default,,0000,0000,0000,,parce que d'une part ils peuvent ne pas être supportés par le navigateur
Dialogue: 0,0:05:02.12,0:05:04.04,Default,,0000,0000,0000,,que vous êtes en train de 'targeter'
Dialogue: 0,0:05:04.04,0:05:10.16,Default,,0000,0000,0000,,bon voilà c'est une meilleure pratique d'avoir toujours la logique applicative séparée
Dialogue: 0,0:05:10.16,0:05:12.49,Default,,0000,0000,0000,,des effets purement graphiques
Dialogue: 0,0:05:12.49,0:05:15.28,Default,,0000,0000,0000,,Et rapidement au niveau du fonctionnement de l'application
Dialogue: 0,0:05:15.28,0:05:21.80,Default,,0000,0000,0000,,donc l'application consiste en une seule page HTML qui finalement est très très succinte
Dialogue: 0,0:05:21.80,0:05:26.50,Default,,0000,0000,0000,,c'est un mécanisme de chargement des scripts et des styles dynamiquement
Dialogue: 0,0:05:26.50,0:05:29.52,Default,,0000,0000,0000,,et puis quelque chose qu'il faut bien retenir dans le cadre de vos développements
Dialogue: 0,0:05:29.52,0:05:31.68,Default,,0000,0000,0000,,pour des applications un peu riches en HTML5
Dialogue: 0,0:05:31.68,0:05:34.24,Default,,0000,0000,0000,,c'est vraiment avoir une logique MVC
Dialogue: 0,0:05:34.24,0:05:38.00,Default,,0000,0000,0000,,c'est à dire qu'on est plus en train de dire on va modifier le DOM à la volée
Dialogue: 0,0:05:38.00,0:05:39.82,Default,,0000,0000,0000,,pour modifier tel ou tel élément
Dialogue: 0,0:05:39.82,0:05:42.36,Default,,0000,0000,0000,,c'est vraiment important d'avoir une vraie structure en place
Dialogue: 0,0:05:42.36,0:05:45.88,Default,,0000,0000,0000,,pour pouvoir dire : OK je vais avoir des modèles pour représenter mes données
Dialogue: 0,0:05:45.88,0:05:51.16,Default,,0000,0000,0000,,des vues qui vont me permettre justement de gérer la représentation de ces données à l'écran
Dialogue: 0,0:05:51.16,0:05:54.04,Default,,0000,0000,0000,,et puis des controleurs qui maintiendront l'état de l'application
Dialogue: 0,0:05:54.04,0:05:57.44,Default,,0000,0000,0000,,D'ailleurs y'a un excellent projet qui s'appelle Backbone.js que vous connaissez peut-être
Dialogue: 0,0:05:57.44,0:06:01.20,Default,,0000,0000,0000,,qui permet justement d'avoir une très bonne base pour ce genre de chose
Dialogue: 0,0:06:02.51,0:06:07.55,Default,,0000,0000,0000,,Donc là dans ce slide j'ai "embedder" l'application
Dialogue: 0,0:06:07.55,0:06:10.50,Default,,0000,0000,0000,,donc le bureau de JoliCloud
Dialogue: 0,0:06:11.35,0:06:15.16,Default,,0000,0000,0000,,donc tout ça c'est en CSS3
Dialogue: 0,0:06:16.84,0:06:20.68,Default,,0000,0000,0000,,donc là idem pour tout ce qui est animation
Dialogue: 0,0:06:20.68,0:06:23.92,Default,,0000,0000,0000,,la partie drag-n-drop par contre n'étant pas tout à fait finalisée
Dialogue: 0,0:06:23.92,0:06:25.72,Default,,0000,0000,0000,,dans HTML5
Dialogue: 0,0:06:25.72,0:06:30.44,Default,,0000,0000,0000,,elle est écrite un peu en javascript avec à la fois
Dialogue: 0,0:06:30.44,0:06:32.20,Default,,0000,0000,0000,,des petites choses HTML5 mais aussi
Dialogue: 0,0:06:32.20,0:06:35.06,Default,,0000,0000,0000,,des petites choses qui permettent d'avoir la compatibilité
Dialogue: 0,0:06:36.56,0:06:38.72,Default,,0000,0000,0000,,Alors maintenant on va rentrer un peu dans le vif du sujet
Dialogue: 0,0:06:38.72,0:06:41.40,Default,,0000,0000,0000,,parce que là on a quoi ? On a une application en HTML5
Dialogue: 0,0:06:41.40,0:06:43.04,Default,,0000,0000,0000,,qui se connecte au cloud
Dialogue: 0,0:06:43.04,0:06:45.04,Default,,0000,0000,0000,,qui finalement récupère des données
Dialogue: 0,0:06:45.04,0:06:46.52,Default,,0000,0000,0000,,les affiche à l'écran
Dialogue: 0,0:06:46.52,0:06:48.24,Default,,0000,0000,0000,,et ça fonctionne bien, ça se synchronise
Dialogue: 0,0:06:48.24,0:06:51.22,Default,,0000,0000,0000,,le problème maintenant c'est que quand on veut faire un operating system avec ça
Dialogue: 0,0:06:51.22,0:06:53.28,Default,,0000,0000,0000,,évidemment on va se retrouver dans des contextes où il faut absolument
Dialogue: 0,0:06:53.28,0:06:55.28,Default,,0000,0000,0000,,que l'application fonctionne hors-ligne
Dialogue: 0,0:06:55.28,0:07:00.32,Default,,0000,0000,0000,,Quand vous démarrez votre netbook ... ou votre ordinateur dans un train par exemple
Dialogue: 0,0:07:00.32,0:07:01.91,Default,,0000,0000,0000,,vous n'avez pas forcément de connexion avec vous
Dialogue: 0,0:07:01.91,0:07:03.90,Default,,0000,0000,0000,,donc il faut que ça marche hors-ligne
Dialogue: 0,0:07:03.90,0:07:07.96,Default,,0000,0000,0000,,Alors d'abord pour ce qui est des ressources de l'application
Dialogue: 0,0:07:07.96,0:07:11.44,Default,,0000,0000,0000,,c'est à dire faire que l'application va être fonctionnelle offline
Dialogue: 0,0:07:11.44,0:07:16.68,Default,,0000,0000,0000,,on a utilisé appcache, la technologie qui permet justement de lister
Dialogue: 0,0:07:16.68,0:07:20.80,Default,,0000,0000,0000,,l'ensemble des ressources que vous voulez mettre en cache dans le navigateur
Dialogue: 0,0:07:20.80,0:07:24.00,Default,,0000,0000,0000,,on l'a utilisé uniquement pour du javascript et du CSS finalement
Dialogue: 0,0:07:24.00,0:07:28.14,Default,,0000,0000,0000,,on a fait le choix de dire, l'ensemble des images
Dialogue: 0,0:07:28.14,0:07:31.36,Default,,0000,0000,0000,,qui sert au fonctionnement de l'application
Dialogue: 0,0:07:31.36,0:07:35.72,Default,,0000,0000,0000,,est converti en base64 et inliner dans les CSS
Dialogue: 0,0:07:35.72,0:07:41.16,Default,,0000,0000,0000,,c'est quelque chose qu'on a testé et qu'on a vraiment bien apprécié
Dialogue: 0,0:07:41.16,0:07:43.28,Default,,0000,0000,0000,,dans les tests qu'on a pu faire puisque
Dialogue: 0,0:07:43.28,0:07:48.36,Default,,0000,0000,0000,,même si cette conversion peut avoir un petit overhead en terme de taille
Dialogue: 0,0:07:48.36,0:07:52.36,Default,,0000,0000,0000,,vous allez avoir beaucoup moins de ressources à charger
Dialogue: 0,0:07:52.36,0:07:55.52,Default,,0000,0000,0000,,et donc en terme de latence réseau notamment avec des clefs 3G
Dialogue: 0,0:07:55.52,0:07:59.28,Default,,0000,0000,0000,,c'est quelque chose qui va vraiment améliorer les performances
Dialogue: 0,0:07:59.28,0:08:03.52,Default,,0000,0000,0000,,donc là si on prend l'exemple ici de cette image
Dialogue: 0,0:08:03.52,0:08:07.68,Default,,0000,0000,0000,,tous les navigateurs modernes sont capables d'afficher des images à partir de data
Dialogue: 0,0:08:07.68,0:08:10.28,Default,,0000,0000,0000,,de data URI
Dialogue: 0,0:08:10.28,0:08:12.72,Default,,0000,0000,0000,,donc maintenant l'application fonctionne en ligne
Dialogue: 0,0:08:12.72,0:08:15.12,Default,,0000,0000,0000,,le problème c'est qu'elle a pas encore de données pour l'utilisateur
Dialogue: 0,0:08:15.12,0:08:18.04,Default,,0000,0000,0000,,donc comment on va faire pour stocker les données de l'utilisateur
Dialogue: 0,0:08:18.04,0:08:21.12,Default,,0000,0000,0000,,et les rendre fonctionnelles hors-ligne ?
Dialogue: 0,0:08:21.12,0:08:24.52,Default,,0000,0000,0000,,Alors d'abord ce qu'on a fait, c'est une sorte d'abstraction de notre API
Dialogue: 0,0:08:24.52,0:08:25.36,Default,,0000,0000,0000,,qui se connecte au cloud
Dialogue: 0,0:08:25.36,0:08:27.32,Default,,0000,0000,0000,,de sorte que à chaque fois qu'on fait une requête
Dialogue: 0,0:08:27.32,0:08:29.68,Default,,0000,0000,0000,,pour aller chercher des données sur le cloud
Dialogue: 0,0:08:29.68,0:08:32.00,Default,,0000,0000,0000,,on va stocker l'ensemble de ces réponses JSON
Dialogue: 0,0:08:32.00,0:08:34.36,Default,,0000,0000,0000,,dans localstorage
Dialogue: 0,0:08:34.36,0:08:40.68,Default,,0000,0000,0000,,et en plus lorsque l'on récupère ces données localstorage pour le mode hors-ligne
Dialogue: 0,0:08:40.68,0:08:44.32,Default,,0000,0000,0000,,on va pouvoir avoir le même fonctionnement que lorsque l'application est en ligne
Dialogue: 0,0:08:44.32,0:08:47.07,Default,,0000,0000,0000,,autre avantage
Dialogue: 0,0:08:47.07,0:08:49.80,Default,,0000,0000,0000,,lorsque les données sont très récentes dans localstorage
Dialogue: 0,0:08:49.80,0:08:51.92,Default,,0000,0000,0000,,y compris lorsque vous êtes en ligne
Dialogue: 0,0:08:51.92,0:08:55.12,Default,,0000,0000,0000,,inutile de refaire cette requête, je viens de la faire
Dialogue: 0,0:08:55.12,0:08:58.66,Default,,0000,0000,0000,,de toute façon les données sont récentes, autant les exploiter
Dialogue: 0,0:08:58.66,0:09:00.92,Default,,0000,0000,0000,,ce qu'on a fait en plus encore une fois
Dialogue: 0,0:09:00.92,0:09:04.16,Default,,0000,0000,0000,,l'ensemble des images qui sont liées au bureau de l'utilisateur
Dialogue: 0,0:09:04.16,0:09:06.88,Default,,0000,0000,0000,,ou qui sont par exemples des avatars des utilisateurs
Dialogue: 0,0:09:06.88,0:09:09.99,Default,,0000,0000,0000,,sont également converties en base 64
Dialogue: 0,0:09:09.99,0:09:11.12,Default,,0000,0000,0000,,mises dans localstorage
Dialogue: 0,0:09:11.12,0:09:12.60,Default,,0000,0000,0000,,Alors il y a des technologies qui arrivent
Dialogue: 0,0:09:12.60,0:09:14.92,Default,,0000,0000,0000,,notamment FileSytem APIs
Dialogue: 0,0:09:14.92,0:09:17.60,Default,,0000,0000,0000,,le problème c'est qu'elle sont pas encore très répandues
Dialogue: 0,0:09:17.60,0:09:21.16,Default,,0000,0000,0000,,Elles sont encore au stade expérimental dans Chrome notamment
Dialogue: 0,0:09:21.16,0:09:26.48,Default,,0000,0000,0000,,donc on fait le choix de reprendre cette technique de LocalStorage qui fonctionne très bien
Dialogue: 0,0:09:26.48,0:09:29.04,Default,,0000,0000,0000,,Et donc bien sur il y a à gérer la synchronisation
Dialogue: 0,0:09:29.04,0:09:31.44,Default,,0000,0000,0000,,lorsqu'on revient online
Dialogue: 0,0:09:31.44,0:09:35.64,Default,,0000,0000,0000,,Alors maintenant c'est bien on a une application qui est capable de fonctionner hors-ligne
Dialogue: 0,0:09:35.64,0:09:41.06,Default,,0000,0000,0000,,mais comment on passe du mode hors-ligne au mode connecté ?
Dialogue: 0,0:09:41.06,0:09:43.31,Default,,0000,0000,0000,,et c'est finalement une problématique assez intéressante
Dialogue: 0,0:09:43.31,0:09:46.32,Default,,0000,0000,0000,,parce que dans les navigateurs y'a la propriété navigator.online
Dialogue: 0,0:09:46.32,0:09:49.48,Default,,0000,0000,0000,,mais elle est pas vraiment utile, elle est pas vraiment helpful pour ça
Dialogue: 0,0:09:49.48,0:09:50.40,Default,,0000,0000,0000,,puique finalement
Dialogue: 0,0:09:50.40,0:09:54.48,Default,,0000,0000,0000,,elle va être liée au fait que vous soyez connectés ou non au réseau
Dialogue: 0,0:09:54.48,0:09:58.48,Default,,0000,0000,0000,,et d'ailleurs elle est encore très peu implémentée dans les navigateurs
Dialogue: 0,0:09:58.48,0:10:00.12,Default,,0000,0000,0000,,Alors la solution qu'on a mise en place pour ça c'est de dire
Dialogue: 0,0:10:00.12,0:10:03.12,Default,,0000,0000,0000,,on va faire un test périodique de la connexion
Dialogue: 0,0:10:03.12,0:10:05.84,Default,,0000,0000,0000,,avec un appel XMLHTTPRequest au serveur
Dialogue: 0,0:10:05.84,0:10:07.92,Default,,0000,0000,0000,,l'avantage c'est que ça teste directement
Dialogue: 0,0:10:07.92,0:10:10.48,Default,,0000,0000,0000,,la possibilité d'atteindre votre serveur sur le réseau
Dialogue: 0,0:10:10.48,0:10:13.15,Default,,0000,0000,0000,,et donc de voir si vous êtes en ligne
Dialogue: 0,0:10:13.15,0:10:17.35,Default,,0000,0000,0000,,donc ça peut être une requête très très simple de type head par exemple
Dialogue: 0,0:10:17.35,0:10:20.78,Default,,0000,0000,0000,,et une stratégie qu'on a mis en place en supplément
Dialogue: 0,0:10:20.78,0:10:25.32,Default,,0000,0000,0000,,c'est de dire ben finalement si j'essaye d'accèder à ne ressource sur une API REST
Dialogue: 0,0:10:25.32,0:10:27.40,Default,,0000,0000,0000,,et qu'à ce moment précis, elle échoue
Dialogue: 0,0:10:27.40,0:10:30.04,Default,,0000,0000,0000,,dans ce cas je peux en déduire et signifier à l'utilisateur
Dialogue: 0,0:10:30.04,0:10:32.12,Default,,0000,0000,0000,,qu'il est passé en mode déconnecté
Dialogue: 0,0:10:32.12,0:10:34.08,Default,,0000,0000,0000,,et autre chose aussi
Dialogue: 0,0:10:34.08,0:10:38.32,Default,,0000,0000,0000,,supposons que vous soyez dans un train en train d'utiliser l'application en mode hors-ligne
Dialogue: 0,0:10:38.32,0:10:40.48,Default,,0000,0000,0000,,vous fermez votre ordinateur, vous revenez
Dialogue: 0,0:10:40.48,0:10:42.68,Default,,0000,0000,0000,,vous êtes dans un endroit maintenant connecté
Dialogue: 0,0:10:42.68,0:10:46.56,Default,,0000,0000,0000,,il serait quand même intéressant et judicieux de signifier immédiatement à l'utilisateur
Dialogue: 0,0:10:46.56,0:10:48.36,Default,,0000,0000,0000,,qu'il est maintenant en mode connecté
Dialogue: 0,0:10:48.36,0:10:50.32,Default,,0000,0000,0000,,donc on procdède à une détection pour savoir
Dialogue: 0,0:10:50.32,0:10:53.92,Default,,0000,0000,0000,,si l'utilisateur est actif, par exemple en regardant l'évènement mousemove
Dialogue: 0,0:10:53.92,0:10:58.24,Default,,0000,0000,0000,,mais ça peut être également en regardant un touch par exemple sur le mobile
Dialogue: 0,0:10:58.24,0:11:01.68,Default,,0000,0000,0000,,donc on va faire ici une rapide démo
Dialogue: 0,0:11:01.68,0:11:05.08,Default,,0000,0000,0000,,donc là on est en mode connecté sur l'application
Dialogue: 0,0:11:05.08,0:11:09.44,Default,,0000,0000,0000,,et je vais essayer de couper le réseau
Dialogue: 0,0:11:09.44,0:11:12.16,Default,,0000,0000,0000,,alors là je pourrais attendre un test périodique qui va arriver
Dialogue: 0,0:11:12.16,0:11:14.76,Default,,0000,0000,0000,,mais je vais immédiatement essayer d'accèder à une ressource
Dialogue: 0,0:11:14.76,0:11:19.40,Default,,0000,0000,0000,,donc là on constate que ... comment dire ?
Dialogue: 0,0:11:19.40,0:11:21.46,Default,,0000,0000,0000,,L'application est passée immédiatement en mode hors-ligne
Dialogue: 0,0:11:21.46,0:11:24.24,Default,,0000,0000,0000,,désactivant donc certaines des fonctionnalités
Dialogue: 0,0:11:24.24,0:11:27.48,Default,,0000,0000,0000,,parce qu'évidemment lorsque vous revenez en mode déconnecté
Dialogue: 0,0:11:27.48,0:11:29.89,Default,,0000,0000,0000,,l'utilisateur s'attend à ce que toutes ses données soient synchronisées
Dialogue: 0,0:11:29.89,0:11:31.47,Default,,0000,0000,0000,,dans le même état qu'il les a laissées
Dialogue: 0,0:11:31.47,0:11:34.48,Default,,0000,0000,0000,,donc y'a certaines choses pour lesquelles ça a du sens, d'autres moins
Dialogue: 0,0:11:34.48,0:11:36.64,Default,,0000,0000,0000,,et donc là je vais passer en mode connecté maintenant
Dialogue: 0,0:11:40.26,0:11:41.53,Default,,0000,0000,0000,,voilà
Dialogue: 0,0:11:41.54,0:11:43.60,Default,,0000,0000,0000,,et je vais immédiatement redevenir actif sur l'application
Dialogue: 0,0:11:43.60,0:11:50.30,Default,,0000,0000,0000,,donc le navigateur a détecté qu'ici je suis repassé en mode en ligne
Dialogue: 0,0:11:50.30,0:11:52.12,Default,,0000,0000,0000,,et l'application est de nouveau fonctionnelle
Dialogue: 0,0:11:52.12,9:59:59.99,Default,,0000,0000,0000,,avec l'ensemble de ses fonctionnalités