Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Drupal comme vous ne l’avez jamais vu

Drupal comme vous ne l’avez jamais vu

Drupal et de manière générale PHP sont souvent utilisés dans un écosystème limité. Nous proposons de défricher avec vous de multiples modèles d’intégration permettant d’accélérer les développements tout en améliorant les performances et l'industrialisation, ainsi que d’apporter de nouveaux usages (moteurs à facettes, temps réel, graphiques, stockage documentaire).

Du prototype fonctionnel jusqu’à son industrialisation, l’intégration judicieuse avec des briques externes peut résoudre simplement des tâches complexes. Cette présentation montrera comment, par des actes concrets, on peut tirer partie de briques techniques tierces depuis PHP. La session s'appuiera sur des retours d'expérience et des exemples de cas réels.

Simon Perdrisat

June 06, 2012
Tweet

More Decks by Simon Perdrisat

Other Decks in Programming

Transcript

  1. Drupal comme vous ne
    l’avez jamais vu

    View Slide

  2. Bastien Jaillot (bastnic) – JoliCode
    Simon Perdrisat (gagarine) - cloud33

    View Slide

  3. Évolution des usages

    View Slide

  4. View Slide

  5. ...rendre les projets Drupal plus excitant

    View Slide

  6. ...rendre les projets Drupal plus excitant
    PHP

    View Slide

  7. ...rendre les projets web plus excitant

    View Slide

  8. Libre
    Hautement configurable (multiples variantes)
    Multilingue
    Multi-sites
    Hautement intégrable
    Projet pilote – Open Gouvernement dans la
    francophonie

    View Slide

  9. http://www.le-couteau-suisse.com/exclusivites-wenger/wenger-giant-knife-p-352.html

    View Slide

  10. Quel outils choisir ??!

    View Slide

  11. View Slide

  12. PHP !!!
    Fiable, répandu, mature*
    Connu au seins des administrations
    * En version 8.2
    le choix Drupal

    View Slide

  13. — There is a module for that —

    View Slide

  14. Une API complète pour des modules basé sur
    PHP/MySQL.
    Écrire son module

    View Slide

  15. ... il faut coder puis maintenir
    http://www.jedessine.com/c_6565/coloriage/coloriage-
    fetes/coloriage-halloween/coloriage-momie-
    halloween/coloriage-d-une-momie

    View Slide

  16. ?

    View Slide

  17. A nice duct tape fix
    Making a
    square fit into
    a round hole.
    Credit: NASA

    View Slide

  18. Ne pas utiliser (que) Drupal

    View Slide

  19. Améliorer le
    développement de thème
    Chapitre 1/6

    View Slide

  20. Rendu d'un champs (field)*
    * nous vous épargnons le rendu de la page complète.

    View Slide

  21. View Slide

  22. m t h e r s h i p – séparation couche drupal

    View Slide

  23. m t h e r s h i p – Sémantique (HTML5)
    VS

    View Slide

  24. m t h e r s h i p – Sémantique (HTML5)
    VS

    View Slide

  25. m o t h e r s h i p – Sémantique (HTML5)
    VS
    Indigestion de class
    Éléments HTML5

    View Slide

  26. View Slide

  27. m o t h e r s h i p
    Libère votre thème de l'HTML/CSS spécifique à
    Drupal pour une normalisation du code.

    View Slide

  28. Utiliser des composants standards

    View Slide

  29. View Slide

  30. Notre design !

    View Slide

  31. Hum...

    View Slide

  32. twitter.github.com

    View Slide

  33. View Slide

  34. Less.css – The One dynamic stylesheet language

    View Slide

  35. réglages de bootstr
    Désactiver les
    composants non
    utilisé
    mixins
    import composant

    View Slide

  36. m o t h e r s h i p + bootstrap + less
    --- love ---

    View Slide

  37. Utiliser des composants
    PHP externes PSR-0 FTW
    Chapitre 2/6

    View Slide

  38. Ryan Weaver, dec. 2011
    « Lack of sharing means
    duplicated efforts »
    http://www.slideshare.net/weaverryan/a-php-christmas-miracle-3-frameworks-1-app

    View Slide

  39. PSR – PHP Standard Reference
    PSR-0 : accord sur une “norme” d'autoloading
    Symfony2, Zend Framework 2, Lithium, PEAR, Drupal, eZ,
    CakePHP, Doctrine, Propel, Composer, Agavi, Joomla,
    phpBB, … like this.

    View Slide

  40. PSR-0 : deux possibilités
    namespaces
    class : Symfony\Component\HttpFoundation\Request
    path : vendor/src/Symfony/Component/HttpFoundation/Request.
    php
    underscores
    class : Twig_Extension_Core
    path : vendor/twig/lib/Twig/Extension/Core.php

    View Slide

  41. View Slide

  42. Composants PHP standalones
    Serializer – Guzzle –
    autoloader – twig – Imagine –
    Gaufrette – Exporter – Buzz –
    PHPParser – Symfony2
    Components – Zend Framework 2
    components - Lythium
    components – Mink – Behat –
    Goutte …

    View Slide

  43. Drupal 8 – PSR-0 ready
    Empruntés à Symfony2
    HttpKernel, HttpFoundation (Request et Response objects),
    EventDispatcher (remplace avangeteusement les hook),
    ClassLoader, Yaml, DependencyInjection
    Et bientôt : Routing, Session,…
    http://www.garfieldtech.com/blog/wscci-kernel-merge

    View Slide

  44. module Drupal – Composants externes
    $ cat README.txt
    INSTALLATION
    ============
    1) Install behat on your machine following these instructions:
    http://docs.behat.org/quick_intro.html#installation
    2) Copy file "behat.yml" and directory "features" to
    site root directory.
    3) Customize the path to "behat/bootstrap" in behat.yml
    if the behat module isn't located at "sites/all/modules/behat"
    4) Set $base_url in settings.php if your site is not
    accessible at http://localhost/
    (otherwise drupalPost() won't work)

    View Slide

  45. autoloading ??!
    dépendance ?
    version ??
    mise à jour ?

    View Slide

  46. Installation (comme un pro)
    PEAR – PHP Extension and Application
    Repository ?

    View Slide

  47. So 2005!
    w.st-guilhem-le-desert.fr/legendes_diable_pauvre_paysan-p129.htm

    View Slide

  48. Git Submodule ?
    Phar ?

    View Slide

  49. So 2011!

    View Slide

  50. Composer !
    Gestionnaire de dépendance
    Installeur / autoloader
    http://getcomposer.org
    http://packagist.org

    View Slide

  51. Composer.json
    {
    "require": {
    "php": ">=5.3.0",
    "behat/mink": "1.4.0",
    "behat/mink-goutte-driver": "dev-master"
    }
    }
    So easy!

    View Slide

  52. $ curl http://getcomposer.org/installer | php
    $ php composer.phar install
    Installing dependencies
    - Installing symfony/event-dispatcher (dev-master)
    Cloning d9ef2afd0218415a8c04ea48a2c83bb5b8f0f51c
    - Installing behat/mink-goutte-driver(dev-master)
    Cloning a9dbd268659d19eabcc8285ca4622b232f55aa91
    […]
    symfony/http-kernel suggests installing symfony/event-dispatcher (dev-
    master)
    symfony/http-kernel suggests installing behat/mink-goutte-driver(dev-master)
    […]
    Writing lock file
    Generating autoload files

    View Slide

  53. Bam!

    View Slide

  54. Be lazy
    $ drush dl composer # once
    $ drush composer install
    https://drupal.org/project/composer

    View Slide

  55. $ cat minktest.module
    /**
    * Implements hook_init()
    */
    function minktest_init() {
    // the autoloader file is generated by composer
    require(__DIR__ . '/vendor/autoload.php');
    }
    /**
    * Non useful function
    */
    function minktest_toto() {
    $mink = new Behat\Mink\Mink();
    $driver = new \Behat\Mink\Driver\GoutteDriver();
    // […]
    }

    View Slide

  56. Dénormalisation
    de données
    Chapitre 3/6

    View Slide

  57. Les “fields” dans Drupal
    - gestion de révisions
    - multilangue
    - cardinalité
    - valeurs par défaut
    - validation
    - …
    … Mais la lecture en masse est coûteuse

    View Slide

  58. Stocker vos calculs
    Stocker des données pré-calculées
    Gain de performance !
    Portabilité des données
    Utilisable directement sans repasser par
    Drupal

    View Slide

  59. Alternatives de stockage
    NoSQL
    Cassandra
    CouchDB
    MongoDB
    Indexation des données
    solr
    elasticsearch
    xapian
    sphynx
    Cache : redis, memcache

    View Slide

  60. View Slide

  61. // Connect
    $mongo = new Mongo();
    // Créer / Sélectionner la DB
    $db = $mongo->testDB;
    // Créer / Sélectionner la collection (=table)
    $collection = $db->nodes;
    // Charger un node
    $node = (array)node_load($nid);
    // Stocker dans MongoDB
    $collection->save($node);
    PHP
    Insertion

    View Slide

  62. // Connection
    $mongo = new Mongo();
    // Filtre sur le nid
    $filter = array(
    'nid' => 3,
    );
    // Run! mongo->DB->collection->
    $res = $mongo->testDB>nodes->find($filter);
    // Print
    print $res[0]['title'];
    PHP
    Requête

    View Slide

  63. Shell mongoDB
    > use testDB;
    > db.nodes.find( {nid: 3} , {title: true});
    { "_id" : ObjectId("5430304500"), "title" : "Mon
    titre" }

    View Slide

  64. Intégration – Drupal
    drupal.org/project/mongodb

    View Slide

  65. Search API

    View Slide

  66. Entity
    Metadata
    Search API
    Solr MongoDB
    bdd, sphynx,
    elasticsearch
    xapian, ...
    Views
    Node
    Utilisateur
    Fields
    Fichier
    Données
    indexers
    Drupal +
    Search API

    View Slide

  67. Entity
    Metadata
    Search API
    Solr MongoDB
    bdd, sphynx,
    elasticsearch
    xapian, ...
    Views
    Node
    Utilisateur
    Fields
    Fichier
    Données
    indexers
    Node.js
    Python

    View Slide

  68. Search API c'est encore !
    Multiples indexes
    Altération des données
    Jointures à la création
    Interface graphique
    Extensible

    View Slide

  69. Temps réel
    Chapitre 4/6

    View Slide

  70. Requête HTTP
    timeout(500)
    Drupal (Full bootstrap)
    Client
    Server
    Réponse HTTP

    View Slide

  71. Requête HTTP
    timeout(500ms)
    node.js + mongo
    Client
    Server
    Réponse HTTP

    View Slide

  72. HTTP c'est lent

    View Slide

  73. socket.io

    View Slide

  74. http://www.websocket.org/quantum.html

    View Slide

  75. http://www.websocket.org/quantum.html
    WooT!

    View Slide

  76. // Client (index.html)

    <br/>var socket = io.connect('http://localhost');<br/>socket.on('news', function (data) {<br/>console.log(data);<br/>socket.emit('my other event', { my: 'data' });<br/>});<br/>
    // Server (app.js)
    io.sockets.on('connection', function (socket) {
    socket.emit('news', { hello: 'world' });
    socket.on('my other event', function (data) {
    console.log(data);
    });
    });

    View Slide

  77. Requête HTTP
    client1
    Drupal
    Client
    Server
    Réponse HTTP
    node.js
    client2
    client2 ...
    Socket!
    Broadcast

    View Slide

  78. Drupal – intégration node.js

    View Slide

  79. Tests
    Chapitre 5/6

    View Slide

  80. n'évoluera plus
    lenteur
    Test fonctionnel utilise un client HTTP
    "propriétaire" (open source mais utilisé nul part ailleurs)
    Drupal utilise SimpleTest (patché)

    View Slide

  81. SimpleTest est uniquement maintenu
    PHPUnit
    Atoum

    View Slide

  82. Briques supérieures
    - Mink : navigateur sous forme de driver
    selenium, sahi, goutte
    - Behat : BDD (Behavior driven development)
    - Atoum

    View Slide

  83. View Slide

  84. Monitoring applicatif /
    statistiques
    Chapitre 6/100*
    * courage, plus que 94 chapitres

    View Slide

  85. Collecte de données / graphes
    Le module statistics est une catastrophe
    Alternatives :
    - graphite / statsd (by Etsy/Flickr)
    - new relic (SaaS)
    - cacti

    View Slide

  86. Métriques ?
    - état serveur (mémoire, cpu, etc.)
    - nombre d'utilisateurs (connectés / déconnectés)
    - temps de génération de page
    - nombre de requêtes sql
    - ratio page en cache / page non en cache
    - nombre de scripts css / js généré
    Il devient très facile d'en ajouter, donc on se
    retrouve à en avoir beaucoup et c'est BIEN.

    View Slide

  87. Code PHP
    applicatif
    Serveur StatsD
    agrège et envoi
    Graphite stocke
    Graphite
    visualise les
    métriques
    UDP

    View Slide

  88. function etsy_statsd_shutdown_real() {
    // time page
    $time = timer_read('page');
    StatsD::timing("drupal.page.totaltime.ogos",
    $time);
    // query count
    $queries = Database::getLog('etsy_statsd',
    'default');
    StatsD::updateStats("drupal.mysql.querycount.
    ogos", count($queries));
    }

    View Slide

  89. View Slide

  90. Crédits : 20minutes.fr

    View Slide

  91. Miam !!

    View Slide

  92. À vous de jouer !

    View Slide

  93. Gestionnaire de queue : zeromq, rabbitmq
    Outil de mailing : intégration avec un mailer
    (mailchimp)
    Interface offline : Services + backbone.js
    ...
    Pistes à explorer

    View Slide

  94. Cas concret – projet Drupal
    qa.drupal.org travisci
    drush composant sf2 Console
    drush make composer
    stack git github
    registry PSR-0
    Concentrer les efforts sur la valeur
    ajoutée du projet
    construire le meilleur CMS au monde

    View Slide

  95. Drupal 8 est prêt dans
    2 ans (on est pessimiste réaliste)
    Pourquoi attendre ?

    View Slide

  96. Réutiliser le travail des autres, contribuer,
    partager – travailler moins mieux

    View Slide

  97. https://joind.in/talk/view/6455
    Questions ?

    View Slide

  98. ● Ryan Weaver (KNP Labs USA)
    “A PHP Christmas Miracle - 3 Frameworks, 1 app”
    http://www.slideshare.net/weaverryan/a-php-christmas-
    miracle-3-frameworks-1-app
    ● Matthieu Guillermin et Nicolas Chambrier
    “Mettez du temps réel dans votre Drupal avec
    NodeJS”
    http://lyon2012.drupalcamp.fr/fr/mettez-du-temps-r-el-
    dans-votre-drupal-avec-node-js
    ● Larry Garfield – “The Kernel has landed”
    http://www.garfieldtech.com/blog/wscci-kernel-merge
    Sources

    View Slide

  99. Sources / Pour aller plus loin
    ● Kenny Dits – “Performances php chez M6Web”
    http://www.slideshare.net/kennydee/performances-php-
    chez-m6web
    ● Morten dk
    “HTML 4S – while we are waiting for the revolution”
    https://dl.dropbox.com/u/51287/2012-drupalcon-denver-
    html4s.pdf
    ● Timothée Peignier – “Un site web mobile en Django”
    https://speakerdeck.com/u/tim/p/un-site-web-mobile-en-
    django

    View Slide

  100. Sources / Pour aller plus loin
    ● Shashikant Jagtap – « ATDD with Behat and Selenium »
    http://www.slideshare.net/Shashikant86/atdd-with-behat-
    and-selenium-ldnse6
    ● Jean-Marc Fontaine
    « La gestion des dépendances dans un projet PHP »
    http://www.slideshare.net/JMF/gestion-des-dpendances-
    dans-un-projet-php-forum-php-2012

    View Slide