Live Component Experience - Symfony Online - June 2024

Talk given during Symfony Online - June 2024

Github: https://github.com/smnandre/symfonyonline-june-2024

Lang: EN

Transcript

2. L I V E E X P E R I E N C E
3. L I V E E X P E R I E N C E
4. I N T R O D U C T I O N
5. T H A N K S
6. O R G A N I Z E R S T H A N K YO U
7. R YA N T H A N K YO U
8. N I C O L A S T H A N K YO U
9. A B O U T M E
10. 1985 Birth of Simon A B O U T M E SIMON ANDRE
11. 1985 Birth of Simon A B O U T M E SIMON ANDRE 1989 Birth of the web
12. 1985 Birth of Simon 1999 First website A B O U T M E SIMON ANDRE 1989 Birth of the web
13. 1985 Birth of Simon 1999 First website Still loving it 2024 A B O U T M E SIMON ANDRE 1989 Birth of the web
14. A B O U T M E SYMFONY
15. A B O U T M E SYMFONY DAYS
16. A B O U T M E SYMFONY NIGHTS
17. 2024/03 SymfonyLive Paris 2024/06 SymfonyOnline 2024/06 Meet-up Bruxelles A B O U T M E SYMFONY TALK
18. 2024/03 SymfonyLive Paris 2024/06 SymfonyOnline 2024/06 Meet-up Bruxelles 2024/?? Contact me A B O U T M E SYMFONY TALK
19. SY M F O N Y U X
20. DECEMBER 2020
24. JUNE 2024
25. Autocomplete Translator Notify UX Turbo Chart.js Dropzone UX React UX Vue.js UX Svelte S Y M F O N Y U X UX PACKAGES
26. Autocomplete Translator Notify UX Turbo Chart.js Dropzone UX React UX Vue.js UX Svelte S Y M F O N Y U X UX PACKAGES
27. Autocomplete Translator Notify UX Turbo Chart.js Dropzone TWIG COMPONENT LIVE COMPONENT UX ICONS S Y M F O N Y U X UX PACKAGES
28. …UX ICONS ?!
29. K E V I N B O N D S Y M F O N Y U X
30. K E V I N B O N D S Y M F O N Y U X Foundry Browser Filesystem Messenger-Test Filesystem Mailer-Test
31. S Y M F O N Y U X UX ICONS
32. <twig:ux:icons name="bi:robot" class="svg-icon" /> S Y M F O N Y U X UX ICONS
33. <twig:ux:icons name="bi:robot" class="svg-icon" /> <svg class="svg-icon" viewBox="0 0 16 16" ... > <path d="M6 12.5a.5.5 ... "/> </svg> S Y M F O N Y U X UX ICONS
36. S Y M F O N Y U X UX ICONS
37. S Y M F O N Y U X UX ICONS
38. S Y M F O N Y U X UX ICONS ICONS 200,000 ICON SETS 200 ENGINE ONLINE SEARCH COMPONENT TWIG COMMANDS CONSOLE TO COME... MORE
39. composer require symfony/ux-icons https://ux.symfony.com/icons S Y M F O N Y U X UX ICONS
40. </ UX ICONS >
41. Autocomplete Translator Notify UX Turbo Chart.js UX Icons TWIG COMPONENT LIVE COMPONENT S Y M F O N Y U X UX PACKAGES
42. T WO Q U E S T I O N S
43. T W O Q U E S T I O N S Have you used TWIG COMPONENTS in a (prod) project ?
45. T W O Q U E S T I O N S Have you used LIVE COMPONENTS in a (prod) project ?
48. P L A N
49. LIVE COMPONENT U N TO U R E N S E M B L E
50. LIVE TOUR U N TO U R E N S E M B L E
51. U N TO U R E N S E M B L E THREE QUESTIONS
52. FOR MY PROJECT / CLIENT ? T H R E E Q U E S T I O N S
53. FOR ME & MY TEAM ? T H R E E Q U E S T I O N S
54. FOR TODAY OR TOMORROW ? T H R E E Q U E S T I O N S
55. L I V E C O M P O N E N T
57. L I V E C O M P O N E N T
58. T W I G C O M P O N E N T
59. T W I G C O M P O N E N T PHP CLASS #[AsTwigComponent] class MyComponent { public string $message; public function getLevel(): string { } }
60. T W I G C O M P O N E N T TWIG TEMPLATE <div class="{{ this.getLevel() }}"> <p>{{ this.message }}</p> </div>
61. T W I G C O M P O N E N T TWIG TEMPLATE {{ component('MyComponent', {message: "Hello"}) }}
62. T W I G C O M P O N E N T HTML SYNTAX <twig:MyComponent message="Hello" />
63. TWIG COMPONENT SYNTAX HTML ATTRIBUTES PHP PROPERTIES NESTED LISTENERS EVENT ISOLATION CONTEXT TO COME... MORE T W I G C O M P O N E N T
64. composer require symfony/ux-twig-component https://ux.symfony.com/twig-component T W I G C O M P O N E N T TWIG COMPONENT
65. L I V E C O M P O N E N T
66. L I V E C O M P O N E N T
68. MUTATION
69. MUTATION STIMULUS JS
70. HYDRATION
71. HYDRATION STIMULUS JS SERIALIZER
72. MORPHING
73. MORPHING IDIOMORPH
74. L I V E TO U R
76. L I V E L I V E
77. LIVE CODING L I V E L I V E
78. LIVE PHP L I V E L I V E #[AsLiveComponent] class MyComponent { }
79. LIVE TWIG L I V E L I V E <div {{ attributes }}> </div>
80. LIVE HTML L I V E L I V E <div data-controller="live" data-live-name-value="MyComponent" ...> </div>
81. LIVE PROPS L I V E L I V E
82. LIVE PROPS L I V E L I V E #[LiveProp] public string $query <input type="search" data-model="query" />
83. LIVE PROPS L I V E L I V E QUERY BINDING URL ENTITIES DOCTRINE HYDRATION CUSTOM
84. LIVE PROPS L I V E L I V E QUERY BINDING URL ENTITIES DOCTRINE HYDRATION CUSTOM
85. LIVE ACTIONS L I V E L I V E
87. LIVE ACTIONS L I V E L I V E #[LiveAction] public function refresh() <button data-action="live#action" data-live-action-param="refresh" >Refresh</button>
88. LIVE ACTIONS L I V E L I V E #[LiveAction] public function addItem( #[LiveArg] int $id, #[LiveArg('itemName')] string $name, )
89. LIVE ACTIONS L I V E L I V E RESOLVERS VALUE PROTECTION CSRF REDIRECTIONS HTTP
90. LIVE EVENTS L I V E L I V E
91. LIVE EVENTS L I V E L I V E <button data-action="live#emit" data-live-event-param="productAdded" >
92. LIVE EVENTS L I V E L I V E $this->emit('productAdded', [ 'product' => $product->getId(), ]);
93. LIVE EVENTS L I V E L I V E #[LiveListener('productAdded')] public function incrementProductCount() { $this->productCount++; }
94. LIVE LOADING L I V E L I V E
95. LIVE POLL L I V E L I V E <div {{ attributes }} data-poll="save">
96. DEFER LOADING L I V E L I V E <twig:TopComments article="24" loading="defer" />
97. LAZY LOADING L I V E L I V E <twig:TopComments article="24" loading="lazy" />
98. HTML LOADING L I V E L I V E <!-- show only when the component is loading --> <span data-loading>Loading</span> <!-- modifiers & actions --> <div data-loading="action(saveForm)|addClass(opacity-50)"> ... </div>
99. L I V E I N T E G R AT I O N
100. COMPLEX SETUP L I V E I N T E G R AT I O N
101. L I V E I N T E G R AT I O N composer require symfony/ux-live-component STEP ONE
102. L I V E I N T E G R AT I O N ... STEP TWO
104. SYMFONY INTEGRATION L I V E I N T E G R AT I O N
105. L I V E I N T E G R AT I O N SYMFONY FLEX
106. L I V E I N T E G R AT I O N SYMFONY FORM
107. L I V E I N T E G R AT I O N SYMFONY APP FORM SERIALIZER SECURITY VALIDATION ASSET MAPPER ROUTER
108. L I V E I N T E G R AT I O N SYMFONY WORLD PHPUNIT FOUNDRY BROWSER TWIG DOCTRINE PHPDOCUMENTOR
109. L I V E I N T E G R AT I O N SYMFONY DEV
111. B AC K E N D LO G I C
112. B AC K E N D LO G I C F R O N T E N D M AG I C
113. L I V E V E R S AT I L E
114. WHAT DOES IT DO L I V E V E R S AT I L E
115. WHAT DOES IT DO L I V E V E R S AT I L E
116. WHAT DO YOU WANT TO DO L I V E V E R S AT I L E
117. A TOOLKIT L I V E V E R S AT I L E
119. GETTING STARTED L I V E V E R S AT I L E
120. THREE STRATEGIES L I V E V E R S AT I L E
121. PATIENCE
122. BRUSHSTROKES
123. ADVENTURE
124. YYAAAAAA AAAAAAAAAAA AAAAAAA !!
125. L I V E V E R S AT I L E LIVE DEMOS
126. LIVE DEMOS L I V E V E R S AT I L E
127. LIVE DEMOS L I V E V E R S AT I L E
128. LIVE DEMOS L I V E V E R S AT I L E
129. LIVE DEMOS L I V E V E R S AT I L E
130. LIVE DEMOS L I V E V E R S AT I L E https://ux.symfony.com/demos
131. L I V E V E R S AT I L E CREATE A GAME ?
132. L I V E V E R S AT I L E CREATE A GAME WITHOUT JS ?
133. L I V E V E R S AT I L E CREATE A GAME WITHOUT WRITING JS ?
134. L I V E V E R S AT I L E YES
135. L I V E V E R S AT I L E YES (Don't try this at home)
140. LIVE MEMORY L I V E V E R S AT I L E ux.symfony.com/demos/live-memory
141. LIVE MEMORY L I V E V E R S AT I L E github.com/symfony/ux ux.symfony.com/demos/live-memory
142. L I V E E X P E R I E N C E
143. USER EXPERIENCE L I V E E X P E R I E N C E
144. L I V E E X P E R I E N C E As we explore the three important keys to unlocking the psychology of UX design, remember: it's all about creating experiences that resonate on a deeper, emotional level. Source: https://www.guvi.in/blog/psychology-of-ux-design/
145. EMOTIONAL IMPACT L I V E E X P E R I E N C E IMPACT
146. L I V E E X P E R I E N C E EMOTIONAL IMPACT
147. MICRO INTERACTIONS L I V E E X P E R I E N C E
148. L I V E E X P E R I E N C E MICRO INTERACTIONS In the psychology of UX design, these tiny details can make a big di ff erence, turning an ordinary experience into something memorable.
149. UPDATES LIVE VALIDATION FORM LOADING LAZY L I V E E X P E R I E N C E MICRO INTERACTIONS
150. PERSONALIZATION L I V E E X P E R I E N C E
151. L I V E E X P E R I E N C E Personalization is not just about using technology (…) it’s about using that technology to create a more humane and empathetic user experience. PERSONALIZATION
152. MANAGEMENT TIME SUGGESTIONS CUSTOM PREFERENCES USER L I V E E X P E R I E N C E PERSONALIZATION
154. DEV EXPERIENCE L I V E E X P E R I E N C E
155. L I V E E X P E R I E N C E FRONT STACK
157. L I V E E X P E R I E N C E FRONT STACK
158. L I V E E X P E R I E N C E DAILY STACK
159. L I V E E X P E R I E N C E DEV TOOLS
163. L I V E E X P E R I E N C E WEB PERFORMANCE
164. L I V E E X P E R I E N C E WEB PERFORMANCE
166. 97 /100
168. 99 /100
170. 100 /100
172. C O N C L U S I O N
173. L I V E C O M P O N E N T
174. L I V E C O M P O N E N T L I V E C O M P O N E N T
175. L I V E C O M P O N E N T L I V E C O M P O N E N T
176. L I V E L I V E L I V E TO U R
177. L I V E I N T E G R AT I O N L I V E TO U R
178. L I V E V E R S AT I L E L I V E TO U R
179. L I V E E X P E R I E N C E L I V E TO U R
180. T H R E E Q U E S T I O N S
181. FOR MY PROJECT / CLIENT ? T H R E E Q U E S T I O N S
182. FOR MY PROJECT / CLIENT ? T H R E E Q U E S T I O N S
183. FOR ME & MY TEAM ? T H R E E Q U E S T I O N S
184. FOR ME & MY TEAM ? T H R E E Q U E S T I O N S
185. FOR TODAY OR TOMORROW ? T H R E E Q U E S T I O N S
186. FOR TODAY OR TOMORROW ? T H R E E Q U E S T I O N S
187. FOR TODAY OR TOMORROW ? T H R E E Q U E S T I O N S
188. O N E Q U E S T I O N
189. READY TO LIVE THE EXPERIENCE ? O N E Q U E S T I O N
191. T H E E N D THANK YOU
192. Q U E S T I O N S ? THANK YOU
193. F E E D B AC K ? smn.andre@gmail.com
194. T H A N K YO U