DrazziB Website blog http://www.drazzib.com/ 2010-09-02T23:29:15+02:00 DrazziB Website http://www.drazzib.com/ http://www.drazzib.com/lib/images/favicon.ico text/html 2010-04-02T00:34:50+02:00 drazzib Nantes JUG Technologies Google http://www.drazzib.com/blog:2009_11_17_nantes_jug_technologies_google <h1><a name="nantes_jug_technologies_google" id="nantes_jug_technologies_google">Nantes JUG Technologies Google</a></h1> <div class="level1"> <p> Android, AppEngine, GWT, Wave autant de technologies Google qui font l&#039;actualité… La preuve ? plus de 80 personnes étaient présentes à la dernière présentation du <a href="http://www.nantesjug.org/" class="urlextern" title="http://www.nantesjug.org/">NantesJUG</a> intitulée “Soirée Spéciale Google Technologies”. Didier Girard (<a href="http://www.sfeir.com/" class="urlextern" title="http://www.sfeir.com/">SFEIR</a>) nous faisait l&#039;honneur de faire un arrêt à Nantes pour son <a href="http://www.application-servers.com/post/2009/11/05/Un-petit-JUGing-avec-les-technologies-Google-ndash%3B-RTSVP" class="urlextern" title="http://www.application-servers.com/post/2009/11/05/Un-petit-JUGing-avec-les-technologies-Google-ndash%3B-RTSVP">JUGing</a>. </p> <p> Je dois dire que j&#039;ai été agréablement surpris par la qualité de l&#039;intervenant : des explications simples, une très bonne maitrise des sujets, et une forte interaction avec le public. Ainsi, cette présentation était accompagnée de nombreuses démonstrations, ponctuées de “clap, clap, clap” ou de “bouuuhh” suivant le succès de chacune d&#039;elle :) Didier était accompagné de Salvador Diaz (freelance) sur la partie GWT2. </p> <p> Photos : <a href="http://picasaweb.google.com/diaz.salvador/NantesJUG" class="urlextern" title="http://picasaweb.google.com/diaz.salvador/NantesJUG">http://picasaweb.google.com/diaz.salvador/NantesJUG</a> </p> <p> Pour ceux qui n&#039;étaient pas présents à cette présentation, voici mes notes : </p> </div> <!-- SECTION "Nantes JUG Technologies Google" [1-1120] --> <h2><a name="architecture_google" id="architecture_google">Architecture Google</a></h2> <div class="level2"> <p> “Le Cloud, rien que le Cloud.” </p> <p> <strong>Objectif: mettre à disposition les technologies utilisées par Google en interne pour en faire profiter les gens… et bien sûr monétiser ces technologies .</strong> </p> </div> <!-- SECTION "Architecture Google" [1121-1350] --> <h3><a name="lexique" id="lexique">Lexique</a></h3> <div class="level3"> <ul> <li class="level1"><div class="li"> IaaS : Location d&#039;infrastructure (serveur, bande passante)</div> </li> <li class="level1"><div class="li"> PaaS : Location de plateforme (container J2EE, stockage)</div> </li> <li class="level1"><div class="li"> <a href="http://fr.wikipedia.org/wiki/SaaS" class="interwiki iw_wp" title="http://fr.wikipedia.org/wiki/SaaS">SaaS</a> : location de service (application verticale)</div> </li> </ul> <p> “De la machine au software, louer ce dont on a besoin” </p> </div> <!-- SECTION "Lexique" [1351-1610] --> <h3><a name="vision" id="vision">Vision</a></h3> <div class="level3"> </div> <h4><a name="openweb" id="openweb">OpenWeb</a></h4> <div class="level4"> <ul> <li class="level1"><div class="li"> Chrome!</div> </li> <li class="level1"><div class="li"> Support de HTML5</div> </li> <li class="level1"><div class="li"> Les applications RIA oui, mais uniquement avec des standards</div> </li> </ul> </div> <h4><a name="roa" id="roa">ROA</a></h4> <div class="level4"> <ul> <li class="level1"><div class="li"> <a href="http://en.wikipedia.org/wiki/Resource_oriented_architecture" class="urlextern" title="http://en.wikipedia.org/wiki/Resource_oriented_architecture">ROA</a> Ressource Oriented Application</div> </li> <li class="level1"><div class="li"> 1 ressource = 1 url</div> </li> <li class="level1"><div class="li"> <a href="http://fr.wikipedia.org/wiki/REST" class="interwiki iw_wp" title="http://fr.wikipedia.org/wiki/REST">REST</a> <a href="http://www.pompage.net/pompe/comment-j-ai-explique-rest-a-ma-femme/" class="urlextern" title="http://www.pompage.net/pompe/comment-j-ai-explique-rest-a-ma-femme/">http://www.pompage.net/pompe/comment-j-ai-explique-rest-a-ma-femme/</a></div> </li> <li class="level1"><div class="li"> Pour les applications “single pages bootstrap” (ex: gmail), on utilise le # dans l&#039;<acronym title="Uniform Resource Locator">URL</acronym> pour indiquer la ressource à utiliser</div> </li> </ul> <p> A écouter : <a href="http://lescastcodeurs.com/" class="urlextern" title="http://lescastcodeurs.com/">http://lescastcodeurs.com/</a> </p> </div> <!-- SECTION "Vision" [1611-2141] --> <h2><a name="google_app_engine" id="google_app_engine">Google App Engine</a></h2> <div class="level2"> <p> <a href="http://code.google.com/intl/fr/appengine/" class="urlextern" title="http://code.google.com/intl/fr/appengine/">Google App Engine</a> est une plateforme d&#039;hébergement d&#039;<a href="http://code.google.com/intl/fr/appengine/docs/java/runtime.html" class="urlextern" title="http://code.google.com/intl/fr/appengine/docs/java/runtime.html">applications Java</a>, sur les serveurs de Google. </p> <p> <a href="http://code.google.com/intl/fr/appengine/docs/java/jrewhitelist.html" class="urlextern" title="http://code.google.com/intl/fr/appengine/docs/java/jrewhitelist.html">Une partie de l&#039;API Java standard</a> est disponible, ce qui rend potentiellement hébergeable beaucoup d&#039;application Java existantes. </p> <ul> <li class="level1"><div class="li"> Plugin Eclipse fournit par Google :</div> </li> </ul> <p> <a href="http://code.google.com/intl/fr/eclipse/" class="urlextern" title="http://code.google.com/intl/fr/eclipse/">http://code.google.com/intl/fr/eclipse/</a> </p> <ul> <li class="level1"><div class="li"> Philosophie NoSQL: stockage dans <a href="http://fr.wikipedia.org/wiki/BigTable" class="interwiki iw_wp" title="http://fr.wikipedia.org/wiki/BigTable">BigTable</a></div> </li> </ul> <p> Accès par l&#039;api <a href="http://fr.wikipedia.org/wiki/JDO" class="interwiki iw_wp" title="http://fr.wikipedia.org/wiki/JDO">JDO</a> </p> <ul> <li class="level1"><div class="li"> Déploiement “One-Click”</div> </li> </ul> <p> 1000 déploiement autorisé par jour (large !) </p> <ul> <li class="level1"><div class="li"> Pub google :</div> <ul> <li class="level2"><div class="li"> 5 millions de pages vues par mois au maximum</div> </li> </ul> </li> <li class="level1"><div class="li"> Réalité :</div> <ul> <li class="level2"><div class="li"> grosse limitation de bande passante (1Go / jour)</div> </li> </ul> </li> </ul> <p> Il est possible de donner une limite de facturation par jour (genre 2$ par jour) </p> <p> Il faut intégrer AppEngine (le Cloud Computing en général) dans nos choix d&#039;architecture. </p> <ul> <li class="level1"><div class="li"> Exemple évident : campagne marketing, avec mini-site dynamique.</div> </li> </ul> <ul> <li class="level1"><div class="li"> Problématique “complexe” sans le Cloud Computing :</div> <ul> <li class="level2"><div class="li"> Quelle volumétrie attendre ?</div> </li> <li class="level2"><div class="li"> Pourquoi monter 30 serveurs pour ne plus en avoir besoin 10 jours plus tard ?</div> </li> </ul> </li> </ul> </div> <!-- SECTION "Google App Engine" [2142-3410] --> <h3><a name="donnees_confidentielles_chez_google" id="donnees_confidentielles_chez_google">Données confidentielles chez Google ?</a></h3> <div class="level3"> <p> <a href="http://code.google.com/intl/fr/securedataconnector/" class="urlextern" title="http://code.google.com/intl/fr/securedataconnector/">SDC</a> : ouvrir un port 80 de façon indéfini vers google : un simple tunneling <acronym title="Hyper Text Transfer Protocol">HTTP</acronym> </p> <p> Diagramme de l&#039;intégration de SDC dans la stack Google AppEngine : <a href="http://www.drazzib.com/lib/exe/fetch.php?cache=cache&amp;media=http%3A%2F%2Fi.zdnet.com%2Fblogs%2Fgae_for_enterprise.png" class="media" title="http://i.zdnet.com/blogs/gae_for_enterprise.png"><img src="http://www.drazzib.com/lib/exe/fetch.php?w=250&amp;h=&amp;cache=cache&amp;media=http%3A%2F%2Fi.zdnet.com%2Fblogs%2Fgae_for_enterprise.png" class="mediacenter" alt="" width="250" /></a> </p> </div> <!-- SECTION "Données confidentielles chez Google ?" [3411-3726] --> <h3><a name="adherence_avec_les_api_proprio_de_google" id="adherence_avec_les_api_proprio_de_google">Adhérence avec les API proprio de Google</a></h3> <div class="level3"> <ul> <li class="level1"><div class="li"> La persistance avec JDO</div> </li> </ul> <p> (Laurent Gérin: “JDO, ca ne marche pas” :) </p> <ul> <li class="level1"><div class="li"> Le support de <a href="http://fr.wikipedia.org/wiki/XMPP" class="interwiki iw_wp" title="http://fr.wikipedia.org/wiki/XMPP">XMPP</a></div> </li> </ul> <p> Didier Girard: </p> <pre class="code">Comme pour l&#039;ensemble des API non J2EE, il faut utiliser les bons patterns pour permettre le changement de provider le jour venu</pre> </div> <!-- SECTION "Adhérence avec les API proprio de Google" [3727-4036] --> <h2><a name="google_gwt" id="google_gwt">Google GWT</a></h2> <div class="level2"> <p> <a href="http://code.google.com/intl/fr/webtoolkit/" class="urlextern" title="http://code.google.com/intl/fr/webtoolkit/">Google Web Toolkit</a> est un ensemble d&#039;outils de Google permettant de développement d&#039;applications riches (RIA) via notamment un compilateur Java vers Javascript. </p> <p> Plugin Eclipse fournit par Google : <a href="http://code.google.com/intl/fr/eclipse/" class="urlextern" title="http://code.google.com/intl/fr/eclipse/">http://code.google.com/intl/fr/eclipse/</a> </p> <p> Didier Girard recommande <a href="http://www.instantiations.com/gwtdesigner/" class="urlextern" title="http://www.instantiations.com/gwtdesigner/">GWT Designer</a> (<a href="http://www.instantiations.com/gwtdesigner/purchase.html" class="urlextern" title="http://www.instantiations.com/gwtdesigner/purchase.html">$ 79 / an</a>) </p> <p> GWT fait de la compatibilité au cas par cas pour chaque browser (!= de la vision OpenWeb !) Par exemple <a href="http://code.google.com/intl/fr/webtoolkit/doc/1.7/ReleaseNotes_1_7.html" class="urlextern" title="http://code.google.com/intl/fr/webtoolkit/doc/1.7/ReleaseNotes_1_7.html">GWT 1.7 est désormais compatible avec IE8</a>. </p> <p> GWT ne fait pas “encore” du OpenWeb car ce n&#039;est pas actuellement possible : support de <acronym title="Internet Explorer 6">IE6</acronym> &amp; co… </p> <p> Diagramme des traitements GWT : <a href="http://www.drazzib.com/lib/exe/fetch.php?cache=cache&amp;media=http%3A%2F%2Fwww-igm.univ-mlv.fr%2F%7Edr%2FXPOSE2008%2FGWT%2Fmedia%2Fgwt_architecture.gif" class="media" title="http://www-igm.univ-mlv.fr/~dr/XPOSE2008/GWT/media/gwt_architecture.gif"><img src="http://www.drazzib.com/lib/exe/fetch.php?w=&amp;h=&amp;cache=cache&amp;media=http%3A%2F%2Fwww-igm.univ-mlv.fr%2F%7Edr%2FXPOSE2008%2FGWT%2Fmedia%2Fgwt_architecture.gif" class="mediacenter" alt="" /></a> </p> </div> <!-- SECTION "Google GWT" [4037-4942] --> <h3><a name="composants_gwt_natifs" id="composants_gwt_natifs">Composants GWT natifs</a></h3> <div class="level3"> <p> Remarque sur la pauvreté des composants GWT natifs </p> <p> Choix #1 utiliser une des librairies de composants complémentaires (<a href="http://www.smartclient.com/smartgwt/showcase/" class="urlextern" title="http://www.smartclient.com/smartgwt/showcase/">SmartGWT</a>, <a href="http://www.gwt-ext.com/demo/" class="urlextern" title="http://www.gwt-ext.com/demo/">GWT-Ext</a>, …) </p> <p> Didier Girard : </p> <pre class="code">Oui, c&#039;est bien mais ca dépend de la durée de vie de l&#039;application Pour une livraison dans 3 mois : oui Mais pour une application avec une durée de vie de +5 ans : faire ses propres composants personnalisés</pre> <p> A lire : <a href="http://www.slideshare.net/hbraun/gwt-jug-stuttgart" class="urlextern" title="http://www.slideshare.net/hbraun/gwt-jug-stuttgart">http://www.slideshare.net/hbraun/gwt-jug-stuttgart</a> </p> </div> <!-- SECTION "Composants GWT natifs" [4943-5499] --> <h3><a name="gwt2" id="gwt2">GWT2</a></h3> <div class="level3"> <p> Nouveautés de GWT2 </p> <ul> <li class="level1"><div class="li"> Utilisation d&#039;un plugin dans votre navigateur préféré pour le debug (et plus UN navigateur intégré par platforme)</div> </li> <li class="level1"><div class="li"> RunAsync : permet de charger des parties d&#039;une application GWT “on-demand”, plutôt que de charger toute l’application dès l&#039;affichage initiale dans le navigateur (sinon, on arrive vite à des applications avec UN fichier javascript &gt; 800Ko) <a href="http://blog.octo.com/optimiser-le-temps-de-chargement-d%E2%80%99une-application-gwt-22/" class="urlextern" title="http://blog.octo.com/optimiser-le-temps-de-chargement-d%E2%80%99une-application-gwt-22/">Voir article</a></div> </li> <li class="level1"><div class="li"> UIBinder : encore un nouveau langage de définition d&#039;interface en <acronym title="Extensible Markup Language">XML</acronym>… pfff… (qui n&#039;est d&#039;ailleurs même pas le même que celui d&#039;Android)</div> </li> <li class="level1"><div class="li"> Meilleur support de HtmlUnit pour les tests unitaires</div> </li> </ul> </div> <!-- SECTION "GWT2" [5500-6219] --> <h2><a name="google_android" id="google_android">Google Android</a></h2> <div class="level2"> <p> Google Android est à la fois : </p> <ul> <li class="level1"><div class="li"> un système d&#039;exploitation (basé sur Linux) pour appareils mobiles</div> </li> <li class="level1"><div class="li"> des applications de bases pour le téléphone</div> </li> <li class="level1"><div class="li"> un <acronym title="Software Development Kit">SDK</acronym> pour le développement d&#039;application complémentaires</div> </li> </ul> <p> <a href="http://developer.android.com/guide/topics/fundamentals.html" class="urlextern" title="http://developer.android.com/guide/topics/fundamentals.html">Concepts fondamentaux</a> </p> <p> Plugin Eclipse fournit par Google : <a href="http://developer.android.com/sdk/eclipse-adt.html" class="urlextern" title="http://developer.android.com/sdk/eclipse-adt.html">http://developer.android.com/sdk/eclipse-adt.html</a> </p> <p> Création d&#039;un compte sur le Market Place : 2 minutes montre en main + 25$ </p> <p> On peut directement publier des applications qui sont accessibles depuis un téléphone Android [clin d&#039;oeil au processus de validation présent sur le “Store” de la marque à la pomme :] </p> <p> Diagramme de la stack Android : <a href="http://www.drazzib.com/lib/exe/fetch.php?cache=cache&amp;media=http%3A%2F%2Fadiguba.developpez.com%2Fblog%2Fandroid-system-architecture.png" class="media" title="http://adiguba.developpez.com/blog/android-system-architecture.png"><img src="http://www.drazzib.com/lib/exe/fetch.php?w=500&amp;h=&amp;cache=cache&amp;media=http%3A%2F%2Fadiguba.developpez.com%2Fblog%2Fandroid-system-architecture.png" class="mediacenter" alt="" width="500" /></a> </p> </div> <!-- SECTION "Google Android" [6220-7016] --> <h2><a name="google_wave" id="google_wave">Google Wave</a></h2> <div class="level2"> <p> Objectif: réunir en un seul lieu l&#039;ensemble des éléments d&#039;une conversation (une “Wave”) : email, chat, documents, gadgets Pour l&#039;instant cet outil reste en “beta semi-ouverte”. </p> <p> Une Wave est statefull : on le retrouve dans l&#039;état précédent à chaque ouverture de session </p> <p> Les Gadgets sont également statefull : on peut conserver une HashMap d&#039;infos </p> </div> <!-- SECTION "Google Wave" [7017-7398] --> <h3><a name="robots" id="robots">Robots</a></h3> <div class="level3"> <p> Les “robots” sont un élément important de Wave. Ils reçoivent l&#039;ensemble des éléments de la Wave et peuvent réagir aux événements. L&#039;ajout d&#039;un “robot” peut automatiquement déclencher l&#039;ajout d&#039;un ou des Gadgets. </p> </div> <!-- SECTION "Robots" [7399-7638] --> <h3><a name="exemple_metier_demande_de_conges" id="exemple_metier_demande_de_conges">Exemple métier : demande de congés</a></h3> <div class="level3"> <ol> <li class="level1"><div class="li"> Un robot de gestion des congés</div> </li> <li class="level1"><div class="li"> On l&#039;ajoute dans la Wave et ceci déclenche l&#039;affichage d&#039;un Gadget (mini-application avec calendrier)</div> </li> <li class="level1"><div class="li"> On effectue la demande de congé via le formulaire du Gadget</div> </li> <li class="level1"><div class="li"> Elle entre en état de “validation”</div> </li> <li class="level1"><div class="li"> La personne valide la demande</div> </li> <li class="level1"><div class="li"> Le robot détecte cette validation et peut éditer une demande, envoyer un mail, etc…</div> </li> </ol> </div> <!-- SECTION "Exemple métier : demande de congés" [7639-8061] --> <h3><a name="exemple_stack_google_complete" id="exemple_stack_google_complete">Exemple &quot;stack Google complète&quot;</a></h3> <div class="level3"> <ul> <li class="level1"><div class="li"> <a href="http://picasaweb.google.com/diaz.salvador/ParisJUG#5404449358120409650" class="urlextern" title="http://picasaweb.google.com/diaz.salvador/ParisJUG#5404449358120409650">http://picasaweb.google.com/diaz.salvador/ParisJUG#5404449358120409650</a></div> </li> <li class="level1"><div class="li"> <a href="http://picasaweb.google.com/diaz.salvador/ParisJUG#5404449858554874354" class="urlextern" title="http://picasaweb.google.com/diaz.salvador/ParisJUG#5404449858554874354">http://picasaweb.google.com/diaz.salvador/ParisJUG#5404449858554874354</a></div> </li> </ul> </div> <!-- SECTION "Exemple stack Google complète" [8062-8256] --> <h3><a name="conclusion" id="conclusion">Conclusion</a></h3> <div class="level3"> <ul> <li class="level1"><div class="li"> Développeur = innovateur</div> </li> <li class="level1"><div class="li"> AppEngine ou Android : un bon moyen de déployer son application, son idée, sa petite révolution avec une retour direct des utilisateurs (réduction potentielle des intermédiaires)</div> </li> </ul> <p> <strong>Enjoy!</strong> </p> <div class="tags"><span> <a href="http://www.drazzib.com/tags:google?do=showtag&amp;tag=google" class="wikilink1" title="tags:google" rel="tag">Google</a>, <a href="http://www.drazzib.com/tags:libre" class="wikilink1" title="tags:libre" rel="tag">Libre</a>, <a href="http://www.drazzib.com/tags:java" class="wikilink1" title="tags:java" rel="tag">Java</a> </span></div> </div> <!-- SECTION "Conclusion" [8257-] -->