Build a Metaframework in 30 Minutes or Less

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

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.

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

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.

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.

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 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.

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.

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.

Darko Bozhinovski
Darko Bozhinovski
26 min
13 Jun, 2025

Comments

Sign in or register to post your comment.
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.

1. Understanding Playwright Testing Tool

Short description:

We've discussed the importance of testing in 2025, focusing on Playwright as an end-to-end testing tool with powerful features and AI capabilities. Playwright aims to simplify test writing and enhance the testing experience, offering a practical approach and a supportive community.

We've wipecoded our application real quick, or we inherited a legacy large codebase. How do we test it? Is testing easy in 2025? That's a tricky question. And before I jump in, a quick check. Can you please raise your hand if you worked with Playwright before? Great. It's like almost half of the audience, maybe even more.

For the rest of us, a brief introduction to Playwright. Playwright is a very popular end-to-end testing tool. It's very easy to install. With just one command, you get the default browsers, configuration, example test, and even GitHub action. It comes with Code Jam. It allows you to generate tests without writing any code at all.

When tests inevitably fail, Playwright has best-in-class developer experience with built-in debugger, VS Code extension, screenshots, reports, videos, and my favorite, the trace viewer. The trace viewer is a one-stop shop for any test failure. It provides all the test steps along with screenshots, errors, console logs, network requests, and basically everything that we usually check in the browser dev tools. Of course, the mandatory AI slide. Playwright has a couple of nice AI features, copy error as AI prompt, and Playwright MCP server to allow large language models to communicate with Playwright APIs.

Let me give you a quick demo. Here, I'm asking Courser to write a quick conference review draft for my blog. Courser asks Playwright MCP to fetch a conference agenda and Playwright returns an accessibility snapshot of the page, something that is very easy for Courser to digest. As a result, Courser generates a good first draft, even for the talks that were not presented yet. Very cool. Of course, Playwright's main goal is to help us write reliable, predictable tests. And Playwright is a very practical tool. It comes with auto-weighting and web-first assertions. Authentication and multi-user comes out of the box, the same with parallelism and sharding. Finally, it has a great community that provides community plugins, best practices, and integrations with other tools.

2. Challenges of Testing in Specialized Domains

Short description:

Playwright offers practical testing solutions with auto-weighting, web-first assertions, and community support. Joining Aetion, a healthcare analytics company, presented challenges in testing within a highly specialized domain. From complex codes to evolving React components, testing in such environments requires meticulous attention to detail and adaptation to legacy systems.

And Playwright is a very practical tool. It comes with auto-weighting and web-first assertions. Authentication and multi-user comes out of the box, the same with parallelism and sharding. Finally, it has a great community that provides community plugins, best practices, and integrations with other tools. All in all, Playwright checks all the boxes to make testing easy.

At least, this is what I thought when a year ago, I joined a team at Aetion, a healthcare analytics company that offers a range of products for data scientists in the healthcare sector. It's a highly specialized and regulated business domain that probably has an acronym for pretty much everything in the world. Let me give you an example. In the International Classification of Diseases, that's a real thing, there is a code W6162xd that literally means struck by duck, subsequent encounter. And in such specialized business domain, our team was asked to cover all the major features with automated tests for regulation purposes. The scope included 64 epics of tests.

I still remember this number. For a non-professional like me, the UI looked like gazillion checkboxes, acronyms, tables with random numbers all around, powered by a 5-year-old React application and a 10-year-old Java back-end. Java had its own story going from monolith to microservices, then back, leaving us with a bunch of legacy outdated APIs. But that's for another time. For now, let's focus on React. As the product was evolving, some of the components have grown over a thousand lines of code with those huge use effects, with missing dependencies, dependencies, and all that stuff. React version 17, most of the code untyped. ESLint and Prettier got lost during cloud migration.

3. Exploring Modern Testing Strategies

Short description:

Facing challenges in testing complex code, the speaker overcomes initial reluctance and delves into developing a testing strategy. Exploring various testing strategies like the testing pyramid, reversed pyramid, and testing diamond offers insights into modern testing approaches and the speaker's preferred methodology.

Before we move on, I just wanted to mention that this is not an uncommon situation for growing businesses that focus on building new features. Now, having that said, our first reaction to this project can be summarized by a quote from my teammate. This code is impossible to test. Or speaking scientific language, R45.4, irritability and anger. Challenge was not accepted. With all those excuses running in my head, no, it's not my job. Even a junior developer can do that. Even AI can do that. And after five hours of me prompting chat GPT, stupid AI, it will never take my job. Okay. I'll write the tests. At least tell me what kind of tests should I write? Where do I start? We needed a testing strategy.

Now it's time for a brief theoretical blog. Probably the most popular testing strategy out there is the testing pyramid. It promotes breaking software into smaller, testable units. Not our case, to be honest. The other option is to put the pyramid upside down to get the reversed testing pyramid. If I put a bit of ice cream on top, then we get the testing ice cream cone. The default testing strategy for many companies. Not that tasty. Most of the testing is manual and only some of that gets automated.

Another option is the testing diamond and puts main focus on the integration tests. An evolution of the testing diamond that is more popular in the frontend community is the testing trophy by Can'tSeeDots. It clarifies what different types of tests mean in the context of the modern JavaScript ecosystem and also makes static checks such as YesLint and TypeScript more explicit. Not everyone knows, but Kian's favorite strategy is the testing Dorito by Tim Myers. Let me read it for you. From top to bottom. Tests I plan to write. Tests I start writing. Tests I delete because I think they're stupid and they can take a lot of time and they're not worth.

4. Implementing End-to-End Testing Strategy

Short description:

Introducing the testing mushroom strategy for end-to-end testing, team faces challenges in test execution, leading to the need for written documentation and fixing issues with ESLint plugin to enhance testing practices.

Finally, tests. And the testing Dorito is a good reminder that theory and practice don't always have a perfect match. So without further ado, please welcome brand new testing strategy, the testing mushroom. The cap of the mushroom is all about end-to-end testing. It clears regulation requirements and also helps us build a safety net so that we can start refactoring and introducing integration and unit tests. The testing mushroom is a living organism, so it's expected to change its shape once we learn more.

Great, we've got our strategy, so it's time to execute. The whole team sat down to write as many tests as possible, as fast as possible. And a month later, it was a disaster. It didn't work. The more tests we were writing, the more of them were failing with all the random reasons and it was impossible to figure out what was going on. It was time for an emergency action, namely written documentation. At least the best practices part.

Apparently, we have a misusing playwright API, and here I have a couple of examples for you. The line at the top is the wrong way to check the welcome text on screen, and the line below is the right way to do that. Both work, it's just the first one sometimes randomly fails. And to be honest, the difference is subtle, especially when you review thousands lines of test code. Luckily, there is a simple solution. We installed ESLint plugin Playwright. It fixed all the issues and also helped us learn what was the right way to use playwright. Great.

5. Optimizing Test Dependency Handling

Short description:

Facing challenges with test dependencies, enforcing isolated tests, and improving stability and bug detection in testing processes.

With that, we continued, and two months into the project, we realized we were behind schedule. So we had to ask our colleagues from other teams for help. This is when we faced our next challenge, test dependencies. As you remember, we are dealing with a quite complex business domain. A typical user journey can take several minutes before you achieve some meaningful result. And for developer, it's tempting to reuse results from previous tests to build new tests on top of them.

Unfortunately, it breaks completely test retries and makes local debugging practically impossible. You never know in which order and which tests to run in order to reproduce the issue. Now, once again, we decided to follow best practices. And one of them says, make tests as isolated as possible. Well, easy to say. We had to enforce it with fully parallel mode and increase the number of workers to three to actually run the tests in parallel. That revealed a few issues that we sorted.

And with that, finally, we were great. Our tests became much more stable and they started catching real bugs like that one at the top right corner. Let's actually see what's wrong with it. Okay, that's my test. I can see immediately what's the issue. It's one of the backend APIs not returning the right response, so I'm pushing it to the backend team. The backend team opens it apparently in the dark mode, and can't understand anything, just like you probably, because it's too small. So they push it back to us. And we push it back to them, and so on and so forth.

6. Enhancing Test Report Readability and Speed

Short description:

Improving test report readability with the step decorator and Allure Reports for clearer understanding and more accessible reports. Addressing slow test speeds by adjusting worker configurations to enhance efficiency.

Let's look at 63.1, problems in relationship with in-laws. Apparently, our test reports were not readable at all, and we had to improve it. When it comes to making code more readable, we already know how to do that. We break it into smaller logical blocks. In testing, there's a common pattern, page object model, where you organize your code in screens or pages. For example, here I have a login page class, and it contains all actions that you can perform on that screen or page. Login, logout, password reset, etc.

We already had our code organized this way, and apparently, we were just one step away from making our reports as readable. And when I say one step, I literally mean it with step decorator. Step decorator groups lower-level playwright actions into high-level steps, logical steps that you can understand. It doesn't come out of the box, but there's documentation on how you can configure it for your needs. With that, our test reports became much more readable, even for our lovely backend team.

If I zoom out a little bit, this is how the failed test looks in the testing report. It contains all the test steps, screenshots, videos, test retries, tags, history, and all that comes from Allure Reports. Allure Reports is an open-source cross-language, cross-framework tool for building beautiful test reports, so that even non-technical users can figure out what's going on in the test. And as usual, it's very easy to configure it with Playwright. Great! With that, we were on the finish line when our platform engineering team reached out with a much bigger problem. Yes, our tests were green. Yes, they were stable, but they were super slow.

7. Speed Optimization and Mocking Strategies

Short description:

Addressing slow test speeds by adjusting worker configurations to enhance efficiency. Utilizing Playwright network cache plugin for performance enhancement without maintaining mocks. Prioritizing speed optimization in test execution for quicker feedback loops.

They could block the deployment pipeline for an hour or two, and it was not acceptable. To be honest, we never focused on speed. We had other priorities. As a reminder, we are running tests in full parallel mode in three workers. And with just one configuration change, we went from 51 minutes to 17 minutes. Yes, we just increased the number of workers.

You can see the white space at the beginning. We still have some room for improvement, but it's already a good first step. Of course, it doesn't make each individual test run faster. We just run more of them in parallel. If we compare end-to-end tests to integration tests, integration tests usually run faster because they skip or mock expensive operations.

At Playwright, we have a network API for intercepting HTTP requests, but personally, I'm not a huge fan of this approach. On one project, we mocked all the HTTP requests. Our test was super fast, super green, but they never caught a single bug. Could we gain similar performance improvement, but without actually maintaining mocks? Mocking without mocks, as I call it. This is exactly what Playwright network cache plugin offers.

8. Innovative Test Performance Enhancement

Short description:

Leveraging Playwright network cache plugin for improved test performance without the need for maintaining mocks. Integrating caching to speed up test execution significantly. Reflecting on the evolution of the testing approach for enhanced stability, bug-catching, and parallel execution.

Could we gain similar performance improvement, but without actually maintaining mocks? Mocking without mocks, as I call it. This is exactly what Playwright network cache plugin offers. Let me show you an example. Imagine we have five slow tests. Each starts with performing some slow operation. Let's say opening a test project. With Playwright network cache, the first test will perform the operation, doesn't matter get or post multiple requests or just one, and will store the result in cache. All the other tests will reuse that cache as mocks. In our case, we actually had 200 of tests like that, and we got back 10 minutes of test running time. That's insane.

Now, if you think it's cheating, you're not wrong, because it's no longer a pure end to end test. That's why in the testing mushroom, our integration tests sit inside the mushroom cup. And I could talk more and more about the testing mushroom, because it's just a lot of fun. But honestly, I made it up completely for the purposes of this talk, to illustrate the approach that we took for this particular project. And your approach will be different. I hope the testing mushroom inspires you to explore the different shapes and strategies out there and find what works for you and makes testing, if not easy, then at least more fun.

With that, let me recap. We wrote all the tests. Mission complete. They're stable and readable. They catch real bugs. They run in full parallel mode. Great job to the team. But there's something else that I didn't mention. An unexpected side effect. Today, one year later, we have React and other major libraries upgraded. We duplicated those outdated integration tests with those legacy mocks that nobody could maintain. The team switched to monorepo to improve developer experience. We migrated to feature-slice design code structure to align better with our business domain and also to start breaking down our code into smaller, testable units. It accelerated TypeScript migration.

QnA

Testing Strategy Discussion

Short description:

Building new features is easier with testing as the foundation. Testing's ease depends on strategy, discipline, and skill. Embracing testing right makes everything else simpler. Kate, focused on testing, shares insights at React Summit 2025. Discussing testing approaches and the diverse strategies available.

Today, building new features is much easier. It's a completely different code base, but I know it all started with testing. So back to the question. Is testing easy? It depends on the right strategy, discipline, and skill. But the good news, everything else becomes easier when you've got your testing right. And my favorite. RS 202.5 obsessed with testing at React Summit 2025. My name is Kate. I'm collaborating on social media. Happy testing. Thank you. We have Slido running. And don't forget that you can add your questions as we discuss. We are going to see who upvotes what.

But why don't we start out with testing approaches? So you went through several different snacks that represent testing approaches. Which one do you think is the best? I think that's an asterisk question. That's a tricky one. Because the whole point of my talk is that it depends on the code base that you handle. And sometimes, like my best is of course the classic testing pyramid. But it's not always possible to start with it if you deal with legacy code base or, you know, the situation is what it is. So I would say find what works for you. And then look around because there are some smart people that come up with some interesting ideas. Absolutely.

But I think we can all agree what is the cutest testing strategy, which is obviously the mushroom. I don't know about the Dorito. Maybe. It depends on the flavor. Okay. So let's see. How about the parallelism? We got a couple of questions about that.

Optimizing Parallelization and Flaky Test Handling

Short description:

Disabling parallelization for specific test suites is achievable with Playwright's flexibility. Determining the optimal number of parallel workers in CI settings and addressing flakiness in end-to-end tests by following best practices and involving backend teams.

So is there a way to disable parallelization for certain test suites that have long initial load times? Yes. I think what the person wants to achieve is perfectly possible. Playwright is a very configurable tool. But I would change that. And we forced ourselves in this situation where we had to deal with full parallel mode and it helped us a lot to actually follow best practices and help us, you know, maintain it as it goes. Awesome. Awesome.

And on that same subject. So in the parallel workers, like how, I guess, you know, how many did you finally use? Or perhaps the wider question is how do you determine how many to use? And were you running in CI in continuous integration? Yeah, yeah. Of course. We currently use 12 workers in CI. We don't use it on local, for example. Local, I use four workers maximum. It depends. In our case, we just picked the largest machine that was available for us in CI and that's it. It was simple. The number of CPUs. Yeah. So that's basically what you got. Right? Awesome.

And so how about those end to end tests that are... How do you ensure that they aren't flaky? Because you have some issue with the server, some random downtime, something else goes wrong. What do you do against flaky end to end tests? That's a great question. So if you follow playwright best practices, then you reduce, you know, unnecessary flakiness that comes from the fact that you're using browser and there are some latencies, et cetera. Now if your server is down, there's nothing that can help you. And that's at the core of the end to end test as opposed to just the whole thing. So we let them fail if the server fails and we ping our lovely backend team to fix that. Now there are mixed up approaches, as I mentioned, with this same integration tests, when you mock some of those things, this is the other approach that you can use and you can go creative. Yeah. Yeah.

Handling Decorators and Test User Registration

Short description:

Explaining the equivalence between 'at step' and 'test dot step' as decorators and addressing user registration dependencies by utilizing pre-configured test user data for efficient testing.

Okay. Makes sense. So again, got to roll with the punches. Right? You got to get creative for whatever the problem is at hand.

Okay. We have a question about a very specific question. What is the difference between at step and test dot step? That's the same thing. At step is a decorator that wraps the methods for you. Beautiful. So you don't need to modify all your code base or your existing test, you just add the decorator. Yeah. And that's maybe a personal preference thing again, like what does your team prefer? What's your style? Are you used to working with decorators? Are you not? Cool.

So let's see. So many great new questions are coming in. I love to see this, even though we're having a bit of a silent disco and so it, you know, it's very quiet in real life here. We're all having an awesome virtual interaction, which is bringing me back to like five years ago. Anybody? 2020 vibes? Okay. So, all right. How about, how do you approach, for example, dependencies on user registration without repeating registrations every time? Yeah, that's a great question. First of all, we have pre-configured test user like seed data that we have and they already contain some test users. So we test registration only once, but then we use those pre-configured users. Awesome.

Ensuring Audience Engagement and Testing Stability

Short description:

Encouraging audience participation through upvoting questions, discussing optimizing login generators, and explaining the use of fixtures for stability in testing. Exploring the decision not to use Playwright sharding due to current infrastructure capabilities.

So as the questions are coming in, don't forget, you can upvote the ones that you want to hear answered, but if your question isn't answered, or if you were perhaps too enraptured by the joys of thinking about testing strategies to ask it here online on Slido, those of you that are in-person will have a chance to join Kate's Q&A corner later on. All righty. But in the meantime, back to our virtual disco, silent disco party. I wish we had like roller skates or something, no? Just me? I'm sure nobody would get hurt. That would be fine.

Speaking of logins, I guess, and registration, so any thoughts on optimizing login generators or util functions that will be run for each test? So this person has had trouble with, or their team has had trouble with parallelization and timeouts when hitting various endpoints? Okay. The answer is quite long, so let's chat after the talk. In short, for repeated code, we use fixtures a lot. They mean different things in Playwright than other things. And for stability, we need to chat because it depends. It depends, right? It depends. The software engineer's most used sword. Absolutely.

I think we have time for a couple of more questions, if you're up for it. I'm up for Thunderstalk, honestly. So let's wrap it up. There are going to be more talks on the alternate stage. So yes. But don't worry, if you do miss any of the talks because you're, again, having such a great time silently talking about testing up here, don't worry, they'll record it. You can catch them later. So we will make sure to catch that. And once you've had a chance to cool down as well. But let's see, would you be willing to do one more for our audience here? Can we get a virtual woo to encourage this? Absolutely amazing. Fabulous. All right, let's see. Our most popular question at the end is, are you using Playwright sharding in CI and CD runs? And if not, why not? We just don't need it. We use a large machine. As soon as we need it, we will use it because sharding requires a bit of massaging of the reports.

Exploring Sharding Considerations and Gratitude

Short description:

Discussing the use of large machines for potential future sharding, highlighting the complexity of merging reports. Expressing gratitude for engaging discussions on testing strategies and thanking Kate for her contributions.

We use a large machine. As soon as we need it, we will use it because sharding requires a bit of massaging of the reports. So you need to merge them back. And we don't want to do that. Can we grow big enough? We will do that for sure. So again, depending on the need, right? Like depending on what your actual capacity is and what your actual... But it's a great question. Yeah. Awesome. Awesome.

Well, I love that we have such a colorful discussion going on about what I'm now going to think of as a very hunger-inducing part of software development, testing strategy. So can we all please give a virtual and real huge, huge thank you to the amazing Kate and all of the testing shapes. Thank you very much. Thank you so much, Kate.

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 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.
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
Watch video: Speeding Up Your React App With Less JavaScript
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.
Full Stack Documentation
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
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.
SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
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.
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
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.
Tanstack Start - A Client-Side First Full-Stack React Framework
React Summit US 2024React Summit US 2024
30 min
Tanstack Start - A Client-Side First Full-Stack React Framework
Top Content
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.

Workshops on related topic

Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
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
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)
Let AI Be Your Docs
JSNation 2024JSNation 2024
69 min
Let AI Be Your Docs
Workshop
Jesse Hall
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
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
Build a Product Page with Shopify’s Hydrogen Framework
React Advanced 2022React Advanced 2022
81 min
Build a Product Page with Shopify’s Hydrogen Framework
Workshop
David Witt
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.
Build a Universal Reactive Data Library with Starbeam
JSNation 2023JSNation 2023
66 min
Build a Universal Reactive Data Library with Starbeam
WorkshopFree
Yehuda Katz
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