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

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.

Francisco Santamaria

November 04, 2021
Tweet

More Decks by Francisco Santamaria

Other Decks in Programming

Transcript

  1. Assetic: conceptos • Assets: ficheros css, js, imágenes • Filtros:

    Acciones a aplicar sobre esos assets, ej: minificar, compilar, optimizar imágenes, ...
  2. 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:
  3. 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
  4. Uso básico • Partimos de un fichero inicial. ej: app.js

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

    manual/tradicional: • Ó de la manera correcta:
  6. Múltiples entries • Un único entry puede estar bien para

    aplicaciones pequeñas o una SPA, pero cuando empieza a crecer mejor separar
  7. 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
  8. 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 ...
  9. ...pero también SON COMPLEJAS Angular != React != Vue Observables,

    RxJS, Vue Reactivity, Redux, Virtual DOM, Hooks, SSR, Context, Component Lifecycle ...
  10. 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
  11. 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
  12. 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, ...
  13. 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
  14. FLEX Y WEBPACK ENCORE • Gracias a Flex, Stimulus Bridge

    y a Webpack Encore podemos distribuir código js (controladores de stimulus) en nuestros bundles.
  15. ¿ES SUFICIENTE? • Con Stimulus no basta • Falta la

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

    without using much JavaScript by sending HTML instead of JSON over the wire
  17. 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
  18. 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.
  19. 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
  20. 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/