Florent WEBER Cédric CHEDALEUX Thomas GUERIN Jérémy SCHOEN

1. Projet d’optionZENIKA – Ecole des Mines de Nantes Florent WEBER Cédric CHEDALEUX Thomas GUERIN Jérémy SCHOEN ZENIKA - Ecole des Mines de Nantes 1

2. Phase 1 : problématiques et enjeux des applications Web en mode déconnecté • Phase 2 : panorama du marché des solutions et comparaison par rapport à la technologie Google Gears • Phase 3 : prototypage à l’aide de l’outil Google Gears • Phase 4 : synthèse et prospective ZENIKA - Ecole des Mines de Nantes ZENIKA - Ecole des Mines de Nantes 2 2

3. . L’objectif de cette section est d’introduire le concept de « mode déconnecté » en présentant son contexte d’application, ses avantages et les moyens nécessaire à sa mise en œuvre. ZENIKA - Ecole des Mines de Nantes 3

4. ZENIKA - Ecole des Mines de Nantes 4

5. Fusion RIA/RDA • RIA : Rich Internet Application • Lancement dans le navigateur • Pas d’installation • RDA : Rich Desktop Application • Installation sur le poste client • Accès aux ressources de l’ordinateur (disque dur, périphériques...)‏ • Utilisation locale (pas besoin de connexion)‏ ZENIKA - Ecole des Mines de Nantes ZENIKA - Ecole des Mines de Nantes 5 5

6. Exemples de technologies RIA • Adobe Flash • Animations • 3D • Google Web Toolkit • Composants graphiques avancés • Boutons • Editeur de texte ZENIKA - Ecole des Mines de Nantes 6

7. Exemples de technologies RDA • Adobe Air • Le plus prometteur aujourd’hui. • Cf. détails plus loin. • Microsoft Silverlight 2.0 • Peut servir pour la réalisation d’application RIA ou RDA • Démarrage depuis le bureau ou depuis un site web au choix. • Critiqué du fait qu’il ne soit pas Open Source. • A terme, des contenus Web seraient donc réservés aux personnes ayant acheté les technologies Microsoft. • Mozilla XulRunner • Masqué par les 2 « grands » ZENIKA - Ecole des Mines de Nantes 7

8. Différence entre RDA et RIA • Les notions de RDA / RIA sont parfois utilisées à tort. • De plus, avec l’arrivée du mode déconnecté, la frontière entre RDA et RIA est de plus en plus mince. En effet : • Si la RIA permet le mode déconnecté, alors on obtient une application utilisable sans connexion Internet donc de type « desktop ». • Inversement, en mode connecté, des RDA telles que eBay Desktop utilisent en permanence la connexion Internet et proposent des interactions similaires à celle d’une page Web. ZENIKA - Ecole des Mines de Nantes 8

9. Le mode déconnecté permet aux applications Internet : • L’accès aux ressources locales • Une continuité du service ZENIKA - Ecole des Mines de Nantes 9

10. Problème : La perte de connexion se traduit par une inutilisabilité du service dans le cas des applications Web “traditionnelles” • Il y a deux modes de déconnexion possible • Déconnexion implicite (non souhaitée)‏ • Perte de réseau pour un téléphone portable. • Passage dans un tunnel pour un ordinateur portable. • Déconnexion explicite (volonté de l’utilisateur)‏ • Economie du crédit de connexion Web pendant la rédaction d’un courrier électronique. ZENIKA - Ecole des Mines de Nantes 10

11. Il semble difficile pour certaines architectures d’offrir un mode déconnecté. • La raison est simple, les pages HTML affichées dans le navigateur sont générées côté serveur et non pas côté client comme avec GWT, Flex ou simplement HTML/Javascript. ZENIKA - Ecole des Mines de Nantes ZENIKA - Ecole des Mines de Nantes 11 11

12. Rendre une application "déconnectée" nécessite de rapatrier tout ou partie des traitements métiers sur le navigateur. Du coup, il semble nécessaire d'écrire ces traitements dans les langages spécifiques au client ou au serveur. En bref en HTML/JavaScript pour la partie client et en Java dans le cas d'un backend Java... • Comment assurer une bonne répartition des traitements entre le serveur et le navigateur client ? ZENIKA - Ecole des Mines de Nantes 12

13. Comment gérer de gros volume de données ? Autrement dit, comment répartir la charge entre le client et le serveur ? • Le serveur ne transmet au client que les données qui lui seront utiles pour les actions qu’il pourra réaliser en mode déconnecté… ZENIKA - Ecole des Mines de Nantes 13

14. Comment gérer les problèmes de mises à jour concurrentes ? Comment rendre compte d'un problème de synchronisation à l'utilisateur ? Comment l’aider à résoudre ce problème de synchronisation ? • Exemple : 2 utilisateurs effectuent une tâche sur leur poste en mode déconnecté, portant sur un même fichier. Comment gérer la convergence à la reprise de la connexion ? ZENIKA - Ecole des Mines de Nantes 14

15. Webmail • Web téléphone portable • Bureautique online • Commerce • Cartographie – Itinéraires • Blogs ZENIKA - Ecole des Mines de Nantes 15

16. La rédaction de mail via un webmail (ex: Gmail) nécessite une connexion à Internet • Grâce au mode déconnecté un utilisateur peut écrire un mail et l’ ”envoyer”. Lorsqu’il est de nouveau connecté à Internet l’envoi se fera de manière totalement transparente. • Bien d’autres fonctionnalités sont possibles en mode déconnecté : consultation de mails, suppression de mails, configuration des comptes. • La course au webmail déconnecté a été remportée par Zoho mail qui intègre Google Gears afin de disposer d’un mode “offline”. ZENIKA - Ecole des Mines de Nantes 16

17. Zoho Webmail • Bien que Gears soit une technologie de Google, Zoho a été le premier à l’avoir mise en place. • L’interface graphique de Zoho est plus riche que celle de Gmail, en effet elle ressemble beaucoup à l’interface de Mozilla Thunderbird. • Bien que Gears sera considéré comme « mature » lors de son intégration par Google dans Gmail, Zoho fait preuve d’initiative en utilisant cette technologie pour son webmail et peut ainsi concurrencer Gmail . ZENIKA - Ecole des Mines de Nantes 17

18. Actuellement, lorsqu’un mobile n’est plus dans une zone couverte par son opérateur il devient impossible de réaliser des opérations via Internet (ex: écrire un mail). • Des applications en mode déconnecté permettraient de s'abstraire des problèmes de connectivité. • Cependant ces dernières ne peuvent être mises en place actuellement que sur des BlackBerry ou des mobiles dont l’OS repose sur J2ME (version mobile de java)‏ • Une solution existe déjà : Gmail for mobile 2.0 qui permet de disposer d’un webmail en mode déconnecté. • Dans un avenir proche d’autres applications disposant du mode déconnecté similaires à celles développées pour les PC devraient voir le jour. ZENIKA - Ecole des Mines de Nantes 18

19. Exemples: Zoho Writer, Google Docs, Project Draw 0.7 (Logiciels de Dessin pour présentation)‏ • Applications en mode déconnecté • La possibilité de travailler hors-ligne permettra à ces applications de se substituer aux applications clients lourds • Applications traditionnelles • Des logiciels de traitement de texte, de présentation et des tableurs sont récemment disponibles en ligne • Ils offrent les mêmes fonctionnalités que les suites bureautiques telles que MS Office ou OpenOffice Inconvénient : Une fois déconnecté, impossibilité de travailler Avantages : Plus besoin d'installer la suite sur le poste client Tout sera utilisable par l'intermédiaire d'un navigateur ZENIKA - Ecole des Mines de Nantes 19

20. ZENIKA - Ecole des Mines de Nantes ZohoWriter • Après avoir mis en place le mode déconnecté pour son webmail, Zoho a récemment doté son éditeur de texte en ligne de cette fonctionnalité. • La suite office que produit Zoho est plus poussée que celle de Google. • En effet des reproches sont faits à la suite office de google notamment en ce qui concerne la pauvreté de son interface graphique mais aussi de sa navigabilité parfois difficile. • Zoho devance encore une fois Google, démontrant ainsi sa participation active dans la communauté des suites offices online.

21. ZENIKA - Ecole des Mines de Nantes ZohoWriter Vs Google Doc Google Zoho

22. Comme un commercial voyage beaucoup, il n'a pas toujours accès à Internet (pour son PDA ou ordinateur portable). Mais, même en déplacement, il a des besoins comme: • Consulter ses emails • Vérifier son planning de rendez-vous • Accèder aux infos de ses contacts (adresse, téléphone)‏ • Proposer à ses clients un catalogue interactif de produits sous forme d'applications web (facilement modifiables)‏ • La technologie en mode déconnecté lui offrira toutes ces fonctionnalités dans l'avion (pour aller à une conférence), ou chez un client résidant dans des zones non déservies (ou même dans des pays non connectés). ZENIKA - Ecole des Mines de Nantes 22

23. Exemples: Google Calendar Gmail Zoho Mail • Actuellement, la plupart des commandes sont prises sur papier. L'introduction d'applications permettant le mode déconnectés entrainera une accélération dans le processus de préparation et de livraison. • La commande est saisie chez le client. Dès que le commercial a de nouveau accès à Internet, la commande est validée et transmise au centre de traitement. • Rapidité dans la traitement de la commande. • Synchronisation transparente. ZENIKA - Ecole des Mines de Nantes 23

24. Une fois un itinéraire calculé, si la connexion est interrompue il n’y a plus de possibilité de manipuler la carte. • Hors, lors d’un voyage, il est toujours intéressant de disposer d’une carte interactive. • Les fonctionnalités en mode déconnecté seraient dès lors de pouvoir zoomer sur une zone et ainsi pouvoir choisir un nouvel itinéraire. ZENIKA - Ecole des Mines de Nantes 24

25. Exemples: Blogger -> blog.gears MySpace • La rédaction d'articles ou l'ajout de commentaires sur un blog nécessite une connexion Internet. • Toutes ces tâches pourront être réalisées hors-ligne et ensuite synchronisées avec le serveur hébergeant le blog • Dans un train, avion, bus MySpace va introduire Google Gears sur ses blogs afin d‘économiser des ressources serveurs. Une partie des données sera ainsi stockée sur le poste client, réduisant la bande passante utilisée. ZENIKA - Ecole des Mines de Nantes 25

26. Dans le cadre du projet, Google Gears a été choisi comme technologie de référence en termes d’applications Web en mode déconnecté. • L’ensemble de l’étude s’appuiera sur cet outil. • Google Gears a été élu produit de l'année par le magazine PC World devant l'iPhone ! • Voir l’article ZENIKA - Ecole des Mines de Nantes ZENIKA - Ecole des Mines de Nantes 26 26

27. L’objectif de cette section est d’exhiber les technologies prometteuses en termes de « mode déconnecté » et de les comparer à l’outil Google Gears. ZENIKA - Ecole des Mines de Nantes 27

28.  Moteur d'exécution multi-plateforme • Compatible Windows, Linux, Mac OS • Moteur et SDK en téléchargement gratuit • Applications bureau riches • Véritablement déconnectées • Solution la plus mature à ce jour • Air 1.0 en mars 2008 • Communauté active et nombreuses applications • Cf. slide 24 ZENIKA - Ecole des Mines de Nantes 28

29. Installation d’un moteur d’exécution • Code unique pour toutes les plateformes • Langages • ActionScript • Pour les applications Flash ou Flex • JavaScript • Pour les applications AJAX • Possibilité de les mélanger dans une même application ZENIKA - Ecole des Mines de Nantes 29

30. ZENIKA - Ecole des Mines de Nantes 30

31. Intègre le moteur de rendu Webkit de Safari et Chrome • Flash Player inclus • API variée • Son • Vidéo • Sécurité… et beaucoup d’autres! • Détection de connexion automatique • Stockage des données en local en offline puis synchronisation dès le passage online ZENIKA - Ecole des Mines de Nantes 31

32. eBay Desktop • Client bureau pour le site d’enchères • Permet de faire un listing des objets à vendre offline et de synchroniser ensuite une fois connecté. ZENIKA - Ecole des Mines de Nantes 32

33. AOL Top 100 Vidéos • Vidéos sur son bureau • Fonctionnalités riches (plein écran, vidéos liées; publicités)‏ ZENIKA - Ecole des Mines de Nantes 33

34. Finetune Desktop • Lecteur de musiques en ligne • Hautes performances requises à cause du streaming donc RIA difficile • Capture les préférences des utilisateur stockées sur l’ordinateur pour la musique et peut ensuite proposer des morceaux et les lire en streaming • Plus d’exemples d’applications • Environ 180 applications déjà développées • Lien vers le MarketPlace Adobe ZENIKA - Ecole des Mines de Nantes 34

35. Zimbra: l’arme de Yahoo pour se lancer dans le mode déconnecté • Alors que Google planche sur Gears, Yahoo offre un mode déconnecté à son webmail via Zimbra Desktop. • En effet, Yahoo a racheté Zimbra pour environ 350 millions de dollars. • De cette manière Yahoo complète sa liste de service «Web 2.0» (FlickR, del.icio.us, MyBlogLog) avec une offre d’outils orientées « Entreprise 2.0 ». • Mais qu’offre donc Zimbra pour engendrer un tel engouement de la part de Yahoo ? ZENIKA - Ecole des Mines de Nantes 35

36. Zimbra : présentation • Zimbra est une suite collaborative qui comprend une solution serveur ainsi qu’un certain nombre d’applications en ligne orientée collaboration : • Un webmail • Des calendriers partagés avec gestion des contacts • Un traitement de texte et un tableur en ligne • Un moteur de « push mail » pour les collaborateurs nomades • Des extensions pour relier Zimbra à d’autres clients de messagerie (Outlook, Thunderbird…)‏ • Mais Yahoo s’est surtout intéressé à Zimbra Desktop qui est un RIA offrant un webmail, un calendrier et un système de gestion de contacts avec la possibilité de travailler en mode déconnecté. ZENIKA - Ecole des Mines de Nantes 36

37. Zimbra Desktop : schéma (1/2)‏ AJAX Navigateur Web/Prism SOAP/HTTP(S) Jetty Serveur distant de Zimbra Derby Serveur Client ZENIKA - Ecole des Mines de Nantes 37

38. Zimbra Desktop : schéma (2/2)‏ • Jetty : un serveur HTTP et un moteur de servlet 100% implémentés en Java. • Prism : navigateur web léger dont le moteur de rendu est basé sur celui de Firefox. • Derby : base de données de petite taille (2MB), appartenant au projet Apache et totalement implémentée en Java. ZENIKA - Ecole des Mines de Nantes 38

39. Zimbra Desktop : mode déconnecté • En mode connecté, Zimbra Desktop se synchronise avec le serveur distant afin de mettre à jour les données (mails, contacts…). Ces données sont alors stockées dans une base de données. • En mode déconnecté, toutes les informations de l’utilisateur (envoi de mail, ajout de contact…) sont stockées dans cette BD pour être synchronisées une fois l’utilisateur reconnecté. • Cependant Zimbra a développé sa propre implémentation et ce mode ne repose donc pas sur Google Gears. En effet une grande partie de la logique applicative de Zimbra réside dans le code « serveur ». Or Gears est fait pour être utilisé par des applications dont la logique est principalement implémentée en Javascript (code côté client). ZENIKA - Ecole des Mines de Nantes 39

40. Zimbra Desktop : conclusion • Le principal défaut de Zimbra Desktop vient de son toolkit Ajax qui n’offre pas de module de développement d’applications en mode « « déconnecté », ni de librairies pour communiquer avec une BD Derby. • Zimbra Desktop est totalement gratuit, excepté sa licence commerciale qui est payante. • La communauté Zimbra est active (notamment dans son forum). Cependant, les informations sont parfois difficiles à trouver surtout en ce qui concerne son implémentation du mode « déconnecté ». • Au vu de ces informations Zimbra n’est donc pas en phase avec les besoins de notre projet du fait de son manque d’environnement de développement pour le mode déconnecté. Cependant, Zimbra reste un concurrent non négligeable dans la course au mode « déconnecté ». ZENIKA - Ecole des Mines de Nantes 40

41. ZENIKA - Ecole des Mines de Nantes Aperçu de Zimbra Desktop

42. Yahoo! Browser Plus • Extentions du navigateur • Type plug-ins • Fonctionnalités riches de type Desktop • Drag n Drop • Manipulation de fichiers • Convertisseur Texte – Parole • Mode déconnecté à l’étude • Microsoft Live Mesh • Synchronisation de différents appareils (mobile, portable, console…)‏ • Données disponibles partout • Mode déconnecté à venir ZENIKA - Ecole des Mines de Nantes 42

43. Les applications web déconnectées utilisant Gears fonctionnent sans serveur HTTP local. • L’API Gears est composée de 3 modules : • Un serveur local (LocalServer)‏ • Une base de donnée SQLite qui stocke les données sur le poste client. • Un « WorkerPool » qui facilite la synchronisation des données. ZENIKA - Ecole des Mines de Nantes ZENIKA - Ecole des Mines de Nantes 43 43

44. Toute l'application dans un cache • LocalServer • Il remplace le serveur HTTP distant. • Il met dans le cache de Gears (différent de celui du navigateur) les ressources utilisées en déconnecté (DB SQLite). • Il stocke l'ensemble des éléments de l'application - pages HTML, bibliothèques Javascript, images, feuilles de style (CSS), etc - sur le poste client. • Il intercepte les requêtes HTTP de l'application lorsqu'elle fonctionne en mode déconnecté. ZENIKA - Ecole des Mines de Nantes 44

45. Une base de données locale • La base de données locale s'appuie sur le moteur SQL open-source SQLite. • Stocke localement les données téléchargées par l'utilisateur lorsque celui-ci est connecté. • Une base de données hébergée sur le serveur distant peut être copiée intégralement ou partiellement dans la base de données locale. • En mode déconnecté, c'est la base de données locale qui est utilisée par l'application. • Un moteur de synchronisation se charge de réconcilier les données lorsque l'utilisateur se reconnecte. ZENIKA - Ecole des Mines de Nantes 45

46. Synchronisation des données • Les données entre le serveur et le client ne sont plus synchronisées automatiquement dans les cas suivants : • Modification de données hors-ligne • Données partagées entre plusieurs utilisateurs • Données provenant d'une source extérieure (exemple : flux RSS)‏ • Pour résoudre ces problèmes de synchronisation, deux stratégies sont possibles pour les applications Gears : • Synchronisation manuelle • Synchronisation en tâche de fond ZENIKA - Ecole des Mines de Nantes 46

47. Synchronisation manuelle (manual sync)‏ • L'utilisateur décide quand il veut lancer la synchronisation (usuellement via un bouton): • Upload des données locales • Téléchargement des données récentes du serveur • La quantité de données à transférer doit rester faible (quelques Mo pour une connexion Wifi). • Cette synchronisation nécessite que l'utilisateur connaisse l'état de la connexion. Il peut également oublier de synchroniser avant de se déconnecter. ZENIKA - Ecole des Mines de Nantes 47

48. La synchronisation s'effectue toute seule • Avec la synchronisation en tâche de fond (Background sync), l'application web se synchronise automatiquement et continuellement : Les différents termes sont explicités plus loin… ZENIKA - Ecole des Mines de Nantes 48

49. La synchronisation s'effectue toute seule • Le « Sync Engine » assure une synchronisation continue entre le serveur et le client grâce à la techonologie Comet (AJAX 2.0). • Comet garde une connexion ouverte entre les deux postes pour que le serveur puisse envoyer des donnés en continu sans requête préalable du client. • Ensuite, il ajoute les données à « Local Database ». • Quand l'utilisateur clique sur un bouton, le « Data Switch » oriente les appels de l'UI vers le « Server Data Layer » (mode connecté) ou vers le « Local Data Layer » (mode déconnecté). • Les couches « Data Layer » interrogent la BD locale ou la BD du serveur. ZENIKA - Ecole des Mines de Nantes 49

50. Des traitements asynchrones en tâche de fond • Les synchronisations de données nécessitent souvent du temps. Gears propose un 3ème module : le WorkerPool. • Il élimine les blocages du navigateur dus à l'exécution trop longue de scripts. • Il transforme les traitements Javascript synchrones en processus asynchrones. • Grâce à ce module, la synchronisation des données ou la capture de sites se fait de manière complètement transparente pour l'utilisateur. Toutes ces tâches sont effectuées en arrière-plan. ZENIKA - Ecole des Mines de Nantes 50