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

Symfony & Hotwire: an efficient combo to quickly develop complex applications

Symfony & Hotwire: an efficient combo to quickly develop complex applications

In December 2020, Basecamp released their first official version of the Hotwire suite. Combining the historic Turbolinks library with their Stimulus js micro-framework, it comes out a powerful combo for making complex applications while coding a fullstack Rails app. The Symfony team was quick to port the project to their ecosystem, and the results are amazing!
At Windoo we've been using the package symfony/ux-turbo suite since early 2021 to progressively replace our React legacy code. We've learned a lot about how to use it, the good practices to follow, the mistakes to avoid, and the tricky use cases to solve.

Forms, messaging, modals, asynchronous... I will show you very concrete applications of this library in your projects!

Florent Destremau

November 18, 2022
Tweet

Other Decks in Programming

Transcript

  1. Symfony & Hotwire An efficient combo to quickly develop complex

    applications Florent Destremau
  2. Florent Destremau CTO & Founder @ Windoo Using Symfony since

    2.1 2 @FloDestremau florentdestremau @FlorentDestrema
  3. 3 Windoo helps companies in engaging their employees. Software Services

    TRAINING & COACHING WELLNESS & QWL TEAMBUILDING PULSE SURVEYS FLASH SURVEYS EMPLOYEE NPS FEEDBACK
  4. 4

  5. 5 What is hotwire? ➔ https://hotwired.dev ➔ Created by 37

    signals ➔ published ~dec. 2020
  6. 6 Why was Hotwire created? To keep Ruby on Rails

    fullstack. David Heinemeier Hansson has a strong opinion against front-end framework and advocates conceptual compression
  7. 7 Why do we use Hotwire @ Windoo ? Team:

    1. little experience in maintaining a full JS frontend 2. small size (3 devs) 3. backend profiles
  8. 8 Why do we use Hotwire @ Windoo ? Project

    1. B2B SaaS, web & desktop first 2. lots of CRUD interfaces and forms 3. dataviz dashboards & graphs 4. fast iteration
  9. 9 Why do we use Hotwire @ Windoo ? Tech:

    1. GraphQL is complicated, slow, painful, delicate to use at its best 2. Onboarding new (junior) fullstack developers is hard
  10. Symfony 4.4 PHP 7.4 React 16.x 10 The Windoo tech

    stack Symfony 6.0 PHP 8.1 React 17.x (deprecated) Hotwire/Turbo 7.1 Hotwire/Stimulus 3.0 April 2020 Nov. 2022
  11. 11 How to use Hotwire?

  12. 12 Enter: Symfony UX https://ux.symfony.com

  13. 13 Turbo Stimulus JS How does Hotwire work Drive Frames

    Streams
  14. 14 Turbo drive

  15. 15 Turbo drive = give a SPA feel to your

    app
  16. 16 Turbo frames

  17. 17 Turbo frames = create local contexts

  18. 18 Turbo frame = create local contexts Using a custom

    html element: <turbo-frame></turbo-frame>
  19. 19 Turbo frame = create local contexts

  20. 20 Turbo frame = create local contexts

  21. 21 Turbo streams

  22. 22 Turbo streams = dispatch updates There are 2 ways

    of dispatching updates 1. On a server response 2. With push events (e.g. with a Mercure server)
  23. Turbo streams 23

  24. Turbo streams 24

  25. Turbo streams 25

  26. Turbo streams 26

  27. 27 Stimulus JS

  28. 28 Stimulus JS = a javascript micro-framework https://stimulus.hotwired.dev/ Stimulus JS

    is a minimalist framework ➔ boot any outside library (think “jQuery widgets”) ➔ basic actions on the dom
  29. 29 Stimulus JS = a javascript micro-framework

  30. 30 Stimulus JS = a javascript micro-framework

  31. 31 Summary We can now: ➔ Create widgets and embedded

    interfaces ➔ Update parts of our view without reloading ➔ Boot external JS libraries in case we need extra interaction …all with little to no javascript typed !
  32. 32 Going live

  33. 33 Several use cases to get you started 1. Forms

    with validation 2. Modals 3. Text length counter
  34. 34 Inline form with validation

  35. In action 35

  36. Behind the scenes 36

  37. Behind the scenes 37

  38. Behind the scenes 38

  39. Behind the scenes 39

  40. Behind the scenes 40

  41. And that’s it! 41 ➔ HTML over the wire ➔

    No extra API contract ➔ No serialization ➔ No JS !
  42. 42 Dynamic modals

  43. In action 43

  44. Behind the scenes 44

  45. Behind the scenes 45

  46. 46 Simple stimulus js widgets

  47. In action 47

  48. Behind the scenes 48

  49. Behind the scenes 49

  50. 50 Closing thoughts

  51. 51 Aftermath @ Windoo + Less code for equal features

    (-30% lines of code) + Less mental overhead to create new features + Better performance and speed + Interfaces are fun to make! - File naming conventions are hard - Lack of vanilla JS widgets: it’s hard to avoid the big front-end frameworks for high-precision components
  52. 52 Next steps @ Windoo 1. Using Mercure for live

    update 2. Remove React from project a. need alternatives for some widgets b. else, make it as small as possible (preact)? 3. Boilerplates, Maker commands, naming and coding standards…! 4. Tests
  53. Try it out! 53

  54. 54 https://github.com/florentdestremau/symfonycon-turbo Twitter: @FloDestremau Thanks for listening!