Front-end application development, Symfony-style(s)

Front-end development, Symfony-style(s) Photo by Maria Lupan

Kévin Dunglas ➔ Co-founder of Les-Tilleuls.coop ➔ Symfony Core Team
➔ Creator of API Platform, FrankenPHP and Mercure @dunglas

Web and Cloud Experts ➔ Development: PHP, JS, Go, Rust...
➔ DevOps and SRE ➔ Consultancy and maintenance ➔ Agile management, UX and UI design… ➔ [email protected] 💌

The 2 ways to make modern web applications

“Standard” Single Page Apps “Radical Simplicity” approach

“Standard” Single Page Apps ➔ The browser downloads and executes
a web application written in JavaScript ➔ The application fetches data to display from a web API (the Symfony/API Platform app) ➔ On user interaction (click, form submission…), the JavaScript app sends a request to the server and updates the DOM using the content of the response

The problem with “standard” SPAs © Radical Simplicity, by Stephan
Schmidt

“Radical Simplicity” © Radical Simplicity, by Stephan Schmidt

Radical simplicity, Symfony-style Standard Setup Radical simple setup Many Microservices
Majestic Monolith React Hotwired (Turbo + Stimulus) Next.js NPM + Webpack + Babel + … AssetMapper JavaScript SPA REST API (API Platform) GraphQL (API Platform) PostgreSQL SQLite (or PostgreSQL) Redis Elastic Kubernetes + NGINX + FPM + Websocket server FrankenPHP

Symfony UX and Symfony AssetMapper ➔ Tackle the complexity without
losing the beneﬁts of modern applications ➔ Relies on a client-side, HTML-driven micro-framework (Hotwired, written in JS)... ➔ but mostly on the features built into the web platform (web components, importmap…) ➔ In most cases, you don’t have to write JS by yourself, just use Symfony and Twig, as usual Beneﬁts: ➔ Easier to write (Symfony/Twig + HTML) ➔ More reliable (simple) ➔ Better time to market ➔ Easier recruiting ➔ Happier devs (1 programming language)

Some Symfony UX Packages

Symfony UX apps are perfect for ➔ Content Management Systems
➔ Traditional e-commerce websites ➔ Small/simple business apps You get for free: ➔ Incredible cache dynamics (when used with Varnish, Cloudﬂare, Fastly…) ➔ Good SEO (fast 1st page load)

Sometimes, complexity is unavoidable ➔ API-ﬁrst strategies ➔ Web or
native applications that can operate oﬄine ➔ Advanced, non-HTML user interfaces: video games, 3D, Virtual Reality, advanced editors à la Google Docs… ➔ Heavy usage of device hardware: GPS, Bluetooth, gyroscope, camera… ➔ IoT

Here comes API Platform ➔ State of the art web
API: REST / RDF / GraphQL ➔ Built for containers / Kubernetes ➔ First class integration with popular “heavy” frontend technologies: ◆ React/Next.js ◆ Vue.js/Nuxt ◆ React Native/Expo

Front-end development, Symfony-style #1

“Radical Simplicity” $ symfony new my_project --webapp $ frankenphp \
php-server --mercure --root public/ ➔ Symfony full stack ◆ Twig ◆ AssetMapper ➔ Symfony UX + Hotwired ◆ Turbo (SPA out of the box!!) ◆ Stimulus

Turbo Drive ➔ Automatically transforms your pure Symfony+Twig app in
SPA! ➔ Watches for clicks and form submissions ➔ Loads pages in the background using fetch() ➔ Replaces the <body>, merges the <head> ➔ Changes browser’s history using history.pushState ➔ Customizable progress bar

Turbo Frames ➔ Functionally similar to old school HTML frames
➔ Update parts of the page (blocks) ➔ Capture links and forms in this frame ➔ The content of the frame is extracted from the response, and the existing content is replaced ➔ The response can contain the full page, or only a fragment ➔ A page can contain multiple frames

Turbo Frames {# templates/base.html.twig #} <!DOCTYPE html> {# … #}
<header>Navbar displayed on every pages</header> <main> <turbo-frame id="body"> Frame content, replaced on click {% block body %}{% endblock %} </turbo-frame> </main>

Eeager and Lazy Loading Frames {# templates/base.html.twig #} Navbar displayed
on every pages <turbo-frame id="cart" src="{{ fragment_uri(controller('App\\Controller\\MyController::cart')) }}"  ></turbo-frame> {# templates/cart.html.twig #} <turbo-frame id="cart"> Cart content </turbo-frame>

Lazy Loading Frames Controller #[Route('/')] #[Cache(public: true, maxage: 3600)] public
function index() { /* … */ } #[Cache(public: false, maxage: 0)] public function cart() { return $this->render('cart.html.twig'); }

# Install Mercure support composer require symfony/mercure-bundle # Then enable
it in assets/controllers.json Turbo Streams ➔ Add real-time capabilities to your websites thanks to Mercure: server pushes changes to all connected users ➔ Stream page changes as fragments of HTML ➔ No JavaScript to write: only markup

Turbo Streams: Broadcast an entity use Doctrine\ORM\Mapping as ORM; use
Symfony\UX\Turbo\Attribute\Broadcast; #[ORM\Entity] #[Broadcast] // 🔥 The magic happens here class Book { #[ORM\Column, ORM\Id, ORM\GeneratedValue(strategy: "AUTO")] public ?int $id = null; #[ORM\Column] public string $title = ''; }

Turbo Streams: Template {# main.html.twig #} <div id="book_{{ book.id }}"
{{ turbo_stream_listen(book) }}></div> {# templates/broadcast/Book.stream.html.twig #} {% block update %} <turbo-stream action="update" target="book_{{ id }}"> <template>{{ entity.title }}</template> </turbo-stream> {% endblock %}

Front-end development, Symfony-style #2

Embracing the complexity $ gh repo create my_project \ --template
api-platform/api-platform $ docker compose up --wait The API Platform distribution: ➔ Symfony / API Platform API (REST/RDF/GraphQL) ➔ Next.js client application ➔ Next.js, Nuxt and Expo client scaﬀolding tool ➔ React Admin-based admin UI ➔ Docker / Kubernetes and GitHub Actions template

➔ Scaﬀold CRUD Single Page Apps for: ◆ Next.js (React)
◆ Nuxt (Vue.js) ◆ Expo (React Native) ➔ Generate the code by reading the API documentation ◆ Supports Hydra and OpenAPI (experimental) ➔ Write you own templates ➔ Native support for Mercure (realtime updates) ➔ Work with existing Symfony apps: standalone packages available Scaﬀold your JavaScript apps

The Next.js Generator ➔ TypeScript: Serious JavaScript ➔ TanStack Query:
Powerful async state management (with cache, Mercure support) ➔ Formik: Forms on steroid ➔ Tailwind CSS: CSS without leaving your HTML

$ pnpm create @api-platform/client \ --resource book -g next $
pnpm create @api-platform/client \ --resource book -g expo API Platform Create Client

API Platform Admin ➔ Dynamic, client-side admin for your data
➔ No code by default (go to /admin) ◆ Read the API docs (Hydra or OpenAPI) ➔ Entirely customizable ➔ Built on top of React Admin, React, and MUI ➔ Automatic real time update through Mercure

Front-end development, Symfony-styleS!

Choose the right tools Symfony UX (Hotwired + AssetMapper): ➔
Simple and easy, low JavaScript, just Symfony, Twig and HTML ➔ Fast as hell ➔ Best for CMS, e-commerce, small businesses apps API Platform (API + SPA): ➔ Unlock the full power of the web platform ➔ Still easy to use ➔ Best for complex apps, API-ﬁrst, microservices, IoT

Thank you! Want to know more about Symfony UX or
API Platform? Meet our team at our booth! les-tilleuls.coop [email protected] @coopTilleuls

Front-end application development, Symfony-style(s)

Front-end application development, Symfony-style(s)

Kévin Dunglas

More Decks by Kévin Dunglas

Other Decks in Programming

Featured

Transcript

Front-end development, Symfony-style(s) Photo by Maria Lupan

Kévin Dunglas ➔ Co-founder of Les-Tilleuls.coop ➔ Symfony Core Team

Web and Cloud Experts ➔ Development: PHP, JS, Go, Rust...

The 2 ways to make modern web applications

“Standard” Single Page Apps “Radical Simplicity” approach

“Standard” Single Page Apps ➔ The browser downloads and executes

The problem with “standard” SPAs © Radical Simplicity, by Stephan

“Radical Simplicity” © Radical Simplicity, by Stephan Schmidt

Radical simplicity, Symfony-style Standard Setup Radical simple setup Many Microservices

Symfony UX and Symfony AssetMapper ➔ Tackle the complexity without

Some Symfony UX Packages

Symfony UX apps are perfect for ➔ Content Management Systems

Sometimes, complexity is unavoidable ➔ API-ﬁrst strategies ➔ Web or

Here comes API Platform ➔ State of the art web

Front-end development, Symfony-style #1

“Radical Simplicity” $ symfony new my_project --webapp $ frankenphp \

Turbo Drive ➔ Automatically transforms your pure Symfony+Twig app in

Turbo Frames ➔ Functionally similar to old school HTML frames

Turbo Frames {# templates/base.html.twig #} <!DOCTYPE html> {# … #}

Eeager and Lazy Loading Frames {# templates/base.html.twig #} Navbar displayed

Lazy Loading Frames Controller #[Route('/')] #[Cache(public: true, maxage: 3600)] public

# Install Mercure support composer require symfony/mercure-bundle # Then enable

Turbo Streams: Broadcast an entity use Doctrine\ORM\Mapping as ORM; use

Turbo Streams: Template {# main.html.twig #} <div id="book_{{ book.id }}"

Front-end development, Symfony-style #2

Embracing the complexity $ gh repo create my_project \ --template

➔ Scaﬀold CRUD Single Page Apps for: ◆ Next.js (React)

The Next.js Generator ➔ TypeScript: Serious JavaScript ➔ TanStack Query:

$ pnpm create @api-platform/client \ --resource book -g next $

API Platform Admin ➔ Dynamic, client-side admin for your data

Front-end development, Symfony-styleS!

Choose the right tools Symfony UX (Hotwired + AssetMapper): ➔

Thank you! Want to know more about Symfony UX or