Drupal comme vous ne l’avez jamais vu

by Simon Perdrisat

Slide 1

Slide 1 text

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Évolution des usages

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

...rendre les projets Drupal plus excitant

Slide 6

Slide 6 text

...rendre les projets Drupal plus excitant PHP

Slide 7

Slide 7 text

...rendre les projets web plus excitant

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Quel outils choisir ??!

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

— There is a module for that —

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Ne pas utiliser (que) Drupal

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

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.

Slide 28

Slide 28 text

Utiliser des composants standards

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

Notre design !

Slide 31

Slide 31 text

Hum...

Slide 32

Slide 32 text

twitter.github.com

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

Less.css – The One dynamic stylesheet language

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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.

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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)

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Git Submodule ? Phar ?

Slide 49

Slide 49 text

So 2011!

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

$ 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

Slide 53

Slide 53 text

Bam!

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

$ 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(); // […] }

Slide 56

Slide 56 text

Dénormalisation de données Chapitre 3/6

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

// 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

Slide 62

Slide 62 text

// 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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

Search API

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

Temps réel Chapitre 4/6

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

HTTP c'est lent

Slide 73

Slide 73 text

socket.io

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

Drupal – intégration node.js

Slide 79

Slide 79 text

Tests Chapitre 5/6

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

SimpleTest est uniquement maintenu PHPUnit Atoum

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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.

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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)); }

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

Crédits : 20minutes.fr

Slide 91

Slide 91 text

Miam !!

Slide 92

Slide 92 text

À vous de jouer !

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

● 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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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