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

Symfony UX: a new JavaScript ecosystem for Symfony

Symfony UX: a new JavaScript ecosystem for Symfony

Titouan Galopin

December 03, 2020
Tweet

More Decks by Titouan Galopin

Other Decks in Programming

Transcript

  1. Building great User Experiences is difficult We need to rely

    on the work of others : the JavaScript ecosystem 5
  2. And that’s good! There is no clear framework winner: we

    should not be tied to a specific one 7
  3. Today, 2 JavaScript options for Symfony applications ⬡ Vanilla JavaScript

    ∙ Webpack entrypoints ∙ Vanilla JS/jQuery ∙ Manual libraries 8
  4. Today, 2 JavaScript options for Symfony applications ⬡ Vanilla JavaScript

    ∙ Webpack entrypoints ∙ Vanilla JS/jQuery ∙ Manual libraries 9 ⬡ Single Page Apps ∙ React/Vue/Angular/… ∙ Local router, database, cache, API client, ... ∙ Reimplements history, session, loaders, ...
  5. Both add complexity and are difficult to maintain* They take

    valuable time 10 *I did an entire talk about this
  6. Symfony UX initiative 12 A new series of tools to

    build User Experiences with Symfony
  7. What do we actually want? 1. Organizing JavaScript code inside

    our projects 2. Avoiding complexity as much as possible 15
  8. What do we actually want? 1. Organizing JavaScript code inside

    our projects 2. Avoiding complexity as much as possible 16 3. Relying on code developed by others
  9. What do we actually want? 1. Organizing JavaScript code inside

    our projects 2. Avoiding complexity as much as possible 17 3. Relying on code developed by others 4. Implementing great User Experiences
  10. What are our constraints? Not tied to a framework (compatible

    with React/Vue/...) Based on standards (history, URL, sessions, cookies, …) 19
  11. What are our constraints? Not tied to a framework (compatible

    with React/Vue/...) Based on standards (history, URL, sessions, cookies, …) 20 Easy to test automatically (unit and functional: cf Cypress talk)
  12. What are our constraints? Not tied to a framework (compatible

    with React/Vue/...) Based on standards (history, URL, sessions, cookies, …) 21 Easy to test automatically (unit and functional: cf Cypress talk) As simple as possible (=== as less code as possible)
  13. The Symfony UX initiative ⬡ Stimulus Organizing JavaScript code in

    Symfony projects ⬡ Flex and Webpack Encore Shipping reusable JavaScript code with Symfony bundles ⬡ Swup/Turbolinks A new approach on building great UX experiences based on standards 22
  14. Stimulus does not take over your application’s entire front-end It

    augments your existing HTML by connecting DOM nodes to JavaScript behaviors automatically 24
  15. I usually think of Stimulus as a Router for DOM

    nodes => It associates DOM nodes to JavaScript behaviors 25
  16. 27 Use these markers to retrieve the DOM nodes in

    JavaScript Add markers on your normal HTML
  17. 28 Use these markers to retrieve the DOM nodes in

    JavaScript Add markers on your normal HTML
  18. 33 Then that’s normal JavaScript! Which means you can use

    Vue this.element = data-controller node … or React … or plain JS!
  19. 36 A new JavaScript organization for Symfony apps App controllers

    automatically registered in app.js All controllers shipped as a single compiled JavaScript file
  20. 37 A new JavaScript organization for Symfony apps App controllers

    automatically registered in app.js All controllers shipped as a single compiled JavaScript file A single entrypoint referenced in all pages using WebpackEncoreBundle
  21. What do we actually want? 2. Avoiding complexity as much

    as possible ✔ 39 3. Relying on code developed by others 4. Implementing great User Experiences 1. Organizing JavaScript code inside our projects ✔
  22. 47 When you require ux-dropzone ... … Flex adds a

    reference to ux-dropzone’s JavaScript code in your package.json ...
  23. 48 When you require ux-dropzone ... … and adds a

    reference to ux-dropzone’s Stimulus controller in your assets/controllers.json … Flex adds a reference to ux-dropzone’s JavaScript code in your package.json ...
  24. ux-dropzone now has access to its controllers through your app’s

    JavaScript They are compiled into your application JavaScript: ux-dropzone can use them in its PHP/Twig code 49
  25. 50

  26. 53 … and declares the controllers it provides in assets/package.json

    ux-dropzone contains JavaScript code in an assets directory ...
  27. 55 On install Flex reads ux-dropzone’s package.json and update your

    package.json and controllers.json Then WebpackEncore reads your controllers.json and dynamically resolve vendor controllers ...
  28. 56 … so that the Stimulus bridge can add them

    to the compilation On install Flex reads ux-dropzone’s package.json and update your package.json and controllers.json Then WebpackEncore reads your controllers.json and dynamically resolve vendor controllers ...
  29. What do we actually want? 2. Avoiding complexity as much

    as possible ✔ 57 3. Relying on code developed by others ✔ 4. Implementing great User Experiences 1. Organizing JavaScript code inside our projects ✔
  30. What do we actually want? 2. Avoiding complexity as much

    as possible ✔ 65 3. Relying on code developed by others ✔ 4. Implementing great User Experiences ✔ 1. Organizing JavaScript code inside our projects ✔