Crear un Blog paso a paso #10

Un saludo amigos aquí ya con la entrega #10 de este tutorial para crear un blog paso a paso con el Framework PHP Symfony.

En la entrega anterior ya habíamos creado nuestro formulario de inicio de sesión, el cual nos permitirá acceder a una zona exclusiva o reservada de nuestro blog en la cual lo administraremos. Todavía hay que hacerle algunos ajustes, pero ya es funcional así como está.

Ahora en esta entrega, antes de seguir construyendo nuestro Blog, quería hablarles de algo que pudimos haber experimentado en esta pequeña interfaz del formulario de inicio de sesión.

Resulta que está de moda en estos tiempos frameworks Javascript como React que es el que usa Facebook, las ventajas principales de estos frameworks son su rapidez, y una experiencia más fluida, ya que permiten la implementación de aplicaciones SPA.

¿Qué es una aplicación SAP?

Bueno, una aplicación SPA se encarga de cargar básicamente una página inicial y luego va actualizando las interfaces sin necesidad de cargar la página entera a medida que el usuario va interactuando con la aplicación, provocando una mayor fluidez de la interfaz y logrando mejores tiempos de carga de contenido.

Ahora todo no es tan bonito, estos marcos JavaScript tratan de encontrar su camino poco a poco y a pesar de que tienen bases muy bien definidas, la curva de aprendizaje en mi criterio personal es muy alta, o por lo menos no es tan compacta como PHP que es un monstruo consolidado desde hace años.

En algunos de estos como React por ejemplo el resultado final del código es una especie de lenguaje entre Javascript y Html, ya que usa su propia sintaxis y a eso añádele todas las herramientas necesarias para el desarrollo de la aplicación que son otro mundo como Webpack por ejemplo y también no bastaría solo con Java Script, sino también tendrías que aprender un montón de cosas más como TypeScript que viene siendo El mismo JavaScript, pero más elegante que al final lo compilas y vuelve a ser el mismo JavaScript común que usan los navegadores y cosas extrañas como esas son solo la punta del iceberg.

En el caso de que tiengas todo el tiempo del mundo podrías darte el lujo de usar un Framework estilizado como este, pero como simplemente vas a hacer un Blog personal no tiene sentido meterse en la boca del león. Quiero decir que el mejor patrón de diseño de tu aplicación es el que mejor se adapte a tus necesidades y no te haga hacer cosas innecesarias.

Php parece mostrarse como anticuado a los ojos de muchos que empiezan su camino guiado por el brillo de estos nuevos marcos, pero la realidad no puede ser más errónea, prueba de ello es este Framework PHP Symfony que no deja de asombrarme.

La curva de aprendisaje de Symfony es ridícula en comparación con estos Frameworks Javascript, la documentación es exquisita y los estándares de codificación son muy elevados, cuando haces una aplicación en symfony prácticamente estás usando lo mejor de lo mejor.

Ahora, una web con Symfony de la manera que la estamos haciendo se asemeja a una web tradicional por defecto, haces una petición el navegador se recarga y te muestra una nueva página con los resultados desde el servidor, aunque más bien depende de como trabajes con él, ya que en sí, Symfony no te obliga a nada, él solo es un conjunto de herramientas para que tú construyas tu aplicación incluso puedes usar sus partes para construir tu web fuera del marco.

Esto hace que visualmente pueda gustarte más los marcos como React y estar a la moda,(aunque puede que te cueste un riñón y todo el pelo para aprenderlo a usar decentemente), ya que este estilo no va con las nuevas tendencias, está como obsoleto.

Pero espera un momento, en el formulario de nuestro login esto no pasó, nuestra web se comportó como una SPA, como pudo ser posible si solo estamos usando Symfony sin ningún marco JavaScript. Resulta que esto no es del todo cierto.

Cuando instalamos Symfony usando nuestro superpack "Webapp" este se encargó de instalar una librería muy peculiar llamada "Turbo", ¿Qué hace esta librería? Digamos que hace la funcionalidad principal de estos nuevos marcos JavaScripts, ya que sin escribir prácticamente nada de javaScript nuestra web ahora se comporta como una SPA.

Ahora puedes seguir programando en symfony como siempre lo has hecho y aprovechando todas la robustes que ofrece el Framework y esta pequeña librería se encargará de convertir tu web una SPA con solo tenerla instalada.

Como resultado, ya no tendrás que aprender un nuevo marco para hacer que tu página lusca moderna, ya que esta librería le da superpoderes al PHP o al Framework desde el punto de vista visual y tiempo de recarga de una página igual que los marcos modernos de los que hablamos.

Todo esto pasa gracias al trabajo de los desarrolladores del Framework Symfony que cada día expanden sus horizontes haciendo que sea más poderoso y se debe a un paquete que llamado "StimulusBundle" que permite la integración de Symfony, Stimulus y los paquetes UX de Symfony:

¿Qué es Stimulus?

Estimulus es una pequeña librería javaScript, pero que a diferencia de los marcos JavaScripts como React este no se preocupa por representar el HTML más bien coge el HTML que ya tienes y hace que brille agregándonosle interactividad muy parecido a como se hace con el CSS con atributos en las etiquetas. Es muy limpio y práctico y funciona de maravillas con Turbo.

¿Qué son las UX de Symfony?

Symfony proporciona un conjunto de paquetes UX que agregan controladores Stimulus adicionales para resolver problemas comunes. StimulusBundle activa cualquier controlador Stimulus de terceros que se mencionan en su assets/controllers.json. Este archivo esta actualizado cada vez que instala un paquete UX.
_Fuente

Un ejemplo podría ser "ux-turbo" un paquete para la integración con Turbo Drive que es el que hace que nuestra web se comporte como una SPA

Para resumir un poco
Cuando instalamos Symfony con usando el superpack "webapp" que trae todas las indicaciones de lo que deberíamos instalar para una web convencional, Synfony mediante Flex se encarga de instalarnos y configurarnos entre otras cosas "AssetMapper" este se encarga de gestionar nuestros assets como JavaScript y esas cosas, "StimulusBundle" este se encarga de la integración entre Symfony, Stimulus y los paquetes UX de Symfony.

El resultado es que tenemos Stimulus instalado para trabajar con nuestro JavaScript, Turbo Drive instalado para hacer nuestra página mucho más rápida y moderna sin hacer absolutamente nada prácticamente, y una estructura de directorio creada automáticamente para engranar todo eso y trabajar cómodamente, Genial y todo creado con solo ejecutar un comando.

Otra cosa, en Symfony puedes ajustar los directorios y las configuraciones para adaptarlo a tu estilo o como te resulte más fácil. Para mí como me lo brinda está perfecto, además solo tengo conocimientos de la capa superior de Symfony, ya que no me dedico a esto de la programación profesionalmente, solo me gusta jugar con él por ahora.

Ahora veamos la estructura de directorios que nos preparó para trabajar con todo esto, pues esto más bien pertenece al Frontend.

En la imagen anterior señalo el directorio "assets" y es aquí donde manejaremos todo lo que tiene que ver con el Frontend, los estilos CSS, el javascript mediante Stimulus, Turbo, podría decirse que todo lo que tiene que ver mayormente con la dinámica visual que se presenta en el navegador.

Todo este directorio se crea automáticamente en nuestro proyecto cuando instalamos Symfony de la forma que lo hicimos, y gracias a una característica llamada Flex.

Analicemos ahora todos estos directorios dentro de assets:

assets/bootstrap.js

Inicia La aplicación Stimulus y carga su controladores. es importado por assets/app.jsy su contenido exacto depende de si tienes instalado Webpack Encore o AssetMapper

En nuestro caso tenemos instalado AssetMapper y este archivo se encargará de inicializar la librería de Simulus. Puede que usas controladores de Stimulus de terceros que hagan cosas y no tengas que crear alguno para algo que alguien ya ha creado entonces lo instalaras y lo registraras en este archivo para que cargue.

assets/app.js

Se actualiza para importar assets/bootstrap.js

Este archivo es el punto de entrada de nuestro JavaScript, a partir de él se desencadena la ejecución de nuestro JavaScript es por eso que en él se importa el archivo assets/bootstrap.js que es el que inicializa los controladores de Stymulus incluyendo los de terceros que tengamos registrados y a su vez todo el JavaScript que escribamos en ellos. Este archivo está indicado en el archivo importmap.php como punto de entrada, y será el que indiquemos en las plantillas Twig para cargar el JavaScript de esta forma {{ importmap('app') }}, también se cargan los CSS como la librería Boostrap que instalamos y que la importamos en este archivo.

assets/controllers.json

Este archivo comienza (en su mayor parte) vacío y se actualiza automáticamente a medida que instala paquetes UX que proporcionan controladores Stimulus.

Es como un registro para los paquetes de la iniciativa Symfony UX, Symfony se encarga de cargar todos los controladores de Stimulus de estos paquetes registrados aquí como producto de su instalación, es automático. Un ejemplo es ux-turbo, nuestro paquete de Synfony UX que se encarga de hacer que nuestra web se comporte como una SPA y que ya está instalado y registrado en este archivo.

assets/controllers/

Este directorio es donde debes colocar tu estímulo personalizado. Controladores. Viene con un ejemplo. hello_controller.js.

Aquí es donde trabajaremos principalmente con nuestro javascript, creando archivos .js siguiendo ciertas reglas adoptadas a la filosofía de la librería de Stimulus.

Conclusiones

Symfony es un marco robusto que no solo piensa en el Backend sino que trae consigo características e integración de funcionalidades con el Frontend como resultado puedes desarrollar una web completa de una manera relativamente facil en comparación con los marcos exitentes incluyendo los marcos JavaScript que pretenden el mismo proposito.

Referencias:
Framework Symfony

---