Save 37% off PRO during our Black Friday Sale! »

Symfony & Frontend

Symfony & Frontend

En esta charla se hace un repaso por el pasado, presente y futuro en la que gestionar nuestro frontend desde aplicaciones Symfony.

391d70e6cfd94b56b666f5074479202a?s=128

Francisco Santamaria

November 04, 2021
Tweet

Transcript

  1. SYMFONY FRONTEND &

  2. PASADO 01 Assetic, Prototype PRESENTE 02 Webpack Encore FUTURO 03

    Symfony UX
  3. PASADO 01

  4. Prototype & Assetic • Symfony 1: Prototype • Symfony 2:

    Assetic (librería 100% PHP)
  5. Assetic: conceptos • Assets: ficheros css, js, imágenes • Filtros:

    Acciones a aplicar sobre esos assets, ej: minificar, compilar, optimizar imágenes, ...
  6. Assetic: ejemplo

  7. Assetic • Dumping de los assets: ◦ En el entorno

    dev era dinámico ▪ Podía ser lento, pero opcional ejecutar assetic:watch ◦ En prod se generaban ficheros versionados ▪ Había que ejecutar:
  8. PRESENTE 02

  9. Webpack Encore • Nueva manera de gestionar assets desde Symfony

    >=4 (2017) • Librería de Node.js • Webpack es la herramienta más utilizada • Webpack es súper potente pero complejo de configurar • Disponible también un bundle para la integración en Symfony Npm 2010 Webpack 2012 Gulp 2013 Babel 2014
  10. Webpack vs Webpack Encore

  11. Instalación

  12. Uso básico • Partimos de un fichero inicial. ej: app.js

    • Resolverá todos los require/import que haya
  13. Integración en las plantillas • Se puede hacer de manera

    manual/tradicional: • Ó de la manera correcta:
  14. HTML generado NOTA: Ojo al detalle del atributo defer

  15. Múltiples entries • Un único entry puede estar bien para

    aplicaciones pequeñas o una SPA, pero cuando empieza a crecer mejor separar
  16. Versionado • Gracias a los ficheros manifest.json y entrypoints.json

  17. Sass/Less, Typescript, Babel, react/vue, split, ... • Configurarlo en Webpack

    manualmente era engorroso.
  18. Sass/Less, Typescript, Babel, react/vue, split, ... • Te dará error,

    pero te dirá lo que hacer para solucionarlo
  19. DEMO! Usando Encore

  20. FUTURO 03 YA PRESENTE

  21. THE MAJESTIC MONOLITH @DHH

  22. Ya estaban dando la tabarra...

  23. SYMFONY UX • Busca acercar los postulados del Majestic Monolith

    • Muy reciente (Dic. 2020) • Puente entre el backend y el frontend • Permitir el desarrollo de una aplicación completa desde el propio Framework sin necesidad de tener sistemas desacoplados
  24. None
  25. 2 tipos principales de Aplicaciones Web APLICACIONES TRADICIONALES SINGLE PAGE

    APPLICATIONS • Symfony, Ruby on Rails, Laravel • El HTML se construye en el servidor • Se añade JS por encima de éste • Basado en los actuales standards de los navegadores • React, Vue, Angular • El HTML lo genera Javascript • El servidor devuelve JSON • Lógica avanzada en el lado del cliente • Lógica repetida entre front y back • Reimplementa algunos conceptos como history, sesiones, sincronización ...
  26. … SON MUY CHULAS!!

  27. LA VERDAD ES QUE SÍ ;)

  28. ...pero también SON COMPLEJAS Angular != React != Vue Observables,

    RxJS, Vue Reactivity, Redux, Virtual DOM, Hooks, SSR, Context, Component Lifecycle ...
  29. OBJETIVOS DE SYMFONY UX ORGANIZAR Tener una buena organización del

    código JS dentro del proyecto REUTILIZAR Basarse en código ya desarrollado SIMPLICIDAD Evitar la complejidad tanto como sea posible UX Implementar buenas Experiencias de Usuario
  30. SE APOYA EN 3 PIEZAS • Stimulus ◦ Organización de

    nuestro código JS • Flex y Webpack Encore ◦ Distribuir código JS reusable dentro de los bundles • Swup / Turbo(links) ◦ Nueva manera de construir buenas UX basadas en standards
  31. STIMULUS • Framework Javascript ‘modesto’ • No toma el control

    de todo tu frontend • Ni siquiera tiene el objetivo de renderizar HTML • Conecta nodos del DOM con comportamientos en Javascript • Pocos conceptos: controller, actions, targets, values, ...
  32. EJEMPLO CONTROLADOR STIMULUS

  33. STIMULUS: REUTILIZACIÓN • Permite la construcción de pequeños controladores reusables.

    • Permite reutilizar componentes ya creados en React o Vue • Multitud de controladores creados por la comunidad: ◦ stimulus-use. ◦ stimulus-components
  34. FLEX Y WEBPACK ENCORE • Gracias a Flex, Stimulus Bridge

    y a Webpack Encore podemos distribuir código js (controladores de stimulus) en nuestros bundles.
  35. Hay algunos más PAQUETES DISPONIBLES SYMFONY UX

  36. UX Chart.js

  37. UX Cropper.js

  38. UX LazyImage

  39. DEMO! Usando Symfony UX

  40. ¿ES SUFICIENTE? • Con Stimulus no basta • Falta la

    sensación de inmediatez • Queremos lo bueno de las SPA, pero sin los inconvenientes
  41. Hotwire is an alternative approach to building modern web applications

    without using much JavaScript by sending HTML instead of JSON over the wire
  42. TURBO • Evita el full refresh de nuestras páginas •

    Cambios mínimos en nuestro código ya existente • Se complementa muy bien con Stimulus • Hay un paquete de Symfony que lo integra: UX Turbo
  43. COMPUESTO POR CUATRO PARTES TURBO DRIVE Convierte enlaces y formularios

    en peticiones AJAX 01. TURBO FRAMES Separa nuestras páginas en secciones pequeñas que pueden ser cargadas y navegables de manera independiente 02. TURBO STREAMS Permite actualizar elementos que se encuentran en la página desde el Backend (Websockets, Server Side Events) 03. TURBO NATIVE Integración con Android e iOS 04.
  44. PERO ESO TENDRÁ QUE SER EN OTRA CHARLA... MUCHAS GRACIAS!

    CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon, and infographics & images by Freepik
  45. Enlaces • https://symfonycasts.com/screencast/webpack-encore • https://speakerdeck.com/fabpot/symfony-ux • https://speakerdeck.com/tgalopin/symfony-ux-a-new-javascript-ecosystem-for-symfony • https://github.com/symfony/ux •

    https://hotwired.dev/ • https://m.signalvnoise.com/the-majestic-monolith/ • https://stimulus-use.github.io/stimulus-use/#/ • https://stimulus-components.netlify.app/