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:
Slide 8
Slide 8 text
PRESENTE
02
Slide 9
Slide 9 text
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
Slide 10
Slide 10 text
Webpack vs Webpack Encore
Slide 11
Slide 11 text
Instalación
Slide 12
Slide 12 text
Uso básico
● Partimos de un fichero inicial. ej: app.js
● Resolverá todos los require/import que haya
Slide 13
Slide 13 text
Integración en las plantillas
● Se puede hacer de manera manual/tradicional:
● Ó de la manera correcta:
Slide 14
Slide 14 text
HTML generado
NOTA: Ojo al detalle del atributo defer
Slide 15
Slide 15 text
Múltiples entries
● Un único entry puede estar bien para aplicaciones pequeñas o
una SPA, pero cuando empieza a crecer mejor separar
Slide 16
Slide 16 text
Versionado
● Gracias a los ficheros manifest.json y entrypoints.json
Slide 17
Slide 17 text
Sass/Less, Typescript, Babel, react/vue, split, ...
● Configurarlo en Webpack manualmente era engorroso.
Slide 18
Slide 18 text
Sass/Less, Typescript, Babel, react/vue, split, ...
● Te dará error, pero te dirá lo que hacer para solucionarlo
Slide 19
Slide 19 text
DEMO!
Usando Encore
Slide 20
Slide 20 text
FUTURO
03
YA PRESENTE
Slide 21
Slide 21 text
THE MAJESTIC
MONOLITH
@DHH
Slide 22
Slide 22 text
Ya estaban
dando la
tabarra...
Slide 23
Slide 23 text
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
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
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 ...
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
Slide 30
Slide 30 text
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
Slide 31
Slide 31 text
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, ...
Slide 32
Slide 32 text
EJEMPLO CONTROLADOR STIMULUS
Slide 33
Slide 33 text
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
Slide 34
Slide 34 text
FLEX Y WEBPACK ENCORE
● Gracias a Flex, Stimulus Bridge y a Webpack Encore podemos
distribuir código js (controladores de stimulus) en nuestros bundles.
Slide 35
Slide 35 text
Hay algunos más
PAQUETES DISPONIBLES
SYMFONY UX
Slide 36
Slide 36 text
UX Chart.js
Slide 37
Slide 37 text
UX Cropper.js
Slide 38
Slide 38 text
UX LazyImage
Slide 39
Slide 39 text
DEMO!
Usando Symfony UX
Slide 40
Slide 40 text
¿ES SUFICIENTE?
● Con Stimulus no basta
● Falta la sensación de inmediatez
● Queremos lo bueno de las SPA, pero sin los inconvenientes
Slide 41
Slide 41 text
Hotwire is an alternative
approach to building
modern web applications
without using much
JavaScript by sending
HTML instead of JSON over
the wire
Slide 42
Slide 42 text
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
Slide 43
Slide 43 text
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.
Slide 44
Slide 44 text
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