Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Kévin Dunglas

April 02, 2024

More Decks by Kévin Dunglas

Other Decks in Programming


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

    ➔ Creator of API Platform, FrankenPHP and Mercure @dunglas
  2. Web and Cloud Experts ➔ Development: PHP, JS, Go, Rust...

    ➔ DevOps and SRE ➔ Consultancy and maintenance ➔ Agile management, UX and UI design… ➔ [email protected] 💌
  3. “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
  4. 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
  5. 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)
  6. 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)
  7. 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
  8. 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
  9. “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
  10. 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
  11. 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
  12. 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>
  13. 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')) }}" <!-- loading="lazy" --> ></turbo-frame> {# templates/cart.html.twig #} <turbo-frame id="cart"> Cart content </turbo-frame>
  14. 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'); }
  15. # 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
  16. 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 = ''; }
  17. 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 %}
  18. 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
  19. ➔ 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
  20. 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
  21. $ pnpm create @api-platform/client \ --resource book -g next $

    pnpm create @api-platform/client \ --resource book -g expo API Platform Create Client
  22. 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
  23. 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
  24. Thank you! Want to know more about Symfony UX or

    API Platform? Meet our team at our booth! les-tilleuls.coop [email protected] @coopTilleuls