Symfony UX: a new JavaScript ecosystem for Symfony

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. 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
    titouan.galopin@symfony.com
    Slides design by SlidesCarnival
    

    View Slide