Las tendencias imperdibles del desarrollo web en 2023

También este año has sobrevivido a las cenas con tus familiares y finalmente puedes concentrarte en el futuro cercano: 2023 ha llegado y trae consigo varias características nuevas, ¡especialmente para el mundo del coding!

¿Cuáles serán las tendencias del 2023 del web development? ¿Qué deberías esperar como aspirante a programador informático?

Aquí un resumen de los temas candentes dedicados a los web developers.

Según nuestro Coach, en el 2023, todo desarrollador tendrá que monitorear 4 macrotendencias: 

• Low Code/ No code
• Isomorphic Applications
• Artificial Intelligence (AI)
• Universal Platform -> la innovación más fuerte de los próximos 10/20 años.
   

1) Low/No code

Para esta tendencia trabajamos con Laravel y el Coach presenta un framework open source llamado Filament php.

Laravel no nos ahorra novedades para este año:

PHP 8.2 que continúa su camino hacia una mayor tipificación, Laravel 10 se lanzará en febrero y se están consolidando las herramientas que ya existían, como Octane (un plugin para que Laravel ejecute aplicaciones Laravel en un servidor de aplicaciones de mayor rendimiento) y Vapor (un plugin de pago de Laravel que permite ejecutar nuestras aplicaciones laravel con tecnología serverless, es decir, con las llamadas funciones). En lo que a Laravel se refiere, estas son las novedades, pero también hay algo que se confirmará: de hecho, se confirmará el uso del TALL Stack como un activo fundamental para Laravel. ¿Qué es el TALL Stack?

¡Fácil! El TALL Stack es el uso combinado del cuarteto formado por: Tailwind css - Alpine.js - Laravel - Livewire

Tailwind css: framework css de frontend que se está consolidando como un estándar fundamental, como un framework css con un enfoque frontend y extremadamente efectivo.

Alpine.js: framework JavaScript mínimo, para minimizar las interacciones JavaScript que hacemos en el lado client.

Livewire: el sistema que permite realizar aplicaciones extremadamente interactivas y flexibles con Laravel, pero trabajando simplemente con el lenguaje PHP.

Recordemos que Livewire es un sistema "component based", basado en componentes (como Blade, el php template system de Laravel)

¿Y qué puede hacer Livewire? Cuando el cliente realiza la solicitud, el servidor procesa una respuesta con un html completo, que puede ser visto inmediatamente por el navegador y con el que podemos interactuar inmediatamente; luego el servidor envía una pequeña aplicación js, de gran rendimiento, y a partir de ese momento tenemos un componente en el cliente que tiene su estado interno almacenado en el html y, cada vez que interactuamos con el componente, se enviará una llamada js al servidor, y el servidor responderá con una parte html para actualizar el componente en sí y su nuevo estado.

¡Un sistema extremadamente eficaz! Sobre la base de este TALL STACK, se construyó el framework que presentamos, es decir, Filament php, que se propone como el "elegante TALLkit para los artesanos de Laravel".

Hablamos por tanto de un conjunto de herramientas que te permiten crear aplicaciones de una forma muy eficaz. ¿Como funciona?
Básicamente, los creadores tomaron prestado el DX (Developer Experience) popularizado por Laravel Nova, hecho de código declarativo, y lo pusieron a disposición de un ecosistema de código abierto. La elección técnica en comparación con Nova es diferente, porque Nova tiene un backend Laravel y un front-end en Vue.js, mientras que el filamento se basa en TALL Stack.

Con Filament, escribiremos código declarativo y el sistema se encargará de hacerlo por nosotros inmediatamente. Al igual que con Laravel Nova podemos crear back office, con toda la posibilidad de gestionar recursos, podemos crear un recurso para cada entidad y trabajar con esos datos muy rápidamente. Esta herramienta también proporciona un generador de formularios completo que podemos usar tanto en el back office como en el front. Incluso proporciona un sistema para la creación declarativa (por lo tanto, no-code) de cuadrículas de rendimiento. Es decir, un grid system.

Hay una serie de elementos adicionales gratuitos para Filament que podemos incluir (por ejemplo, un elemento para integrar gráficos)

2) Isomorphic Applications

Si conoces el lenguaje Javascript, seguramente habrás entendido de qué hablamos. El framework que presentaremos como tendencia en este 2023 en este sentido es Qwik. 

Javascript obviamente año tras año sigue generando nuevas tecnologías y nuevos frameworks.

Una novedad importante de Js para 2023 es Vite, esta herramienta de gran rendimiento que también se ha integrado en la creación de activos de Laravel; React domina DX, pero están surgiendo otros frameworks de Javascript, como Solid js, que tiene DX muy similar a React, pero cuenta con un motor de ejecución que parece superar a React.

Svelte también está empezando a ser el centro de atención y está creciendo mucho como ecosistema.

Obviamente vinculado a React tenemos Next.js que nos introduce en el tema de las aplicaciones isomórficas.

¿Cuál es el tema? Estos frameworks de Javascript sirven para realizar las llamadas SPA - Single Page Applications. Aplicaciones que se transfieren al cliente y se ejecutan completamente en el cliente, interactuando con el servidor a través de llamadas a la API. Esta experiencia no es precisamente de alto rendimiento por algunas razones, básicamente consiste en pequeños retrasos, especialmente en la primera llamada y otras pequeñas dificultades que cada framework está tratando de solucionar.

Entonces, ¿qué ha pasado? Que por encima de estos frameworks han salido toda una serie de herramientas que nos permiten hacer estas aplicaciones isomórficas.

Detrás de React surgió Next.js (que hoy parece haberse convertido en el estándar para quienes quieren hacer aplicaciones React)
Vue, por su parte, tiene Nuxt.js, Svelte tiene Svelte kit y han surgido herramientas como Astro que permiten dividir nuestra aplicación en pequeñas islas y ejecutar diferentes marcos en varias islas.

Pero, ¿qué hacen realmente estos sistemas? Representación del lado del servidor (Server Side Rendering): permiten que el framework de Javascript se ejecute tanto en el lado del servidor como en el lado del cliente. ¿Por qué? Porque en el modelo de aplicación de una sola página, nuestro cliente realiza una solicitud y el servidor responde con una página web. ¡Pero esta página web para la plantilla SPA está completamente vacía, no puede mostrar nada! Su indicación es cargar un JS, un CSS y un <div> dentro del cual se explotará nuestra aplicación.

Luego, el cliente recibe ese html y realiza una segunda solicitud, donde se envía un Javascript al cliente, que generalmente es enorme, porque contiene el framewokr y nuestra aplicación completa. ¿Cuál es el problema?
Que el tiempo que tarda la aplicación en volverse interactiva para el usuario se ralentiza un poco, hay un poco de retraso.

Entonces, ¿qué hacen todos esos sistemas antes mencionados?

El navegador realiza la solicitud de obtención, el servidor ejecuta la aplicación react del lado del servidor y genera un html completo, con contenido, ¡ya visible! Luego, el ciclo continúa: lo que ya se consideró en el lado del servidor se sincroniza en el lado del cliente y la página se vuelve a renderizar y los oyentes se conectan: ¿qué significa esto? Que el tiempo que tarda el usuario en interactuar con la aplicación disminuye considerablemente. Pero aún es continúa. Y ahí es donde entra Qwik.

Como habrás entendido, Qwik es un framework centrado en el rendimiento, que permite crear una base de código única que se ejecuta un poco en el lado del servidor y un poco en el lado del cliente.

DX es lo mismo que React. Entonces, ¿por qué usar Qwik?

DX es idéntico para que la transición sea sencilla, pero el modelo de ejecución de qwik, transparente para el desarrollador, es extremadamente elaborado. Los creadores, Misko Hevery (creador de Angular), Manu Almeida (creador de Stencil) y Adam Bradley (creador de ionic), inventaron la "Resumable Application".
¿Cómo funciona?

Qwik tiene una parte de cliente que se ejecutará en el cliente, pero también tiene una parte de servidor. Construimos la aplicación y la colocamos en el servidor;
-el cliente hace la primera solicitud;
-la aplicación se ejecuta en el lado del servidor;
-el servidor devuelve un html con el estado de cada componente, insertado directamente en atributos específicos del html.

Obtenemos un html inmediatamente visible. Además, este html es particular porque cuando voy a interactuar con el componente (ya que se ha vinculado una pieza de Javascript a la entrada) comenzará otra solicitud y el servidor responderá con la misma pieza de Javascript que tendrá automáticamente creado para hacer que el componente sea interactivo.

Entonces, ¿qué ha hecho el servidor? "Dividió" el componente en varias partes para que la aplicación se cargue gradualmente a medida que la usa el usuario. Profundizando aún más, también hay mecanismos que incluso pueden anticipar la carga, ¡lo que lo convertirá en una experiencia de usuario rápida y de alto rendimiento!

3) AI: Inteligencia Artificial

Es imposible que no hayas escuchado hablar de Chat GPT-3 y Github CoPilot.

El código asistido por IA es un tema extremadamente interesante. En los últimos años, la IA realmente nos ha demostrado de lo que es capaz: generación de imágenes, videos, imágenes tridimensionales y clonación de voz son solo algunas de las ideas posibles. Pero lo que nos interesa subrayar cómo la inteligencia artificial está ayudando a la codificación: GitHub CoPilot y Chat GPT-3.

GitHub CoPilot se presenta como "your AI pair programmer".

Han cogido todo el código base de Github y con él han alimentado a la IA. Luego, el sistema pudo completar automáticamente tu código. Al escribir la pestaña, aceptas el código generado de forma independiente. No es un simple "buscar un texto y repetirlo", ¡realmente entran dentro de los méritos del código! También escrito en otro modo, el sistema entiende que los dos códigos son equivalentes: interesante, ¿eh?

Chat GTP-3 presenta una pantalla donde hay un mensaje: puedes ingresar la solicitud que deseas. Al solicitar, por ejemplo, un "código en React para mostrar una galería de imágenes", la IA no solo propone un ejemplo de snippet de código solicitado en React, ¡sino que incluso lo describe! Cuanto más detallado seas en tu solicitud, mejor será el resultado. También para el chat GPT-3 hay un complemento para instalar en el código VS. Code GPT es el complemento que se comunica con el chat de GPT-3 y responde directamente en Visual Studio Code.

Y adivina qué, Microsoft está considerando invertir $ 10 mil millones en OpenAI, propietario de Chat GPT-3. Nos atreveríamos a decir que este tema tiene un gran futuro, ¿tú qué dices?

4) Universal Platform

El camino que tenemos por delante en la próxima década hacia la creación de una plataforma universal para ejecutar aplicaciones web, ¡y más! - Otra tendencia identificada en esta línea es Web Assembly, una tecnología que aún está madurando.

Seguramente conocerás a Figma: una empresa que ha invertido mucho en el ensamblaje web durante varios años, incluso si aún no estaba lista. Si cargamos figma en el navegador y vamos a Network y wasm (que significa Web Assembly) nos daremos cuenta de que en ese momento está descargando la aplicación hecha en Web Assembly. ¡Incluso Adobe ha comprado Figma, dado el potencial del competidor!

Pero, ¿qué es el Web Assembly? Nos lo dice justo nuestro Chat GPT-3.

"Web Assembly es un formato binario de bajo nivel", ¿qué significa? El código fuente escrito en un lenguaje de programación se compila en un código binario de ensamblaje web.

¿Código fuente en qué lenguaje de programación? En este momento, el mejor para apoyar Web Assembly es Rust, pero hay varios y luego otros que se están movilizando para hacerlo. (Incluso el lenguaje PHP tiene un compilador de ensamblaje web en este momento. Y todos estamos esperando que el lenguaje Javascript haga lo mismo)

Esta herramienta ha sido proyectada para ser ejecutada en los navegadores web modernos:

• el navegador recibe el web assembly
• un JIT (Just In Time Compiler), extremadamente eficiente, porque tiene que hacer una traducción muy pequeña, compila instantáneamente el wasm en código máquina nativo, obteniendo rendimientos asombrosos, inalcanzables por cualquier otro lenguaje de programación interpretado.

La ventaja es que, compilado una vez hacia wasm, cuando se cambia el dispositivo que tiene un JIT, el mismo binario también se ejecutará en la nueva máquina, ¡con el máximo rendimiento! "Esto hace que wasm sea una plataforma extremadamente atractiva, porque puedo compilar una vez y ejecutar la aplicación en una amplia gama de dispositivos".

Tratándose de un código binario es mucho más fácil de descargar y ejecutar.

"Aunque es una tecnología incompleta, el potencial para que se convierta en una plataforma de tiempo de ejecución universal para las aplicaciones web es enorme"

¡Estas son las tendencias de 2023 que, si eres un desarrollador web, no puedes ignorar! Así que no te pierdas todas las citas descritas en el artículo. ¡Te estamos esperando!