Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Live Component Experience - Symfony Online - Ju...

Live Component Experience - Symfony Online - June 2024

Talk given during Symfony Online - June 2024

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

Lang: EN

Simon André

June 07, 2024
Tweet

Other Decks in Programming

Transcript

  1. O R G A N I Z E R S

    T H A N K YO U
  2. 1985 Birth of Simon A B O U T M

    E SIMON ANDRE 1989 Birth of the web
  3. 1985 Birth of Simon 1999 First website A B O

    U T M E SIMON ANDRE 1989 Birth of the web
  4. 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
  5. 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
  6. 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
  7. K E V I N B O N D S

    Y M F O N Y U X
  8. 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
  9. <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
  10. 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
  11. T W O Q U E S T I O

    N S Have you used TWIG COMPONENTS in a (prod) project ?
  12. T W O Q U E S T I O

    N S Have you used LIVE COMPONENTS in a (prod) project ?
  13. U N TO U R E N S E M

    B L E THREE QUESTIONS
  14. FOR MY PROJECT / CLIENT ? T H R E

    E Q U E S T I O N S
  15. FOR ME & MY TEAM ? T H R E

    E Q U E S T I O N S
  16. 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 { } }
  17. T W I G C O M P O N

    E N T TWIG TEMPLATE <div class="{{ this.getLevel() }}"> <p>{{ this.message }}</p> </div>
  18. T W I G C O M P O N

    E N T TWIG TEMPLATE {{ component('MyComponent', {message: "Hello"}) }}
  19. T W I G C O M P O N

    E N T HTML SYNTAX <twig:MyComponent message="Hello" />
  20. 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
  21. LIVE PHP L I V E L I V E

    #[AsLiveComponent] class MyComponent { }
  22. LIVE TWIG L I V E L I V E

    <div {{ attributes }}> </div>
  23. LIVE HTML L I V E L I V E

    <div data-controller="live" data-live-name-value="MyComponent" ...> </div>
  24. LIVE PROPS L I V E L I V E

    #[LiveProp] public string $query <input type="search" data-model="query" />
  25. LIVE PROPS L I V E L I V E

    QUERY BINDING URL ENTITIES DOCTRINE HYDRATION CUSTOM
  26. LIVE PROPS L I V E L I V E

    QUERY BINDING URL ENTITIES DOCTRINE HYDRATION CUSTOM
  27. 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>
  28. LIVE ACTIONS L I V E L I V E

    #[LiveAction] public function addItem( #[LiveArg] int $id, #[LiveArg('itemName')] string $name, )
  29. LIVE ACTIONS L I V E L I V E

    RESOLVERS VALUE PROTECTION CSRF REDIRECTIONS HTTP
  30. LIVE EVENTS L I V E L I V E

    <button data-action="live#emit" data-live-event-param="productAdded" >
  31. LIVE EVENTS L I V E L I V E

    $this->emit('productAdded', [ 'product' => $product->getId(), ]);
  32. LIVE EVENTS L I V E L I V E

    #[LiveListener('productAdded')] public function incrementProductCount() { $this->productCount++; }
  33. LIVE POLL L I V E L I V E

    <div {{ attributes }} data-poll="save">
  34. DEFER LOADING L I V E L I V E

    <twig:TopComments article="24" loading="defer" />
  35. LAZY LOADING L I V E L I V E

    <twig:TopComments article="24" loading="lazy" />
  36. 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>
  37. L I V E I N T E G R

    AT I O N composer require symfony/ux-live-component STEP ONE
  38. L I V E I N T E G R

    AT I O N ... STEP TWO
  39. L I V E I N T E G R

    AT I O N SYMFONY FLEX
  40. L I V E I N T E G R

    AT I O N SYMFONY FORM
  41. L I V E I N T E G R

    AT I O N SYMFONY APP FORM SERIALIZER SECURITY VALIDATION ASSET MAPPER ROUTER
  42. L I V E I N T E G R

    AT I O N SYMFONY WORLD PHPUNIT FOUNDRY BROWSER TWIG DOCTRINE PHPDOCUMENTOR
  43. L I V E I N T E G R

    AT I O N SYMFONY DEV
  44. B AC K E N D LO G I C

    F R O N T E N D M AG I C
  45. L I V E V E R S AT I

    L E LIVE DEMOS
  46. LIVE DEMOS L I V E V E R S

    AT I L E https://ux.symfony.com/demos
  47. L I V E V E R S AT I

    L E CREATE A GAME ?
  48. L I V E V E R S AT I

    L E CREATE A GAME WITHOUT JS ?
  49. L I V E V E R S AT I

    L E CREATE A GAME WITHOUT WRITING JS ?
  50. L I V E V E R S AT I

    L E YES (Don't try this at home)
  51. LIVE MEMORY L I V E V E R S

    AT I L E ux.symfony.com/demos/live-memory
  52. LIVE MEMORY L I V E V E R S

    AT I L E github.com/symfony/ux ux.symfony.com/demos/live-memory
  53. 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/
  54. L I V E E X P E R I

    E N C E EMOTIONAL IMPACT
  55. 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.
  56. UPDATES LIVE VALIDATION FORM LOADING LAZY L I V E

    E X P E R I E N C E MICRO INTERACTIONS
  57. 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
  58. L I V E E X P E R I

    E N C E FRONT STACK
  59. L I V E E X P E R I

    E N C E FRONT STACK
  60. L I V E E X P E R I

    E N C E DAILY STACK
  61. L I V E E X P E R I

    E N C E DEV TOOLS
  62. L I V E E X P E R I

    E N C E WEB PERFORMANCE
  63. L I V E E X P E R I

    E N C E WEB PERFORMANCE
  64. 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
  65. 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
  66. L I V E L I V E L I

    V E TO U R
  67. L I V E I N T E G R

    AT I O N L I V E TO U R
  68. L I V E V E R S AT I

    L E L I V E TO U R
  69. L I V E E X P E R I

    E N C E L I V E TO U R
  70. FOR MY PROJECT / CLIENT ? T H R E

    E Q U E S T I O N S
  71. FOR MY PROJECT / CLIENT ? T H R E

    E Q U E S T I O N S
  72. FOR ME & MY TEAM ? T H R E

    E Q U E S T I O N S
  73. FOR ME & MY TEAM ? T H R E

    E Q U E S T I O N S