English versionEN

Build a Metaframework in 30 Minutes or Less

Metaframeworks: you're probably using one already and may or may not love the experience - but what if I told you they aren’t rocket science?

In this talk, we’re ditching the buzzwords and over-complication to build one from scratch—yes, you heard that right.

Armed with Vite, Vinxi, Nitro, a pinch of vanilla JavaScript, and a healthy dose of curiosity, we’ll piece together the routing, rendering, and all the essentials you’ve been letting metaframeworks handle for you.

Expect aa crash course in understanding the tech you use every day. By the end, you might just be asking: Should I just roll one myself? Aand no, you shouldn't. But it's sure fun building one and understanding what makes them tick, no?

This talk has been presented at React Summit 2025, check out the latest edition of this React Conference.

FAQ

Playwright is a popular end-to-end testing tool that is easy to install and supports generating tests without writing code. It includes features like visual comparisons, snapshots, API testing, and more, providing a comprehensive testing solution.

Playwright can help by providing tools for end-to-end testing even in complex or outdated codebases. It supports auto-waiting and web-first assertions, making it easier to write reliable and predictable tests.

The 'testing mushroom' strategy focuses on end-to-end testing to meet regulation requirements and provide a safety net for refactoring. It's designed to evolve as more is learned about the system being tested.

Playwright offers a best-in-class developer experience with built-in debuggers, VS Code extensions, screenshots, reports, videos, and a trace viewer that provides detailed information on test failures.

Advanced features of Playwright include handling visual comparisons, snapshots, API testing, component testing, and supporting multiple user authentication and parallelism out of the box.

You can optimize test performance by running tests in full parallel mode and increasing the number of workers. Playwright's network cache plugin can also be used to reduce test running time by caching results.

Playwright incorporates AI features like 'copy error as AI prompt' and the MCP server for large language models to interact with Playwright APIs, enhancing the testing process.

Test isolation is crucial in Playwright to prevent dependencies between tests, ensuring that tests can run in any order without failing due to shared state or resources.

Playwright improves test report readability by using the step decorator to group lower-level actions into high-level, understandable steps, and integrating with tools like Allure Reports for detailed, user-friendly test reports.

When selecting a testing strategy, consider the specific needs of your codebase. Strategies like the testing pyramid, testing ice cream cone, and testing mushroom offer different focuses, and the right choice depends on your project's context and requirements.

frameworks

Darko Bozhinovski

26 min

13 Jun, 2025

Comments

Video Summary and Transcription

The Talk covers the importance of Playwright as an end-to-end testing tool with AI capabilities and a supportive community. It addresses challenges in testing specialized domains like healthcare analytics and explores modern testing strategies like the testing pyramid and testing diamond. The implementation of the testing mushroom strategy for end-to-end testing, optimization of test dependency handling, and enhancement of test report readability and speed are discussed. Speed optimization, mocking strategies, test performance enhancement, parallelization, flaky test handling, decorators, test user registration, audience engagement, testing stability, sharding considerations, and gratitude for engaging discussions on testing strategies are also highlighted.

Available in Español: Construir un Metaframework en 30 Minutos o Menos

Video transcription and chapters available for users with access.

Available in other languages:

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 2021

33 min

Building Better Websites with Remix

Top Content

Michael Jackson

React Training

Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.

react remix frameworks

Speeding Up Your React App With Less JavaScript

React Summit 2023

32 min

Speeding Up Your React App With Less JavaScript

Top Content

Watch video: Speeding Up Your React App With Less JavaScript

Miško Hevery

Qwik Creator

Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.

performance frameworks builders and founders qwik react less

Full Stack Documentation

JSNation 2022

28 min

Full Stack Documentation

Top Content

Rich Harris

Svelte Creator

The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.

frameworks svelte documentation

SolidJS: Why All the Suspense?

JSNation 2023

28 min

SolidJS: Why All the Suspense?

Top Content

Ryan Carniato

SolidJS Creator

Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.

react query frameworks builders and founders solidjs preact vs solidjs solidjs vs react

From GraphQL Zero to GraphQL Hero with RedwoodJS

GraphQL Galaxy 2021

32 min

From GraphQL Zero to GraphQL Hero with RedwoodJS

Top Content

Tom Preston-Werner

GitHub cofounder, RedwoodJS author

Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.

frameworks graphql redwoodjs builders and founders

Tanstack Start - A Client-Side First Full-Stack React Framework

React Summit US 2024

30 min

Tanstack Start - A Client-Side First Full-Stack React Framework

Top Content

Tanner Linsley

Nozzle.io

We surveyed thousands of developers to show that a louder audience leads to a better presentation. There has been a shift in web app development towards server-first architectures, which has improved full-stack capabilities but at the cost of complexity and divergence from the client-centric approach. Tanstec Start is a meta-framework that aims to provide the best client-side authoring experience with powerful server-side primitives. The Tansec Router supports advanced routing features, URL state management, and JSON storage. Combined with the server-side rendering capabilities of TanStack Start, it becomes even more powerful. The TanStack Router has isomorphic loaders and integrates seamlessly with TanStack Query for additional features like polling and offline support. UseSuspenseQuery allows for dynamic streaming of data during SSR. TanStack Start also offers server-side features, API routes, server functions, and middleware. The future plans include RSCs, websockets, real-time primitives, and static pre-rendering. TanStack Start is now in beta and is suitable for building React apps. It is open source.

react frameworks builders and founders

Workshops on related topic

Building WebApps That Light Up the Internet with QwikCity

JSNation 2023

170 min

Building WebApps That Light Up the Internet with QwikCity

WorkshopFree

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.

performance frameworks qwik

Back to the Roots With Remix

React Summit 2023

106 min

Back to the Roots With Remix

Workshop

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)

remix web development frameworks

Let AI Be Your Docs

JSNation 2024

69 min

Let AI Be Your Docs

Workshop

Jesse Hall

Join our dynamic workshop to craft an AI-powered documentation portal. Learn to integrate OpenAI's ChatGPT with Next.js 14, Tailwind CSS, and cutting-edge tech to deliver instant code solutions and summaries. This hands-on session will equip you with the knowledge to revolutionize how users interact with documentation, turning tedious searches into efficient, intelligent discovery.
Key Takeaways:
- Practical experience in creating an AI-driven documentation site.- Understanding the integration of AI into user experiences.- Hands-on skills with the latest web development technologies.- Strategies for deploying and maintaining intelligent documentation resources.
Table of contents:- Introduction to AI in Documentation- Setting Up the Environment- Building the Documentation Structure- Integrating ChatGPT for Interactive Docs

frameworks machine learning artificial intelligence

Learn Fastify One Plugin at a Time

Node Congress 2021

128 min

Learn Fastify One Plugin at a Time

Workshop

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

node.js frameworks fastify

Build a Product Page with Shopify’s Hydrogen Framework

React Advanced 2022

81 min

Build a Product Page with Shopify’s Hydrogen Framework

Workshop

David Witt

Get hands on with Hydrogen, a React-based framework for building headless storefronts. Hydrogen is built for Shopify commerce with all the features you need for a production-ready storefront. It provides a quick start, build-fast environment so you can focus on the fun stuff - building unique commerce experiences. In this workshop we’ll scaffold a new storefront and rapidly build a product page. We’ll cover how to get started, file-based routing, fetching data from the Storefront API, Hydrogen’s built-in components and how to apply styling with Tailwind.You will know:- Get started with the hello-world template on StackBlitz- File-based routing to create a /products/example route- Dynamic routing /products/:handle- Hit the Storefront API with GraphQL- Move the query into the Hydrogen app- Update the query to fetch a product by handle- Display title, price, image & description.- Tailwind styling- Variant picker and buy now button- Bonus if there’s time: Collections page
Prerequisites: - A Chromium-based browser (StackBlitz)- Ideally experience with React. A general web development background would be fine.

frameworks e-commerce react server components hydrogen shopify shopify with react

Build a Universal Reactive Data Library with Starbeam

JSNation 2023

66 min

Build a Universal Reactive Data Library with Starbeam

WorkshopFree

Yehuda Katz

This session will focus on Starbeam's universal building blocks. We'll use Starbeam to build a data library that works in multiple frameworks.We'll write a library that caches and updates data, and supports relationships, sorting and filtering.Rather than fetching data directly, it will work with asynchronously fetched data, including data fetched after initial render. Data fetched and updated through web sockets will also work well.All of these features will be reactive, of course.Imagine you filter your data by its title, and then you update the title of a record to match the filter: any output relying on the filtered data will update to reflect the updated filter.In 90 minutes, you'll build an awesome reactive data library and learn a powerful new tool for building reactive systems. The best part: the library works in any framework, even though you don't think about (or depend on) any framework when you built it.
Table of contents- Storing a Fetched Record in a Cell- Storing multiple records in a reactive Map- Reactive iteration is normal iteration- Reactive filtering is normal filtering- Fetching more records and updating the Map- Reactive sorting is normal sorting (is this getting a bit repetitive?)- Modelling cache invalidation as data- Bonus: reactive relationships

frameworks web apps reactivity