SlideShare une entreprise Scribd logo
JavaScript côté serveur et en mode déconnecté
                                                                                                                                                                                               Solutions Linux 2009


                                                                                                                                                              Raphaël SEMETEYS
                                                                                                                                                raphael.semeteys@atososrigin.com

                                                                                                                                                                                                          31/03/2009

Atos, Atos et le poisson, Atos Origin et le poisson, Atos Consulting ainsi que le poisson seul sont des marques déposées d'Atos Origin SA.
© 2009 Atos Origin. Document exclusivement réservé à usage commercial. Tout ou partie de ce document ne peut être copié, modifié, diffusé ou annoté sans accord écrit d'Atos Origin ou du client.
Sommaire



    » JavaScript coté serveur




    » Gestion du mode déconnecté




2
Architectures Web traditionnelles




    » Rupture technologique entre le client et le serveur
    » Développements spécifiques autour de XHR et coté serveur
    » Pas de mode déconnecté

3
Serveur Ajax




» Aptana Jaxer (http://www.aptana.com/jaxer)
» Code AJAX exécuté avant que la page ne soit retournée au navigateur Web
» Proxy functions pour appeler directement des fonctions serveur à partir du client


4
Composition




» GPL
» API Jaxer :
  » Jaxer.DB (SQLite, MySQL)
  » Jaxer.SMTP, Jaxer.NetworkUtils, Jaxer.Socket
  » Jaxer.File, Jaxer.Dir et Jaxer.DirUtils
  » Jaxer.System, Jaxer.Process, Jaxer.Thread
  » Jaxer.Request, Jaxer.Response
» Chargement de farmeworks externes


5
Utilisation basique de Jaxer (1/3)
         » Exemple : gestion basique de liste en base de données
         » Code coté serveur :                         runat="server"

                                                       Code exécuté par Jaxer
                                                       Option : runat="both"
      <script runat="server">
          Jaxer.DB.execute("CREATE TABLE IF NOT EXISTS maliste (id INTEGER PRIMARY KEY AUTO_INCREMENT, name
    TEXT)");


         function save(name) {
             Jaxer.DB.execute("INSERT INTO maliste (name) VALUES (?)", name);
         }
         save.proxy = true;


         function suppr(id) {
             Jaxer.DB.execute("DELETE FROM maliste WHERE id=(?)", id);                    Jaxer.*()
         }
         suppr.proxy = true;                                                           Appels d'API Jaxer
                                                                                Ici : base SQLite embarquée
         function supprTous() { Jaxer.DB.execute("DELETE FROM maliste"); }
         supprTous.proxy = true;


         function getList() {
                                                                         getList.proxy = true;
             return Jaxer.DB.execute("SELECT * FROM maliste");
         }
                                                                    Déclaration d'une proxy function
         getList.proxy = true;
      </script>


6
Utilisation basique de Jaxer (2/3)

           » Code coté client :                                                    getList.async(showResult);
    <script>
        function $(id) { return document.getElementById(id); }
                                                                                   Appel asynchrone de la Proxy
                                                                                   function
       function showList() { getList.async(showResult); }


       function showResult(resultset) {
           var results = new Array;
           resultset.rowsAsArrays.forEach(function(row) {
             results.push(new Array(row[0], row[1]));              Démonstration
           });
           var html;
           if (results.length) {
             html = "<ul>";
             for (i=0; i<results.length; i++) {
                 html += "<li>" + results[i][1] +
                           " <span onclick='suppr(" +
                        results[i][0] + "); showList();'>[Suppr]</span>" +
                           "</li>";
             }
             html += "</ul>";
           } else html = "<br/>Liste vide...";
           $("liste").innerHTML = html;
       }                                                                                               Démonstration
       showList();                                                                                    si KO : demo.sh
    </script>




7
Utilisation basique de Jaxer (3/3)

        » Page envoyée au navigateur (view                                                  clientFramework_compressed.js
          source) :
                                                                                            Partie cliente de Jaxer

    <html><head>
       <script type="text/javascript" src="/jaxer/framework/clientFramework_compressed.jsversion=1.0.3.4547"></script>
      <script type="text/javascript">
        Jaxer.Callback.pageSignature = 351955322;
        Jaxer.Callback.pageName = 'localhost:8081/solinux/index.html';
        Jaxer.Callback.callingPage = 'http://localhost:8081/solinux/index.html';
        Jaxer.CALLBACK_URI = '/jaxer-callback';
        Jaxer.ALERT_CALLBACK_ERRORS = false;
    </script>                                             Jaxer.Callback.*
    <title>Ma liste</title>
    </head><body>
       <h3>Ma Liste</h3>                                  Données pour le callback
      <input id="name" type="text"/>
      <input value="Ajouter" onclick="save($('name').value); showList();" type="button"/>
      <div id="liste"/>
      <script>
       eval(Jaxer.Callback.createProxies(['save', 'suppr', 'deleteAll', 'getList']));
      </script>
      <script>
        function $(id) { return document.getElementById(id); }
        function showList() { getList.async(showResult); }
                                                                                   eval(Jaxer.Callback.createProxies(..))
        [...]
       </script>
    </body></html>                                                                 Création des proxies

8
Google Gears




» Mode déconnecté : stockage local de pages statiques et de données (SQLite)
» Améliorer les navigateurs en attendant HTML 5



9
Utilisation basique de Gears (1/2)

» Modification du code client

     » Initialisation de Gears : <script type="text/javascript" src="gears_init.js"></script>

     » Initialisation de l'application :
        var local = false;
        var db = google.gears.factory.create("beta.database");
        db.open("maliste");
        db.execute(
           "CREATE TABLE IF NOT EXISTS maliste (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT)"
        );
        var localServer = google.gears.factory.create('beta.localserver');
        var store = localServer.createStore("maliste");
        store.enabled = false;
        store.capture(["gears.html"], null);


     » Ajout de traitements locaux :
        function dispatchSave(name) { (local)?saveLocal(name):save(name); }

        function saveLocal(name) {
          db.execute("INSERT INTO maliste (name) VALUES ("" + name + "")"
          );
        }




10
Utilisation basique de Gears (2/2)

» Modification du code client (suite)

     » Ajout d'un bouton : <input type="button" value="Mode" onclick="doSync();"/><span id="mode"> : online</span>

     » Gestion de la synchronisation :
        function doSync() {
          if (local) {                                     save(...)
            supprTous();
            var resultset = getListLocal();
            while (resultset.isValidRow()) {               Déconnexion
               save(resultset.field(1));                   Appels distants (proxy function)
               resultset.next();
            }
            local = false;
            $("mode").textContent = " : online";
            store.enabled = false;
          } else {
            db.execute("DELETE FROM maliste");                  saveLocal(...)
            var resultset = getList();
            resultset.rowsAsArrays.forEach(
               function(row) {                                  Reconnexion
               }
                 saveLocal(row[1]);                             Appels locaux (Gears)
            );
            local = true;
            $("mode").textContent = " : offline";
            store.enabled = true;
          }
        }
                                                                                              Démonstration
                                                                                             si KO : demo.sh



11
Conclusion



» Il est possible d'enrichir les applications Web
  » En respectant les standards
      - HTML/DOM/CSS
      - ECMAScript
  » En utilisant des produits libres
      - Coté serveur : Aptana Jaxer
      - Coté client : Google Gears
  » En unifiant les langages et frameworks de programmation

» Points d'attention
  » Les callbacks ou le mode déconnecté remettent en cause la logique applicative
  » C'est un peu « cuting edge », mais est-ce plus risqué que de tuer HTML 5 ?




12

Contenu connexe

Tendances

Javascript : fondamentaux et OOP
Javascript : fondamentaux et OOPJavascript : fondamentaux et OOP
Javascript : fondamentaux et OOP
Jean-Pierre Vincent
 
Audits php
Audits phpAudits php
Audits php
Damien Seguy
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
Hugo Hamon
 
Notions de base de JavaScript
Notions de base de JavaScriptNotions de base de JavaScript
Notions de base de JavaScript
Kristen Le Liboux
 
Sqlalchemy declaratif
Sqlalchemy declaratifSqlalchemy declaratif
Sqlalchemy declaratif
Affinitic
 
Les Streams de Java 8
Les Streams de Java 8Les Streams de Java 8
Les Streams de Java 8
Antoine Rey
 
Softshake 2013 Apiness SA l'envers du décor
Softshake 2013 Apiness SA l'envers du décorSoftshake 2013 Apiness SA l'envers du décor
Softshake 2013 Apiness SA l'envers du décor
michaelmiguel2013
 
Programmation Orientée Objet et les Traits en PHP 5.4
Programmation Orientée Objet et les Traits en PHP 5.4Programmation Orientée Objet et les Traits en PHP 5.4
Programmation Orientée Objet et les Traits en PHP 5.4
halleck45
 
Jquery : les bases
Jquery : les basesJquery : les bases
Jquery : les bases
Voyelle Voyelle
 
Cours php & Mysql - 2éme partie
Cours php & Mysql - 2éme partieCours php & Mysql - 2éme partie
Cours php & Mysql - 2éme partie
kadzaki
 
Quelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application webQuelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application web
5pidou
 
Cours php & Mysql - 4éme partie
Cours php & Mysql - 4éme partieCours php & Mysql - 4éme partie
Cours php & Mysql - 4éme partie
kadzaki
 
Le Tracking sur Internet
Le Tracking sur InternetLe Tracking sur Internet
Le Tracking sur Internet
Fabien Tersoglio
 
Jquery - introduction au langage
Jquery - introduction au langageJquery - introduction au langage
Jquery - introduction au langage
StrasWeb
 
Comprendre les scripts shell auto-extractible
Comprendre les scripts shell auto-extractibleComprendre les scripts shell auto-extractible
Comprendre les scripts shell auto-extractible
Thierry Gayet
 
Découpler votre code pour assurer la réutilisabilité et la maintenabilite ...
Découpler votre code pour assurer la réutilisabilité et la maintenabilite ...Découpler votre code pour assurer la réutilisabilité et la maintenabilite ...
Découpler votre code pour assurer la réutilisabilité et la maintenabilite ...
Fabien Potencier
 
PHP 7 et Symfony 3
PHP 7 et Symfony 3PHP 7 et Symfony 3
PHP 7 et Symfony 3
Eddy RICHARD
 

Tendances (18)

Javascript : fondamentaux et OOP
Javascript : fondamentaux et OOPJavascript : fondamentaux et OOP
Javascript : fondamentaux et OOP
 
Audits php
Audits phpAudits php
Audits php
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
 
Notions de base de JavaScript
Notions de base de JavaScriptNotions de base de JavaScript
Notions de base de JavaScript
 
Sqlalchemy declaratif
Sqlalchemy declaratifSqlalchemy declaratif
Sqlalchemy declaratif
 
Les Streams de Java 8
Les Streams de Java 8Les Streams de Java 8
Les Streams de Java 8
 
Softshake 2013 Apiness SA l'envers du décor
Softshake 2013 Apiness SA l'envers du décorSoftshake 2013 Apiness SA l'envers du décor
Softshake 2013 Apiness SA l'envers du décor
 
Programmation Orientée Objet et les Traits en PHP 5.4
Programmation Orientée Objet et les Traits en PHP 5.4Programmation Orientée Objet et les Traits en PHP 5.4
Programmation Orientée Objet et les Traits en PHP 5.4
 
Jquery : les bases
Jquery : les basesJquery : les bases
Jquery : les bases
 
Cours php & Mysql - 2éme partie
Cours php & Mysql - 2éme partieCours php & Mysql - 2éme partie
Cours php & Mysql - 2éme partie
 
Quelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application webQuelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application web
 
Cours php & Mysql - 4éme partie
Cours php & Mysql - 4éme partieCours php & Mysql - 4éme partie
Cours php & Mysql - 4éme partie
 
22410 b 04
22410 b 0422410 b 04
22410 b 04
 
Le Tracking sur Internet
Le Tracking sur InternetLe Tracking sur Internet
Le Tracking sur Internet
 
Jquery - introduction au langage
Jquery - introduction au langageJquery - introduction au langage
Jquery - introduction au langage
 
Comprendre les scripts shell auto-extractible
Comprendre les scripts shell auto-extractibleComprendre les scripts shell auto-extractible
Comprendre les scripts shell auto-extractible
 
Découpler votre code pour assurer la réutilisabilité et la maintenabilite ...
Découpler votre code pour assurer la réutilisabilité et la maintenabilite ...Découpler votre code pour assurer la réutilisabilité et la maintenabilite ...
Découpler votre code pour assurer la réutilisabilité et la maintenabilite ...
 
PHP 7 et Symfony 3
PHP 7 et Symfony 3PHP 7 et Symfony 3
PHP 7 et Symfony 3
 

En vedette

Solutions Linux 2008 - Poste de travail Linux
Solutions Linux 2008 - Poste de travail LinuxSolutions Linux 2008 - Poste de travail Linux
Solutions Linux 2008 - Poste de travail Linux
Raphaël Semeteys
 
IT Future 2012 - Fujitsu Poste de travail nouvelle génération
IT Future 2012 - Fujitsu Poste de travail nouvelle générationIT Future 2012 - Fujitsu Poste de travail nouvelle génération
IT Future 2012 - Fujitsu Poste de travail nouvelle génération
Fujitsu France
 
Solution Linux 2009 - SVG
Solution Linux 2009 - SVGSolution Linux 2009 - SVG
Solution Linux 2009 - SVG
Raphaël Semeteys
 
Solution Linux 2009 - QSOS
Solution Linux 2009 - QSOSSolution Linux 2009 - QSOS
Solution Linux 2009 - QSOS
Raphaël Semeteys
 
Sécuriser vos accès nomades pour accéder à Exchange et Lync
Sécuriser vos accès nomades pour accéder à Exchange et LyncSécuriser vos accès nomades pour accéder à Exchange et Lync
Sécuriser vos accès nomades pour accéder à Exchange et Lync
Microsoft Technet France
 
Développeurs, cachez-moi ça ! (Paris Web 2011)
Développeurs, cachez-moi ça ! (Paris Web 2011)Développeurs, cachez-moi ça ! (Paris Web 2011)
Développeurs, cachez-moi ça ! (Paris Web 2011)
Hugo Hamon
 
Charles proxy
Charles proxyCharles proxy
Charles proxy
Prénom Nom de famille
 
Retours d'experience de déploiements Windows 7
Retours d'experience de déploiements Windows 7 Retours d'experience de déploiements Windows 7
Retours d'experience de déploiements Windows 7
Microsoft Décideurs IT
 
La boite à outils pour réussir sa migration vers Windows 7
La boite à outils pour réussir sa migration vers Windows 7La boite à outils pour réussir sa migration vers Windows 7
La boite à outils pour réussir sa migration vers Windows 7
Microsoft Technet France
 
Flexible Workstyle: le Poste et les modes de travail réconciliés (mobilité, s...
Flexible Workstyle: le Poste et les modes de travail réconciliés (mobilité, s...Flexible Workstyle: le Poste et les modes de travail réconciliés (mobilité, s...
Flexible Workstyle: le Poste et les modes de travail réconciliés (mobilité, s...
Microsoft Ideas
 
Odoo Formation Administration Serveur V8
Odoo Formation Administration Serveur V8Odoo Formation Administration Serveur V8
Odoo Formation Administration Serveur V8
Africa Performances
 
08 04 mise en place d'un serveur mandataire (proxy)
08 04 mise en place d'un serveur mandataire (proxy)08 04 mise en place d'un serveur mandataire (proxy)
08 04 mise en place d'un serveur mandataire (proxy)
Noël
 
Windows 10: vers la fin des mots de passe ?
Windows 10: vers la fin des mots de passe ?Windows 10: vers la fin des mots de passe ?
Windows 10: vers la fin des mots de passe ?
Microsoft Décideurs IT
 
Audit informatique
Audit informatiqueAudit informatique
Audit informatique
FINALIANCE
 
Squid
SquidSquid
Le Cloud IaaS & PaaS, OpenStack réseau et sécurité
Le Cloud IaaS & PaaS, OpenStack réseau et sécuritéLe Cloud IaaS & PaaS, OpenStack réseau et sécurité
Le Cloud IaaS & PaaS, OpenStack réseau et sécurité
Noureddine BOUYAHIAOUI
 
Introduction à La Sécurité Informatique 2/2
Introduction à La Sécurité Informatique 2/2Introduction à La Sécurité Informatique 2/2
Introduction à La Sécurité Informatique 2/2
Sylvain Maret
 
Sécurité des applications Web
Sécurité des applications WebSécurité des applications Web
Sécurité des applications Web
Sylvain Maret
 

En vedette (20)

Solutions Linux 2008 - Poste de travail Linux
Solutions Linux 2008 - Poste de travail LinuxSolutions Linux 2008 - Poste de travail Linux
Solutions Linux 2008 - Poste de travail Linux
 
IT Future 2012 - Fujitsu Poste de travail nouvelle génération
IT Future 2012 - Fujitsu Poste de travail nouvelle générationIT Future 2012 - Fujitsu Poste de travail nouvelle génération
IT Future 2012 - Fujitsu Poste de travail nouvelle génération
 
Solution Linux 2009 - SVG
Solution Linux 2009 - SVGSolution Linux 2009 - SVG
Solution Linux 2009 - SVG
 
Solution Linux 2009 - QSOS
Solution Linux 2009 - QSOSSolution Linux 2009 - QSOS
Solution Linux 2009 - QSOS
 
Sécuriser vos accès nomades pour accéder à Exchange et Lync
Sécuriser vos accès nomades pour accéder à Exchange et LyncSécuriser vos accès nomades pour accéder à Exchange et Lync
Sécuriser vos accès nomades pour accéder à Exchange et Lync
 
Développeurs, cachez-moi ça ! (Paris Web 2011)
Développeurs, cachez-moi ça ! (Paris Web 2011)Développeurs, cachez-moi ça ! (Paris Web 2011)
Développeurs, cachez-moi ça ! (Paris Web 2011)
 
Squid squid guard
Squid squid guardSquid squid guard
Squid squid guard
 
Charles proxy
Charles proxyCharles proxy
Charles proxy
 
Exposéréseau
ExposéréseauExposéréseau
Exposéréseau
 
Retours d'experience de déploiements Windows 7
Retours d'experience de déploiements Windows 7 Retours d'experience de déploiements Windows 7
Retours d'experience de déploiements Windows 7
 
La boite à outils pour réussir sa migration vers Windows 7
La boite à outils pour réussir sa migration vers Windows 7La boite à outils pour réussir sa migration vers Windows 7
La boite à outils pour réussir sa migration vers Windows 7
 
Flexible Workstyle: le Poste et les modes de travail réconciliés (mobilité, s...
Flexible Workstyle: le Poste et les modes de travail réconciliés (mobilité, s...Flexible Workstyle: le Poste et les modes de travail réconciliés (mobilité, s...
Flexible Workstyle: le Poste et les modes de travail réconciliés (mobilité, s...
 
Odoo Formation Administration Serveur V8
Odoo Formation Administration Serveur V8Odoo Formation Administration Serveur V8
Odoo Formation Administration Serveur V8
 
08 04 mise en place d'un serveur mandataire (proxy)
08 04 mise en place d'un serveur mandataire (proxy)08 04 mise en place d'un serveur mandataire (proxy)
08 04 mise en place d'un serveur mandataire (proxy)
 
Windows 10: vers la fin des mots de passe ?
Windows 10: vers la fin des mots de passe ?Windows 10: vers la fin des mots de passe ?
Windows 10: vers la fin des mots de passe ?
 
Audit informatique
Audit informatiqueAudit informatique
Audit informatique
 
Squid
SquidSquid
Squid
 
Le Cloud IaaS & PaaS, OpenStack réseau et sécurité
Le Cloud IaaS & PaaS, OpenStack réseau et sécuritéLe Cloud IaaS & PaaS, OpenStack réseau et sécurité
Le Cloud IaaS & PaaS, OpenStack réseau et sécurité
 
Introduction à La Sécurité Informatique 2/2
Introduction à La Sécurité Informatique 2/2Introduction à La Sécurité Informatique 2/2
Introduction à La Sécurité Informatique 2/2
 
Sécurité des applications Web
Sécurité des applications WebSécurité des applications Web
Sécurité des applications Web
 

Similaire à Solution Linux 2009 - JavaScript

Marzouk jsp
Marzouk jspMarzouk jsp
Marzouk jsp
abderrahim marzouk
 
Function oop - bonnes pratiques ms tech days
Function   oop - bonnes pratiques ms tech daysFunction   oop - bonnes pratiques ms tech days
Function oop - bonnes pratiques ms tech days
Jean-Pierre Vincent
 
Introduction a jQuery
Introduction a jQueryIntroduction a jQuery
Introduction a jQuery
Clément Delmas
 
nodejs vs vertx
nodejs vs vertxnodejs vs vertx
nodejs vs vertx
Quentin Apruzzese
 
Patterns et bonnes pratiques autour de JavaScript
Patterns et bonnes pratiques autour de JavaScriptPatterns et bonnes pratiques autour de JavaScript
Patterns et bonnes pratiques autour de JavaScript
Microsoft Technet France
 
Services rest & jersey
Services rest & jerseyServices rest & jersey
Services rest & jersey
Mathieu Hicauber
 
OWF12/HTML 5 local storage , olivier thomas, cto at webtyss
OWF12/HTML 5 local storage , olivier thomas, cto at webtyssOWF12/HTML 5 local storage , olivier thomas, cto at webtyss
OWF12/HTML 5 local storage , olivier thomas, cto at webtyss
Paris Open Source Summit
 
Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011
Aurélien Maury
 
NodeJS et SocketIO en mode scalable dans le Cloud - GAB 2015
NodeJS et SocketIO en mode scalable dans le Cloud - GAB 2015NodeJS et SocketIO en mode scalable dans le Cloud - GAB 2015
NodeJS et SocketIO en mode scalable dans le Cloud - GAB 2015
Stéphane ESCANDELL
 
Apprenez le jQuery
Apprenez le jQueryApprenez le jQuery
Ruby STAR
Ruby STARRuby STAR
Ruby STAR
Sebastien Tanguy
 
Vert.x 3
Vert.x 3Vert.x 3
Vert.x 3
Xavier MARIN
 
Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013
Philippe Sfeir
 
Nouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde MicrosoftNouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde Microsoft
davrous
 
Les principes de base de PHP
 Les principes de base de PHP  Les principes de base de PHP
Les principes de base de PHP
EL JAOUARI Ahmed
 
Php cours
Php coursPhp cours
Php cours
funinformatique
 
GWT : under the hood
GWT : under the hoodGWT : under the hood
GWT : under the hood
svuillet
 
Javascript ne se limite pas à jquery
Javascript ne se limite pas à jqueryJavascript ne se limite pas à jquery
Javascript ne se limite pas à jquery
neuros
 
Yammer et nodejs
Yammer et nodejsYammer et nodejs
Yammer et nodejs
Barbar Mitri
 

Similaire à Solution Linux 2009 - JavaScript (20)

Marzouk jsp
Marzouk jspMarzouk jsp
Marzouk jsp
 
Jboss Seam
Jboss SeamJboss Seam
Jboss Seam
 
Function oop - bonnes pratiques ms tech days
Function   oop - bonnes pratiques ms tech daysFunction   oop - bonnes pratiques ms tech days
Function oop - bonnes pratiques ms tech days
 
Introduction a jQuery
Introduction a jQueryIntroduction a jQuery
Introduction a jQuery
 
nodejs vs vertx
nodejs vs vertxnodejs vs vertx
nodejs vs vertx
 
Patterns et bonnes pratiques autour de JavaScript
Patterns et bonnes pratiques autour de JavaScriptPatterns et bonnes pratiques autour de JavaScript
Patterns et bonnes pratiques autour de JavaScript
 
Services rest & jersey
Services rest & jerseyServices rest & jersey
Services rest & jersey
 
OWF12/HTML 5 local storage , olivier thomas, cto at webtyss
OWF12/HTML 5 local storage , olivier thomas, cto at webtyssOWF12/HTML 5 local storage , olivier thomas, cto at webtyss
OWF12/HTML 5 local storage , olivier thomas, cto at webtyss
 
Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011
 
NodeJS et SocketIO en mode scalable dans le Cloud - GAB 2015
NodeJS et SocketIO en mode scalable dans le Cloud - GAB 2015NodeJS et SocketIO en mode scalable dans le Cloud - GAB 2015
NodeJS et SocketIO en mode scalable dans le Cloud - GAB 2015
 
Apprenez le jQuery
Apprenez le jQueryApprenez le jQuery
Apprenez le jQuery
 
Ruby STAR
Ruby STARRuby STAR
Ruby STAR
 
Vert.x 3
Vert.x 3Vert.x 3
Vert.x 3
 
Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013
 
Nouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde MicrosoftNouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde Microsoft
 
Les principes de base de PHP
 Les principes de base de PHP  Les principes de base de PHP
Les principes de base de PHP
 
Php cours
Php coursPhp cours
Php cours
 
GWT : under the hood
GWT : under the hoodGWT : under the hood
GWT : under the hood
 
Javascript ne se limite pas à jquery
Javascript ne se limite pas à jqueryJavascript ne se limite pas à jquery
Javascript ne se limite pas à jquery
 
Yammer et nodejs
Yammer et nodejsYammer et nodejs
Yammer et nodejs
 

Plus de Raphaël Semeteys

AI_dev Europe 2024 - From OpenAI to Opensource AI
AI_dev Europe 2024 - From OpenAI to Opensource AIAI_dev Europe 2024 - From OpenAI to Opensource AI
AI_dev Europe 2024 - From OpenAI to Opensource AI
Raphaël Semeteys
 
TechForum Iberia 2024 - Towards a Redecentralization of the Internet: Explori...
TechForum Iberia 2024 - Towards a Redecentralization of the Internet: Explori...TechForum Iberia 2024 - Towards a Redecentralization of the Internet: Explori...
TechForum Iberia 2024 - Towards a Redecentralization of the Internet: Explori...
Raphaël Semeteys
 
2023 - Between Philosophy and Practice: Introducing Yoga
2023 - Between Philosophy and Practice: Introducing Yoga2023 - Between Philosophy and Practice: Introducing Yoga
2023 - Between Philosophy and Practice: Introducing Yoga
Raphaël Semeteys
 
I LOVE Tech 2024 - Unlocking AI: Navigating Open Source vs. Commercial Frontiers
I LOVE Tech 2024 - Unlocking AI:Navigating Open Source vs. Commercial FrontiersI LOVE Tech 2024 - Unlocking AI:Navigating Open Source vs. Commercial Frontiers
I LOVE Tech 2024 - Unlocking AI: Navigating Open Source vs. Commercial Frontiers
Raphaël Semeteys
 
SOOCon24 - From OpenAI to Opensource AI: Navigating Between Commercial Owners...
SOOCon24 - From OpenAI to Opensource AI: Navigating Between Commercial Owners...SOOCon24 - From OpenAI to Opensource AI: Navigating Between Commercial Owners...
SOOCon24 - From OpenAI to Opensource AI: Navigating Between Commercial Owners...
Raphaël Semeteys
 
OSX 2023 - Vers une re-decentralisation d’Internet : panorama des technos et ...
OSX 2023 - Vers une re-decentralisation d’Internet : panorama des technos et ...OSX 2023 - Vers une re-decentralisation d’Internet : panorama des technos et ...
OSX 2023 - Vers une re-decentralisation d’Internet : panorama des technos et ...
Raphaël Semeteys
 
Web2day 2023 - Internet (re)décentralisé ? Architecture du Web3
Web2day 2023 - Internet (re)décentralisé ? Architecture du Web3Web2day 2023 - Internet (re)décentralisé ? Architecture du Web3
Web2day 2023 - Internet (re)décentralisé ? Architecture du Web3
Raphaël Semeteys
 
Nantes JUG 2023 - Web3
Nantes JUG 2023 - Web3Nantes JUG 2023 - Web3
Nantes JUG 2023 - Web3
Raphaël Semeteys
 
TADx 2023 - 1 plateforme à convevoir, 2 architectes : 3 possibilités ?
TADx 2023 - 1 plateforme à convevoir, 2 architectes : 3 possibilités ?TADx 2023 - 1 plateforme à convevoir, 2 architectes : 3 possibilités ?
TADx 2023 - 1 plateforme à convevoir, 2 architectes : 3 possibilités ?
Raphaël Semeteys
 
SnowcampIO 2023 - 1 plateforme à concevoir + 2 architectes = 3 solutions
SnowcampIO 2023 - 1 plateforme à concevoir + 2 architectes = 3 solutionsSnowcampIO 2023 - 1 plateforme à concevoir + 2 architectes = 3 solutions
SnowcampIO 2023 - 1 plateforme à concevoir + 2 architectes = 3 solutions
Raphaël Semeteys
 
Solutions Linux 2008 - JavaScript
Solutions Linux 2008 - JavaScriptSolutions Linux 2008 - JavaScript
Solutions Linux 2008 - JavaScript
Raphaël Semeteys
 
Solutions Linux 2008 - ECOS
Solutions Linux 2008 - ECOSSolutions Linux 2008 - ECOS
Solutions Linux 2008 - ECOS
Raphaël Semeteys
 
Solutions Linux 2007 - QSOS
Solutions Linux 2007 - QSOSSolutions Linux 2007 - QSOS
Solutions Linux 2007 - QSOS
Raphaël Semeteys
 

Plus de Raphaël Semeteys (13)

AI_dev Europe 2024 - From OpenAI to Opensource AI
AI_dev Europe 2024 - From OpenAI to Opensource AIAI_dev Europe 2024 - From OpenAI to Opensource AI
AI_dev Europe 2024 - From OpenAI to Opensource AI
 
TechForum Iberia 2024 - Towards a Redecentralization of the Internet: Explori...
TechForum Iberia 2024 - Towards a Redecentralization of the Internet: Explori...TechForum Iberia 2024 - Towards a Redecentralization of the Internet: Explori...
TechForum Iberia 2024 - Towards a Redecentralization of the Internet: Explori...
 
2023 - Between Philosophy and Practice: Introducing Yoga
2023 - Between Philosophy and Practice: Introducing Yoga2023 - Between Philosophy and Practice: Introducing Yoga
2023 - Between Philosophy and Practice: Introducing Yoga
 
I LOVE Tech 2024 - Unlocking AI: Navigating Open Source vs. Commercial Frontiers
I LOVE Tech 2024 - Unlocking AI:Navigating Open Source vs. Commercial FrontiersI LOVE Tech 2024 - Unlocking AI:Navigating Open Source vs. Commercial Frontiers
I LOVE Tech 2024 - Unlocking AI: Navigating Open Source vs. Commercial Frontiers
 
SOOCon24 - From OpenAI to Opensource AI: Navigating Between Commercial Owners...
SOOCon24 - From OpenAI to Opensource AI: Navigating Between Commercial Owners...SOOCon24 - From OpenAI to Opensource AI: Navigating Between Commercial Owners...
SOOCon24 - From OpenAI to Opensource AI: Navigating Between Commercial Owners...
 
OSX 2023 - Vers une re-decentralisation d’Internet : panorama des technos et ...
OSX 2023 - Vers une re-decentralisation d’Internet : panorama des technos et ...OSX 2023 - Vers une re-decentralisation d’Internet : panorama des technos et ...
OSX 2023 - Vers une re-decentralisation d’Internet : panorama des technos et ...
 
Web2day 2023 - Internet (re)décentralisé ? Architecture du Web3
Web2day 2023 - Internet (re)décentralisé ? Architecture du Web3Web2day 2023 - Internet (re)décentralisé ? Architecture du Web3
Web2day 2023 - Internet (re)décentralisé ? Architecture du Web3
 
Nantes JUG 2023 - Web3
Nantes JUG 2023 - Web3Nantes JUG 2023 - Web3
Nantes JUG 2023 - Web3
 
TADx 2023 - 1 plateforme à convevoir, 2 architectes : 3 possibilités ?
TADx 2023 - 1 plateforme à convevoir, 2 architectes : 3 possibilités ?TADx 2023 - 1 plateforme à convevoir, 2 architectes : 3 possibilités ?
TADx 2023 - 1 plateforme à convevoir, 2 architectes : 3 possibilités ?
 
SnowcampIO 2023 - 1 plateforme à concevoir + 2 architectes = 3 solutions
SnowcampIO 2023 - 1 plateforme à concevoir + 2 architectes = 3 solutionsSnowcampIO 2023 - 1 plateforme à concevoir + 2 architectes = 3 solutions
SnowcampIO 2023 - 1 plateforme à concevoir + 2 architectes = 3 solutions
 
Solutions Linux 2008 - JavaScript
Solutions Linux 2008 - JavaScriptSolutions Linux 2008 - JavaScript
Solutions Linux 2008 - JavaScript
 
Solutions Linux 2008 - ECOS
Solutions Linux 2008 - ECOSSolutions Linux 2008 - ECOS
Solutions Linux 2008 - ECOS
 
Solutions Linux 2007 - QSOS
Solutions Linux 2007 - QSOSSolutions Linux 2007 - QSOS
Solutions Linux 2007 - QSOS
 

Solution Linux 2009 - JavaScript

  • 1. JavaScript côté serveur et en mode déconnecté Solutions Linux 2009 Raphaël SEMETEYS raphael.semeteys@atososrigin.com 31/03/2009 Atos, Atos et le poisson, Atos Origin et le poisson, Atos Consulting ainsi que le poisson seul sont des marques déposées d'Atos Origin SA. © 2009 Atos Origin. Document exclusivement réservé à usage commercial. Tout ou partie de ce document ne peut être copié, modifié, diffusé ou annoté sans accord écrit d'Atos Origin ou du client.
  • 2. Sommaire » JavaScript coté serveur » Gestion du mode déconnecté 2
  • 3. Architectures Web traditionnelles » Rupture technologique entre le client et le serveur » Développements spécifiques autour de XHR et coté serveur » Pas de mode déconnecté 3
  • 4. Serveur Ajax » Aptana Jaxer (http://www.aptana.com/jaxer) » Code AJAX exécuté avant que la page ne soit retournée au navigateur Web » Proxy functions pour appeler directement des fonctions serveur à partir du client 4
  • 5. Composition » GPL » API Jaxer : » Jaxer.DB (SQLite, MySQL) » Jaxer.SMTP, Jaxer.NetworkUtils, Jaxer.Socket » Jaxer.File, Jaxer.Dir et Jaxer.DirUtils » Jaxer.System, Jaxer.Process, Jaxer.Thread » Jaxer.Request, Jaxer.Response » Chargement de farmeworks externes 5
  • 6. Utilisation basique de Jaxer (1/3) » Exemple : gestion basique de liste en base de données » Code coté serveur : runat="server" Code exécuté par Jaxer Option : runat="both" <script runat="server"> Jaxer.DB.execute("CREATE TABLE IF NOT EXISTS maliste (id INTEGER PRIMARY KEY AUTO_INCREMENT, name TEXT)"); function save(name) { Jaxer.DB.execute("INSERT INTO maliste (name) VALUES (?)", name); } save.proxy = true; function suppr(id) { Jaxer.DB.execute("DELETE FROM maliste WHERE id=(?)", id); Jaxer.*() } suppr.proxy = true; Appels d'API Jaxer Ici : base SQLite embarquée function supprTous() { Jaxer.DB.execute("DELETE FROM maliste"); } supprTous.proxy = true; function getList() { getList.proxy = true; return Jaxer.DB.execute("SELECT * FROM maliste"); } Déclaration d'une proxy function getList.proxy = true; </script> 6
  • 7. Utilisation basique de Jaxer (2/3) » Code coté client : getList.async(showResult); <script> function $(id) { return document.getElementById(id); } Appel asynchrone de la Proxy function function showList() { getList.async(showResult); } function showResult(resultset) { var results = new Array; resultset.rowsAsArrays.forEach(function(row) { results.push(new Array(row[0], row[1])); Démonstration }); var html; if (results.length) { html = "<ul>"; for (i=0; i<results.length; i++) { html += "<li>" + results[i][1] + " <span onclick='suppr(" + results[i][0] + "); showList();'>[Suppr]</span>" + "</li>"; } html += "</ul>"; } else html = "<br/>Liste vide..."; $("liste").innerHTML = html; } Démonstration showList(); si KO : demo.sh </script> 7
  • 8. Utilisation basique de Jaxer (3/3) » Page envoyée au navigateur (view clientFramework_compressed.js source) : Partie cliente de Jaxer <html><head> <script type="text/javascript" src="/jaxer/framework/clientFramework_compressed.jsversion=1.0.3.4547"></script> <script type="text/javascript"> Jaxer.Callback.pageSignature = 351955322; Jaxer.Callback.pageName = 'localhost:8081/solinux/index.html'; Jaxer.Callback.callingPage = 'http://localhost:8081/solinux/index.html'; Jaxer.CALLBACK_URI = '/jaxer-callback'; Jaxer.ALERT_CALLBACK_ERRORS = false; </script> Jaxer.Callback.* <title>Ma liste</title> </head><body> <h3>Ma Liste</h3> Données pour le callback <input id="name" type="text"/> <input value="Ajouter" onclick="save($('name').value); showList();" type="button"/> <div id="liste"/> <script> eval(Jaxer.Callback.createProxies(['save', 'suppr', 'deleteAll', 'getList'])); </script> <script> function $(id) { return document.getElementById(id); } function showList() { getList.async(showResult); } eval(Jaxer.Callback.createProxies(..)) [...] </script> </body></html> Création des proxies 8
  • 9. Google Gears » Mode déconnecté : stockage local de pages statiques et de données (SQLite) » Améliorer les navigateurs en attendant HTML 5 9
  • 10. Utilisation basique de Gears (1/2) » Modification du code client » Initialisation de Gears : <script type="text/javascript" src="gears_init.js"></script> » Initialisation de l'application : var local = false; var db = google.gears.factory.create("beta.database"); db.open("maliste"); db.execute( "CREATE TABLE IF NOT EXISTS maliste (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT)" ); var localServer = google.gears.factory.create('beta.localserver'); var store = localServer.createStore("maliste"); store.enabled = false; store.capture(["gears.html"], null); » Ajout de traitements locaux : function dispatchSave(name) { (local)?saveLocal(name):save(name); } function saveLocal(name) { db.execute("INSERT INTO maliste (name) VALUES ("" + name + "")" ); } 10
  • 11. Utilisation basique de Gears (2/2) » Modification du code client (suite) » Ajout d'un bouton : <input type="button" value="Mode" onclick="doSync();"/><span id="mode"> : online</span> » Gestion de la synchronisation : function doSync() { if (local) { save(...) supprTous(); var resultset = getListLocal(); while (resultset.isValidRow()) { Déconnexion save(resultset.field(1)); Appels distants (proxy function) resultset.next(); } local = false; $("mode").textContent = " : online"; store.enabled = false; } else { db.execute("DELETE FROM maliste"); saveLocal(...) var resultset = getList(); resultset.rowsAsArrays.forEach( function(row) { Reconnexion } saveLocal(row[1]); Appels locaux (Gears) ); local = true; $("mode").textContent = " : offline"; store.enabled = true; } } Démonstration si KO : demo.sh 11
  • 12. Conclusion » Il est possible d'enrichir les applications Web » En respectant les standards - HTML/DOM/CSS - ECMAScript » En utilisant des produits libres - Coté serveur : Aptana Jaxer - Coté client : Google Gears » En unifiant les langages et frameworks de programmation » Points d'attention » Les callbacks ou le mode déconnecté remettent en cause la logique applicative » C'est un peu « cuting edge », mais est-ce plus risqué que de tuer HTML 5 ? 12

Notes de l'éditeur

  1. Lien : http://localhost:8081/solinux/demo/ &apos;/home/raph/Documents/Atos Origin/OSC/Communication/Events/Solutions Linux 2009/Développeurs/demo.sh&apos;
  2. Lien : http://localhost:8081/solinux/demo/gears.html &apos;/home/raph/Documents/Atos Origin/OSC/Communication/Events/Solutions Linux 2009/Développeurs/demo.sh&apos;