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

Slide 1

Slide 1 text

Symfony & Hotwire An efﬁcient combo to quickly develop complex applications Florent Destremau

Slide 2

Slide 2 text

Florent Destremau CTO & Founder @ Windoo Using Symfony since 2.1 2 @FloDestremau ﬂorentdestremau @FlorentDestrema

Slide 3

Slide 3 text

3 Windoo helps companies in engaging their employees. Software Services TRAINING & COACHING WELLNESS & QWL TEAMBUILDING PULSE SURVEYS FLASH SURVEYS EMPLOYEE NPS FEEDBACK

Slide 4

Slide 4 text

Slide 5

Slide 5 text

5 What is hotwire? ➔ https://hotwired.dev ➔ Created by 37 signals ➔ published ~dec. 2020

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

7 Why do we use Hotwire @ Windoo ? Team: 1. little experience in maintaining a full JS frontend 2. small size (3 devs) 3. backend proﬁles

Slide 8

Slide 8 text

8 Why do we use Hotwire @ Windoo ? Project 1. B2B SaaS, web & desktop ﬁrst 2. lots of CRUD interfaces and forms 3. dataviz dashboards & graphs 4. fast iteration

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

11 How to use Hotwire?

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

13 Turbo Stimulus JS How does Hotwire work Drive Frames Streams

Slide 14

Slide 14 text

14 Turbo drive

Slide 15

Slide 15 text

15 Turbo drive = give a SPA feel to your app

Slide 16

Slide 16 text

16 Turbo frames

Slide 17

Slide 17 text

17 Turbo frames = create local contexts

Slide 18

Slide 18 text

18 Turbo frame = create local contexts Using a custom html element:

Slide 19

Slide 19 text

19 Turbo frame = create local contexts

Slide 20

Slide 20 text

20 Turbo frame = create local contexts

Slide 21

Slide 21 text

21 Turbo streams

Slide 22

Slide 22 text

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)

Slide 23

Slide 23 text

Turbo streams 23

Slide 24

Slide 24 text

Turbo streams 24

Slide 25

Slide 25 text

Turbo streams 25

Slide 26

Slide 26 text

Turbo streams 26

Slide 27

Slide 27 text

27 Stimulus JS

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

29 Stimulus JS = a javascript micro-framework

Slide 30

Slide 30 text

30 Stimulus JS = a javascript micro-framework

Slide 31

Slide 31 text

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 !

Slide 32

Slide 32 text

32 Going live

Slide 33

Slide 33 text

33 Several use cases to get you started 1. Forms with validation 2. Modals 3. Text length counter

Slide 34

Slide 34 text

34 Inline form with validation

Slide 35

Slide 35 text

In action 35

Slide 36

Slide 36 text

Behind the scenes 36

Slide 37

Slide 37 text

Behind the scenes 37

Slide 38

Slide 38 text

Behind the scenes 38

Slide 39

Slide 39 text

Behind the scenes 39

Slide 40

Slide 40 text

Behind the scenes 40

Slide 41

Slide 41 text

And that’s it! 41 ➔ HTML over the wire ➔ No extra API contract ➔ No serialization ➔ No JS !

Slide 42

Slide 42 text

42 Dynamic modals

Slide 43

Slide 43 text

In action 43

Slide 44

Slide 44 text

Behind the scenes 44

Slide 45

Slide 45 text

Behind the scenes 45

Slide 46

Slide 46 text

46 Simple stimulus js widgets

Slide 47

Slide 47 text

In action 47

Slide 48

Slide 48 text

Behind the scenes 48

Slide 49

Slide 49 text

Behind the scenes 49

Slide 50

Slide 50 text

50 Closing thoughts

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Try it out! 53

Slide 54

Slide 54 text

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