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. A new
    JavaScript
    ecosystem
    for Symfony

    View Slide

  2. Hello!
    I am Titouan Galopin
    SymfonyInsight Product Manager
    Symfony UX initiative lead
    2

    View Slide

  3. JavaScript
    3

    View Slide

  4. JavaScript is about
    User Experience
    Building the most
    intuitive and usable
    app to solve a specific
    problem
    4

    View Slide

  5. Building great
    User Experiences
    is difficult
    We need to rely on the work of others :
    the JavaScript ecosystem
    5

    View Slide

  6. Symfony does not
    choose for you
    Since Symfony 2 (2011),
    Symfony is JavaScript agnostic
    6

    View Slide

  7. And that’s good!
    There is no clear framework winner:
    we should not be tied to a specific one
    7

    View Slide

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

    View Slide

  9. 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, ...

    View Slide

  10. Both add complexity and
    are difficult to maintain*
    They take
    valuable time
    10
    *I did an entire talk about this

    View Slide

  11. How to decrease the time
    required to build great
    User Experiences?
    11

    View Slide

  12. Symfony
    UX initiative
    12
    A new series of tools to build
    User Experiences with Symfony

    View Slide

  13. 13
    What
    do we
    actually
    want?

    View Slide

  14. What do we actually want?
    1. Organizing JavaScript
    code inside our projects
    14

    View Slide

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

    View Slide

  16. 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

    View Slide

  17. 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

    View Slide

  18. What are our constraints?
    Not tied to a framework
    (compatible with React/Vue/...)
    18

    View Slide

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

    View Slide

  20. 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)

    View Slide

  21. 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)

    View Slide

  22. 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

    View Slide

  23. Stimulus
    “A modest JavaScript
    framework for the
    HTML you already have”
    23

    View Slide

  24. 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

    View Slide

  25. I usually think of Stimulus as
    a Router for DOM nodes
    => It associates DOM nodes to
    JavaScript behaviors
    25

    View Slide

  26. 26
    Add markers on your
    normal HTML

    View Slide

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

    View Slide

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

    View Slide

  29. 29
    Then that’s normal JavaScript!

    View Slide

  30. 30
    Then that’s normal JavaScript!
    Which means you can use Vue

    View Slide

  31. 31
    Then that’s normal JavaScript!
    Which means you can use Vue … or React

    View Slide

  32. 32
    Then that’s normal JavaScript!
    Which means you can use Vue … or React … or plain JS!

    View Slide

  33. 33
    Then that’s normal JavaScript!
    Which means you can use Vue
    this.element =
    data-controller node
    … or React … or plain JS!

    View Slide

  34. 34
    A new JavaScript organization
    for Symfony apps

    View Slide

  35. 35
    A new JavaScript organization
    for Symfony apps
    App controllers automatically
    registered in app.js

    View Slide

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

    View Slide

  37. 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

    View Slide

  38. Automatically
    configured
    by Symfony Flex
    38

    View Slide

  39. 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 ✔

    View Slide

  40. Flex and Encore
    Creating a bridge between
    back-end and front-end to
    build reusable UX packages
    40

    View Slide

  41. Example
    Symfony UX Dropzone
    41

    View Slide

  42. 42
    Usage

    View Slide

  43. 43
    When you install a package containing
    JavaScript code, Symfony Flex detects it
    Usage

    View Slide

  44. 44
    Usage

    View Slide

  45. And that’s it!
    Flex did most
    of the work
    45

    View Slide

  46. 46
    When you require ux-dropzone ...

    View Slide

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

    View Slide

  48. 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 ...

    View Slide

  49. 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

    View Slide

  50. 50

    View Slide

  51. How it works
    internally
    51

    View Slide

  52. 52
    ux-dropzone contains JavaScript code
    in an assets directory ...

    View Slide

  53. 53
    … and declares the
    controllers it provides
    in assets/package.json
    ux-dropzone contains JavaScript code
    in an assets directory ...

    View Slide

  54. 54
    On install Flex reads ux-dropzone’s package.json and
    update your package.json and controllers.json

    View Slide

  55. 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 ...

    View Slide

  56. 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 ...

    View Slide

  57. 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 ✔

    View Slide

  58. Swup/Turbolinks
    Using pages transitions
    libraries to build great
    User Experiences
    58

    View Slide

  59. Stimulus creates
    local behaviors
    (limited to specific DOM nodes)
    Stimulus alone doesn’t feel “like one app” ...
    59

    View Slide

  60. That’s where
    page transition libraries
    are useful
    (Turbolinks, Swup, …)
    60

    View Slide

  61. They
    replace links by AJAX calls
    and
    animate transitions between pages
    61

    View Slide

  62. Example
    Symfony UX Swup
    62

    View Slide

  63. 63
    Usage

    View Slide

  64. 64
    Usage

    View Slide

  65. 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 ✔

    View Slide

  66. Oh, and one
    last thing
    66

    View Slide

  67. Symfony UX
    initiative is going to
    be available

    67

    View Slide

  68. Symfony UX
    initiative is going to
    be available

    now!
    68

    View Slide

  69. symfony.com/ux
    A few packages are already available
    69

    View Slide

  70. Now, that’s on you!
    Let’s build an amazing new
    ecosystem for Symfony together!
    70

    View Slide

  71. 71
    Thanks!
    Any questions?
    You can find me at:
    @tgalopin
    [email protected]
    Slides design by SlidesCarnival

    View Slide