The Symfony Frontend
Rick Kuipers
Developer @ Testersuite
Hello!
PC-Advice
For anyone willing to let a 14-year-old mess around in RegEdit.exe
Backend Architecture
Top 50
Separating frontend from backend
Pros
API driven development allows for multiple clients
Easier to separate frontend and backend teams
Freedom of technology for the frontend
Cons
Duplicated logic and ACL
Lots of data transformations
Slower development time
Two repositories, pipelines, ecosystems, CVEs and deployments
Extra state management in the frontend
Chess + Beer
StickChess.com
Turbo
Twig Components
Live Components
Autocomplete
Chart.js
React
Vue.js
Svelte
Image Cropper
Lazy Image
Stylized Dropzone
Swup Integration
Notify
Typed
Translate
Toggle Password
Twig Components
Live Components
Twig Components
Reusable, object-oriented templates.
Macros and Includes
Twig Components
components/Title.html.twigTwig Components
components/RoundTitle.html.twigTwig Components
components/TournamentTitle.html.twigTwig template + PHP class
Twig Components
components/TournamentList.html.twigTwig Components
App\Twig\Components\TournamentListTwig Components
StickChess demo
Live Components
Reactive Twig components
Demo
What's happening?
On Change → Re-render template from backend
Demo
One solution fits all?
Heck no!
Every change hits the backend
Match Results
Alternatives
Alternatives
React
Vue.js
Svelte
The True Message
The architecture should fit your team.
Choose tech that isn't volatile and keep your footprint small.
