Slide 1
Slide 1 text
With your friend Ryan Weaver
Hands on with LiveComponents,
AssetMapper, Stimulus & Turbo
@weaverryan
Slide 2
Slide 2 text
> Member of the Symfony core team
> Husband of the beloved @leannapelham
symfonycasts.com
twitter.com/weaverryan
Howdy there!! I’m Ryan!
> Father to Beckett… he's here!!!
> Author person at SymfonyCasts.com
(and occasional Mickey Mouse)
> Hobbies: thinking about modals
Slide 3
Slide 3 text
Complexity
Solution
Unlearning
@weaverryan
Slide 4
Slide 4 text
Rounding Corners
with Images
Slide 5
Slide 5 text
Complexity
Slide 6
Slide 6 text
Solution
.button {
border: 1px solid #000;
border-radius: 3px;
}
Slide 7
Slide 7 text
Unlearning
Slide 8
Slide 8 text
JavaScript's Rounded Corners
__proto__ inheritance
No import/export syntax
HTTP/1.1
No 3rd party package system
avoid OO
10k line
fi
les
CDN's & global variables
combine
fi
les
minimize requests
Slide 9
Slide 9 text
Solution?
Node & npm Webpack
Automate the corner images!
Slide 10
Slide 10 text
Faster Automatic Rounded Images
esbuild
Vite
Slide 11
Slide 11 text
Solution?
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
HTTP/2
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Unlearning
Slide 18
Slide 18 text
Combining
fi
les to limit requests
JavaScript build system & rewriting our code
Node, node_modules
Slide 19
Slide 19 text
#NoBuild
Slide 20
Slide 20 text
Asset Mapper
@weaverryan
Slide 21
Slide 21 text
Asset Mapper
2 Features
@weaverryan
Slide 22
Slide 22 text
1) Asset Paths
assets/images/greetings.png
%20}})
Slide 23
Slide 23 text
2) Importmap
{
"imports": {
"app": "/assets/app-bd158fb0cda965d22ba27e0b1ce53b58.js",
"js-confetti": "/assets/vendor/js-confetti/index-1241…js"
}
}
New in 6.4
3rd party packages downloaded locally
Slide 24
Slide 24 text
// assets/app.js
import JSConfetti from 'js-confetti';
const jsConfetti = new JSConfetti();
jsConfetti.addConfetti();
2) Importmap
Slide 25
Slide 25 text
New in 6.4
CSS Support
import '../styles/app.css';
// assets/app.js
import('../styles/lazy.css');
import 'bootstrap/dist/css/bootstrap.min.css';
Slide 26
Slide 26 text
CSS Support
Slide 27
Slide 27 text
Build it if you need it
✅ Sass symfonycasts/sass-bundle
✅ Tailwind symfonycasts/tailwind-bundle
✅ TypeScript sensiolabs/typescript-bundle
Slide 28
Slide 28 text
Experimental
stable: LTS
@weaverryan
Slide 29
Slide 29 text
Stimulus
WebpackEncoreBundle StimulusBundle
@weaverryan
Slide 30
Slide 30 text
Turbo 8
Morphing
View Transitions
Strada
(beta)
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
Demo?
@weaverryan
Slide 34
Slide 34 text
30 Days of LAST Stack
Dec 1 - 31
AJAX SPA
Toast Noti
fi
cations
Modals
Tailwind
Popovers
View Transitions
Data Tables
Reusable Twig Components
Dynamic Forms
https://symfonycasts.com/last-stack
#NoBuild
Slide 35
Slide 35 text
It takes a village
@weaverryan
Slide 36
Slide 36 text
@hotwired/turbo
@hotwired/stimulus
symfony/ux
100+ contributors
100+ contributors
100+ contributors
864 commits this year!
@weaverryan
Slide 37
Slide 37 text
Jakub Caban
Tomas Norkūnas
Bart Vanderstukken
Matheo Daninos
Jacob Tobiasz
Maelan Le Borgne
Nicolas Rigaud
Jonathan Scheiber
Slide 38
Slide 38 text
Kevin Bond
Twig/Live Component co-creator,
testing tools, zenstruck
Slide 39
Slide 39 text
Simon André
1 million di
ff
erent things
all over the place
Slide 40
Slide 40 text
2024
Slide 41
Slide 41 text
Thank you!
30 days of LAST Stack
https://symfonycasts.com/last-stack
Free & Public through Jan 15th!
@weaverryan