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. Florent Destremau CTO & Founder @ Windoo Using Symfony since

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

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

  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 18 Turbo frame = create local contexts Using a custom

    html element: <turbo-frame></turbo-frame>
  10. 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)
  11. 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
  12. 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 !
  13. 33 Several use cases to get you started 1. Forms

    with validation 2. Modals 3. Text length counter
  14. And that’s it! 41 ➔ HTML over the wire ➔

    No extra API contract ➔ No serialization ➔ No JS !
  15. 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
  16. 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