"React Ahora Se Parece a PHP" Dijeron

Sí, bienvenidos a esta presentación sobre cómo se parece React a PHP, dijeron. Estoy muy contento de presentar en la Cumbre de React y emocionado de compartir mis aprendizajes. Tradicionalmente, vengo de la comunidad de PHP y he adoptado React desde hace unos años.

Mi idea era acercar la comunidad de PHP y JavaScript. Quiero decir que no quiero criticar a los Componentes del Servidor de React o a PHP o cualquier framework. Para mí, se trata de compartir información y construir cosas geniales juntos. Esa fue la motivación para hacer esta llamada y esta sesión.

Y tal vez recuerden esta diapositiva o esta visualización cuando salió Next JS14, hubo bastante críticas de que React ahora es como PHP. Y eso también me interesó porque tradicionalmente, vengo de PHP, como acabo de decir. Porque fue muy divertido y gracioso. Y en realidad, busqué algunos memes de esa época, por ejemplo, el de la derecha, que me gusta mucho. Así que React, definitivamente mirando a Next JS y en realidad es como PHP. No sé.

Así que decidí hacer una presentación al respecto y dar un poco de contexto de mi experiencia en el pasado. Porque cuando empecé, y en realidad empecé en 1999 cuando tenía, no sé, 16, 17 años, me adentré en el desarrollo web. Personalmente, empecé con Perl en ese entonces. Y poco después, adopté PHP y literalmente escribí mi primer código de servidor PHP en 1999. Y hoy quiero mostrarles mucho código para hacer esta comparación, por qué la gente dice que React se parece a PHP hoy en día. Así que mostraré un ejemplo de código de 1999 y mostraré cómo se ve el PHP moderno con sus componentes de Symfony y cómo el código backend de PHP se acerca al frontend. Luego mostraré una aplicación de una sola página tradicional y luego mostraré cómo el framework de React se está acercando al backend.

Un poco sobre mí. Mi nombre es Lucas. Me pueden encontrar en Twitter como Lucas Fisher. Soy el fundador y director de Netnode, una agencia digital aquí en Suiza. También fundé NodeHive como una startup. NodeHive es un sistema de gestión de contenido sin cabeza. Échale un vistazo. Es muy genial. Y está diseñado especialmente para Next.js en el frontend. Así que hoy vamos a construir un libro de visitas en cuatro versiones diferentes.

Y tal vez recuerden los buenos tiempos. Tal vez no. Pero esto era muy popular alrededor de 1999 hasta tal vez 2003 o algo así. Cada sitio web tenía un libro de visitas. Así que no había redes sociales. Ni siquiera había una blogosfera o algo así. Y así que visitar un sitio web era muy aburrido. Lo único que probablemente podías hacer era firmar el libro de visitas en el sitio web.

Entonces, lo que es un formulario simple. Y luego tienes una lista de las entradas del libro de visitas en el sitio web. Y les mostraré cómo se construye eso en PHP a partir de 1999. Así que aquí preparé cuatro versiones de la misma aplicación. Y explicaré rápidamente cómo se ve eso. Así que simplemente entro en la carpeta. Y luego ejecuto el servidor. Cuando lo abro, este es nuestro maravilloso libro de visitas de 1999. Así que aquí ves una lista y luego el formulario. Lleno el formulario. Hola. Lo envío. Y luego dice gracias. Y puedo volver. Solo hice una simulación. Así que en realidad no hay una database en el backend. Así que no lo guardamos.

Entonces, ¿cómo se construye eso utilizando el tradicional PHP? Así que vamos a sumergirnos en el code. En primer lugar, tenemos algo como index PHP. Y cuando lo miras, tenemos el HTML. Tenemos un poco de CSS. Y luego incluimos el formulario, la parte superior y también la lista.

Vamos a abrir rápidamente la lista. Si vas aquí, básicamente en el lado del servidor, cargamos los data desde la database. Luego iteramos a través de ella y la listamos. Y básicamente mostramos la variable de eso. Así que ya se parece mucho a React. Y así es como lo mostramos. Y luego también tenemos el formulario.

Así que volvemos al formulario en la parte superior. Aquí tenemos el formulario del libro de visitas. Y esto es simplemente una tabla. Y luego la parte interesante está aquí. Tenemos la acción. Y aquí tenemos el guardado del libro de visitas. Así que cuando presionas enviar, obviamente envía la solicitud HTTP POST al backend, a este guardado del libro de visitas. Y este luego, en PHP, tenemos esta variable POST. Por cierto, esto no es cómo se hace. Es muy inseguro code. Pero solo como demostración, luego buscas las variables del POST. Y luego las insertas en la database. Así que es muy orientado al lado del servidor. Cero JavaScript. Y como es un script muy simple y ligero, también es muy rápido y ágil.

Ese es el ejemplo del 90-99. Veamos cómo se ve el PHP moderno. Para eso, lo abro. Para esto, ejecuto una aplicación Drupal. Drupal es un sistema de gestión de contenido. Y en realidad es Node-Hive. Nuestra solución se basa en eso. Así que también aquí lo ejecuto.

Así que se está abriendo. Y aquí tengo el libro de visitas. Y nuevamente, puedes ver en la parte superior el formulario y debajo la entrada del libro de visitas. Aquí también puedo decir, hola, bonito sitio web. Presiono enviar. Y luego ves que se actualiza de manera inmediata y reactiva la entrada del libro de visitas. También puedo buscar, por ejemplo, a John. Y se actualiza de manera interactiva.

La parte interesante del PHP moderno es que no escribes código de front-end. Pero lo escribes en el backend. Y el backend proporcionará todo el JavaScript necesario de forma predeterminada. En realidad, se toma de Livewire en Laravel. Y este utiliza Drupal wire, que está construido de manera similar a Livewire en Laravel. También hay un componente de Symfony llamado Live Components, que funciona exactamente de la misma manera.

Así que sumerjámonos rápidamente en ese código. Y esto es mucho más complejo y más avanzado en términos de la aplicación PHP. Drupal proporciona una forma de crear módulos personalizados. Y he creado uno. Y solo muestro las partes interesantes. En primer lugar, tenemos un controlador. El controlador básicamente inicia esta página. Y luego cargamos aquí dos componentes, dos componentes wire. Uno es el formulario. Y el otro es la lista del libro de visitas. Así que si miramos primero la lista del libro de visitas, aquí tenemos un componente. Se llama, se extiende desde el componente wire. Y luego cierro las partes aburridas aquí. O solo muestro la parte interesante. La parte interesante está aquí. Hay una función de renderizado, como el renderizado de React, podrías decir, que luego carga la plantilla.

Abre rápidamente la plantilla. También, es esta. Y aquí ves, nuevamente, iteramos a través de los resultados y mostramos los comentarios debajo. También el formulario. Así que volvamos aquí al controlador. Luego tenemos el formulario, el componente de formulario. El componente de formulario debe tener una forma de guardarlo. Así que esta es la función de guardado y luego la función de renderizado también. Y por cierto, si dijera, muy similar a React en realidad, así que aquí tenemos el título y aquí tenemos el cuerpo. Guardo eso y actualizo. Se establece automáticamente aquí. Por lo tanto, estos valores están vinculados de alguna manera. Y la parte interesante es cómo funciona eso de manera reactiva en el front-end, aunque estemos escribiendo en el back-end code. Y esto es la magia del componente wire, que utiliza Alpine JS para manejar la parte del front-end. Y hay, quiero decir, no explicaré cómo funciona ahora, pero así es como puedes escribir aplicaciones reactivas en PHP de manera basada en componentes. Y en realidad es muy divertido escribirlo, la developer experience es increíble. Y también la user experience desde la perspectiva del cliente también es increíble. Entonces PHP también creció en esa parte del front-end. Laravel está a la vanguardia en eso. Además, hay herramientas de Drupal y también del ecosistema de Symfony.

Ese es el ejemplo de PHP 2024. Así que cerremos eso. Ahora, veamos React 2017. Y aquí solo mostraré el code. No es un ejemplo en ejecución, pero ya sabes, obviamente React fue inventado para construir interacciones front-end ricas. Y pronto después, no se trata solo de componentes simples, sino de aplicaciones de página única completas . Entonces, ¿qué haces realmente cuando inicias una aplicación tradicional de React? Tienes un app.js allí, importas un par de componentes. En ese sentido, aquí está el formulario. Y luego tienes la lista del libro de visitas. Abramos nuevamente la lista del libro de visitas.

Y esta es la parte crucial aquí. Dado que React tradicional es solo para el front-end, tenemos que obtener los data del back-end. Quiero decir, esto es algo que hiciste en los últimos años. Aquí estamos usando Axios para llamar a la API del back-end y cargar las entradas. Luego iteramos a través de las entradas. Exactamente lo mismo que el formulario aquí nuevamente. Tenemos autor y mensaje. Y luego tenemos el formulario aquí arriba. Tenemos una función handle submit. Esta función envía esos data al back-end. Así que muy buenas, interacciones ricas. No hay parpadeo ni recarga de página. Eso fue increíble en 2017. Pero el inconveniente es que no solo necesitas el front-end, sino también un servicio de back-end. Aquí simplemente lo imité con una pequeña biblioteca de PHP. Así que tenemos estas dos partes. Y luego tenemos básicamente la implementación de cargar cosas y guardar una entrada en el libro de visitas. Esto significa que al menos tienes que mantener dos bases de code, el front-end y el back-end. Lo cual llevó a la idea de los React componentes del servidor.

Y ahora veamos este ejemplo. Y para eso, abro nuevamente el ejemplo. Así que esto es React 2024. Y en realidad es una demostración y una aplicación Next. Y así se ve la aplicación Next. Next.js. Nuevamente, tenemos el formulario en la parte superior y el libro de visitas debajo. Luego puedo agregar un nuevo comentario. También estoy simulando la base de datos, por lo que no hay guardado ni carga real desde una base de datos. Pero se redirige a la página de agradecimiento. Y luego vuelvo a la vista general del libro de visitas.

Entonces, ¿cómo se realiza la implementación aquí? Aquí nuevamente, tenemos un diseño global. Luego tenemos la carga de la página nuevamente en componentes. Y aquí están los componentes. Este es el formulario. Volveré al formulario en un segundo. Esta es la lista del libro de visitas. Y en comparación con la aplicación React tradicional, ahora tenemos la capacidad de cargar datos en el lado del servidor. Entonces aquí podemos cargar directamente datos dentro de ese componente JavaScript o JSX y ejecutarlo directamente. Eso es realmente nuevo y es un modelo diferente dentro de la comunidad de React.

Y esto es exactamente por qué la gente dice, hey, esto se parece mucho a PHP. Nuevamente, en el formulario, la parte interesante aquí es cómo se desencadena esta publicación de la acción. ¿Cómo se envía de vuelta al back-end? Y ahí es donde entran en juego las acciones del servidor de React. Entonces importas ese guardado del libro de visitas. Así que abramos esa acción. La acción se ve muy simple. Obtenemos los datos del formulario. Básicamente podemos extraerlos de los datos del formulario y guardarlos en la base de datos. Y si queremos, podemos redirigir a la página de agradecimiento, que luego se renderiza aquí como agradecimiento. Así que ya ves hacia dónde voy. Vuelvo a la presentación.

Ahora, si colocas el código de PHP 99 junto con React 2024, prácticamente se puede decir que es igual a db.php, que maneja la abstracción de la base de datos y puede ser el db.js en la aplicación. El formulario del libro de visitas es el componente del formulario del libro de visitas. La vista general del libro de visitas es el propio libro de visitas. Guardar el libro de visitas es la acción del servidor. Y el índice obviamente es la página. Bastante loco. Tomó 25 años reinventar la rueda como la teníamos hace 25 años. Bastante loco. Obviamente, no es solo copiar ese modelo. Hay mucho más en ese componente. Volveré a eso en un segundo.

Como conclusión, y ya hablé un poco al respecto, PHP 1999 era solo back-end. En mi ejemplo, no hay nada de JavaScript. ¿Por qué? Bueno, en ese entonces, no había mucho JavaScript. JavaScript todavía estaba en pleno desarrollo. ECMAScript 2 y 3 acababan de salir. Los navegadores en ese momento eran Internet Explorer 5.5 y Netscape. Entonces no había una forma moderna de hacer interacciones con JavaScript. Nada de JavaScript en absoluto. En el mundo de hoy, obviamente, tenemos navegadores modernos. Tenemos frameworks front-end livianos que se integran bien con estos enfoques de Livewire en Laravel, o DrupalWire en Drupal, o también el tema de moda de HTMX es exactamente ese concepto. Mientras que una aplicación de una sola página de React está impulsada principalmente por el front-end. Entonces, principalmente construyes tu aplicación en el front-end. Y obviamente la comunidad de React dijo, hey, en realidad tenemos que obtener esos beneficios del back-end. Y adoptemos estos buenos conceptos antiguos, básicamente, e intégrelos en el ecosistema de React. Y estoy muy emocionado por eso como desarrollador de PHP, porque ahora me parece muy natural usar React y obtener todos los beneficios del desarrollo en el back-end, así como los beneficios del front-end.

Obviamente, los beneficios del renderizado en el servidor se resumen en una arquitectura mucho más simple. ¿Por qué? Bueno, en las aplicaciones de una sola página tradicionales, tienes la aplicación front-end, luego necesitas construir todas las API, y en realidad mantienes dos aplicaciones diferentes. También la obtención de datos, la seguridad, el almacenamiento en caché, el rendimiento. Hay muchos aspectos en los que te beneficias mucho cuando puedes resolver la complejidad de tu aplicación en el back-end.

No entraré en muchos detalles aquí. Pero por supuesto, si optas por React y los componentes de servidor de React, tienes más beneficios que simplemente usar PHP puro, o incluso frameworks modernos de PHP. Por ejemplo, tienes renderizado isomórfico, lo que significa que solo tienes un lenguaje para el front-end y el back-end. Literalmente usas el mismo componente. Puedes usarlo en el back-end, renderizarlo en el back-end, o también puedes usarlo en el front-end. Eso no es posible con PHP en absoluto. Y debido a que React es o fue un framework de front-end, podemos utilizar todas las características del navegador del lado del cliente como Canvas, WebGL. Obviamente, esto no es posible cuando optas por una aplicación de PHP.

Y sí, es un enfoque diferente. Además, hay un rico ecosistema de NPM en PHP. También tienes el ecosistema de Composer donde también tienes decenas de miles de bibliotecas. Obviamente, todos amamos y nos gusta el ecosistema de NPM y todas sus bibliotecas, y es fácil de usar en la experiencia del desarrollador. Entonces, cuando comparas eso, no se trata solo de la arquitectura, también se trata de los lenguajes de programación y también del ecosistema que viene con la solución.

Simplemente nuestro enfoque como agencia y también desde la perspectiva de NodeHive, obviamente tu aplicación no es una arquitectura solitaria. Típicamente forma parte de un ecosistema digital más amplio. Y nuestro enfoque y nuestra forma de pensar es, digamos que tenemos una aplicación de Next o tenemos múltiples aplicaciones de Next aquí, y hacemos mucho manejo de contenido sin cabeza, y hacemos muchas aplicaciones y sitios web de manejo de contenido sin cabeza. Y ahora, dado que tenemos un backend en el frontend, podríamos decir que podemos simplificar y asegurar esta interacción entre el CMS sin cabeza y el sitio web frontend real. Además, si es necesario, podemos acceder directamente desde el frontend a un microservicio que ni siquiera forma parte de la plataforma principal sin cabeza. Eso significa que la aplicación frontend tiene más flexibilidad para obtener datos de diversas fuentes de datos. No estoy diciendo que esta sea la forma perfecta de arquitecturar el sitio, pero en general, en términos de posibilidades, cómo hacerlo. Y eso es muy, muy poderoso.

Entonces no necesitas construir tu propia capa de API entre la aplicación frontend y varios microservicios en el backend. Y con esta arquitectura, hemos tenido un gran éxito. Simplifica los proyectos y hace que el desarrollo sea mucho más rápido y más rico en funciones y fácil de integrar. Sí, dicho esto, nuevamente quiero construir cosas increíbles y estoy emocionado por el React Summit. También estaré allí. Compartamos sobre JavaScript y React y PHP y Drupal. Estoy aquí y estoy muy emocionado de saber qué piensas. Y espero que en la próxima versión de Next.js, podamos decir, hey, en realidad aprendimos mucho de PHP. Y en la próxima versión de Drupal, podemos decir, hey, aprendimos mucho de React. Muchas gracias por tu interés. Y sí, estoy disponible. Ven a mí y haz preguntas. Nos vemos la próxima vez. Adiós.