Symfony UX: Turbo
6:19:46
What you'll be learning
// composer.json
{
"require": {
"php": ">=7.4.0",
"ext-ctype": "*",
"ext-iconv": "*",
"composer/package-versions-deprecated": "1.11.99.1", // 1.11.99.1
"doctrine/annotations": "^1.0", // 1.13.1
"doctrine/doctrine-bundle": "^2.2", // 2.3.2
"doctrine/orm": "^2.8", // 2.9.1
"phpdocumentor/reflection-docblock": "^5.2", // 5.2.2
"sensio/framework-extra-bundle": "^6.1", // v6.1.4
"symfony/asset": "5.3.*", // v5.3.0-RC1
"symfony/console": "5.3.*", // v5.3.0-RC1
"symfony/dotenv": "5.3.*", // v5.3.0-RC1
"symfony/flex": "^1.3.1", // v1.13.3
"symfony/form": "5.3.*", // v5.3.0-RC1
"symfony/framework-bundle": "5.3.*", // v5.3.0-RC1
"symfony/property-access": "5.3.*", // v5.3.0-RC1
"symfony/property-info": "5.3.*", // v5.3.0-RC1
"symfony/proxy-manager-bridge": "5.3.*", // v5.3.0-RC1
"symfony/runtime": "5.3.*", // v5.3.0-RC1
"symfony/security-bundle": "5.3.*", // v5.3.0-RC1
"symfony/serializer": "5.3.*", // v5.3.0-RC1
"symfony/twig-bundle": "5.3.*", // v5.3.0-RC1
"symfony/ux-chartjs": "^1.1", // v1.3.0
"symfony/ux-turbo": "^1.3", // v1.3.0
"symfony/ux-turbo-mercure": "^1.3", // v1.3.0
"symfony/validator": "5.3.*", // v5.3.0-RC1
"symfony/webpack-encore-bundle": "^1.9", // v1.11.2
"symfony/yaml": "5.3.*", // v5.3.0-RC1
"twig/extra-bundle": "^2.12|^3.0", // v3.3.1
"twig/intl-extra": "^3.2", // v3.3.0
"twig/string-extra": "^3.3", // v3.3.1
"twig/twig": "^2.12|^3.0" // v3.3.2
},
"require-dev": {
"doctrine/doctrine-fixtures-bundle": "^3.4", // 3.4.0
"symfony/debug-bundle": "^5.2", // v5.3.0-RC1
"symfony/maker-bundle": "^1.27", // v1.31.1
"symfony/monolog-bundle": "^3.0", // v3.7.0
"symfony/stopwatch": "^5.2", // v5.3.0-RC1
"symfony/var-dumper": "^5.2", // v5.3.0-RC1
"symfony/web-profiler-bundle": "^5.2", // v5.3.0-RC1
"zenstruck/foundry": "^1.10" // v1.10.0
}
}Think you need to build an SPA (single page app) in React or Vue to make your site feel like an SPA? Think again!
In part 1 of this series - Symfony UX: Stimulus - we talked about a library that allows you to attach JavaScript functionality to HTML elements - even if that HTML is loaded via AJAX.
In this course, we'll talk about Turbo: a JavaScript library that instantly makes your site feel like an SPA. How? By turning every link and form into an AJAX call... without you needing to make any changes to your app (well, almost no changes):
- Understanding and enabling Turbo Drive!
- Reloading the page when assets change
- Form updates: returning a 4xx status code
- AJAX loading parts of your page with Turbo Frames
- Symfony'x ux-turbo package!
- Making links/form submits "stay" inside a frame
- Targeting the main page from a frame
- Turbo streams: updating multiple parts of your page from the server!
The end result? A "traditional" site (one that returns HTML) that absolutely flies!
Your Guides
-
01. Turbo: Drive, Frames & Streams!5:03
-
02. Installing Turbo3:41
-
03. How Turbo Drive Works9:37
- 3 challenges
-
04. Turbo-Friendly JavaScript6:56
- 2 challenges
-
05. The "defer" Attribute & Conditionally Activating Turbo4:02
- 1 challenge
-
06. Form 422 Status & renderForm()9:05
- 1 challenge
-
07. Form Submits & The Preview Feature7:06
- 1 challenge
-
08. The Problem of Snapshots & JavaScript Popups9:46
- 2 challenges
-
09. Cleanup Before Snapshotting (e.g. Modals)6:03
- 1 challenge
-
10. Fixing the Sweetalert Modal7:14
-
11. Organizing our Turbo Events Code3:12
-
12. 3rd Party JavaScript Widgets7:52
- 1 challenge
-
13. Fixing External JS + Analytics Code8:46
- 2 challenges
-
14. Reloading When JS/CSS Changes6:52
- 2 challenges
-
15. Manual Visits with Turbo5:04
- 1 challenge
-
16. CSS Page Transitions7:24
- 2 challenges
-
17. Polished CSS Transitions8:58
- 1 challenge
-
18. Prefetching the Next Page5:19
-
19. <link rel="prefetch">7:37
- 1 challenge
-
20. Turbo Frames: Lazy Frames6:32
- 1 challenge
-
21. Turbo Frames Look for & Load the Matching Frame4:24
- 2 challenges
-
22. Using a Full HTML Page to Populate a Frame7:24
- 2 challenges
-
23. Reliably Load External JS with Stimulus9:57
-
24. Targeting Links in or out of the Frame5:00
- 1 challenge
-
25. Adding a "Read More" Ajax Frame8:02
- 1 challenge
-
26. Frame Loading Animations7:45
- 1 challenge
-
27. Review this Product... in a turbo-frame!7:50
-
28. Globally Disable Buttons on Form Submit5:50
- 1 challenge
-
29. Frame-Powered Inline Editing6:45
-
30. Frames & Form "action" Attributes7:45
-
31. Frame Redirecting & Dynamic Frame Targets6:21
- 1 challenge
-
32. turbo-frame inside a Modal7:06
-
33. Lazy Modal & Big Cleanup4:59
-
34. Close the Modal after turbo-frame Success6:17
- 1 challenge
-
35. Prevent a turbo-frame from Rendering6:34
- 1 challenge
-
36. Full Page Redirect from a Frame6:05
- 1 challenge
-
37. Redirecting the Full Page from a Frame5:14
-
38. Frame Redirecting and Clearing the Snapshot Cache6:51
- 1 challenge
-
39. Manual "Restore" Visit8:11
-
40. Adding a Custom Request Header Based on the Frame7:02
-
41. Smart Frame Redirecting with the Server6:29
-
42. Automatically Redirect Ajax Calls to /login5:14
-
43. Turbo Streams8:01
- 3 challenges
-
44. Streams: Reusing Templates4:37
-
45. Multiple Updates in one Stream6:55
- 1 challenge
-
46. Processing Streams by Hand for Fun & Profit5:18
- 2 challenges
-
47. Mercure: Pushing Stream Updates Async4:43
- 1 challenge
-
48. Running the Mercure Service in the symfony Binary4:29
-
49. Listening & Publishing5:42
- 1 challenge
-
50. Mercure Hub's JWT Authorization6:58
- 1 challenge
-
51. Publishing Mercure Updates in PHP3:47
-
52. Turbo Stream for Instant Review Update8:50
-
53. Smartly Updating Elements for all Users7:06
-
54. Visually Highlighting new Items that Pop onto the Page5:26
-
55. Entity Broadcast7:02
-
56. Broadcasting Frontend Changes on Entity Update/Remove7:28
-
57. Toast Notifications10:14
Awesome! Keep up the good work in the
JavaScript Frameworks & Tools: Symfony UX, Stimulus & Turbo
section of the
JavaScript Frameworks & Tools
Track!
JavaScript Frameworks & Tools: Symfony UX, Stimulus & Turbo section of the JavaScript Frameworks & Tools Track!
