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

The web is capable of way more than we might think. During this workshop, we'll explore some lesser known parts of the web. Did you know you can control the web via webHID or send and receive notes to devices via webMIDI? In this interactive talk we might make some music together, by controlling synthesisers and exploring the wide range of strange web API's. All that in vanilla JavaScript, no frameworks needed.

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

FAQ

Astro compiles components to just HTML and CSS by default, resulting in better performance, accessibility, and SEO for content-driven websites.

Client directives in Astro determine when components should become interactive, using methods like client:load, client:idle, client:visible, and client:media.

The islands architecture in Astro allows developers to make certain components interactive by shipping JavaScript only to those components, creating an SPA-like experience on a static MPA.

Yes, Astro allows you to mix different JavaScript frameworks like React, Vue, or Solid within the same project.

Astro supports server-side rendering by using dynamic routes and database integrations to fetch real-time data for rendering.

Content collections in Astro allow developers to write content in markdown format and organize it efficiently, with type-safe schemas.

Yes, Astro can integrate with databases using AstroDB, allowing you to perform operations like inserts, selects, and more within your project.

Astro provides form actions and API routes for managing form submissions, allowing developers to handle both static and dynamic data efficiently.

Astro supports view transitions and provides a client router for smooth navigation transitions between pages, enhancing the user experience.

Astro is a meta-framework similar to Next.js or Nuxt.js, designed for building content-driven websites with an excellent developer experience.

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

Comments

Sign in or register to post your comment.
Video transcription, chapters and summary will be available later.

Watch more workshops on topic

Crash course into Astro and Storyblok
React Day Berlin 2023React Day Berlin 2023
119 min
Crash course into Astro and Storyblok
WorkshopFree
Arisa Fukuzaki
Arisa Fukuzaki
Headless architecture has gained immense popularity in recent years for its ability to decouple the frontend and backend, empowering developers to create engaging, interactive, and scalable web applications. 
In this workshop, we will quickly take a dive into the Headless World and Architecture. 
Additionally, we will build a blog website super quickly using Storyblok, a headless CMS that offers a real-time preview feature with nestable component approach, and Astro (3.0) which is already creating a buzz with the new app directory. 
- Master headless CMS fundamentals- Master an Astro & headless CMS approach- Use Atomic design in your Astro & Storyblok application- Creating pages, adding content and understanding how the dynamic routing works with headless
Crash Course Into Astro, Kontent.ai and Portable Text
React Summit 2023React Summit 2023
91 min
Crash Course Into Astro, Kontent.ai and Portable Text
WorkshopFree
Ondrej Polesny
Ondrej Polesny
During this crash course, we’ll create a new project in the headless CMS, create the content model and data using the Kontent.ai CLI. Then, we’ll use the content to build an Astro website including front-end components and rich text resolution using Portable Text.
This will be hands-on workshop, you’ll need VS Code, Git, NPM and basic knowledge of JavaScript. Don’t worry, I will explain all the steps as we advance through the workshop and you will be able to directly ask any questions.

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

Opt in Design – The New Era of React Frameworks
React Advanced 2023React Advanced 2023
23 min
Opt in Design – The New Era of React Frameworks
Watch video: Opt in Design – The New Era of React Frameworks
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.
You Don’t Know How to SSR
DevOps.js Conf 2024DevOps.js Conf 2024
23 min
You Don’t Know How to 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.
All Things Astro
React Day Berlin 2023React Day Berlin 2023
28 min
All Things Astro
Watch video: All Things 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 - Understanding the Islands Architecture
React Advanced 2022React Advanced 2022
21 min
Astro & Fresh - Understanding the Islands Architecture
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.
The Next Wave of Web Frameworks is BYOJS
JSNation 2022JSNation 2022
23 min
The Next Wave of Web Frameworks is 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.
What's New in Astro
JSNation 2024JSNation 2024
29 min
What's New in 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.