Astro: All Hands On

certificate
Recording and certification are available to Multipass and Full ticket holders only
Please login if you have one.
Rate this content
Bookmark

La web es capaz de mucho más de lo que podríamos pensar. Durante esta masterclass, exploraremos algunas partes menos conocidas de la web. ¿Sabías que puedes controlar la web a través de webHID o enviar y recibir notas a dispositivos a través de webMIDI? En esta charla interactiva podríamos hacer música juntos, controlando sintetizadores y explorando la amplia gama de extrañas API web. Todo eso en JavaScript puro, sin necesidad de frameworks.

This workshop has been presented at React Day Berlin 2024, check out the latest edition of this React Conference.

Elian Van Cutsem
Elian Van Cutsem
126 min
09 Dec, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Hola a todos. Hoy, vamos a ver Astro. Básicamente, vamos a construir un sitio web full-stack con Astro. Astro es un framework comparable a Next o Nuxt. Es un metaframework básicamente. En Astro, podemos construir sitios web usando React o Vue o Svelte. Es muy versátil. Tenemos la carpeta de assets, componente, layout y página. La barra de herramientas de desarrollo de Astro proporciona privilegios, integraciones, retroalimentación, inspección y auditorías. Podemos crear páginas dinámicas usando interpolación de cadenas y archivos dot Astro. Podemos integrar React en Astro y crear componentes. AstroDB permite páginas renderizadas del lado del servidor. Podemos personalizar el layout y el estilo de las páginas. Las transiciones suaves se pueden implementar en Astro para crear una experiencia similar a SPA. Podemos instalar una base de datos en Astro y obtener datos de ella. Es posible manejar envíos de formularios y realizar validaciones usando Zod en Astro. Astro proporciona JSON API para manejar envíos de formularios. Podemos utilizar las capacidades de Astro para manejar middleware.
Available in English: Astro: All Hands On
Video transcription and chapters available for users with access.

Watch more workshops on topic

Curso intensivo sobre Astro y Storyblok
React Day Berlin 2023React Day Berlin 2023
119 min
Curso intensivo sobre Astro y Storyblok
WorkshopFree
Arisa Fukuzaki
Arisa Fukuzaki
La arquitectura sin cabeza ha ganado inmensa popularidad en los últimos años por su capacidad para desacoplar el frontend y el backend, permitiendo a los desarrolladores crear aplicaciones web atractivas, interactivas y escalables.
En esta masterclass, nos sumergiremos rápidamente en el Mundo y la Arquitectura sin Cabeza.
Además, construiremos un sitio web de blog súper rápido utilizando Storyblok, un CMS sin cabeza que ofrece una función de vista previa en tiempo real con un enfoque de componente anidable, y Astro (3.0) que ya está creando revuelo con el nuevo directorio de aplicaciones.
- Domina los fundamentos de CMS sin cabeza- Domina un enfoque de Astro & CMS sin cabeza- Usa el diseño atómico en tu aplicación Astro & Storyblok- Creación de páginas, adición de contenido y comprensión de cómo funciona el enrutamiento dinámico con sin cabeza
Curso Intensivo de Astro, Kontent.ai y Portable Text
React Summit 2023React Summit 2023
91 min
Curso Intensivo de Astro, Kontent.ai y Portable Text
WorkshopFree
Ondrej Polesny
Ondrej Polesny
En este curso intensivo, crearemos un nuevo proyecto en el CMS sin cabeza, crearemos el modelo de contenido y los datos utilizando la CLI de Kontent.ai. Luego, utilizaremos el contenido para construir un sitio web de Astro que incluya componentes front-end y resolución de texto enriquecido utilizando Portable Text.
Este será un taller práctico, necesitarás VS Code, Git, NPM y conocimientos básicos de JavaScript. No te preocupes, explicaré todos los pasos a medida que avancemos en el taller y podrás hacer preguntas directamente.

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

Diseño Opt-in – La Nueva Era de los Marcos de React
React Advanced 2023React Advanced 2023
23 min
Diseño Opt-in – La Nueva Era de los Marcos de React
This Talk discusses opt-in design in web development, focusing on API design and understanding good defaults. Opt-in design allows developers to start with minimal tools and gradually add complexity as needed. The principles of opt-in design include finding the lowest common denominator, making complexity easy to add, and prioritizing the user experience. The Talk also explores the concept of opt-in design in React and Astro, as well as the comparison between React and Solid frameworks. Server rendering and streaming in React are highlighted, along with the importance of suspense boundaries for a better user experience.
No sabes cómo hacer SSR
DevOps.js Conf 2024DevOps.js Conf 2024
23 min
No sabes cómo hacer SSR
The Talk covers the speaker's personal journey into server-side rendering (SSR) and the evolution of web development frameworks. It explores the use of jQuery for animations in SSR, the challenges faced in integrating React with Umbraco, and the creation of a custom SSR framework. The Talk also discusses the benefits of Next.js and the use of serverless artifacts for deployment. Finally, it highlights the features of Astro, including its function per route capability.
Todo Sobre Astro
React Day Berlin 2023React Day Berlin 2023
28 min
Todo Sobre Astro
Astro is a powerful framework for content-driven websites, with its own syntax and the ability to use favorite front-end libraries. It has seen significant improvements in Astro 2 and Astro 3, including view transitions and improved performance. Astro 4 introduces features like a powerful dev toolbar, content caching, and internationalization support. The Astro community is highly regarded, and Astro is being used for production websites. Astro also supports migrating legacy websites and integrating with headless CMSs.
Astro & Fresh - Comprendiendo la Arquitectura de Islas
React Advanced 2022React Advanced 2022
21 min
Astro & Fresh - Comprendiendo la Arquitectura de Islas
The islands architecture is a new way to build websites with low or no JavaScript, using libraries like Astro and Fresh. Server-side rendering improves SEO and loading times, but can still result in large JavaScript payloads. Hydration allows for islands of interactivity, loading only necessary JavaScript. Astro is a framework for implementing the islands architecture, supporting multiple libraries like React and SolidJS. It enables progressive migration between frameworks and integration of different libraries in the same project.
La próxima ola de frameworks web es BYOJS
JSNation 2022JSNation 2022
23 min
La próxima ola de frameworks web es BYOJS
The next wave of web frameworks is BYOJS, covering the history and evolution of building web applications. The evolution of web frameworks and build systems includes popular choices like React, Angular, and Vue, as well as advanced build systems like Webpack and Rollup. The rise of performance measurement tools and the adoption of the Jamstack have led to improved web performance. The Jamstack architecture focuses on pre-rendering pages, decoupling APIs and services, and enhancing pages with JavaScript. Astro, a static site generator with SSR support, promotes the islands architecture and partial hydration.
Novedades en Astro
JSNation 2024JSNation 2024
29 min
Novedades en Astro
Astro is a web framework that aims to optimize site performance without sacrificing functionality. It introduces features such as content collections and view transitions to enhance the user experience. Astro focuses on pushing the web forward by providing browser compatibility and app-like experiences. It also explores a powerful content layer and island architecture for personalized content. Astro is recommended for content-driven websites and offers a polyfill for Safari and integration with Storyblok CMS.