El Framework Full-stack del Futuro es un DSL

Rate this content
Bookmark

Con todas las opciones de frameworks web disponibles en los lenguajes de programación populares hoy en día, ¿por qué alguien querría crear un nuevo Lenguaje Específico de Dominio (DSL) para construir aplicaciones web full-stack? En esta charla, cubriremos nuestra justificación para decidir hacerlo, por qué los DSLs son una opción convincente, sus ventajas y desventajas, y lo que nos ha permitido construir hasta ahora para los desarrolladores de JavaScript full-stack. Además, cubriremos algunos de los altibajos del desarrollo de herramientas de código abierto desde nuestro viaje de casi tres años desde Y Combinator (YC)

Vince Canger
Vince Canger
21 min
04 Apr, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

El futuro de los frameworks web será un DSL, simplificando el desarrollo y permitiendo instrucciones claras para la colaboración con IA. Los DSLs como SQL y JSX tienen valor en la construcción de aplicaciones web mejores. Wasp es un poderoso framework de aplicaciones web full-stack que elimina la necesidad de escribir código backend. Ofrece características como trabajos cron, seguridad de tipos y envío de correos electrónicos. Wasp también tiene proyectos como OpenSaaS y Mage que proporcionan plantillas listas para producción y prototipos generados por IA.

Available in English

1. The Future of Web Frameworks

Short description:

Hola a todos, mi nombre es Vince. Hoy estoy aquí para afirmar que el marco web del futuro será un DSL. Vamos a contar con la ayuda de Keanu Reeves y Miki Roark para entender la diferencia entre SQL y jQuery. SQL es un DSL y jQuery no lo es. Ahora, comencemos con un breve ejercicio para poner las cosas en perspectiva. Imaginemos construir una aplicación web de pila completa y planificar una aplicación de lista de tareas en seudocódigo.

Soy parte del equipo fundador de Wasp. Soy responsable de las relaciones con los desarrolladores allí y hoy estoy aquí para afirmar que el marco web del futuro será un DSL. Pero antes de comenzar a hablar sobre los DSL o por qué deberías preocuparte por ellos, me gustaría contar con la ayuda de dos buenos amigos míos, Keanu Reeves y Miki Roark.

Ahora, ellos nos ayudarán a entender una diferencia importante entre SQL y jQuery. Probablemente estés pensando, bueno, eso es fácil. La respuesta obvia es que SQL es un lenguaje de base de datos, mientras que jQuery es una biblioteca de front-end. Pero estoy hablando de algo un poco más específico que eso. Veamos, por ejemplo, la diferencia entre 2006 y 2023. Keanu Reeves, ahí está, sigue siendo humilde, adaptable, hidratado. Está listo para asumir cualquier nuevo papel. Y probablemente sea tan popular como cuando comenzó su career. En ese sentido, tiene mucho en común con SQL. Por otro lado, Miki tiene más en común con jQuery. Y eso es desafortunado porque parece que ambos tienen sus mejores años detrás de ellos.

Puede que estés pensando, ¿qué demonios tiene que ver esto realmente con una presentación sobre DSL y marcos web? Bueno, el punto simple es que SQL es un DSL y jQuery no lo es. Profundizaremos en este punto más adelante, pero hasta entonces, mantén esta comparación en la parte trasera de tu mente. Porque primero, vamos a comenzar con un breve ejercicio para poner algunas cosas en perspectiva. Y es un ejercicio bastante simple. Simplemente vamos a imaginar que estamos en la fase de planificación de construir una aplicación web de pila completa. Podríamos usar cualquier aplicación como ejemplo, pero básicamente esto es lo que pasa en mi cabeza cada vez que tengo que pensar en una aplicación de demostración para construir. Así que vamos a cambiar a un editor de code y comenzar a planificar nuestra aplicación de lista de tareas en seudocódigo.

2. Planning the To-Do List App

Short description:

Aquí está un plan. Vamos a definir una clase llamada lista de tareas. Necesitamos un título y un modelo llamado tarea con un ID y una descripción. Relacionaremos las tareas con el usuario y definiremos un modelo de usuario con un ID y una propiedad de tareas. También definiremos puntos finales de tarea para operaciones CRUD esenciales. Para el cliente, necesitamos un componente raíz, importar una página de React y llamarla main page.tsx.

Muy bien, aquí está un plan.

Y podríamos elegir cualquier tipo de sintaxis que queramos.

Y voy a inventar un seudocódigo similar a JavaScript o JSON o algo así.

Entonces, vamos a definir una clase y la llamaremos lista de tareas.

Y luego pensemos en qué tipo de cosas. Quiero decir, estamos planeando una aplicación aquí. ¿Qué tipo de cosas necesitamos tener en cuenta?

Y supongo que lo primero obvio es un título. Podemos llamarlo aplicación de lista de tareas. Muy imaginativo.

Y lo siguiente podría ser, ya que es una aplicación de lista de tareas, necesitamos definir algunos modelos de base de datos, ¿verdad? Vamos a definir un modelo llamado tarea. Y los modelos generalmente tienen un ID, y lo haremos un número entero. Y una tarea de lista de tareas tendrá algún tipo de descripción, ¿verdad? Como cortar el césped, hacer la colada. Así que eso será una cadena. Y queremos relacionar estas tareas con el usuario. Así que pondremos una propiedad de ID de usuario aquí y la relacionaremos con un modelo de usuario y su ID.

De acuerdo. Ahora que eso está fuera del camino, hagamos también el modelo de usuario. Y, por supuesto, también daremos un ID, número entero, y mantengámoslo simple. Haremos una propiedad llamada tareas, que es una matriz de tareas relacionadas que han definido.

De acuerdo. Y como esto es para una aplicación de pila completa, necesitamos definir algunos puntos finales para nuestras tareas, ¿verdad? Llamaremos a eso puntos finales de tarea. Y sí, esta es una aplicación simple. Así que básicamente necesitamos nuestros puntos finales CRUD esenciales. Tenemos, ya sabes, obtener todo o buscar todo. Queremos crear una tarea y tal vez queramos actualizar una tarea, ¿verdad? Genial. También debemos considerar el cliente.

Así que necesitamos un componente raíz, tal vez. Digamos raíz del cliente. Y sí, esta es una aplicación simple. Así que importaremos una página de React allí y la llamaremos main page.tsx.

3. Using Wasp DSL for Building Apps

Short description:

Podemos definir la autenticación social de GitHub para la autenticación de usuarios. Wasp nos permite definir nuestra aplicación utilizando un DSL similar al pseudocódigo que escribimos. Aprovecha las tecnologías de desarrollo web existentes como React, Node.js y Prisma. Wasp actúa como un pegamento que une estas tecnologías de manera más eficiente. El compilador de Wasp genera una aplicación completa y lista para producción con autenticación de pila completa, rutas de cliente, un servidor independiente de Express.js, una base de datos Postgres y más. Los DSL son lenguajes específicos destinados a ser utilizados en un solo dominio, como aplicaciones web de pila completa.

Y tal vez podemos darle la raíz de, digamos, raíz del cliente. Y esa será la raíz del cliente. Y luego queremos autenticar a las personas, ¿verdad? Queremos autenticar a los usuarios para que sus tareas estén asociadas con ese usuario. Así que vamos a seguir adelante, y como esta es una demostración dirigida a los desarrolladores, digamos que queremos autenticación social de GitHub. Esa es la única autenticación que queremos. Muy bien, genial. Así que aquí tenemos un plan bastante simple para una aplicación escrito en este pseudocódigo. Y lo que me gustaría señalar es, ¿qué tan genial sería esto si en realidad estuviera funcionando? ¿Qué tal si pudiéramos definir realmente las cosas de esta manera, como la autenticación, por ejemplo, y obtener autenticación de GitHub de pila completa, ¿verdad? Se generarían componentes de cliente para nosotros, como el botón de autenticación de GitHub, el botón de inicio de sesión, las funciones del servidor que necesitamos para autenticar a los usuarios en el servidor e incluso los modelos de base de datos.

Bueno, resulta que realmente podemos hacer esto, y lo hemos hecho. Esto es lo que hemos logrado con Wasp. Y esto es cómo se ve realmente la aplicación de tareas que acabamos de describir con Wasp. Se hace utilizando una sintaxis bastante similar al pseudocódigo que acabamos de escribir. Y esto es posible porque hemos implementado un DSL en Wasp. Ahora, es posible que estés pensando, oh no, aquí hay otro marco que tenemos que aprender, un montón de nuevas tecnologías nuevamente. ¿Por qué no puedes dejar lo que no está roto en paz? Pero el objetivo de Wasp no es realmente reinventar la rueda aquí, solo mejorarla, como dice Dwight.

Ya tenemos algunas tecnologías de desarrollo web realmente excelentes a nuestra disposición, como React, Node.js y Prisma. Y estas son exactamente las tecnologías que Wasp aprovecha en su marco. Por lo tanto, el DSL de Wasp simplemente actúa como el pegamento que une todo esto de una manera más eficiente. Junto con tu lógica de negocio de React, Node.js y Prisma, definimos una descripción de alto nivel de nuestra aplicación en una sintaxis muy similar a nuestro pseudocódigo allí, que se encuentra en el archivo de configuración de Wasp. Y luego todo esto se pasa a nuestro compilador, que es un enfoque único de Wasp, y genera el proyecto completo, el frontend, el backend y el código de implementación para nosotros. Por lo tanto, obtienes una aplicación completa y lista para producción con autenticación de pila completa, rutas de cliente, un servidor independiente de Express.js, una base de datos Postgres, trabajos cron y muchas otras cosas. En el futuro, incluso planeamos admitir diferentes pilas y diferentes arquitecturas. Antes de explicar más sobre Wasp, volvamos a los DSL y hablemos un poco más sobre ellos. Entonces, si pensamos en nuestro pequeño ejemplo de planificación y el pseudocódigo que escribimos, básicamente estábamos inventando nuestro propio lenguaje allí. Pero este es un tipo de lenguaje muy, muy específico.

No puedes usarlo para hacer todas las cosas que un lenguaje de propósito general como C o incluso JavaScript puede hacer. Solo está destinado a hacer una sola cosa. De hecho, es tan específico que está destinado a ser utilizado en un solo dominio, como aplicaciones web de pila completa en este caso. Y eso es lo que es un DSL. Es un lenguaje específico del dominio.

4. El Valor de los DSL en el Desarrollo Web

Short description:

Regex, SQL y JSX son ejemplos de DSL. Los DSL nos permiten simplemente decir lo que queremos, sin tener que especificar cada pequeño detalle de cómo debería suceder. Con los DSL, podemos obtener el resultado deseado sin preocuparnos por la implementación. Los DSL como SQL pueden realizar algoritmos de búsqueda complejos y optimizar consultas para mayor velocidad. JSX simplifica la especificación de cómo deben suceder las cosas. A pesar de las bibliotecas y marcos existentes, los DSL tienen valor en la construcción de aplicaciones web mejores.

Wasp es solo uno de los muchos DSL, aunque. Y como desarrolladores, ya estamos familiarizados con bastantes de ellos. Probablemente estés familiarizado con este chico malo aquí. Esto es regex y está verificando el formato de una dirección de correo electrónico. Así que regex es un DSL. SQL, como mencioné al principio de la presentación, también es un DSL. En estos días, es más probable que lo escribamos en forma de un ORM como Prisma o SQLite, algo así. Pero todavía está con nosotros después de todos estos años, al igual que nuestro buen amigo, Keanu. Así que SQL es un DSL.

Otro ejemplo obvio del mundo de React es JSX, que también es un DSL. Bueno, hemos establecido qué es un DSL y que los usas con bastante frecuencia. Pero ¿por qué? ¿Por qué querríamos crear un nuevo lenguaje especializado que solo funcione para una cosa muy específica, en lugar de simplemente usar esos lenguajes de programación generales que pueden hacer todas esas cosas y más? Bueno, como dice Dwight, creemos que es posible mejorar, al menos en el caso de construir mejores aplicaciones web. ¿Realmente necesitamos especificar, por ejemplo, autenticación, enrutamiento, operaciones CRUD y todas estas cosas una y otra vez? No. Con los DSL, puedes simplemente decir lo que quieres y sucede. Veamos cómo.

Aquí está nuestro ejemplo de regex de antes. Simplemente decimos lo que queremos aquí. No nos importa realmente cómo se valida o en qué orden, cuáles son los mecanismos. Simplemente decimos lo que queremos y obtenemos el resultado que buscamos. Entonces, si no estuviéramos usando regex en este caso, y en su lugar simplemente JavaScript, por ejemplo, tendrías que escribir algo como esto, ¿verdad? Y esto es cómo podría verse el cómo, en lugar del qué. Tienes que especificar cada pequeño detalle de la verificación, es largo y bastante tedioso. SQL también es un ejemplo muy interesante. Nuevamente, esto es el qué. Solo tienes que especificar lo que quieres y no te importa cómo lo obtienes. Por otro lado, en el fondo está el cómo. Así que SQL es un DSL y solo tienes que decir lo que quieres y todo esto sucede. No solo el motor de consulta SQL realiza los algoritmos de búsqueda correctos por ti, sino que también sabe cómo optimizar tu consulta para mayor velocidad, lo cual es bastante asombroso. Puede empacar todo ese conocimiento y procesarlo en un comando tan corto. Y aunque este es un ejemplo simple de JSX, podemos imaginar lo complicado que sería esto con un ejemplo más complejo, ¿verdad? JSX nos está ahorrando tener que especificar exactamente cómo deben suceder las cosas. Pero, ¿por qué necesitamos un DSL para el desarrollo web? Quiero decir, ya tenemos un montón de bibliotecas, muchos marcos que pueden hacer todo esto sin un DSL ya.

5. El Poder de los DSL en el Desarrollo Web

Short description:

Los DSL nos permiten decir lo que queremos, no cómo. Los buenos DSL están vinculados al dominio y envejecen bien. Los DSL proporcionan instrucciones claras para la colaboración con la IA, lo que facilita la comprensión y el mantenimiento del código tanto para los humanos como para la IA. El desarrollo web es un candidato perfecto para utilizar un DSL.

¿Realmente, realmente necesitamos esto? Además, es posible que estés pensando que el próximo año, la IA se encargará de todo ese código repetitivo por nosotros, ¿verdad? Entonces, ¿cuál es el punto? Bueno, incluso con todo eso, esta es una búsqueda en Google que hice ayer. Y a pesar de todos los avances que hemos hecho en el desarrollo web, parece que se está volviendo más complicado en lugar de más fácil, ¿verdad? Este es un sentimiento que los desarrolladores expresan con bastante frecuencia. Así que hay mucho que aún se puede hacer.

Entonces, ¿por qué los DSL podrían ser la posible solución a todo este desorden en el desarrollo web? Veamos tres razones por las que. La primera razón es básicamente un resumen de lo que hemos cubierto. Los DSL nos permiten decir lo que queremos, no cómo. Y pueden hacer esto porque son especializados, porque se centran en ese único dominio y no se centran en la implementación. Para la segunda razón, los buenos DSL son como Keanu, envejecen muy bien, ¿verdad? Y eso se debe a que están vinculados nuevamente al dominio, que es ese problema y no la implementación o la solución. Para la tercera razón, recurramos a otro amigo nuestro, Paul Graham, fundador de YCombinator. Y voy a leer este tweet para ti. Esperaba que la tecnología hiciera que la programación fuera menos laboriosa, como hace con la mayoría de las cosas. Pero tengo que admitir que esperaba que sucediera mediante el cambio de los programadores a lenguajes más potentes, en lugar de seguir escribiendo programas llenos de código repetitivo, pero teniendo IA que genere la mayor parte de él. Así que Paul tiene razón, ¿verdad? Estamos entrando en una era en la que las IA serán nuestros asistentes de codificación, y necesitamos abstracciones que nos permitan colaborar fácilmente con ellos. Los DSL les brindan, a las IA o a los LLM, un conjunto claro de instrucciones y un camino hacia el desarrollo, al tiempo que nos brindan algo que es fácil de leer y mantener. Aquí es donde los DSL realmente brillan y tal vez sean actualmente pasados por alto. Podríamos decir que un buen DSL es una abstracción ideal para la IA, pero eso no captura la imagen más grande, en realidad. El punto es que lo que beneficia a los humanos también beneficia a la IA. Por lo tanto, la tercera razón se podría expresar de la siguiente manera. Permite tanto a las personas como a la IA utilizar abstracciones de nivel superior y requiere que tengan menos conocimiento experto. ¿Por qué? Porque este conocimiento experto está integrado en el DSL, como el ejemplo de SQL que vimos. Esto significa que obtenemos code que es más fácil de entender y mantener tanto para las personas como para la IA.

Como ejemplo, imaginemos una aplicación de pila completa generada en JavaScript frente a un DSL. El code del DSL para la autenticación se vería algo así, o en realidad así, porque este es el code real de autenticación de WASP. Por otro lado, el código repetitivo de ExpressJS para autenticar a un usuario se vería algo así. Y parece obvio cuál sería más fácil de escribir, debug, mantener, independientemente de si es IA o humano. En resumen, el desarrollo web tiene mucho margen de mejora, y a menudo sabes lo que quieres, pero tienes que pasar mucho tiempo describiendo cómo se debe hacer. Mientras tanto, la perspectiva del usuario, las partes principales y los conceptos de las aplicaciones web han permanecido iguales durante mucho tiempo, pero las tecnologías que utilizamos para implementarlas cambian continuamente. Por lo tanto, el espacio de soluciones está cambiando bastante rápido, pero el espacio del problema no lo está haciendo. Todo esto hace que el desarrollo web sea un candidato perfecto para utilizar un DSL. Y eso es exactamente lo que resuelve WASP.

6. Las Fortalezas de un DSL en Acción

Short description:

WASP es un potente marco de aplicaciones web de pila completa con más de 14,000 estrellas y 40,000 aplicaciones creadas. Los usuarios elogian la simplicidad de WASP y su capacidad para abordar tareas de ingeniería de pila completa. El DSL en WASP te permite definir puntos finales, modelos de base de datos y autenticación con facilidad, eliminando la necesidad de escribir código de backend. Veámoslo en acción.

Nos ahorra tanto tiempo en el cómo, y nos permite simplemente decirle lo que queremos y obtenerlo a cambio. Como mencioné antes, WASP es un marco de aplicaciones web de pila completa relativamente nuevoframework para React, Node.js y Prisma. Y ya hemos acumulado más de 14,000 estrellas en nuestros dos principales repositorios de código abierto. Y puedes ver el historial de estrellas aquí. Mucho ha sucedido recientemente, pero de todas formas, hemos tenido más de 40,000 aplicaciones creadas utilizando WASP y muchos usuarios satisfechos que se unen a Discord y otros lugares, donde dejan testimonios como este, donde destacaré esta parte, donde este usuario dijo, en mi opinión, WASP es tan revolucionario para mí como lo fue React hace muchos años. La simplicidad de WASP y cómo el DSL abarca la mayoría de las tareas de ingeniería de pila completa es pura genialidad. Así que ves a un usuario darse cuenta de que esta capacidad de decir qué en lugar de cómo es realmente poderosa. Así que volvamos ahora a esa aplicación de lista de tareas que comenzamos a imaginar y mostremos algunas de las fortalezas de un DSL en acción.

Muy bien. Aquí verás que en el plan, si vuelvo rápidamente o cambio entre el archivo de configuración de WASP y el plan, notarás muchas similitudes allí. Así que eso fue intencional. Deliberadamente escribí el pseudocódigo de una manera similar a WASP para que entiendas la idea de que realmente puedes hacer cosas como esta. Definir autenticación de GitHub y obtener autenticación de pila completa tan simple como escribir GitHub, por ejemplo. Echemos un vistazo rápido al archivo main.wasp y veamos qué más tenemos. Tenemos esa ruta del cliente allí. Tenemos, nuevamente, nuestros modelos de base de datos como una tarea y un usuario. Y podemos obtener todos nuestros puntos finales simplemente definiendo CRUD y vinculándolo al modelo o entidad de la base de datos que queremos. Y simplemente hemos indicado que queremos operaciones de obtener todo, crear, actualizar y eliminar. Por lo tanto, siempre estarán asociadas a la entidad de la tarea. Y en realidad no tenemos que escribir ningún código de backend porque esto se encargará de todo por nosotros. Además de eso, tenemos nuestras rutas de manera similar a como se hizo en el plan o el pseudocódigo. Pero también podemos hacer otras cosas, como decir que queremos que esto sea... Solo los usuarios autenticados pueden acceder a esta ruta, ¿verdad? A esta ruta. Por lo tanto, esto también se encargará de la autenticación del lado del cliente. Genial. Cambiemos ahora al navegador y veamos esto. De hecho, tenemos esta aplicación en funcionamiento, así que veámosla en acción. Aquí está. Aquí está la página de inicio de sesión. Y puedes ver que no necesitamos definir la autenticación de GitHub.

7. Añadiendo un Método de Inicio de Sesión con Nombre de Usuario y Contraseña

Short description:

Hemos agregado un método simple de inicio de sesión con nombre de usuario y contraseña. Las tareas se están persistiendo en una base de datos y pasando por el servidor Express.js. Wasp ofrece trabajos programados, seguridad de tipo de pila completa y envío de correos electrónicos. Wasp también comprende toda tu aplicación, con una visualización de la aplicación completa desde el backend hasta las rutas y páginas.

Así que tenemos el botón de autenticación de GitHub allí. Pero tal vez quiero hacer un cambio. Tal vez quiero agregar un método simple de inicio de sesión con nombre de usuario y contraseña. Y una vez que la aplicación se recompila, deberíamos ver en el frontend aparecer el formulario de inicio de sesión. Y ahí vamos.

Lo tenemos. Quiero decir, ya he iniciado sesión. Así que simplemente voy a iniciar sesión con ese nombre de usuario y contraseña. Y verás que ya lo he completado con algunas tareas pendientes. Y podría decir, hoy quiero presentar en el Congreso de Node. Y sí, solo para comprobar que se están persistiendo en una database y pasando por el servidor Express.js, cambiemos al Database Studio. Y ahí vamos. Correcto. Así que si actualizo eso, podemos ver nuestra nueva tarea que acabamos de ingresar allí, presentar en el Congreso de Node. Y déjame simplemente eliminarlo de allí. Y volvamos a nuestra aplicación. Y sí, se ha ido. Así que genial.

Eso es básicamente cómo funciona Wasp en pocas palabras. Y puedes hacer mucho más. Tienes trabajos programados. Tienes seguridad de tipo de pila completa. Y también tienes envío de correos electrónicos. Y todas estas cosas se encargan a través del archivo de configuración y del DSL en Wasp. Otra cosa realmente genial que podemos hacer, porque tenemos este archivo de configuración y este DSL, es que Wasp comprende toda tu aplicación. Y tenemos una pequeña característica experimental como esta, donde realmente tenemos una visualización de toda la aplicación. Y esto es solo el comienzo, porque puedes hacer muchas cosas con cosas como esta. Pero esto te muestra el poder, una vez más, de los DSL para hacer cosas interesantes. Así que aquí puedes ver toda la aplicación desde el backend hasta las rutas y páginas. Y puedes ver, ¿verdad?, que la página principal está autenticada.

8. Explorando OpenSaaS y Mage

Short description:

La aplicación utiliza una base de datos SQLite en lugar de Postgres. Tiene autenticación de GitHub y entidades de usuario y tarea. Wasp ofrece dos proyectos interesantes: OpenSaaS, una plantilla de SaaS de código abierto lista para producción, y Mage, un agente de IA para generar prototipos de aplicaciones basados en indicaciones.

La aplicación utiliza una base de datos SQLite en lugar de Postgres, que también podrías usar. Y tiene autenticación de GitHub y entidades de usuario y tarea. Así que eso es una característica bastante genial y agradable de usar un DSL. Genial.

Y si quieres comenzar con Wasp, también tenemos dos proyectos interesantes que podrían despertar más tu curiosidad que solo una aplicación de tareas. Y esos son OpenSaaS y Mage. OpenSaaS es una plantilla de SaaS de código abierto lista para producción y completamente gratuita, mientras que Mage es un agente de IA que generará un prototipo de aplicación de pila completa basado en una indicación simple.

Como dije, OpenSaaS es una plantilla de SaaS de código abierto y gratuita. Está a la altura de algunos de esos boilerplates de SaaS pagados que probablemente hayas visto. Viene con suscripciones de Stripe, panel de administración, Plausible o Google Analytics, carga de archivos en AWS S3, ejemplos de API de OpenAI. Además, está completamente documentado y brindamos soporte para cualquier pregunta y usuarios en nuestro Discord. Así que eso es realmente genial. Si estás interesado en eso y quieres construir un SaaS.

Por otro lado, Mage aprovecha el poder de nuestro archivo de configuración DSL de Wasp y lo utiliza como un conjunto de instrucciones para ayudar a guiar al LLM o a la IA en la construcción de prototipos completos. Sí, es otro asistente de codificación de IA, pero aprovecha el poder del DSL aquí. Y ya has visto lo poderoso que puede ser el DSL por sí solo. Así que creemos que hay mucho potencial aquí para Wasp en este espacio. Si quieres probar UseMage, visita usemage.ai y te proporcionará un archivo zip de la base de código que puedes descargar y probar localmente.

O si tienes Wasp instalado o lo instalas, simplemente ejecuta el comando wasp new y puedes elegir entre estas plantillas de inicio. Y OpenSaaS y Mage, también conocido como AI Generated aquí, están incluidos. Así que esa es otra forma genial de acceder a estas plantillas. Con eso, muchas gracias por escuchar nuestra presentación sobre por qué el framework web del futuro será un DSL. Si escaneas el código QR, te llevará a nuestro repositorio de GitHub. Así que visítanos. Y si quieres recibir actualizaciones sobre nuestro progreso, síguenos en wasplang en X. Muchas gracias.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
Full Stack Documentation
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
Interactive web-based tutorials have become a staple of front end frameworks, and it's easy to see why — developers love being able to try out new tools without the hassle of installing packages or cloning repos.But in the age of full stack meta-frameworks like Next, Remix and SvelteKit, these tutorials only go so far. In this talk, we'll look at how we on the Svelte team are using cutting edge web technology to rethink how we teach each other the tools of our trade.
From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
Solid caught the eye of the frontend community by re-popularizing reactive programming with its compelling use of Signals to render without re-renders. We've seen them adopted in the past year in everything from Preact to Angular. Signals offer a powerful set of primitives that ensure that your UI is in sync with your state independent of components. A universal language for the frontend user interface.
But what about Async? How do we manage to orchestrate data loading and mutation, server rendering, and streaming? Ryan Carniato, creator of SolidJS, takes a look at a different primitive. One that is often misunderstood but is as powerful in its use. Join him as he shows what all the Suspense is about.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.

Workshops on related topic

Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
Full Stack GraphQL In The Cloud With Neo4j Aura, Next.js, & Vercel
GraphQL Galaxy 2021GraphQL Galaxy 2021
161 min
Full Stack GraphQL In The Cloud With Neo4j Aura, Next.js, & Vercel
WorkshopFree
William Lyon
William Lyon
In this workshop we will build and deploy a full stack GraphQL application using Next.js, Neo4j, and Vercel. Using a knowledge graph of news articles we will first build a GraphQL API using Next.js API routes and the Neo4j GraphQL Library. Next, we focus on the front-end, exploring how to use GraphQL for data fetching with a Next.js application. Lastly, we explore how to add personalization and content recommendation in our GraphQL API to serve relevant articles to our users, then deploy our application to the cloud using Vercel and Neo4j Aura.

Table of contents:
- Next.js overview and getting started with Next.js
- API Routes with Next.js & building a GraphQL API
- Using the Neo4j GraphQL Library
- Working with Apollo Client and GraphQL data fetching in Next.js
- Deploying with Vercel and Neo4j Aura
Building full-stack GraphQL applications with Hasura and Vue 3
Vue.js London Live 2021Vue.js London Live 2021
115 min
Building full-stack GraphQL applications with Hasura and Vue 3
WorkshopFree
Gavin Ray
Gavin Ray
The frontend ecosystem moves at a breakneck pace. This workshop is intended to equip participants with an understanding of the state of the Vue 3 + GraphQL ecosystem, exploring that ecosystem – hands on, and through the lens of full-stack application development.

Table of contents
- Participants will use Hasura to build out a realtime GraphQL API backed Postgres. Together we'll walk through consuming it from a frontend and making the front-end reactive, subscribed to data changes.
- Additionally, we will look at commonly-used tools in the Vue GraphQL stack (such as Apollo Client and Urql), discuss some lesser-known alternatives, and touch on problems frequently encountered when starting out.
- Multiple patterns for managing stateful data and their tradeoffs will be outlined during the workshop, and a basic implementation for each pattern discussed will be shown.
Workshop level

NOTE: No prior experience with GraphQL is necessary, but may be helpful to aid understanding. The fundamentals will be covered.
Learn Fastify One Plugin at a Time
Node Congress 2021Node Congress 2021
128 min
Learn Fastify One Plugin at a Time
Workshop
Matteo Collina
Matteo Collina
Fastify is an HTTP framework for Node.js that focuses on providing a good developer experience without compromising on performance metrics. What makes Fastify special are not its technical details, but its community which is wide open for contributions of any kind. Part of the secret sauce is Fastify plugin architecture that enabled developers to write more than a hundred plugins.This hands-on workshop is structured around a series of exercises that covers from basics "hello world", to how to structure a project, perform database access and authentication.

https://github.com/nearform/the-fastify-workshop