Agenda

• JSS State
• Why Astro?
• Demo
• Distribution
• Current status
• Astro place in Sitecore ecosystem

Next.js, React, Vue, and Angular Statistics: October 2023

Sitecore Version Statistics: October 2023

JSS Frameworks Usage Summary

• Major part of Sitecore clients use modern Sitecore versions.
• Next.Js is the most popular framework. It is expected.
• React is replaced by Next.Js.
• Vue and Angular are still popular.

Why Astro?

• Speed - Astro is statically and server-rendered by default. It makes it perfect for content-first, SEO-friendly websites.
• UI agnostics - There is a default components format .astro. But you still can use React, Vue, Angular, Svelte, etc.
• Islands architecture - Islands optimize your website like no other web framework can. You can mix static, server rendered and client rendered content in one page.
• Easy to use - Astro template engine is very simple and looks like plain HTML.
• Content focused - Astro was designed for building content-rich websites.

Lighthouse Performance

• https://astro.build/
• https://astro.build/blog/2023-web-framework-performance-report/

UI Agnostics

Astro Islands

Astro Islands (aka Component Islands) are a pattern of web architecture pioneered by Astro. The idea of “islands architecture” was first coined by Etsy’s frontend architect Katie Sylor-Miller in 2019, and expanded on in this post by Preact creator Jason Miller.

Easy to use

Astro’s goal is to be accessible to every web developer. Astro was designed to feel familiar and approachable regardless of skill level or past experience with web development.

• .astro UI language
• Support any favorite UI component languages
• Less complex than other UI frameworks and languages
• You can build with just HTML and CSS

Content Focused

Astro was designed for building content-rich websites. This includes most marketing sites, publishing sites, documentation sites, blogs, portfolios, and some ecommerce sites.

By contrast, most modern web frameworks are designed for building web applications. These frameworks work best for building more complex, application-like experiences in the browser: logged-in admin dashboards, inboxes, social networks, todo lists, and even native-like applications like Figma and Ping.

Demo

• Frontend
• Sitecore
• Command line interface

Distribution

• NPM packages
• Open source on GitHub
• Apache 2.0 License

Next Steps

• Add Angular
• Analytics?
• Documentation
• Real projects

Where and When to Use?

• Simple, content-first sites
• Instead of Vue/Angular
• Instead of .Net
• Blogs, Portfolios, Documentation, Marketing sites, Landing pages etc
• Award-winning designs with a lot of animations
• Where complex integrations of other libraries are required