L’expérience développeur dans Drupal 8 : améliorons-la !

Slide 1

Slide 1 text

Thomas Calvet - fancyweb L’expérience développeur dans Drupal 8 Drupalcamp Paris 2019 Améliorons-la !

Slide 2

Slide 2 text

DevelopereXperience 2 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la !

Slide 3

Slide 3 text

Developer experience 3 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● Kind of the same concept than the User eXperience applied to development ● The user is the developer ● But we are more demanding ● And the scope is larger

Slide 4

Slide 4 text

Drupal DX has even more aspects 4 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● Several developer profiles ● Site builder ● Theme builder ● Custom module maker

Slide 5

Slide 5 text

So, whatisthe topic today? 5 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la !

Slide 6

Slide 6 text

This talk is about 6 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● Your custom code ● Daily development ● Avoid repetitive tasks ● Help new Drupal developers

Slide 7

Slide 7 text

This talk is not about 7 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● Admin part ● Core architecture / code ● Documentation ● Contribution

Slide 8

Slide 8 text

Examplesof DX features 8 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la !

Slide 9

Slide 9 text

Provide shortcuts 9 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● Abstract implementations ● Functions, methods, classes, traits ● The goal is to hide a complexity

Slide 10

Slide 10 text

Throw exceptions 10 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● Handle common users mistakes ● Be defensive ● Throw an exception ● With a useful message

Slide 11

Slide 11 text

Simple things 11 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● A small UI change ● An up to date PHPDoc ● Rename a test class ● Etc.

Slide 12

Slide 12 text

Whydoesitmatter? 12 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la !

Slide 13

Slide 13 text

Why does it matter? 13 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● Less frustration ● Increased productivity ● A better reputation ● Attract more users

Slide 14

Slide 14 text

Return on experience 14 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la !

Slide 15

Slide 15 text

Who am I? 15 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● Thomas Calvet - fancyweb ● 6 years experience in PHP ● Long time Symfony user and enthusiast ● New Drupal developer

Slide 16

Slide 16 text

Drupalisnot readyfor developmentout of the box 16 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la !

Slide 17

Slide 17 text

Missing concepts 17 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● No « debug » mode ● No « environment »

Slide 18

Slide 18 text

Examples 18 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la !

Slide 19

Slide 19 text

Display exceptions and errors 19 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! sites/default content

Slide 20

Slide 20 text

Display exceptions and errors 20 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! Step 1

Slide 21

Slide 21 text

Display exceptions and errors 21 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! Step 2

Slide 22

Slide 22 text

Display exceptions and errors 22 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! Step 3

Slide 23

Slide 23 text

Display exceptions and errors 23 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! Step 4

Slide 24

Slide 24 text

Display exceptions and errors 24 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● A basic and common need ● Way too many steps for a new Drupal developer ● It should be enabled from the start in local

Slide 25

Slide 25 text

Drupal cache system 25 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! 13 tables of cache data

Slide 26

Slide 26 text

Drupal cache system 26 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! Cache data content is unreadable

Slide 27

Slide 27 text

Drupal cache system 27 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! Clearable caches with drush

Slide 28

Slide 28 text

Drupal cache system 28 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● Hard to master ● Lots of terms : internal, dynamic, Twig, render, keys, tags, context, max age ● Even way harder to understand for the front developers

Slide 29

Slide 29 text

It leads to bad habits 29 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● You must clear a cache but you don’t know which one ● So you clear all cache ● Precious seconds wasted everytime

Slide 30

Slide 30 text

Are thereinitiatives? Yes! 30 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la !

Slide 31

Slide 31 text

From the community 31 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● Drupal console commands ● drush commands ● Devel module

Slide 32

Slide 32 text

From the core 32 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● D8DX: Improving the D8 developer experience https://www.drupal.org/community-initiatives/drupal-core/d8dx ● List DX issues ● Provide a common vocabulary

Slide 33

Slide 33 text

Proposingsomethingnew 33 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la !

Slide 34

Slide 34 text

ekino/drupal-debug https://github.com/ekino/drupal-debug 34 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● Open source third party library ● Improve your DX during the development process ● Help you develop better and faster ● Reuse well known and well tested open source components

Slide 35

Slide 35 text

Provide actions 35 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● An action is a class that does something ● Each action has an unique goal ● 16 actions at the moment

Slide 36

Slide 36 text

Drupaldevelopment configuration 36 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la !

Slide 37

Slide 37 text

Disable CSS & JS aggregations 37 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! Before After

Slide 38

Slide 38 text

Disable CSS & JS aggregations 38 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! What it replaces

Slide 39

Slide 39 text

Override Drupal configuration 39 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● Global $config variable ● Normally, you modify it in the settings.php file ● The library just override everything after the settings initialization

Slide 40

Slide 40 text

DisableDrupalcaches 40 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la !

Slide 41

Slide 41 text

Disable Drupal caches 41 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! What it replaces

Slide 42

Slide 42 text

Override Drupal settings 42 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● Settings class singleton ● Normally, you modify it in the settings.php file ● The library just override everything after the settings initialization

Slide 43

Slide 43 text

Twigdevelopment configuration 43 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la !

Slide 44

Slide 44 text

Enable Twig debug 44 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! Before After

Slide 45

Slide 45 text

Enable Twig debug 45 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! What it replaces

Slide 46

Slide 46 text

Override Twig configuration 46 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● Twig configuration is defined by parameters ● Override those parameters before the container compilation ● Twig cache is also disabled with this way

Slide 47

Slide 47 text

Display more information in a prettierway 47 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la !

Slide 48

Slide 48 text

Display pretty exceptions 48 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! Before

Slide 49

Slide 49 text

Display pretty exceptions 49 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! After

Slide 50

Slide 50 text

Display pretty exceptions 50 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● Use Symfony HttpKernel component ExceptionListener ● Use Symfony Debug component ExceptionHandler ● Available after the environment boot, so very early

Slide 51

Slide 51 text

Enable Debug class loader 51 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! Provide better exceptions messages for case sensitive filesystems

Slide 52

Slide 52 text

Enable Debug class loader 52 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● Use the Symfony Debug component DebugClassLoader class ● Wrap your autoloader (a Composer ClassLoader instance most likely) ● Also does lightweight static analysis when a class is loaded

Slide 53

Slide 53 text

Display dump location 53 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! Before

Slide 54

Slide 54 text

Display dump location 54 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! After

Slide 55

Slide 55 text

Display dump location 55 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● Use the Symfony VarDumper component ● Define a custom handler

Slide 56

Slide 56 text

Enforcegood practices 56 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la !

Slide 57

Slide 57 text

Throw errors as exceptions 57 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! Code example

Slide 58

Slide 58 text

Throw errors as exceptions 58 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! Before

Slide 59

Slide 59 text

Throw errors as exceptions 59 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! After

Slide 60

Slide 60 text

Throw errors as exceptions 60 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● PHP errors must be handled ● Use the Symfony Debug Component ErrorHandler class ● Set a custom error handler that rethrow PHP errors as exceptions

Slide 61

Slide 61 text

Enable Twig strict variables 61 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! Code example

Slide 62

Slide 62 text

Enable Twig strict variables 62 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! Before

Slide 63

Slide 63 text

Enable Twig strict variables 63 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! After

Slide 64

Slide 64 text

Invalidatecaches automatically 64 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la !

Slide 65

Slide 65 text

Watch actions 65 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● Detect files creation, alteration and deletion ● Invalidate a cache ● 3 actions at the moment

Slide 66

Slide 66 text

Watch container definitions 66 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! Default watched files

Slide 67

Slide 67 text

Watch modules hooks implementation 67 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! Default watched file

Slide 68

Slide 68 text

Watch routing definitions 68 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! Default watched file

Slide 69

Slide 69 text

Watch systems 69 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● A resources freshness checker system ● A file resource is tied to an extension ● A file cache system ● A file backend cache system

Slide 70

Slide 70 text

How doesitwork? 70 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la !

Slide 71

Slide 71 text

It could not be a module 71 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● Modules are handled too late in the boot ● Some actions would be impossible to implement ● It would need to be enabled on first use ● It would need to be managed to not be used on production

Slide 72

Slide 72 text

Use another Kernel 72 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! Drupal front controller

Slide 73

Slide 73 text

Use an alternative Kernel 73 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● Extends the Drupal Kernel ● Dispatch events ● Alter the container definitions

Slide 74

Slide 74 text

Substitutingthe original DrupalKernel 74 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la !

Slide 75

Slide 75 text

How does the substitution work? 75 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● Create a copy of the DrupalKernel on the fly ● Use another name ● Replace paths references ● Alias the DrupalKernel with our DebugKernel

Slide 76

Slide 76 text

The substitution is great 76 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● The library works out of the box ● The Debug Kernel is used by any third party library that woud normally use the Drupal Kernel

Slide 77

Slide 77 text

The substitution is bad 77 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● Compatibility problems ● Disable it to test a behavior with caches enabled ● Disable it for all your tests

Slide 78

Slide 78 text

Configuration 78 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la !

Slide 79

Slide 79 text

Default configuration 79 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● Some actions are configurable with options ● Not mandatory because there are defaults values ● Configuration is done in a YAML file ● Some with environment variables

Slide 80

Slide 80 text

Requirements 80 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la !

Slide 81

Slide 81 text

Requirements 81 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● Composer ● PHP >= 7.1 (last supported stable version) ● Drupal >= 8.6 (latest minor version)

Slide 82

Slide 82 text

What’snext? 82 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la !

Slide 83

Slide 83 text

Improvements 83 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● On existing actions ● Optional actions ● Configuration by action

Slide 84

Slide 84 text

More actions and features 84 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● Watch themes hooks implementations ● Watch libraries (JS & CSS files) ● Support third parties actions

Slide 85

Slide 85 text

The hidden goal 85 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● A wake up call! ● To have a debug mode in the Drupal core ● To have more DX initiatives in the Drupal core

Slide 86

Slide 86 text

Final thoughts 86 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la !

Slide 87

Slide 87 text

An enriching experience 87 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● For me ● For Drupal ● For Symfony

Slide 88

Slide 88 text

Is the community interested? 88 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la ! ● Is it useful for a lot of developers? ● Find first users and testers ● Eventually find contributors

Slide 89

Slide 89 text

Thank you, for your attention. Any questions?

Slide 90

Slide 90 text

https://github.com/ekino/ drupal-debug 90 Drupalcamp Paris 2019 - L’expérience développeur dans Drupal 8 : améliorons-la !