Tweet
Tweet

Slide 1

Slide 1 text

Event-Driven Layouts with Twig Events

Slide 2

Slide 2 text

A few weeks ago, I started working on our new Sylius Admin Panel. “

Slide 3

Slide 3 text

About me • Core Team Member @ Sylius 3

Slide 4

Slide 4 text

About me • Core Team Member @ Sylius • Technical Content Creator 3

Slide 5

Slide 5 text

About me • Core Team Member @ Sylius • Technical Content Creator • I connect the backend and the frontend worlds 3

Slide 6

Slide 6 text

Every journey begins with a single step “

Slide 7

Slide 7 text

But before we embark on our journey…

Slide 8

Slide 8 text

Quick intro to Template Events

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Experimental Object The order’s show page

Slide 16

Slide 16 text

Finding an entry template 14

Slide 17

Slide 17 text

Finding an entry template 14

Slide 18

Slide 18 text

Let’s take a look… 15

Slide 19

Slide 19 text

Let’s take a look… 15

Slide 20

Slide 20 text

How to find what actually is rendered here?

Slide 21

Slide 21 text

How to find what actually is rendered here?

Slide 22

Slide 22 text

YAML config 17

Slide 23

Slide 23 text

YAML config 18 • It’s easy to fi nd an event or a block by name

Slide 24

Slide 24 text

YAML config 18 • It’s easy to fi nd an event or a block by name • Indentation increases readability

Slide 25

Slide 25 text

YAML config 18 • It’s easy to fi nd an event or a block by name • Indentation increases readability • However…

Slide 26

Slide 26 text

YAML config 18 • It’s easy to fi nd an event or a block by name • Indentation increases readability • However… • We don’t see what events are rendered inside the blocks without opening them

Slide 27

Slide 27 text

YAML config 18 • It’s easy to fi nd an event or a block by name • Indentation increases readability • However… • We don’t see what events are rendered inside the blocks without opening them • Long con fi g fi les = jumping

Slide 28

Slide 28 text

YAML config 18 • It’s easy to fi nd an event or a block by name • Indentation increases readability • However… • We don’t see what events are rendered inside the blocks without opening them • Long con fi g fi les = jumping

Slide 29

Slide 29 text

YAML config 18 • It’s easy to fi nd an event or a block by name • Indentation increases readability • However… • We don’t see what events are rendered inside the blocks without opening them • Long con fi g fi les = jumping

Slide 30

Slide 30 text

Browser dev tools 19

Slide 31

Slide 31 text

Browser dev tools 20 • It’s easy to fi nd an event or a block by name

Slide 32

Slide 32 text

Browser dev tools 20 • It’s easy to fi nd an event or a block by name • Pretty to easy to fi nd descendant elements

Slide 33

Slide 33 text

Browser dev tools 20 • It’s easy to fi nd an event or a block by name • Pretty to easy to fi nd descendant elements • However…

Slide 34

Slide 34 text

Browser dev tools 20 • It’s easy to fi nd an event or a block by name • Pretty to easy to fi nd descendant elements • However… • Complex events blocks decrease readability

Slide 35

Slide 35 text

Browser dev tools 20 • It’s easy to fi nd an event or a block by name • Pretty to easy to fi nd descendant elements • However… • Complex events blocks decrease readability

Slide 36

Slide 36 text

Browser dev tools 20 • It’s easy to fi nd an event or a block by name • Pretty to easy to fi nd descendant elements • However… • Complex events blocks decrease readability

Slide 37

Slide 37 text

Identified problem #1 Looking for events, blocks and relations between them is hard

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Solution? Let’s structure templates directories to reflect events names

Slide 41

Slide 41 text

sylius.admin.product_variant.index.header.content

Slide 42

Slide 42 text

sylius.admin.product_variant.index.header.content

Slide 43

Slide 43 text

sylius.admin.product_variant.index.header.content Pre fi x

Slide 44

Slide 44 text

sylius.admin.product_variant.index.header.content Resource

Slide 45

Slide 45 text

sylius.admin.product_variant.index.header.content Operation

Slide 46

Slide 46 text

sylius.admin.product_variant.index.header.content Some HTML “component”

Slide 47

Slide 47 text

sylius.admin.product_variant.index.header.content Template

Slide 48

Slide 48 text

sylius.admin.product_variant.index.header.content @SyliusAdmin/ProductVariant/Index/Header/_content.html.twig

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

Now it’s easier to predict where to look for an event and its blocks

Slide 53

Slide 53 text

One problem solved, now…

Slide 54

Slide 54 text

One problem solved, now…

Slide 55

Slide 55 text

Let’s take a look at this element

Slide 56

Slide 56 text

Let’s take a look at this element

Slide 57

Slide 57 text

Let’s take a look at this element

Slide 58

Slide 58 text

Let’s take a look at this element

Slide 59

Slide 59 text

When we check the Twig file, we can notice it’s hard

Slide 60

Slide 60 text

When we check the Twig file, we can notice it’s hard

Slide 61

Slide 61 text

When we check the Twig file, we can notice it’s hard

Slide 62

Slide 62 text

But some template were mix of traditional and event-based approaches

Slide 63

Slide 63 text

Identified problem #2 Bloated templates

Slide 64

Slide 64 text

Rule of thumb If a piece of HTML can be moved in an X or an Y axis (and still makes sense) it’s a candidate for an event block

Slide 65

Slide 65 text

Rule of thumb If a piece of HTML can be moved in an X or an Y axis (and still makes sense) it’s a candidate for an event block

Slide 66

Slide 66 text

Rule of thumb If a piece of HTML can be moved in an X or an Y axis (and still makes sense) it’s a candidate for an event block

Slide 67

Slide 67 text

Rule of thumb If a piece of HTML can be moved in an X or an Y axis (and still makes sense) it’s a candidate for an event block

Slide 68

Slide 68 text

Rule of thumb If a piece of HTML can be moved in an X or an Y axis (and still makes sense) it’s a candidate for an event block

Slide 69

Slide 69 text

Rule of thumb If a piece of HTML can be moved in an X or an Y axis (and still makes sense) it’s a candidate for an event block

Slide 70

Slide 70 text

Rule of thumb If a piece of HTML can be moved in an X or an Y axis (and still makes sense) it’s a candidate for an event block

Slide 71

Slide 71 text

Rule of thumb If a piece of HTML can be moved in an X or an Y axis (and still makes sense) it’s a candidate for an event block

Slide 72

Slide 72 text

Rule of thumb If a piece of HTML can be moved in an X or an Y axis (and still makes sense) it’s a candidate for an event block

Slide 73

Slide 73 text

Rule of thumb If a piece of HTML can be moved in an X or an Y axis (and still makes sense) it’s a candidate for an event block

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

But we can't swing too far the other way…

Slide 84

Slide 84 text

What is exactly what I did :D

Slide 85

Slide 85 text

In some cases I needed to wrap already existing block in a div with a concrete class

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

Identified problem #3 Too granular event blocks are bad

Slide 89

Slide 89 text

Solution? Involve Twig Blocks

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

While creating blocks, I wanted to let developers configure the them

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

No content

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

Identified problem #4 Overriding or adding a new configuration is hard

Slide 101

Slide 101 text

Solution? Move the configuration from the route-level to the block-level

Slide 102

Slide 102 text

No content

Slide 103

Slide 103 text

No content

Slide 104

Slide 104 text

No content

Slide 105

Slide 105 text

No content

Slide 106

Slide 106 text

No content

Slide 107

Slide 107 text

Once I've done the hard part, I started doing some clean ups

Slide 108

Slide 108 text

No content

Slide 109

Slide 109 text

No content

Slide 110

Slide 110 text

No content

Slide 111

Slide 111 text

Identified problem #5 Events.yaml is too big for an ergonomic work

Slide 112

Slide 112 text

Solution? Divide & Conquer

Slide 113

Slide 113 text

Divide & Conquer – 1st step 71

Slide 114

Slide 114 text

Divide & Conquer – 1st step 71

Slide 115

Slide 115 text

Divide & Conquer – 1st step 71

Slide 116

Slide 116 text

Divide & Conquer – 1st step 71 etc.

Slide 117

Slide 117 text

Divide & Conquer – 1st step 72

Slide 118

Slide 118 text

Divide & Conquer – 1st step 72

Slide 119

Slide 119 text

Divide & Conquer – 1st step 72

Slide 120

Slide 120 text

Divide & Conquer – 1st step 72

Slide 121

Slide 121 text

Divide & Conquer – 2nd step 73 etc.

Slide 122

Slide 122 text

Divide & Conquer – 2nd step 73 etc.

Slide 123

Slide 123 text

Divide & Conquer – 2nd step 73 etc.

Slide 124

Slide 124 text

Divide & Conquer – 2nd step 73 etc.

Slide 125

Slide 125 text

Divide & Conquer – 2nd step 73 etc. Product directory

Slide 126

Slide 126 text

One more thing…

Slide 127

Slide 127 text

One more thing… We’re killing Sylius Template Events

Slide 128

Slide 128 text

Sylius Twig Events

Slide 129

Slide 129 text

Twig Events - key features 77 • Sylius-agnostic

Slide 130

Slide 130 text

Twig Events - key features 77 • Sylius-agnostic • Compatible with Symfony 5.4 and newer

Slide 131

Slide 131 text

Twig Events - key features 77 • Sylius-agnostic • Compatible with Symfony 5.4 and newer • Improved debug tools

Slide 132

Slide 132 text

Twig Events - key features 77 • Sylius-agnostic • Compatible with Symfony 5.4 and newer • Improved debug tools • New features like support for Twig/Live Components

Slide 133

Slide 133 text

Twig Events - key features 77 • Sylius-agnostic • Compatible with Symfony 5.4 and newer • Improved debug tools • New features like support for Twig/Live Components • New documentation (both “agnostic” and for Sylius)

Slide 134

Slide 134 text

Twig Events - key features 77 • Sylius-agnostic • Compatible with Symfony 5.4 and newer • Improved debug tools • New features like support for Twig/Live Components • New documentation (both “agnostic” and for Sylius) • … and many more 😎

Slide 135

Slide 135 text

Also we’re reactivating Sylius Stack initiative

Slide 136

Slide 136 text

Also we’re reactivating Sylius Stack initiative Twig Events

Slide 137

Slide 137 text

Also we’re reactivating Sylius Stack initiative Twig Events ?

Slide 138

Slide 138 text

Also we’re reactivating Sylius Stack initiative Twig Events ? ?

Slide 139

Slide 139 text

Stay tuned for more info…

Slide 140

Slide 140 text

Thank you for your attention!