[SyliusCon 2023] Event-driven layouts with Twig Events

Transcript

1. Event-Driven Layouts with Twig Events
2. A few weeks ago, I started working on our new Sylius Admin Panel. “
3. About me • Core Team Member @ Sylius 3
4. About me • Core Team Member @ Sylius • Technical Content Creator 3
5. About me • Core Team Member @ Sylius • Technical Content Creator • I connect the backend and the frontend worlds 3
6. Every journey begins with a single step “
7. But before we embark on our journey…
8. Quick intro to Template Events
15. Experimental Object The order’s show page
16. Finding an entry template 14
17. Finding an entry template 14
18. Let’s take a look… 15
19. Let’s take a look… 15
20. How to find what actually is rendered here?
21. How to find what actually is rendered here?
22. YAML config 17
23. YAML config 18 • It’s easy to fi nd an event or a block by name
24. YAML config 18 • It’s easy to fi nd an event or a block by name • Indentation increases readability
25. YAML config 18 • It’s easy to fi nd an event or a block by name • Indentation increases readability • However…
26. 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
27. 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
28. 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
29. 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
30. Browser dev tools 19
31. Browser dev tools 20 • It’s easy to fi nd an event or a block by name
32. 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
33. 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…
34. 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
35. 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
36. 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
37. Identified problem #1 Looking for events, blocks and relations between them is hard
40. Solution? Let’s structure templates directories to reflect events names
41. sylius.admin.product_variant.index.header.content
42. sylius.admin.product_variant.index.header.content
43. sylius.admin.product_variant.index.header.content Pre fi x
44. sylius.admin.product_variant.index.header.content Resource
45. sylius.admin.product_variant.index.header.content Operation
46. sylius.admin.product_variant.index.header.content Some HTML “component”
47. sylius.admin.product_variant.index.header.content Template
48. sylius.admin.product_variant.index.header.content @SyliusAdmin/ProductVariant/Index/Header/_content.html.twig
52. Now it’s easier to predict where to look for an event and its blocks
53. One problem solved, now…
54. One problem solved, now…
55. Let’s take a look at this element
56. Let’s take a look at this element
57. Let’s take a look at this element
58. Let’s take a look at this element
59. When we check the Twig file, we can notice it’s hard
60. When we check the Twig file, we can notice it’s hard
61. When we check the Twig file, we can notice it’s hard
62. But some template were mix of traditional and event-based approaches
63. Identified problem #2 Bloated templates
64. 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
65. 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
66. 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
67. 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
68. 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
69. 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
70. 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
71. 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
72. 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
73. 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
83. But we can't swing too far the other way…
84. What is exactly what I did :D
85. In some cases I needed to wrap already existing block in a div with a concrete class
88. Identified problem #3 Too granular event blocks are bad
89. Solution? Involve Twig Blocks
95. While creating blocks, I wanted to let developers configure the them
100. Identified problem #4 Overriding or adding a new configuration is hard
101. Solution? Move the configuration from the route-level to the block-level
107. Once I've done the hard part, I started doing some clean ups
111. Identified problem #5 Events.yaml is too big for an ergonomic work
112. Solution? Divide & Conquer
113. Divide & Conquer – 1st step 71
114. Divide & Conquer – 1st step 71
115. Divide & Conquer – 1st step 71
116. Divide & Conquer – 1st step 71 etc.
117. Divide & Conquer – 1st step 72
118. Divide & Conquer – 1st step 72
119. Divide & Conquer – 1st step 72
120. Divide & Conquer – 1st step 72
121. Divide & Conquer – 2nd step 73 etc.
122. Divide & Conquer – 2nd step 73 etc.
123. Divide & Conquer – 2nd step 73 etc.
124. Divide & Conquer – 2nd step 73 etc.
125. Divide & Conquer – 2nd step 73 etc. Product directory
126. One more thing…
127. One more thing… We’re killing Sylius Template Events
128. Sylius Twig Events
129. Twig Events - key features 77 • Sylius-agnostic
130. Twig Events - key features 77 • Sylius-agnostic • Compatible with Symfony 5.4 and newer
131. Twig Events - key features 77 • Sylius-agnostic • Compatible with Symfony 5.4 and newer • Improved debug tools
132. 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
133. 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)
134. 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 😎
135. Also we’re reactivating Sylius Stack initiative
136. Also we’re reactivating Sylius Stack initiative Twig Events
137. Also we’re reactivating Sylius Stack initiative Twig Events ?
138. Also we’re reactivating Sylius Stack initiative Twig Events ? ?
139. Stay tuned for more info…
140. Thank you for your attention!