Can you imagine, you would not have to refresh the page to get updated content? I will show you how real-time updates with Mercure protocol work "under the hood" and example implementation on Peon's codebase.

1. Real-time updates with
Mercure protocol and
Symfony UX Turbo
Jan Mikeš
#PHPAMSTERDAM
21.04.2022
@honza_mikes

2. ▸Introducing the Mercure protocol & how it works
▸Suitable use cases
▸Clean implementation in Peon.dev codebase
What to expect from the talk

3. ▸Hello world
▸How to install Mercure into your app
▸How to running Mercure server
▸Introduction to Hotwire Turbo
What to NOT expect from the talk

4. ▸Fully open sourced (github.com/dunglas/mercure)
▸Native browser support using server-sent events
▸Leverages HTTP/2
▸Built-in connection re-establishment
▸Works in IE7+ with polyfills
▸JWT based authorization
▸Lovely Debug GUI
▸Pushing updates via HTTP POST 🔥
Mercure
The modern websockets

8. cation benefits from

9. ▸Live availability (e-commerce, booking.com)
▸Chat
▸Asynchronous jobs
▸Real-time user collaboration
User Experience - provide feedback to the user

10. ▸User tells Peon to run a task, which creates a (pending) job
▸Worker in background starts working on this job
▸Job is finished
Peon "run a task" domain usecase

15. r user experience e

17. ▸User tells Peon to run a task, which creates a (pending) job
▸Worker in background picks this job
▸Job finishes
Peon "run a task" domain usecase
▸As a user, I want to see updates about the status

18. Before you start
▸Basic knowledge about the Mercure
▸Basic knowledge about the Hotwire Turbo
▸Running Mercure server to connect
▸Installed and configured symfony/ux-turbo-mercure

21. Application must behave exactly the
same way with Mercure as without it
Refreshing the page, user must see
exactly the same content
▸Reusable fragment template
▸Stream template, includes fragments
▸Controller template, includes fragments
3 types of templates

23. https://symfony.com/bundles/ux-turbo/current/index.html#coming-alive-with-turbo-streams

25. https://turbo.hotwired.dev/handbook/streams

26. ▸Positive side effect on performance
▸If possible, use the Caddy as web server
▸Don't use it everywhere only because it is cool :-)
Final thoughts

27. Kudos to
Kévin Dunglas

28. ▸https://mercure.rocks
▸https://turbo.hotwired.dev
▸https://symfony.com/bundles/ux-turbo
▸https://developer.mozilla.org/en-US/docs/Web/API/Server-
sent_events/Using_server-sent_events
▸https://developer.mozilla.org/en-
US/docs/Web/API/EventSource
▸https://github.com/peon-dev/peon
Useful resources

29. THANK YOU!
janmikes.cz
@honza_mikes