Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

The 2 ways to make modern web applications

Slide 5

Slide 5 text

“Standard” Single Page Apps “Radical Simplicity” approach

Slide 6

Slide 6 text

“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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

“Radical Simplicity” © Radical Simplicity, by Stephan Schmidt

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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)

Slide 11

Slide 11 text

Some Symfony UX Packages

Slide 12

Slide 12 text

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)

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Front-end development, Symfony-style #1

Slide 17

Slide 17 text

“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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Turbo Frames {# templates/base.html.twig #} {# … #} Navbar displayed on every pages Frame content, replaced on click {% block body %}{% endblock %}

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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'); }

Slide 23

Slide 23 text

# 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

Slide 24

Slide 24 text

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 = ''; }

Slide 25

Slide 25 text

Turbo Streams: Template {# main.html.twig #}
{# templates/broadcast/ #} {% block update %} {{ entity.title }} {% endblock %}

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Front-end development, Symfony-style #2

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

➔ 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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

Front-end development, Symfony-styleS!

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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