Nouveautés Drupal 8 expliquées aux Chefs de Projets et DSI, lors de Drupagora, par Léon Cros.

1. Drupagora
Drupal 8
Léon Cros @chipway
5 décembre 2013

2. Léon Cros
> Communauté
> VP
ADFF
> Chipway
Drupal

3. Chipway : Spécialiste
Formations Drupal 6, 7, … d'initiation à avancé
> Chefs de projet Drupal
> Développeurs
> Webmasters et administrateurs
> Designers et intégrateurs, ...
> Audit
et Conseil
> Accompagnement/Coaching
> Développement

4. Drupal CMS & CMF reconnu
.
.
.
4

5. Qui êtes-vous ?
> Chef de projet ?
> DSI ou RSI ?
> Développeur ?
> Site builder ou intégrateur ?
> Administrateur système, réseaux, DevOp ?
> Autre côté technique ?
> Non technicien ?

6. Vous et Drupal ?
> Qui travaille avec Drupal ?
> Qui travaille avec Symfony 2 ?
> Qui découvre Drupal ?

7. Nouveautés Drupal 8 Core

8. Enjeux pour les Chefs de projet et DSI
Satisfaction client
> Périmètre
> Contraintes techniques
> Qualité
> Gestion du changement
> Délais
> Budget

9. Un grand
Pas avec
Drupal 8 !

10. Développer
un site sans
Programmer ?

11. Développer
un site sans
programmer
?
> Core
facile à installer
> Complet (prêt à utiliser)
> Dans ma langue / mes langues
> Facile à utiliser

12. Halte au cliqueur fou !
Un projet reste un Projet
> Faisabilité
> Conception
> Ressources
> Planification
> Suivi
> Bonnes pratiques

13. Drupal plus simple
En français
Tout de suite !

14. Drupal plus simple
Options plus
explicites !

15. Drupal plus simple
Traductions
Immédiatement
disponibles !

16. Drupal plus simple

17. Approche Drupal : Contenus → … D7
Page Web
Affichage des blocs générés
Requêtes et Mise en forme des résultats
Structures de contenus

18. Approche Drupal : Contenus → D8
Page Web
Services web
Affichage des blocs générés
Requêtes et Mise en forme des résultats
Structures de contenus

19. Structurer : Nouveaux champs
> Entity reference
> Date
> Lien
> E-mail
> Téléphone
> Photo
User picture → champ

20. Structurer : Nouveautés Field UI
> Modes d'affichage (vue, formulaire...)
> CRUD amélioré
> Validation séparée du formulaire (s2 validator)
> Aide dans le champ (placeholder, blur)
> Cardinalité sur mesure
> Préfixe de champ
> Multiples téléversements (uploads)

21. Structurer : Nouveautés Field UI
> Field API entièrement réécrit
> Entités « fieldables » → « extensibles »
> Champ non partagé entre types d'entités
• stockage / type d'entité
• même nom dans types d'entité <>
> Accès simplifié aux champs
• ex: $node->field_foo->value

22. Requête & Affichage : Views
Qui ne connait pas Views ?
> Requête sur tous types d'entités
> Filtres
> Tris
> Contextes
> Affichages : Listes ..., grilles, slideshows
menus, ...

23. Requête & Affichage : Views
> Dans le Core
> Drupal 8 immédiatement utilisable
> Page d'accueil
> Administration des contenus, utilisateurs
> Gestion des fichiers
> Responsive web
> + sortie → services web

24. Page web : Affichage en Blocs
Tout est BLOC
> Simplification
> Multiples instances
> Entités extensibles
> Révisions
> Support ESI
> IHM Admin. Amélioré
> Contexte

25. Moteur de Template

26. TWIG
> Connu, documenté
> Moins de templates / « Blocs Twig »
> Facile
> Plus Sécurisé que PHPTemplate
> Extensible
> Très rapide
> Bonne intégration IDEs
> Utilisé ailleurs : python, Ruby, ...

27. Parlez-vous TWIG ?
> Template, ex de nom : node.html.twig
> Commentaires avec variables disponibles
> Imprimer une variable : {{ title }}
> Plus compliqué : {{ content.field.image }}
> Commentaire {# @todo ... my comment here #}
> Test
{% if title %}
<h3>{{{ title }}</h3>
{% endif %}
> Plus fort: partie personnalisée par autre template
{% block toto %}
que la partie différente !

28. Gestion des Assets CSS et JS en D8
Assetic
> Librairie Symfony2
> Assets
> Filters
> AssetBag
> (thème D7 : Sasson v3)

29. Drupal Mobile : Comment ?
> Web Services
> HTML 5
> Responsive Design
> Administration Mobile

30. Performance Front-end
> Javascript
> Jquery 2.0 + chargé si besoin
> CSS avec SMACSS
•Scalable and Modular Architecture for CSS
> Images adaptatives
> Assetic (CSS, JS)

31. Drupal 8 plus facile : Editeur
> CKEditor 4
(non exclusif)
> Utilisable dès l'installation du Core
> Intégration complète / formats de texte
> Téléversement d'image intégré
> Légende
> Intégré avec module breakpoint
> Edition inline (quick edit)

32. Editeur de Texte

33. Editeur de Texte

34. Editeur de Texte

35. Editeur de Texte
Bouton image + téléverser

36. Editeur directe
Quick edit

37. Editeur directe
Quick
edit

38. Multilingue ?
I speak
english !
Je parle
français !
.
Drupagora 2013
38

39. Multilingue ?
I speak
english !
Je parle
français !
Se habla
espanol !
.
Я говорю на
русском !
Drupagora 2013
39

40. Drupal 8 : Multilingue
> Choix dès l'installation
> Affectation à tout et tous types d'entités
> Traduire en anglais ;)
> Nouvel interface + simple
> Suivi traductions Personnalisées
> MAJ ← localize.drupal.org
« complet dès le Cœur »

41. Services Web : REST
> Inter-machines
> Modules REST + Serialization + HAL
> Formats de base JSON ou XML
> Méthodes HTTP : POST, GET, PATCH, DELETE
> Types de média json : json, hal+json
> URIs : GET /node/1, GET /entity/node/1
> Link Relations
> Richardson Maturity Model : niveau 2
> Profite du nouvel Entity API, de Views
> Accès / Cookies + token
> ← Serialize <> Normalize →
> Extensible

42. Déploiement des Configurations
Sans CMI

43. Déploiement des Configurations
Configuration : <> contenu
> Paramètres
> Types de contenus
> Champs
> Vues
> Styles d'mages
> Permissions, Rôles
> ...

44. Déploiement des Configurations
Configuration stockée en fichiers
> Paramètres
> Modifs via l'interface admin
écrites directement dans fichier yml
> Format populaire YAML
> Facile à lire et « écrire »
> Entités de configuration

45. Configurations : Active <> Staging

46. Nouvelle règle d'or
« Ne hackez jamais le core ! …
ou Dries tue un chaton»
« Ne hackez pas votre configuration active ! » *
* Alex Pott, Core committer and CMI maintainer

47. Révolution POO
Il est temps
de passer
vraiment à
la POO !
This guy killed Procedural
Programming in Drupal

48. Révolution POO
PHP
Objet
Procédural
Librairie PHP ?

49. Composants Symfony
Pourquoi Symfony2 ?
« Nouvelle » approche :
Fièrement trouvé ailleurs

50. Composants Symfony2 utilisés
> HttpFoundation
> HttpKernel
> Injection de dépendances
> Event dispatcher
> Routage
> Serializer
> Validator
> Yaml
Utilise ≠ Application Symfony2

51. Autres améliorations
> PHPUnit accélère les tests
> Module Tour (mieux que help)
> Support ESI/CSI/SSI p. cache
> Amélioration API fichiers/médias
> Dossier Core/
> Plugins (← hooks)
> Entity API dans Core + amélioré
> Objets Formulaires
> Migration

52. Synthèse
Principales
Améliorations Drupal 8
par profil

53. Intégrateurs / Assembleurs
> Utilisation de Schema.org (RDF)
> Services web REST
> Blocs
> Editeurs
> Gestion des changements de configuration
> UUID
> Tour (help)

54. Designers / Thémeurs
> Twig
> Backbone.js
> Assetic
> Javascript accessibility Features
> Jquery 2.0
> CSS Coding Standards
> Responsive Web Design
> HTML5
> drupal_add_css, drupal_add_js,
drupal_set_title, drupal_set_breadcrumb

55. Développeurs / Codeurs
> POO
> Composants Symfony2
> Symfony CMF
> Doctrine annotations
> Composer
> Namespaces & PSR-0 → 4
> Services Symfony

56. Développeurs / Codeurs
> YAML
> PHPUnit (simpletest out en D9)
> Nouvelles librairies externes
> Guzzle (drupal_http_request)
> EasyRDF (parsing RDF)
> Zend_Feed (Feeds)

57. Chefs de projet et DSI
Satisfaction client
> Périmètre (utilisable tout de suite, services web)
> Contraintes techniques (plus adaptable)
> Qualité (s2, POO, PHPUnit, ...)
> Gestion du changement (complète et pro)
> Délais (plus simple, complet, rapide)
> Budget (baisse du point d'entrée, + simple, + Devs,
+ pérenne)

58. Synthèse Drupal 8 - Core
> Mobile / Responsive
> Editeur disponible dès l'installation
> Multilingue
> Séparation Configuration / Contenu
> Theming plus facile/ouvert
> Tout est Bloc
> Services web dans le Core
> Cycle développement → Production géré
> Et OOP !

59. Conclusion : Drupal 8 c'est PLUS
> Harmonisé / simplifié / mieux intégré
> Modernisé / Etat de l'art Dev PHP
> Généralisé (multi-terminaux, services...)
> Localisé (langues, traductions)
> Professionnalisé et Ouvert aux nouveaux
> Sécurisé
> « Accéléré »
> Plus facile à Adopter

60. Planning Drupal 8
Gel du
Code
Début
Développement
10 Mar 2011
5 Jan 2011
Drupal
7.0
1 Juil 2013
17 Fév 2013
Gel des
Fonctionnalités
S2 2014 ?
Drupal
8.0

61. Remerciements
Slides :
Drupal :
●
Dries
Angela “webchick” Byron
●
Contributeurs
●
Kristof De Jaeger
●
Communauté
●
Jen Lampton
●
Dries Buytaert
Déjà > 1800 contributeurs !
●
Gábor Hojtsy
●
Larry Garfield
●
Jingsheng Wang
●
Christopher Skene
●
Boris Gordon
●

62. Merci de votre attention
Questions ?
Vos retours sur #drupagora
@chipway
lcros@chipway.com
Slides sur :
http://fr.slideshare.net/chipway/Conference-Drupal-8-Drupagora2013

63. Drupal 8 + difficile : Développer
●
Programmation orientée Objet (POO)
●
Symfony2
●
Plus difficile ? Ou plus simple ?
●
Déconstruire & reconstruire ?
.
Drupagora 2013
63
63

64. Gestion des Assets CSS et JS
Drupal 7 :
> Fichier .info du thème
> Hook_library_info
> #attached
> drupal_add_css(), drupal_add_js()
Inconvénients :
> jQuery.js lourd
> Caching opaque

65. Elements form. HTML5
$form['telephone'] = array(
'#type' => 'tel',
'#title' => t('Phone'),
);
$form['website'] = array(
'#type' => 'url',
'#title' => t('Website'),
);
$form['email'] = array(
'#type' => 'email',
'#title' => t('Email'),
); $form['tickets'] = array(
'#type' => 'number',
'#title' => t('Tickets required'),
);

66. Editeur directe
Quick edit

67. Ex : search.settings.yml
active_modules:
- node
- user
and_or_limit: '7'
default_module: node
index:
cron_limit: '100'
overlap_cjk: '1'
minimum_word_size: '3'
tag_weights:
h1: '25'
h2: '18'
H3: '15'

68. Active <> Staging
.

69. Editeur directe
Quick
edit