Slide 1
Slide 1 text
@weaverryan
With your friend Ryan Weaver
Modern UIs with UX,
a little JS & Zero Node
Slide 2
Slide 2 text
> Member of the Symfony docs team
> Husband of the talented and
beloved @leannapelham
symfonycasts.com
twitter.com/weaverryan
Howdy there!! I’m Ryan!
> Author person at
SymfonyCasts.com
Slide 3
Slide 3 text
Your new Build System:
Your browser
Part 1
@weaverryan
Slide 4
Slide 4 text
@weaverryan
Slide 5
Slide 5 text
export default class {
constructor(name) {
this.name = name;
}
quack() {
console.log(`${this.name} says: Quack!`);
}
}
public/duck.js
Slide 6
Slide 6 text
import Duck from './duck.js';
const duck = new Duck('Waddles');
duck.quack();
public/app.js
This just works!
Slide 7
Slide 7 text
All browsers now support
import, ES6 class syntax,
etc**
** Ok, not IE11, but that is less than 0.5%!
Slide 8
Slide 8 text
So then… why do I need
ANY tools?
Slide 9
Slide 9 text
Two Problems
1) Versioned Filenames
2) Importing 3rd Party Packages
import 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';
Slide 10
Slide 10 text
Hello AssetMapper
(Experimental in 6.3)
Part 2
@weaverryan
Slide 11
Slide 11 text
Asset Mapper Part #1 of 2:
Exposing & Versioning Assets
@weaverryan
Slide 12
Slide 12 text
%20}})
If my photo updates, my
fi
lename will update
automatically!"
Slide 13
Slide 13 text
How… did that work?
/assets/* is served by an internal Symfony listener
dev:
prod:
Run php bin/console asset-map:compile to physically
write all
fi
les into the public/assets/ directory
/assets/images/duck-3c16d9220694.png
Slide 14
Slide 14 text
Asset Mapper Part #2 of 2:
Importmap
@weaverryan
Slide 15
Slide 15 text
How can we use 3rd party
packages?
@weaverryan
Slide 16
Slide 16 text
import { Alert } from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';
const alert = new Alert(element);
This works
Yikes!
Slide 17
Slide 17 text
???
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
Now this works ✅
import { Alert } from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';
import { Alert } from 'bootstrap';
const alert = new Alert(element);
Slide 20
Slide 20 text
return [
'app' => [
'path' => 'app.js',
],
'bootstrap' => [
'url' => 'https://cdn.jsdelivr.net/npm/[email protected]/+esm',
],
];
importmap.php
Slide 21
Slide 21 text
{% block javascripts %}
{{ importmap() }}
{% endblock %}
base.html.twig
{
"imports": {
"app": "/assets/app-4e986c1a2318dd050b1d47db8d856278.js",
"bootstrap": "https://cdn.jsdelivr.net/npm/[email protected]/+esm"
}
}
Slide 22
Slide 22 text
import hljs from 'highlight.js/lib/core';
Slide 23
Slide 23 text
What about CSS?
@weaverryan
Slide 24
Slide 24 text
/* assets/styles/app.css */
body {
background: skyblue;
}
.quack {
background-image: url('../images/duck.png');
}
{% block stylesheets %}
{% endblock %}
Slide 25
Slide 25 text
3rd Party CSS?
@weaverryan
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
Not as smooth, but documented
Or download into assets/vendor/, include & commit.
Slide 29
Slide 29 text
Sass? Tailwind? ✅ (see docs about building)
JSX, Vue, TypeScript? ❌ (actually, yes, but a build system may be better)
Production Ready? ✅ (and performant)
Works on all browsers? ✅ (except for ancient browsers, like IE 11)
Slide 30
Slide 30 text
Does it combine and
minify the assets?
Slide 31
Slide 31 text
No!
By Design! Yay!
Slide 32
Slide 32 text
gzip/compress Assets
Do it on your web server / Cloud
fl
are
Combining Assets
Not needed**
Use an HTTP/2 powered web server / Cloud
fl
are
** not combining can even *help* performance:
if a single
fi
le is changed, users will only need to download that one
fi
le.
Slide 33
Slide 33 text
Part 3
Turbo: You're Handier
Than I Thought
@weaverryan
Slide 34
Slide 34 text
Create rich frontends while minimizing
the need for custom JavaScript
Goal
✅ Asset Mapper: Ciao node!
s
Turbo + Sprinkle of Stimulus
square
Live Components
Slide 35
Slide 35 text
https://bit.ly/30-days-hotwire
Slide 36
Slide 36 text
Need:
Even MORE demos on ux.symfony.com
@weaverryan
Slide 37
Slide 37 text
@weaverryan
Part 4
Symfony UX:
2.8 & 2.9
Slide 38
Slide 38 text
Symfony UX 2.8
@weaverryan
Slide 39
Slide 39 text
Two New Components
symfony/ux-translator
symfony/ux-svelte
import { trans, NUM_OF_APPLES } from '../translator';
trans(NUM_OF_APPLES, {
apples: 2
})
Slide 40
Slide 40 text
Live Components
* Smart Rendering System
* Communication between components: emit()
* First class data serializing & invalid data handling
* … lot's more!
Slide 41
Slide 41 text
New Demos:
ux.symfony.com/live-components
@weaverryan
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
HTML Twig Syntax
{% component Alert {
type: 'success',
closeable: allowClose
} %}
{% block body %}Quack!{% endblock %}
{% endcomponent %}
Slide 44
Slide 44 text
HTML Twig Syntax
Quack!
Slide 45
Slide 45 text
Symfony UX 2.9
@weaverryan
Slide 46
Slide 46 text
UX 2.9
StimulusBundle
AssetMapper Support!
{{ stimulus_* }} functions moved out of
WebpackEncoreBundle and into StimulusBundle.
Slide 47
Slide 47 text
Yes, this means you can use Chart.js,
LiveComponents, Autocomplete, etc
entirely by writing PHP (no node!)
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
#[AsLiveComponent()]
class DonutChart
{
use DefaultActionTrait;
#[LiveProp(writable: true)]
public int $slices = 5;
public function __construct(
private ChartBuilderInterface $chartBuilder,
) {
}
public function getChart(): Chart
{
$chart = $this->chartBuilder->createChart('doughnut');
$chart->setData(...);
return $chart;
}
}
Slide 50
Slide 50 text
How many slices?
{{ render_chart(this.chart) }}
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
We've come a long way…
@weaverryan
Slide 53
Slide 53 text
Symfony Cat Barcelona 2016
Slide 54
Slide 54 text
That's no longer a given!
@weaverryan
Slide 55
Slide 55 text
Browsers
Importmaps, import, ES6
features
HTTP/2 Requests download in parallel
AssetMapper Asset versioning + Extra DX
Slide 56
Slide 56 text
RIP Build Systems?
React, Vue, Next.js, etc
Tailwind / Sass
TypeScript
use their tools to build
use its tools to build
best served using their build system / a build system
Slide 57
Slide 57 text
Hotwire: HTML over the Wire
Alternative Path
HTML in templates , 0 Node , low custom JS
Slide 58
Slide 58 text
AssetMapper ❌ build system / node
Symfonycasts tutorial coming this month!
Slide 59
Slide 59 text
Turbo
Remove full page
reloads & more*
https://bit.ly/30-days-hotwire
SymfonyCasts.com/turbo
❌
Slide 60
Slide 60 text
Stimulus
A sprinkle of
custom JavaScript
SymfonyCasts.com/stimulus
🧁
Slide 61
Slide 61 text
LiveComponents
Swiss-Army Knife:
Make your Twig templates
reload live on the site.
🗡
Symfonycasts tutorial coming soon!
Slide 62
Slide 62 text
Thank you!
@weaverryan
Symfony UX
ux.symfony.com
Turbo Tutorial
symfonycasts.com/screencast/turbo
Stimulus Tutorial
symfonycasts.com/screencast/stimulus