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 benefits 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 Benefits: ➔ 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, Cloudflare, Fastly…) ➔ Good SEO (fast 1st page load)

No content

Sometimes, complexity is unavoidable ➔ API-first strategies ➔ Web or native applications that can operate offline ➔ 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 , merges the ➔ 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 #} {# … #} Navbar displayed on every pages Frame content, replaced on click {% block body %}{% endblock %}

Eeager and Lazy Loading Frames {# templates/base.html.twig #} Navbar displayed on every pages > {# templates/cart.html.twig #} Cart content

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 #} {# templates/broadcast/Book.stream.html.twig #} {% block update %} {{ entity.title }} {% endblock %}

No content

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 scaffolding tool ➔ React Admin-based admin UI ➔ Docker / Kubernetes and GitHub Actions template

➔ Scaffold 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 Scaffold 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

No content

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

No content

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-first, 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