SlideShare une entreprise Scribd logo
1  sur  48
Télécharger pour lire hors ligne
Rich Desktop Applications
  PHP Québec 2008 – Montréal, Canada



          Raphaël Rougeron
     http://www.raphael-rougeron.com
           goldoraf@gmail.com
e-tef, la version électronique du
      Test d'Evaluation de Français
    Test des compétences en compréhension et
●


    expression en français général
    Exigé dans certains cas par Citoyenneté et
●


    Immigration Canada (CIC)
    Lancement de la version électronique en mars
●


    2005
    De nombreux challenges dans sa mise au
●


    point !
Architecture e-tef

                             Serveur
                            d'examens



Client Flash + Zinc                         SI
                                           TEF



                            Site web
                              e-tef
Dans quels cas utiliser une solution
            type RDA ?
    Gestion de médias lourds (audio/vidéo)
●



    Besoin d'une capacité de déconnexion et/ou
●


    d'accéder au système de fichiers local
    Besoin d'une UI plus riche (ex : traitements
●


    graphiques, cartographie, etc...)
    Plus d'efficacité pour l'utilisateur :
●


        moins de distractions
    –

        interface plus productive
    –

        moins de temps d'attente ?
    –
Rich Desktop Applications :
            (tentative de) définition
    Applications client / serveur
●


        fortement connectées (web services)
    –

        mais tirant partie des ressources locales
    –

    Cross-platform (+ ou -)
●



    Déployables par HTTP
●


        installation initiale d'un CLR
    –

        déploiement et mises à jour faciles
    –
RIA                   RDA


Librairies AJAX   Google Gears


XUL + CSS + JS       Prism          XulRunner


  Flash/Flex                        Adobe AIR


  Silverlight                      .NET (WPF)


 Applets Java                     Java Web Start
Les plateformes les plus accessibles aux talents
    des développeurs web (et les plus cross-
      platform) : Adobe AIR et XulRunner
Adobe AIR
    Windows / Mac OS X (bientôt Linux)
●



    Flash + Actionscript ou Flex + Actionscript ou HTML + CSS +
●


    Javascript
    Moteur WebKit
●



    Support audio / vidéo / PDF
●



    IDE : Aptana, Flex Builder
●



    Runtime commun à toutes les applications
●



    Installation et mise à jour des applications
●



    Signature d'applications
●



    Propriétaire...
●
Pourquoi AIR peut séduire les
          développeurs Ajax...
    Mêmes compétences requises
●



    Frameworks JS directement exploitables
●


    (jQuery, extjs, dojo, ...)
    Réutilisation du code
●



    Prototypage rapide
●



    Intégration OS via une API JS
●
Hello world – part 1
application.xml
<?xml version=quot;1.0quot; encoding=quot;utf-8quot; standalone=quot;noquot;?>
<application
xmlns=quot;http://ns.adobe.com/air/application/1.0.M5quot;
appId=quot;demoquot; version=quot;1.0quot;>
    <name>Démo</name>
    <title/>
    <description/>
    <copyright/>
    <initialWindow>
        <title/>
        <content>demo.html</content>
        <systemChrome>standard</systemChrome>
        <transparent>false</transparent>
        <visible>true</visible>
    </initialWindow>
</application>
Hello world – part 2

demo.html
<html>
    <head>
        <script type=quot;text/javascriptquot;
src=quot;AIRAliases.jsquot;></script>
    </head>
    <body>
        <h1>Hello world</h1>
    </body>
</html>
Réutilisation de
   code ?
  mmmm...
Adobe AIR : API Javascript
     Windows et Chrome                       SQLLite
●                                        ●



     Système de fichiers                     Monitoring de
●                                        ●


                                             connexion
     Drag n' Drop
●


                                             Requêtes HTTP
                                         ●
     Copier/coller
●

                                             (classe URLRequest)
    var file = new air.File();
    file.addEventListener(air.Event.SELECT, dirSelected);
    file.browseForDirectory();
    function dirSelected(event) {
         alert(file.nativePath);
    }
Adobe AIR
Adobe AIR
Adobe AIR
Adobe AIR
Adobe AIR
Adobe AIR
XulRunner
    Plateforme de développement d'applis XUL
●



    Version stable : 1.8.4 (-> Firefox 1.5)
●



    Windows, Mac, Linux
●



    Moteur Gecko
●



    XUL + CSS + Javascript
●



    IDE : XulBooster (plugin Eclipse)
●



    Open Source
●
XUL
    XML-based User interface Language
●



    Ensemble de balises correspondant à des éléments
●


    d'interface graphique :
        Contrôles de formulaires
    ●



        Grilles, arbres
    ●



        Barres de menus
    ●



        Barres d'outils
    ●



 Démo : XUL périodic table
●


http://www.hevanet.com/acorbin/xul/top.xul
Hello world – part 1
application.ini


[App]
Vendor=R2
Name=demo
Version=0.1
BuildID=20070330
Copyright=Nonsense
ID=xxx

[Gecko]
MinVersion=1.8.1
MaxVersion=1.9
Hello World : part 2
/chrome/content/start.xul

<?xml version=quot;1.0quot;?>
<?xml-stylesheet href=quot;chrome://global/skin/quot; type=quot;text/cssquot;?>
<?xml-stylesheet href=quot;chrome://project/skin/main.cssquot;
type=quot;text/cssquot; title=quot;Skinquot;?>

<!DOCTYPE window SYSTEM quot;chrome://project/locale/start.dtdquot;>

<window
   title=quot;&window.title;quot;
   xmlns:html=quot;http://www.w3.org/1999/xhtmlquot;

xmlns=quot;http://www.mozilla.org/keymaster/gatekeeper/there.is.only.x
ulquot;
    style=quot;width:900px;height:700px;margin:0px;padding:0px;quot;
        onload=quot;Application.init();quot;>

   <h1>Hello World !</h1>


</window>
XulRunner : quoi d'autre ?
    Localisation facile
●



    XBL : définition de composants d'interface
●


    réutilisables
    XPCOM : création de composants métiers
●


    réutilisables en JS, C, C++, Python
    API JS :
●


        Manipulation d'images
    –

        Système de fichiers
    –

        Drag n' Drop, clipboard
    –

        SQLLite dans la version 1.9
    –
XulRunner


var nsIFilePicker = Components.interfaces.nsIFilePicker;
var fp = Components.classes[quot;@mozilla.org/filepicker;1quot;]
                   .createInstance(nsIFilePicker);
fp.init(window, __(quot;chooseDir.filepicker.titlequot;),
nsIFilePicker.modeGetFolder);
if (fp.show() == nsIFilePicker.returnOK) {
   this.prefs.setComplexValue(quot;project.userDirquot;,
        Components.interfaces.nsILocalFile, fp.file);
   this.userDir = fp.file;
   this.start();
}
XulRunner
XulRunner
XulRunner
XulRunner
XulRunner
RDA : recommandations

    Indicateurs d'activité ! (loading...)
●



    Raccourcis-clavier, surtout les basiques (tab,
●


    enter, ...)
    Implémenter le copier/coller
●


    (et le drag n' drop)
    Survol des boutons
●



    Adopter le look & feel des applis desktop
●
AIR vs. XULRunner
Relations client - serveur
Support des Web Services

          AIR::Flex       AIR::Ajax   XulRunner
XML-RPC   + (non-natif)   -           +
SOAP      ++              -           ++
REST      +++             +++         +++
REST en résumé
    Utilisation du plein potentiel de HTTP
●



    Ressources et URIs
●



    GET, POST, PUT, DELETE, HEAD, OPTIONS
●



    Codes d'état : 200 OK, 201 Created, 400 Bad
●


    Request, etc...
    Représentations des ressources : XML, JSON,
●


    Atom, RSS, ical, CSV...
Penser ressources plutôt qu'actions
    GET      /posts
    POST     /posts/add
    GET      /post/get/123
    POST     /posts/update/123
    POST     /posts/delete/123

                  vs

    GET      /posts
    POST     /posts
    GET      /posts/123
    PUT      /posts/123
    DELETE   /posts/123
REST et PHP
    Difficile de trouver des outils RESTful en PHP !
●



    ZF : Zend_Rest_Server n'est pas RESTful...
●



    Symfony, CakePHP, CodeIgniter : pas de réel
●


    support, même si cela reste possible de
    l'implémenter soi-même
    2 frameworks RESTful : Konstruct et Tonic,
●


    mais encore bien jeunes...
    Faut tout faire soi-même ;)
●


    http://www.stato-framework.org
The Rails way : contrôleurs RESTful
$router = new My_Controller_Router_Rewrite();
$router->addResource('bookmarks', new
My_Controller_Router_Resource(
    '/users/:username/bookmarks', array('controller' =>
'bookmarks',)
));
return $router;


http://monservice.com/users/raf/bookmarks/xxx.js
                                -> retourne JSON
http://monservice.com/users/raf/bookmarks/xxx.xml
                                -> retourne XML
http://monservice.com/users/raf/bookmarks/xxx
                                -> retourne HTML
class BookmarksController extends My_Controller_Action
{
    // GET /users/raf/bookmarks
    public function indexAction() {...}

     // GET /users/raf/bookmarks/add
     public function addAction() {...}

     // GET /users/raf/bookmarks/edit
     public function editAction() {...}

     // POST /users/raf/bookmarks
     public function doPostAction() {...}

     // GET /user/raf/bookmarks/xxx
     public function doGetAction() {...}

     // PUT /user/raf/bookmarks/xxx
     public function doPutAction() {...}

     // DELETE /user/raf/bookmarks/xxx
     public function doDeleteAction() {...}
}

?>
Mais attention :
class BookmarksController extends My_Controller_Action
{
    // GET /user/raf/bookmarks/xxx
    public function getAction()
    {
        $this->view->bookmark
            = Bookmarks::find($this->__getParam('id'));

        switch ($this->getRequest()->getFormat())
        {
            case 'xml':
                $this->renderXml(
                  $this->view->bookmark->toXml()
                );
                break;
            case 'atom':
                ...
                break;
        }
    }
}
Mais attention :
class BookmarksController extends My_Controller_Action
{
    // GET /user/raf/bookmarks/xxx
    public function getAction()
    {
        $this->view->bookmark
            = Bookmarks::find($this->__getParam('id'));

        switch ($this->getRequest()->getFormat())
        {
            case 'xml':
                $this->renderXml(
                  $this->view->bookmark->toXml()
                );
                break;
            case 'atom':
                             Les contrôleurs peuvent
                ...
                break;
                             devenir lourds !!!
        }
    }
}
Responsabilités des contrôleurs
    Création d'objets associés (multiples INSERTs) ?
●



    Validation des paramètres ?
●



    Transactions ?
●



    Envoi de mail, notifications ?
●




Est-ce vraiment le rôle des contrôleurs ?
Couche Services Ressources
class Bookmarks extends SResource
{
    public function get() {...}

        public function post() {...}

        public function put() {...}

        public function delete() {...}
}

      Possibilité d'offrir des points d'entrée SOAP, XML-RPC et REST
    ●


      <methodName>bookmarks.put</methodName>
      Utilisation de l'API de Réflexion :
    ●

       ● Typage et validation des paramètres (type hinting)

       ● Génération automatique des fichiers WSDL et WADL
RADAR (Dave Thomas)
Rest Application, Dumb-Ass Recipient

                  Serveur
                   REST




                             Serveur
                            de pages




   Client Riche                 Browser
Ressources




                      Controller


                                        View




                  Dispatcher




Client riche                       Navigateur
Des questions ?
Use the Force of Javascript, Luke

Contenu connexe

Tendances

Presentation Spring, Spring MVC
Presentation Spring, Spring MVCPresentation Spring, Spring MVC
Presentation Spring, Spring MVC
Nathaniel Richand
 
Presentation JEE et son écossystéme
Presentation JEE et son écossystémePresentation JEE et son écossystéme
Presentation JEE et son écossystéme
Algeria JUG
 
Architecture java j2 ee a partager
Architecture java j2 ee a partagerArchitecture java j2 ee a partager
Architecture java j2 ee a partager
aliagadir
 
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Gregory Renard
 
Symfony2 & l'architecture Rest
Symfony2 & l'architecture Rest Symfony2 & l'architecture Rest
Symfony2 & l'architecture Rest
Ahmed Ghali
 
Introductions Aux Servlets
Introductions Aux ServletsIntroductions Aux Servlets
Introductions Aux Servlets
François Charoy
 

Tendances (20)

Cours JSP
Cours JSPCours JSP
Cours JSP
 
Presentation Spring, Spring MVC
Presentation Spring, Spring MVCPresentation Spring, Spring MVC
Presentation Spring, Spring MVC
 
Introduction à Symfony2
Introduction à Symfony2Introduction à Symfony2
Introduction à Symfony2
 
Formation Play! framework
Formation Play! frameworkFormation Play! framework
Formation Play! framework
 
Support JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.YoussfiSupport JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.Youssfi
 
Cours jee 1
Cours jee 1Cours jee 1
Cours jee 1
 
Presentation JEE et son écossystéme
Presentation JEE et son écossystémePresentation JEE et son écossystéme
Presentation JEE et son écossystéme
 
Architecture java j2 ee a partager
Architecture java j2 ee a partagerArchitecture java j2 ee a partager
Architecture java j2 ee a partager
 
Jsp
JspJsp
Jsp
 
Conference drupal-8-drupagora2013
Conference drupal-8-drupagora2013Conference drupal-8-drupagora2013
Conference drupal-8-drupagora2013
 
Spring 3.0
Spring 3.0Spring 3.0
Spring 3.0
 
Présentation de JavaServer Faces
Présentation de JavaServer FacesPrésentation de JavaServer Faces
Présentation de JavaServer Faces
 
JBoss - chapitre JMX
JBoss - chapitre JMXJBoss - chapitre JMX
JBoss - chapitre JMX
 
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
 
Symfony with angular.pptx
Symfony with angular.pptxSymfony with angular.pptx
Symfony with angular.pptx
 
Déploiement d'applications Java EE
Déploiement d'applications Java EEDéploiement d'applications Java EE
Déploiement d'applications Java EE
 
Apache ANT
Apache ANTApache ANT
Apache ANT
 
Symfony2 & l'architecture Rest
Symfony2 & l'architecture Rest Symfony2 & l'architecture Rest
Symfony2 & l'architecture Rest
 
Spring boot anane maryem ben aziza syrine
Spring boot anane maryem ben aziza syrineSpring boot anane maryem ben aziza syrine
Spring boot anane maryem ben aziza syrine
 
Introductions Aux Servlets
Introductions Aux ServletsIntroductions Aux Servlets
Introductions Aux Servlets
 

En vedette

Sophos company-profile-cpna
Sophos company-profile-cpnaSophos company-profile-cpna
Sophos company-profile-cpna
aveiganeto
 
智慧型行動裝置安全管控解決方案
智慧型行動裝置安全管控解決方案智慧型行動裝置安全管控解決方案
智慧型行動裝置安全管控解決方案
OFMKT
 
Endpoint Protection
Endpoint ProtectionEndpoint Protection
Endpoint Protection
Sophos
 
Presentation pfe 2012
Presentation pfe 2012Presentation pfe 2012
Presentation pfe 2012
Sellami Ahmed
 
PFE : ITIL - Gestion de parc informatique
PFE : ITIL - Gestion de parc informatiquePFE : ITIL - Gestion de parc informatique
PFE : ITIL - Gestion de parc informatique
chammem
 
Presentation pfe
Presentation pfePresentation pfe
Presentation pfe
zinebcher
 

En vedette (20)

Sophos company-profile-cpna
Sophos company-profile-cpnaSophos company-profile-cpna
Sophos company-profile-cpna
 
智慧型行動裝置安全管控解決方案
智慧型行動裝置安全管控解決方案智慧型行動裝置安全管控解決方案
智慧型行動裝置安全管控解決方案
 
Sophos Mobile Control - Product Overview
Sophos Mobile Control - Product OverviewSophos Mobile Control - Product Overview
Sophos Mobile Control - Product Overview
 
Mobile Application Development Using Java
Mobile Application Development Using JavaMobile Application Development Using Java
Mobile Application Development Using Java
 
Café technologique Sécurité et Gestion des mobiles pour l'entreprise
Café technologique Sécurité et Gestion des mobiles pour l'entrepriseCafé technologique Sécurité et Gestion des mobiles pour l'entreprise
Café technologique Sécurité et Gestion des mobiles pour l'entreprise
 
Présentation de la plateforme MonPFE
Présentation de la plateforme MonPFEPrésentation de la plateforme MonPFE
Présentation de la plateforme MonPFE
 
Complete Solution for JavaFX Development - NexSoftSys
Complete Solution for JavaFX Development - NexSoftSysComplete Solution for JavaFX Development - NexSoftSys
Complete Solution for JavaFX Development - NexSoftSys
 
JavaFX 2 Rich Desktop Platform
JavaFX 2 Rich Desktop PlatformJavaFX 2 Rich Desktop Platform
JavaFX 2 Rich Desktop Platform
 
Sophos 2010
Sophos 2010 Sophos 2010
Sophos 2010
 
Endpoint Security Evasion
Endpoint Security EvasionEndpoint Security Evasion
Endpoint Security Evasion
 
Developing cross platform desktop application with Ruby
Developing cross platform desktop application with RubyDeveloping cross platform desktop application with Ruby
Developing cross platform desktop application with Ruby
 
Top Tactics For Endpoint Security
Top Tactics For Endpoint SecurityTop Tactics For Endpoint Security
Top Tactics For Endpoint Security
 
CyberséCurité Et Vie PrivéE
CyberséCurité Et Vie PrivéECyberséCurité Et Vie PrivéE
CyberséCurité Et Vie PrivéE
 
Endpoint Protection
Endpoint ProtectionEndpoint Protection
Endpoint Protection
 
Juniper Networks Router Architecture
Juniper Networks Router ArchitectureJuniper Networks Router Architecture
Juniper Networks Router Architecture
 
Presentation pfe 2012
Presentation pfe 2012Presentation pfe 2012
Presentation pfe 2012
 
Gestion des Projets des Fin d'etudes ( Version Alpha )
Gestion des Projets des Fin d'etudes ( Version Alpha )Gestion des Projets des Fin d'etudes ( Version Alpha )
Gestion des Projets des Fin d'etudes ( Version Alpha )
 
Plateforme de gestion des projets de fin d'études
Plateforme de gestion des projets de fin d'étudesPlateforme de gestion des projets de fin d'études
Plateforme de gestion des projets de fin d'études
 
PFE : ITIL - Gestion de parc informatique
PFE : ITIL - Gestion de parc informatiquePFE : ITIL - Gestion de parc informatique
PFE : ITIL - Gestion de parc informatique
 
Presentation pfe
Presentation pfePresentation pfe
Presentation pfe
 

Similaire à Rich Desktop Applications

Réu technodejs
Réu technodejsRéu technodejs
Réu technodejs
naholyr
 
Play framework - Human Talks Grenoble - 12.02.2013
Play framework - Human Talks Grenoble - 12.02.2013Play framework - Human Talks Grenoble - 12.02.2013
Play framework - Human Talks Grenoble - 12.02.2013
Xavier NOPRE
 
Client riche et nouvelles technologies
Client riche et nouvelles technologiesClient riche et nouvelles technologies
Client riche et nouvelles technologies
Sébastien Letélié
 
Communications Réseaux et HTTP avec PHP
Communications Réseaux et HTTP avec PHPCommunications Réseaux et HTTP avec PHP
Communications Réseaux et HTTP avec PHP
julien pauli
 
WebSphere Portal & Rich Internet Applications
WebSphere Portal & Rich Internet ApplicationsWebSphere Portal & Rich Internet Applications
WebSphere Portal & Rich Internet Applications
Vincent Perrin
 
Asp Au Service Des Mv Ps
Asp Au Service Des Mv PsAsp Au Service Des Mv Ps
Asp Au Service Des Mv Ps
Gregory Renard
 

Similaire à Rich Desktop Applications (20)

La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
 
Silverlight 3.MSDays EPITA 11/06/2009
Silverlight 3.MSDays EPITA 11/06/2009Silverlight 3.MSDays EPITA 11/06/2009
Silverlight 3.MSDays EPITA 11/06/2009
 
Google Web Toolkit 1.5 Presentation Web Creative Common
Google Web Toolkit 1.5 Presentation Web Creative CommonGoogle Web Toolkit 1.5 Presentation Web Creative Common
Google Web Toolkit 1.5 Presentation Web Creative Common
 
Flex, une techno RIA incontournable pour les futures app web ?
Flex, une techno RIA incontournable pour les futures app web ?Flex, une techno RIA incontournable pour les futures app web ?
Flex, une techno RIA incontournable pour les futures app web ?
 
HTML5 en projet
HTML5 en projetHTML5 en projet
HTML5 en projet
 
iTunes Stats
iTunes StatsiTunes Stats
iTunes Stats
 
Paris Web
Paris WebParis Web
Paris Web
 
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINEIntroduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
Réu technodejs
Réu technodejsRéu technodejs
Réu technodejs
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
 
ACRA - Présentation PAUG Avril 2011
ACRA - Présentation PAUG Avril 2011ACRA - Présentation PAUG Avril 2011
ACRA - Présentation PAUG Avril 2011
 
Play framework - Human Talks Grenoble - 12.02.2013
Play framework - Human Talks Grenoble - 12.02.2013Play framework - Human Talks Grenoble - 12.02.2013
Play framework - Human Talks Grenoble - 12.02.2013
 
Client riche et nouvelles technologies
Client riche et nouvelles technologiesClient riche et nouvelles technologies
Client riche et nouvelles technologies
 
Resource Oriented Architecture
Resource Oriented ArchitectureResource Oriented Architecture
Resource Oriented Architecture
 
Communications Réseaux et HTTP avec PHP
Communications Réseaux et HTTP avec PHPCommunications Réseaux et HTTP avec PHP
Communications Réseaux et HTTP avec PHP
 
Compte rendu Blend Web Mix 2015
Compte rendu Blend Web Mix 2015Compte rendu Blend Web Mix 2015
Compte rendu Blend Web Mix 2015
 
WebSphere Portal & Rich Internet Applications
WebSphere Portal & Rich Internet ApplicationsWebSphere Portal & Rich Internet Applications
WebSphere Portal & Rich Internet Applications
 
Asp Au Service Des Mv Ps
Asp Au Service Des Mv PsAsp Au Service Des Mv Ps
Asp Au Service Des Mv Ps
 

Plus de goldoraf (7)

jQuery sans jQuery
jQuery sans jQueryjQuery sans jQuery
jQuery sans jQuery
 
Tester son JS, c'est possible !
Tester son JS, c'est possible !Tester son JS, c'est possible !
Tester son JS, c'est possible !
 
Ember.js
Ember.jsEmber.js
Ember.js
 
Html5 : stockage local & synchronisation
Html5 : stockage local & synchronisationHtml5 : stockage local & synchronisation
Html5 : stockage local & synchronisation
 
Services web RESTful
Services web RESTfulServices web RESTful
Services web RESTful
 
Git ou le renouveau du contrôle de version
Git ou le renouveau du contrôle de versionGit ou le renouveau du contrôle de version
Git ou le renouveau du contrôle de version
 
Forum PHP 2007 - Methodes Agiles
Forum PHP 2007 - Methodes AgilesForum PHP 2007 - Methodes Agiles
Forum PHP 2007 - Methodes Agiles
 

Rich Desktop Applications

  • 1. Rich Desktop Applications PHP Québec 2008 – Montréal, Canada Raphaël Rougeron http://www.raphael-rougeron.com goldoraf@gmail.com
  • 2. e-tef, la version électronique du Test d'Evaluation de Français Test des compétences en compréhension et ● expression en français général Exigé dans certains cas par Citoyenneté et ● Immigration Canada (CIC) Lancement de la version électronique en mars ● 2005 De nombreux challenges dans sa mise au ● point !
  • 3. Architecture e-tef Serveur d'examens Client Flash + Zinc SI TEF Site web e-tef
  • 4. Dans quels cas utiliser une solution type RDA ? Gestion de médias lourds (audio/vidéo) ● Besoin d'une capacité de déconnexion et/ou ● d'accéder au système de fichiers local Besoin d'une UI plus riche (ex : traitements ● graphiques, cartographie, etc...) Plus d'efficacité pour l'utilisateur : ● moins de distractions – interface plus productive – moins de temps d'attente ? –
  • 5. Rich Desktop Applications : (tentative de) définition Applications client / serveur ● fortement connectées (web services) – mais tirant partie des ressources locales – Cross-platform (+ ou -) ● Déployables par HTTP ● installation initiale d'un CLR – déploiement et mises à jour faciles –
  • 6. RIA RDA Librairies AJAX Google Gears XUL + CSS + JS Prism XulRunner Flash/Flex Adobe AIR Silverlight .NET (WPF) Applets Java Java Web Start
  • 7. Les plateformes les plus accessibles aux talents des développeurs web (et les plus cross- platform) : Adobe AIR et XulRunner
  • 8. Adobe AIR Windows / Mac OS X (bientôt Linux) ● Flash + Actionscript ou Flex + Actionscript ou HTML + CSS + ● Javascript Moteur WebKit ● Support audio / vidéo / PDF ● IDE : Aptana, Flex Builder ● Runtime commun à toutes les applications ● Installation et mise à jour des applications ● Signature d'applications ● Propriétaire... ●
  • 9. Pourquoi AIR peut séduire les développeurs Ajax... Mêmes compétences requises ● Frameworks JS directement exploitables ● (jQuery, extjs, dojo, ...) Réutilisation du code ● Prototypage rapide ● Intégration OS via une API JS ●
  • 10. Hello world – part 1 application.xml <?xml version=quot;1.0quot; encoding=quot;utf-8quot; standalone=quot;noquot;?> <application xmlns=quot;http://ns.adobe.com/air/application/1.0.M5quot; appId=quot;demoquot; version=quot;1.0quot;> <name>Démo</name> <title/> <description/> <copyright/> <initialWindow> <title/> <content>demo.html</content> <systemChrome>standard</systemChrome> <transparent>false</transparent> <visible>true</visible> </initialWindow> </application>
  • 11. Hello world – part 2 demo.html <html> <head> <script type=quot;text/javascriptquot; src=quot;AIRAliases.jsquot;></script> </head> <body> <h1>Hello world</h1> </body> </html>
  • 12.
  • 13. Réutilisation de code ? mmmm...
  • 14. Adobe AIR : API Javascript Windows et Chrome SQLLite ● ● Système de fichiers Monitoring de ● ● connexion Drag n' Drop ● Requêtes HTTP ● Copier/coller ● (classe URLRequest) var file = new air.File(); file.addEventListener(air.Event.SELECT, dirSelected); file.browseForDirectory(); function dirSelected(event) { alert(file.nativePath); }
  • 21. XulRunner Plateforme de développement d'applis XUL ● Version stable : 1.8.4 (-> Firefox 1.5) ● Windows, Mac, Linux ● Moteur Gecko ● XUL + CSS + Javascript ● IDE : XulBooster (plugin Eclipse) ● Open Source ●
  • 22. XUL XML-based User interface Language ● Ensemble de balises correspondant à des éléments ● d'interface graphique : Contrôles de formulaires ● Grilles, arbres ● Barres de menus ● Barres d'outils ● Démo : XUL périodic table ● http://www.hevanet.com/acorbin/xul/top.xul
  • 23. Hello world – part 1 application.ini [App] Vendor=R2 Name=demo Version=0.1 BuildID=20070330 Copyright=Nonsense ID=xxx [Gecko] MinVersion=1.8.1 MaxVersion=1.9
  • 24. Hello World : part 2 /chrome/content/start.xul <?xml version=quot;1.0quot;?> <?xml-stylesheet href=quot;chrome://global/skin/quot; type=quot;text/cssquot;?> <?xml-stylesheet href=quot;chrome://project/skin/main.cssquot; type=quot;text/cssquot; title=quot;Skinquot;?> <!DOCTYPE window SYSTEM quot;chrome://project/locale/start.dtdquot;> <window title=quot;&window.title;quot; xmlns:html=quot;http://www.w3.org/1999/xhtmlquot; xmlns=quot;http://www.mozilla.org/keymaster/gatekeeper/there.is.only.x ulquot; style=quot;width:900px;height:700px;margin:0px;padding:0px;quot; onload=quot;Application.init();quot;> <h1>Hello World !</h1> </window>
  • 25. XulRunner : quoi d'autre ? Localisation facile ● XBL : définition de composants d'interface ● réutilisables XPCOM : création de composants métiers ● réutilisables en JS, C, C++, Python API JS : ● Manipulation d'images – Système de fichiers – Drag n' Drop, clipboard – SQLLite dans la version 1.9 –
  • 26. XulRunner var nsIFilePicker = Components.interfaces.nsIFilePicker; var fp = Components.classes[quot;@mozilla.org/filepicker;1quot;] .createInstance(nsIFilePicker); fp.init(window, __(quot;chooseDir.filepicker.titlequot;), nsIFilePicker.modeGetFolder); if (fp.show() == nsIFilePicker.returnOK) { this.prefs.setComplexValue(quot;project.userDirquot;, Components.interfaces.nsILocalFile, fp.file); this.userDir = fp.file; this.start(); }
  • 32. RDA : recommandations Indicateurs d'activité ! (loading...) ● Raccourcis-clavier, surtout les basiques (tab, ● enter, ...) Implémenter le copier/coller ● (et le drag n' drop) Survol des boutons ● Adopter le look & feel des applis desktop ●
  • 35. Support des Web Services AIR::Flex AIR::Ajax XulRunner XML-RPC + (non-natif) - + SOAP ++ - ++ REST +++ +++ +++
  • 36. REST en résumé Utilisation du plein potentiel de HTTP ● Ressources et URIs ● GET, POST, PUT, DELETE, HEAD, OPTIONS ● Codes d'état : 200 OK, 201 Created, 400 Bad ● Request, etc... Représentations des ressources : XML, JSON, ● Atom, RSS, ical, CSV...
  • 37. Penser ressources plutôt qu'actions GET /posts POST /posts/add GET /post/get/123 POST /posts/update/123 POST /posts/delete/123 vs GET /posts POST /posts GET /posts/123 PUT /posts/123 DELETE /posts/123
  • 38. REST et PHP Difficile de trouver des outils RESTful en PHP ! ● ZF : Zend_Rest_Server n'est pas RESTful... ● Symfony, CakePHP, CodeIgniter : pas de réel ● support, même si cela reste possible de l'implémenter soi-même 2 frameworks RESTful : Konstruct et Tonic, ● mais encore bien jeunes... Faut tout faire soi-même ;) ● http://www.stato-framework.org
  • 39. The Rails way : contrôleurs RESTful $router = new My_Controller_Router_Rewrite(); $router->addResource('bookmarks', new My_Controller_Router_Resource( '/users/:username/bookmarks', array('controller' => 'bookmarks',) )); return $router; http://monservice.com/users/raf/bookmarks/xxx.js -> retourne JSON http://monservice.com/users/raf/bookmarks/xxx.xml -> retourne XML http://monservice.com/users/raf/bookmarks/xxx -> retourne HTML
  • 40. class BookmarksController extends My_Controller_Action { // GET /users/raf/bookmarks public function indexAction() {...} // GET /users/raf/bookmarks/add public function addAction() {...} // GET /users/raf/bookmarks/edit public function editAction() {...} // POST /users/raf/bookmarks public function doPostAction() {...} // GET /user/raf/bookmarks/xxx public function doGetAction() {...} // PUT /user/raf/bookmarks/xxx public function doPutAction() {...} // DELETE /user/raf/bookmarks/xxx public function doDeleteAction() {...} } ?>
  • 41. Mais attention : class BookmarksController extends My_Controller_Action { // GET /user/raf/bookmarks/xxx public function getAction() { $this->view->bookmark = Bookmarks::find($this->__getParam('id')); switch ($this->getRequest()->getFormat()) { case 'xml': $this->renderXml( $this->view->bookmark->toXml() ); break; case 'atom': ... break; } } }
  • 42. Mais attention : class BookmarksController extends My_Controller_Action { // GET /user/raf/bookmarks/xxx public function getAction() { $this->view->bookmark = Bookmarks::find($this->__getParam('id')); switch ($this->getRequest()->getFormat()) { case 'xml': $this->renderXml( $this->view->bookmark->toXml() ); break; case 'atom': Les contrôleurs peuvent ... break; devenir lourds !!! } } }
  • 43. Responsabilités des contrôleurs Création d'objets associés (multiples INSERTs) ? ● Validation des paramètres ? ● Transactions ? ● Envoi de mail, notifications ? ● Est-ce vraiment le rôle des contrôleurs ?
  • 44. Couche Services Ressources class Bookmarks extends SResource { public function get() {...} public function post() {...} public function put() {...} public function delete() {...} } Possibilité d'offrir des points d'entrée SOAP, XML-RPC et REST ● <methodName>bookmarks.put</methodName> Utilisation de l'API de Réflexion : ● ● Typage et validation des paramètres (type hinting) ● Génération automatique des fichiers WSDL et WADL
  • 45. RADAR (Dave Thomas) Rest Application, Dumb-Ass Recipient Serveur REST Serveur de pages Client Riche Browser
  • 46. Ressources Controller View Dispatcher Client riche Navigateur
  • 48. Use the Force of Javascript, Luke