
Upcoming events
Web Development insights directly from framework authors and early adopters.
Talks from our events
Articles
Top ideas
Trending today
Why You Should Use Redux in 2024
React Summit 2024

33 min
Why You Should Use Redux in 2024
Top Content
Mark Erickson explains the history, creation, evolution, and benefits of Redux. Redux was designed to make state updates and action history maintenance easy, incorporating functional programming principles. Redux Toolkit was created to simplify Redux usage. Redux is still a valid choice for its consistent pattern and separation of state from UI. The decision to use Redux depends on the specific use case and the need for centralized state management.
Advanced Playwright Techniques for Flawless Testing
JSNation US 2024

20 min
Advanced Playwright Techniques for Flawless Testing

Hi, everyone. My name is Debbie O'Brien, Principal Technical PM at Microsoft. I'm focusing on Playwright, a reliable end-to-end testing tool for modern web apps. It works on any browser and platform, has powerful tooling, and tests run fast. Advanced techniques include UI mode, HTML reports, and trace viewer. Use annotations in Playwright to enhance reporting and test organization. Mocking API responses and external links is possible with Playwright. You can also test date and time by setting a fixed fake time. Playwright offers CLI test options and has a vibrant community. Join the Playwright Discord server and follow the important docs and YouTube channel for more information.
What Refs Can Do for You
React Summit US 2024

27 min
What Refs Can Do for You

Today's Talk focused on using refs and profiling Agigrid in React. The speaker shared their experience with optimizing custom cell components and performance, including using memo and leveraging the React compiler. They also discussed improving performance with manual style updates and refactoring the use of useEffect. The speaker highlighted the use of ref callbacks, which can be implemented with useLayoutEffect. React 19 introduces changes to the ref callback approach. The Talk touched on using React DevTools and CSS variables for monitoring renders. It also discussed the compatibility of Azure Grid with React and the trade-offs between using React components and vanilla JavaScript. The speaker emphasized the importance of considering the DX improvements and the complexity of not seeing a React component tree in the dev tools. The Talk concluded with a mention of AG Grid features, handling refs at various levels, and the recommendation to consult with Stephen for technical questions and application architecture.
Modern Web Debugging
JSNation 2023

29 min
Modern Web Debugging
Top Content
This Talk discusses modern web debugging and the latest updates in Chrome DevTools. It highlights new features that help pinpoint issues quicker, improved file visibility and source mapping, and ignoring and configuring files. The Breakpoints panel in DevTools has been redesigned for easier access and management. The Talk also covers the challenges of debugging with source maps and the efforts to standardize the source map format. Lastly, it provides tips for improving productivity with DevTools and emphasizes the importance of reporting bugs and using source maps for debugging production code.
Using UDP in the Browser for faster Client/Server Connections
JS GameDev Summit 2023

21 min
Using UDP in the Browser for faster Client/Server Connections
Top Content
This talk introduces geckos.io, a real-time client-server communication library using UDP and WebRTC. The speaker discusses the benefits of UDP for real-time multiplayer games and explains how geckos.io enables UDP connections between browsers and Node.js servers. The deployment process for geckos.io involves opening UDP ports and handling signaling through an HTTP request. The speaker demonstrates how geckos.io works with Docker and showcases the ability to host multiple servers on the same machine. Overall, this talk provides an overview of geckos.io and its applications in real-time communication.
React Query - The Bad Parts
React Day Berlin 2024

30 min
React Query - The Bad Parts
Top Content
React Query is a popular library with significant weekly downloads and positive user sentiment. It may have trade-offs like bundle size, but the actual size shipped is smaller. Bundle size optimization can be achieved by exporting only necessary features. React Query's declarative approach eliminates the need for custom data fetching solutions. It offers caching, request duplication, background updates, and more. RackQuery doesn't support normalized caching, but refetching after invalidation works fine. React's vision includes suspense architecture and server components. The documentation could be improved with a more structured flow. TensorStack Query can be a good choice for Next.js apps, but not necessary with mature frameworks. The 10 stack query and router concepts were discussed. Combining React Query with HTTP caching provides a robust caching solution.

62 min
React Patterns Made Simple
Top ContentFeatured Workshop
Learn widely used React patterns, including HOCs, Compound Components, Provider Patterns, Functions as Child, and Portals, to write cleaner, more efficient code and create scalable, maintainable applications.Overview In this workshop, viewers will learn about key React patterns that can ma...
Building a JS Engine -- For Fun!
JSNation 2024

9 min
Building a JS Engine -- For Fun!
Top Content
The Talk discusses the basics of building a JS engine, highlighting the complexity and feature completeness of existing engines. It emphasizes the possibility of creating a simpler engine tailored to specific use cases and target audiences. The speaker suggests starting anywhere in the process and provides tips on using parser libraries, implementing runtime features, and ensuring correctness through testing. Additionally, the Talk encourages exploring JavaScript standards and engaging with the open-source community.
Panel Discussion: Future of React
React Summit US 2024Watch video: Panel Discussion: Future of React








39 min
Panel Discussion: Future of React








7 authors
We're going to be doing a future of React panel discussions. React 19 is in RC stage and we're excited to hear when it will be stable. The React compiler is here to stay and is the future of developer experience and tooling. React 19 brings exciting features like RSCs and consolidation of the framework. React's commitment to community and innovation is commendable. The React team values feedback and actively engages with the community. React's future includes supporting the community and enabling smooth migrations. There's a need to teach underlying concepts and educate AI systems. Teaching and adapting to React can be challenging. The React compiler changes default re-rendering behavior. Collaboration with Next.js and Vercel has been valuable for React's development. Appreciation for the community and partnerships with Vercel and Microsoft.
React Query API Design – Lessons Learned
React Advanced 2024

26 min
React Query API Design – Lessons Learned
Top Content
I'm super excited to be here today, giving my first live talk at an in-person conference. Dominik, the maintainer of React Query, walks through the API design decisions, including success stories, trade-offs, and mistakes. Tener Linsley designed React Query's medium-sized query API to be minimal, intuitive, powerful, and flexible. Major versions in open source require marketing efforts, but not primarily for adding new features. TypeScript is crucial for building projects and managing user demands in open source can be challenging. The addition of the max pages option improved performance and avoided unnecessary refetches. Inversion of control gives users flexibility, but mistakes can happen in API design. Open source requires time management and feedback from users. API design is influenced by typing ease and good TypeScript support. Getting involved in open source involves trial and error and joining community platforms like TanStack Discord. Dominik's journey started during the pandemic and he can be found on Twitter, TanStack Discord, and his blog.
Featured
Case Study: Building Accessible Reusable React Components at GitHub
React Summit 2024Watch video: Case Study: Building Accessible Reusable React Components at GitHub

29 min
Case Study: Building Accessible Reusable React Components at GitHub

The talk discusses building accessible React components and emphasizes the importance of using the correct HTML elements and ARIA roles for accessibility. It explains how to navigate and select options within a form and how to add supplementary text using Aria described by. The speaker also discusses the benefits of using conditional checkboxes and ARIA disabled to improve the UI. Additionally, the talk explores the role of JavaScript in web accessibility and provides recommendations for testing website accessibility.

142 min
AI for React Developers
Top ContentFeatured Workshop
Knowledge of AI tooling is critical for future-proofing the careers of React developers, and the Vercel suite of AI tools is an approachable on-ramp. In this course, we’ll take a closer look at the Vercel AI SDK and how this can help React developers build streaming interfaces with JavaScript and...
And Now You Understand React Server Components
React Summit 2024

27 min
And Now You Understand React Server Components
Top Content
In this Talk, Kent C. Dodds introduces React Server Components (RSCs) and demonstrates how to build them from scratch. He explains the process of integrating RSCs with the UI, switching to RSC and streaming for improved performance, and the benefits of using RSCs with async components. Dodds also discusses enhancements with streaming and server context, client support and loaders, server component rendering and module resolution, handling UI updates and rendering, handling back buttons and caching, and concludes with further resources for diving deeper into the topic.
htmx Is Pro-JavaScript
JSNation 2024

22 min
htmx Is Pro-JavaScript

HTMX is a JavaScript library that extends HTML and works with a JSON API. It generalizes the functionality of links and forms, making any element a potential hypermedia control. HTMX simplifies the implementation of hypermedia functionality with a dozen core attributes. It can achieve powerful UI results without writing much JavaScript. HTMX complements JavaScript libraries and enhances user experience by providing functionality that the browser lacks.
React Server Components in AI Applications
React Advanced 2024

17 min
React Server Components in AI Applications

Today we will discuss React server components with AI and how to build a better search experience using them. We will learn how to make a Next.js app AI-enabled using the Vercel AI SDK. The Vercel AI SDK's streamUI function with the GPT 4.0 model will be used to make suggestions interactive. We will explore the use of history and conversation in AI and how to continue the conversation and read the result. The concept of generative UI with the vector database will be introduced, along with querying the database for movies. We will process user queries and return movies based on them. The power of React server components in enhancing UI will be demonstrated. In summary, the Talk covers vector embeddings, natural language search, and generative UI.
Is React Really Dying?
React Advanced 2024

29 min
Is React Really Dying?

Is React really dying? React is dead. Let's take a look at the numbers. Svelte is getting 1.5 million downloads per week. Angular is pulling 3.5. Probably not a competitor with React. React dwarfs everything with 25 million downloads a week. React is incredibly popular with 4 million users and developers. Despite some criticism, a survey shows that 71% of respondents liked React, while only 28% didn't. React's flexibility and options can be overwhelming for beginners. React's complexity has increased, causing confusion for beginners. Memory management, overcomplicated architecture, and innovation fatigue are common challenges in React. React 19 is delayed due to suspense issues. React server components are a favorite innovation. Qwik's hydration model is cool. Qwik is amazing, and it would be cool to see something like it for React. AI can help you get 80% there, but you still need an actual developer to tweak and clean up the code. Tab AI keeps your workflow going. React's popularity is undeniable. The momentum behind React is strong, and it's unlikely to fade away anytime soon.
From Friction to Flow: Debugging With Chrome DevTools
JSNation 2024

32 min
From Friction to Flow: Debugging With Chrome DevTools

The Talk discusses the importance of removing frictions in the debugging process and being aware of the tools available in Chrome DevTools. It highlights the use of the 'Emulate a Focus Page' feature for debugging disappearing elements and the improvement of debugging tools and workflow. The Talk also mentions enhancing error understanding, improving debugging efficiency and performance, and the continuous improvement of DevTools. It emphasizes the importance of staying updated with new features and providing feedback to request new features.
10 Years of Independent OSS: A Retrospective
JSNation 2024

33 min
10 Years of Independent OSS: A Retrospective

This talk is a ten-year retrospective into the growth of the Vue.js framework as an open-source project. It highlights the challenges faced by open-source developers, the importance of finding balance and managing scope, and the collaborative nature of the Vue community. The talk also discusses the development of Vite as a build tool and the vision for a unified JavaScript toolchain. It emphasizes the need for community alignment, contributions, and testing, while acknowledging the challenges of bad actors in the open-source community.
Scaling Fast – Engineering Lessons From ~15 Years of Tech Startups
C3 Dev Festival 2024

27 min
Scaling Fast – Engineering Lessons From ~15 Years of Tech Startups

Tech startups require scaling the business, the team, and the tech. The goal of an engineering team at a startup is to not be the reason for the business to slow down. Engineers prioritize business outcomes over code debates. Simplify your code and prioritize solving the specific problem. Organize your code vertically to limit complexity and improve clarity. To avoid code problems in the future, focus on getting the data and architecture right rather than striving for perfection today. Balancing dry and duplicating code can be achieved by allowing patterns to develop and observing for common solutions.

56 min
React and Microfrontends
Featured Workshop
Leveraging reactjs to create reusable microfrontends addressing challenges and common pitfalls.
Short takes
Webdevelopment Tailored for 2024
React Summit 2024

7 min
Webdevelopment Tailored for 2024

Today's Talk covers native features in browsers, including upcoming ones and the Interop Project. Native features offer speed, compatibility, and improved debugging. Notable examples include dynamic viewport units, flexbox/grid gap, container queries, and motion path. The Interop Project ensures consistent web platform features across different browsers. Upcoming features like native CSS nesting and entry/exit animations are on the horizon.
Can AI Turn Us Into 10x Developers?
JSNation 2024

7 min
Can AI Turn Us Into 10x Developers?

AI can help developers become 10x more efficient by leveraging powerful GPUs. Codium is an AI developer tool that can accelerate learning, analyze dependencies, and provide personalized coding experiences. It abstracts away complexity and allows developers to focus on building user experiences. Codium aims to transform the software industry and empower developers to become 10x engineers.
Build Your Own Component Library, With `Shadcn-vue`
Vue.js Live 2024

7 min
Build Your Own Component Library, With `Shadcn-vue`

Shed CN Vue is a component library that allows for easy customization of components and styling. It is built on top of RedixView, which enables the use of primitives and element customization. Tailwind CSS is used for easy customization of layout, styling, animations, classes, and icons. The documentation provides more details on how to leverage these features.
Define the Relationship with Monorepos
React Summit US 2024Watch video: Define the Relationship with Monorepos

6 min
Define the Relationship with Monorepos

Monorepos are single repositories containing multiple distinct projects with well-defined relationships. Relationships in code are based on distance, where code in different files is the closest relationship. By importing code from one file to another, dependencies are established, allowing for changes in one file to immediately impact the other. This enables fast iteration and development. When we separate code into packages or APIs, it increases the distance between code pieces, making it slower to understand the impact of changes. However, when multiple projects are combined in a monorepo, the relationships between them are reduced, enabling faster development. Monorepos make relationships explicit and provide tools to understand their impact. To learn more, visit monorepo.tools or nx.dev for information on managing monorepos with NX.
Next.js: Reshaping Web App Architecture for Performance Excellence
React Summit 2024

9 min
Next.js: Reshaping Web App Architecture for Performance Excellence

This Talk discusses how Next.js was used to reshape web app architecture for performance excellence. Next.js allows for server-side rendering (SSR) and client-side rendering (CSR), improving performance and user experience. The implementation of Next.js on the application resulted in faster initial page loads, reduced white screen time, and improved loading states. It is important to use the different rendering options correctly to maximize performance.
A Better Starting Point
React Summit 2024

7 min
A Better Starting Point

In this talk, the speaker introduces CreateNextApp and CreateT3App as tools for quickly setting up Next.js projects. CreateT3App has a modular CLI that allows users to select specific technologies. The speaker also discusses E3env, which ensures control of environment variables, and T3 Turbo, a monorepo version of CreateT3App that offers flexibility for installation and deployment.
Forget Polygons – Gaussian Splats, the New Approach to Photorealistic 3D Graphics
JSNation 2024

5 min
Forget Polygons – Gaussian Splats, the New Approach to Photorealistic 3D Graphics

Today, I'll be talking about GspotJS and Gaussian Splatting, a revolutionary graphics pipeline that can render high-fidelity scenes at 144 FPS. Gaussian Splatting is a technique that converts data directly into an image using Gaussians. GspotJS is a lightweight JavaScript library for Gaussian Splat rendering, with features like 4D rendering. The library aims to provide a simple and speedy way to view Splats on the web, while more advanced applications can use Mackellog Gaussian Splats 3D. Both Gaussian Splatting and gSplotJS are open-source.
JSR – Next Generation JavaScript Registry
JSNation 2024

6 min
JSR – Next Generation JavaScript Registry

JSR is a new JavaScript registry that supports TypeScript and offers additional features like GitHub Action integration, provenance attestations, and documentation generation. It provides a simple website with package search, documentation, and a gamified score. The process of publishing a new package in JSR involves creating a JSR.json file with package details and exports, using MPX JSR publish to publish the package, and approving authorization in the browser. However, documentation for the package is not automatically generated and needs to be manually added.
The Entanglement of Concerns between People and Software Development
TechLead Conference 2024

8 min
The Entanglement of Concerns between People and Software Development

The Talk explores the entanglement of concerns between people and the software they develop, emphasizing the importance of considering people and teams instead of just coding. It highlights the time constraints faced by developers and the potential for code optimization to improve understandability and usefulness. The Talk also discusses the significance of revamping outdated software and embracing continuous improvement in software development. It concludes by emphasizing the interconnectedness of software builders, thinkers, users, maintainers, and payers, and encourages the development of user-friendly software systems that adapt to change and consider the needs of all stakeholders.
First Comes Conflict, Then Comes Growth
React Summit 2024

6 min
First Comes Conflict, Then Comes Growth

Conflicts in software development often arise from the roles of victim, persecutor, and rescuer in the drama triangle. Shifting to a creator role helps navigate conflicts by focusing on learning and improving. Navigating conflict involves preventing rescue, providing feedback, and challenging others. Managers can play a crucial role as coaches instead of rescuers. By encouraging a shift to the empowerment dynamic, unnecessary drama and conflict can be avoided.
Latest

194 min
Build Privacy focused React Applications with Ollama, NextJS/React and LangChainJS
Workshop
Today, most of the AI applications send data to LLM cloud providers like OpenAI, raising privacy concerns. This workshop an alternative and privacy focused way to build AI applications by running LLMs locally with Ollama that keep everything local on your computer. This approach allows to avoid s...
A Different Kind of Serverless: A Case Study for SQLite and Whisper.cpp
JSNation US 2024

25 min
A Different Kind of Serverless: A Case Study for SQLite and Whisper.cpp

Today's Talk introduces WebAssembly (Wasm) and its versatility in supporting any language on any operating system. Wasm's history dates back to 2011 with Emscripten and NACL, and it has gained importance with the introduction of Wasi, the WebAssembly system interface. Wasm is supported by modern browsers and can be used with languages like C, C++, Rust, and Go. Popular applications like Figma, CapCut, and 1Password utilize Wasm for improved performance. Web Workers and shared array buffers eliminate the need for object serialization. The Talk also discusses the use of Keasley and Drizzle for interacting with SQL. Building and optimizing the application involves considerations of migrations, app readiness, suspense, optimistic UI, and debouncing inputs. Whisper, an open-source AI project, offers models for audio-to-text conversion and is implemented using whisper.cpp. Deployment options include Render, Netlify, Vercel, and Cloudflare, but using a cheap VPS provider with a file server can be a cost-effective alternative.
Experimentation Driven Development
JSNation US 2024Watch video: Experimentation Driven Development

10 min
Experimentation Driven Development

Hi, I'm Graham, co-founder of GrowthBook, and in this lightning talk, I'll cover experimentation-driven development. We'll explore how we build products today, the issue of knowing if our shipped products actually work, and the solution: experimentation-driven development. A-B testing is a controlled way of measuring the impact of changes on real users. It involves starting with a hypothesis, assigning users to different groups, exposing them to different variants, and tracking their behavior. Examples from Airbnb and Netflix show the varying success rates of A-B tests. On average, only one-third of tests are successful in moving the desired metrics. Without testing, you're just guessing. Common objections include relying on before and after data without controlled experiments. A-B testing helps control for variants and noise in data, allowing you to determine causation. User testing with small sample sizes may not provide accurate insights. Integrating A-B testing into the development process helps define hypotheses, track metrics, and iterate quickly. Use feature flags to easily test and roll out changes. Feature flags add safety by separating code deployment from feature release. A-B testing allows conditional feature release and provides statistical results. A-B testing replaces differences of opinion and celebrates learning from failures. Hypothesis testing is crucial for determining the success of a project. Experimentation driven development is easy and should be done on every project.
AI-Powered E2E UI Testing: Faster Creation, Easier Maintenance
JSNation US 2024

10 min
AI-Powered E2E UI Testing: Faster Creation, Easier Maintenance

Hello, everyone. Today we are going to explore AI-powered end-to-end testing. Unlike unit tests, UI testing has a huge layer of obstructions between the source code and the rendered UI. The source code includes HTML, CSS, and TypeScript, which are transpiled into JavaScript and bundled with tools like Webpack. AI can generate tests effectively for standard websites or blogs, but it may struggle with niche applications behind strict authorization or on-premise tools. AI-powered end-to-end testing for complex scenarios requires our guidance. We use meaningful data test IDs and follow the page objects model pattern. Additionally, we rely on useful tools like the end-to-end test helper in-browser extension and the continue IDE extension. Now, let's proceed to the demo, where we will create tests for the Pokemon application, including the ability to filter by name or type. We will navigate to the Pokemon details page and use our extension to manage settings and prompts. Additionally, we will create the details page object together and generate the test file. The Pokemon details page has 105 elements. We can view the elements for debugging purposes, including page object name, Pokemon details page, and system message. We will copy the page object and save it to a file. We need to make it exportable. Then, we will use the extension to create an end-to-end test and pass the context. I will use all the open files, including the page objects and the test case itself. I will send them to EI along with the predefined prompt. There is a system message and additional information we need to be aware of. The test runs successfully, and that concludes this part.
Twenty Years of Web Testing: From Selenium's Dawn to Vitest's Promise
JSNation US 2024Watch video: Twenty Years of Web Testing: From Selenium's Dawn to Vitest's Promise

22 min
Twenty Years of Web Testing: From Selenium's Dawn to Vitest's Promise

My goal with this talk was to answer the question of why we have another test runner. The talk breaks down the history of web testing into three chunks: the click-through era, browser war one, and browser war two. It discusses the motivations behind browser test runners and node test runners, highlighting Karma as the first node-based runner that gained popularity. The rise of node-based test runners like Ava, Tape, Mocha, and Jest is attributed to their stability and ease of use compared to Karma. Jest faced challenges with module loading and transpiling, but its non-opinionated abstraction made it a suitable choice. The shift towards environment-aware runners like VTest allows for safer testing and aligns with the need for transpilation across different environments. Lastly, the talk touches on the future of test tooling and the implications of AI on testing.
The Age of Universal React: What’s the Catch?
React Day Berlin 2024



30 min
The Age of Universal React: What’s the Catch?



2 authors
We're going to talk about the age of universal React, the next paradigm shift of React. Universal React is cross-platform and follows the principle of learn once, write once, and run anywhere. React Native is born as a declarative way to build iOS and Android apps. React Native components and APIs are implemented in an interoperable way with React DOM, powering a large part of Twitter's web platform. Code sharing in a universal React app maximizes code reuse, reduces duplication, and allows platform optimization. React Native for Web is the compatibility layer that enables universal development, handling translations between React Native and React Dom. Expo is the framework of choice for React Native, with Expo Router V3 completing the universal story. Challenges in achieving parity with React Native Core due to specific platform implementations. React Strict DOM prioritizes web, bringing web APIs to React Native. Taking a universal React approach can improve performance across platforms. React Native Web and React Strict DOM prioritize performance and accessibility.
Building Web Applications with Signals at Grammarly
React Day Berlin 2024

29 min
Building Web Applications with Signals at Grammarly

Hello, welcome, everyone. Today, I'm going to talk about building web applications with signals in Grammarly. Signals are like values that can change over time and are used in Grammarly's editor for real-time updates. Signals can be implemented with React and are leveraged for state management and business logic. They enable functional reactive and declarative programming, allowing specific actions to be defined. Testing signals can be done using classical unit tests or marble tests. Signals are a perfect fit for Grammarly's domain and can be easily integrated with various libraries and frameworks. Handling cleanup and unsubscribing to signals can be done through the dispose method and React lifecycle. The main challenges in signal-driven systems are testing and debugging streams. Marble tests provide control over signal emission and combined states can be calculated using the view function. Grammarly is considering migrating to the signals proposal in the future. Thank you, Alexey!
React UI Accessibility on TV - Practical Case Study in Real Production
React Summit US 2024Watch video: React UI Accessibility on TV - Practical Case Study in Real Production

10 min
React UI Accessibility on TV - Practical Case Study in Real Production

I'm excited to talk about React UI accessibility on TV. Enact is a React-based framework designed for TV UI components. Keyboard navigation is the minimum requirement for accessibility. The Enact framework has a module called Spotlight for TV remote direction keys. All attributes and roles are supported in JSX. Practical cases include reading a Dingbae font icon with no text, handling range widgets, alert popups, and virtual components. Testing on actual devices is important. Useful tools for accessibility development include custom message announcements, static analysis with JSX A11y, and accessibility testing with Chrome DevTools.
React Query - The Bad Parts
React Day Berlin 2024

30 min
React Query - The Bad Parts
Top Content
React Query is a popular library with significant weekly downloads and positive user sentiment. It may have trade-offs like bundle size, but the actual size shipped is smaller. Bundle size optimization can be achieved by exporting only necessary features. React Query's declarative approach eliminates the need for custom data fetching solutions. It offers caching, request duplication, background updates, and more. RackQuery doesn't support normalized caching, but refetching after invalidation works fine. React's vision includes suspense architecture and server components. The documentation could be improved with a more structured flow. TensorStack Query can be a good choice for Next.js apps, but not necessary with mature frameworks. The 10 stack query and router concepts were discussed. Combining React Query with HTTP caching provides a robust caching solution.
JavaScript Took Over the Server, Its Time It Takes Over the Database Too
JSNation US 2024Watch video: JavaScript Took Over the Server, Its Time It Takes Over the Database Too

13 min
JavaScript Took Over the Server, Its Time It Takes Over the Database Too

Hi, I'm Ben, the CEO of Freestyle. We're building Cloud State, a JavaScript runtime that allows you to write your entire application in TypeScript. We believe that bringing all the layers into TypeScript natively can greatly improve team efficiency. By marking a class as 'at cloud state', it becomes persistent and can be deployed without a SQL database. Connecting to the front end is as simple as accessing the functions directly. CloudState enables the sharing of back-end data infrastructure as packages, eliminating the need for web servers and endpoints. Freestyle chat is an open-source chat solution that can be easily integrated into applications. Cloud State has the potential to transform databases like Node.js did to servers, making development better for JavaScript users.
Popular
Killing BFFs with GraphQL and Next.js
React Advanced 2021

21 min
Killing BFFs with GraphQL and Next.js
Top Content
This talk discusses the challenges and benefits of using Backend for Frontends (BFFs) and microservices in software development. It highlights how Next.js can simplify the creation of BFFs and unify the gateway for microservices. The talk also emphasizes the advantages of Next.js API routes in simplifying the development, deployment, and maintenance of APIs. It showcases the implementation of a BFF using Next.js and API routes, and the extension of API routes in an executable way. The speaker also mentions launching a course on using Next.js API routes for building a serverless GraphQL API.
You Do Have Time to Build it Twice
React Summit 2022

21 min
You Do Have Time to Build it Twice
Top Content
Today's Talk focuses on software rewrites, specifically the transition from jQuery to React. The speaker shares their experience of rewriting a jQuery app to React, highlighting the benefits of the rewrite in terms of improved user experience and increased conversions. Approaches to software rewrites are discussed, including the page-by-page approach which allows for product innovation. The speaker emphasizes the importance of prioritizing rewrites or refactors for startups. The Talk concludes with insights on testing, server-side functionality, and the overall value of the rewrite.
Options API vs Composition API: Choosing the Right Approach for Your Team
Vue.js London Live 2021

23 min
Options API vs Composition API: Choosing the Right Approach for Your Team
Top Content
Today's Talk discusses the Options API and Composition API in Vue 3, highlighting the differences and considerations when choosing an approach. The Composition API offers more flexibility and integrates well with TypeScript, but may require more familiarity with JavaScript. Combining both APIs allows for structure and flexibility, with the ability to progressively enhance code. Team preferences and the level of TypeScript usage should be considered when choosing the right approach for a project.
Jotai Atoms Are Just Functions
React Day Berlin 2022

22 min
Jotai Atoms Are Just Functions
Top Content
State management in React is a highly discussed topic with many libraries and solutions. Jotai is a new library based on atoms, which represent pieces of state. Atoms in Jotai are used to define state without holding values and can be used for global, semi-global, or local states. Jotai atoms are reusable definitions that are independent from React and can be used without React in an experimental library called Jotajsx.
Wait, React Is Multi-Threaded?
React Day Berlin 2022

22 min
Wait, React Is Multi-Threaded?
Top Content
This Talk explores the use of web workers in React to improve user experience and performance. It discusses the limitations of JavaScript rendering and how web workers can offload tasks to separate threads. The Talk also highlights the benefits of using concurrent mode in React and introduces the UseWebWorkerHook library for simplifying the creation of web workers. It emphasizes the considerations when using web workers and concludes with a mention of Postman's hiring and new feature release.
Building Better Websites with Remix
React 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.
The Good, The Bad, and The Web Components
JSNation 2023

29 min
The Good, The Bad, and The Web Components
Top Content
Web Components are a piece of reusable UI enabled by web standards and built into the web platform. They offer the potential for faster component initialization and less library overhead. Web Components can be created from scratch and utilized with existing component libraries. Shadow DOM and Declarative Shadow DOM provide benefits such as scoped CSS and server-rendered components. The tradeoff between not repeating oneself and achieving full server-side rendering support is discussed. User experience is deemed more important than developer experience.
React Query: It’s Time to Break up with your "Global State”!
React Summit Remote Edition 2020

30 min
React Query: It’s Time to Break up with your "Global State”!
Top Content
Global state management and the challenges of placing server state in global state are discussed. React Query is introduced as a solution for handling asynchronous server state. The Talk demonstrates the process of extracting logic into custom hooks and fixing issues with state and fetching logic. Optimistic updates with mutation are showcased, along with the benefits of using React Query for data fetching and mutations. The future of global state management is discussed, along with user feedback on React Query. The Talk concludes with an invitation to explore React Query for server state management.
Effective Performance Testing to your Server with Autocannon
TestJS Summit 2021

36 min
Effective Performance Testing to your Server with Autocannon
Top Content
Tamar is an experienced code writer and architect with expertise in Node.js. Performance testing can be confusing, but understanding terms like throughput and the 99th percentile is crucial. The 99th percentile is important for making commitments and ensuring customer satisfaction. AutoCanon is a powerful tool for simulating requests and analyzing server performance. It can be installed globally or used as a library in Node.js. Autocannon is preferred over Gatling for performance testing and can be integrated with end-to-end tests in Cypress.
Build a 3D Solar System with Hand Recognition and Three.js
JSNation 2022

36 min
Build a 3D Solar System with Hand Recognition and Three.js
Top Content
This Talk explores the use of TypeScript, 3JS, hand recognition, and TensorFlow.js to create 3D experiences on the web. It covers topics such as rendering 3D objects, adding lights and objects, hand tracking, and creating interactive gestures. The speaker demonstrates how to build a cube and a bouncy box, move objects with flick gestures, and create a solar system with stars and planets. The Talk also discusses the possibilities of using hand gestures for web navigation and controlling websites, as well as the performance limits of these technologies.
JavaScript
Peace, Love and JavaScript
Node Congress 2024

17 min
Peace, Love and JavaScript

The OpenJS Foundation supports the entire JavaScript ecosystem and thousands of open source projects. They follow a neutral nonprofit organization with separate business and technical governance to minimize drama. Rebooting governance and addressing intellectual property can also help reduce conflicts. OpenJS provides collaboration spaces and support in various areas for open source projects. They foster a collaborative environment and invite participation in their projects.
Testing: Do More With Less
JSNation 2024

27 min
Testing: Do More With Less

This talk focuses on practical approaches for testing Node.js applications, including the use of Dora metrics and the testing trophy strategy. It emphasizes the importance of covering critical flows with integration and end-to-end tests, while also considering the cost and speed of different test types. The speaker recommends mocking third-party services and using snapshot testing, but warns about the potential for false positives. Playwright is suggested as a preferred tool, and the importance of automated test execution is emphasized.

145 min
Master JavaScript Patterns
Top ContentFeatured Workshop
During this workshop, participants will review the essential JavaScript patterns that every developer should know. Through hands-on exercises, real-world examples, and interactive discussions, attendees will deepen their understanding of best practices for organizing code, solving common challeng...
Future of Frontend Frameworks Fireside Chat
React Summit 2024







28 min
Future of Frontend Frameworks Fireside Chat







6 authors
Signals are being adopted by popular frameworks, enabling code reuse and improved tooling. While merging between frameworks is unlikely, they are learning from each other and adopting shared practices. It is important to embrace the diversity of frameworks and libraries. Instead of merging, focus on standardizing the principles behind frameworks. Consider tradeoffs and benefits when choosing a framework, and explore different technologies to learn new ideas.
Building a JS Engine -- For Fun!
JSNation 2024

9 min
Building a JS Engine -- For Fun!
Top Content
The Talk discusses the basics of building a JS engine, highlighting the complexity and feature completeness of existing engines. It emphasizes the possibility of creating a simpler engine tailored to specific use cases and target audiences. The speaker suggests starting anywhere in the process and provides tips on using parser libraries, implementing runtime features, and ensuring correctness through testing. Additionally, the Talk encourages exploring JavaScript standards and engaging with the open-source community.
Temporal: Modern Dates and Times in JavaScript
JSNation US 2024

22 min
Temporal: Modern Dates and Times in JavaScript

I'll speak today about the Temporal proposal, which adds modern date and time handling to JavaScript. Temporal is an API that'll be available in browsers soon and will add a built-in library for dates and times, avoiding the need for external libraries like Moment. It offers strong typing with different types for different data, such as calendar dates with or without time. Temporal objects are immutable and designed to work with JavaScript's internationalization facilities. It addresses deficiencies in the global Date object and introduces types like instant and plain types for accurate representation of time and dates across time zones. With the old Date, representing a date without a time can be problematic, especially in time zones where midnight is skipped due to daylight saving time. Temporal introduces types like PlainDate, PlainTime, PlainYearMonth, PlainMonthDay, and ZonedDateTime to accurately represent different scenarios. Additionally, there is a type called Duration for arithmetic operations and unit conversion. Now that I've introduced you to the cast of characters in Temporal, it's time to show how to accomplish a programming task. We'll start with an easy task: getting the current time as a timestamp in milliseconds using the instant type. To convert between Temporal types, you can either drop or add information. The toZonedDateTime method is used for conversion and requires adding a time zone and a time. Although Temporal objects are immutable, you can create new objects with replaced components using the with method. Migrating from the old Date object to Temporal offers a more reliable solution and avoids potential bugs. Check out the documentation for more details and enjoy using Temporal in your codebase!

92 min
Integrating LangChain with JavaScript for Web Developers
WorkshopFree
Dive into the world of AI with our interactive workshop designed specifically for web developers. "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" offers a unique opportunity to bridge the gap between AI and web development. Despite the prominence of Python in AI developmen...
React
Panel Discussion: Future of React
React Summit US 2024Watch video: Panel Discussion: Future of React








39 min
Panel Discussion: Future of React








7 authors
We're going to be doing a future of React panel discussions. React 19 is in RC stage and we're excited to hear when it will be stable. The React compiler is here to stay and is the future of developer experience and tooling. React 19 brings exciting features like RSCs and consolidation of the framework. React's commitment to community and innovation is commendable. The React team values feedback and actively engages with the community. React's future includes supporting the community and enabling smooth migrations. There's a need to teach underlying concepts and educate AI systems. Teaching and adapting to React can be challenging. The React compiler changes default re-rendering behavior. Collaboration with Next.js and Vercel has been valuable for React's development. Appreciation for the community and partnerships with Vercel and Microsoft.
If You Were a React Compiler
React Summit US 2024

26 min
If You Were a React Compiler
Top Content
In this talk, the speaker aims to build an accurate understanding of how the new React compiler works, focusing on minimizing re-renders and improving performance. They discuss the concept of memoization and how it can be used to optimize React applications by storing the results of function calls. The React compiler automates this process by analyzing code, checking dependencies, and transpiling JSX. The speaker emphasizes the importance of being aware of memory concerns when using memoization and explains how the React compiler detects changes in function closure values. They also mention the Fibre Tree, which drives the reconciliation process and helps optimize performance in React. Additionally, the speaker touches on JSX transpilation, compiler caching, and the generation of code. They encourage developers to understand the code generated by the compiler to optimize specific sections as needed.
Let's Build Suspense 🥁
React Summit US 2024

20 min
Let's Build Suspense 🥁

Hi, my name is Julian and I am super excited to be speaking at React Summit this year. Today, I will be talking about Suspense on the server and its importance in React server components. React server components allow us to differentiate between static and dynamic components, improving performance and user experience. Suspense improves performance by introducing streaming and out-of-order streaming. We can implement suspense on the server by creating a suspended object to store the suspended children and swapping out the loading state for the actual content using custom elements. Multiple suspense boundaries can be used to render individual loading states for different sections, improving the user experience.
Perfect Pitch: Unveiling the Mathematical Symphony Behind a Guitar Tuner
React Summit 2024

22 min
Perfect Pitch: Unveiling the Mathematical Symphony Behind a Guitar Tuner

This Talk provides an overview of an open-source guitar tuner project, covering topics such as pitch detection, web APIs for microphone access, implementation with React and XGS, and data visualization. It explores various pitch detection algorithms, including zero crossing, fast Fourier transform, and autocorrelation. The project utilizes the MediaStream API and Audio API to access user media. The implementation is done with React and Next.js, and includes a utility library for performing pitch estimation and detection. The Talk also discusses future improvements for the project, such as noise cancellation and chord detection.
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
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.
Out Of Order Streaming (The Secret Powering Modern React)
React Summit US 2024

29 min
Out Of Order Streaming (The Secret Powering Modern React)

I'm the second-best TypeScript YouTuber. I'm giving a talk on streaming in React and the benefits it brings to applications. Streaming allows for faster perceived loading times by sending partial HTML to the browser, rendering it and waiting for the rest to complete. Server-side loading can cause delays, but this can be improved by caching HTML on a CDN. Streaming HTML in a different order has been a challenge, but there are JavaScript solutions. Optimizing HTML streaming with Suspense and dynamic I.O. can further improve loading times. Using suspense in client-side rendering and addressing challenges with Next.js React model are interesting patterns. Caching can now be done at a more granular level, improving SEO and reducing load on the host server. Rendering on the server is not a big penalty compared to multiple API requests. Thank you all.
Build AI Apps in 5 Minutes: Live Demo With Vercel AI Sdk, v0.dev, and Rag!
React Summit US 2024

12 min
Build AI Apps in 5 Minutes: Live Demo With Vercel AI Sdk, v0.dev, and Rag!

I'm doing a quick lightning talk today, talking about saying no to boilerplate and teaching you how to build an AI app in just minutes. We're going to talk about RAG, v0, fine-tuning for sales AI to SDK, and then talk a little bit about Entity Resolution and your AI toolkit. RAG is a hot topic in chatbot development and allows for creating chatbots with a deeper understanding of specific use cases. Rag offers a versatile AISDK that allows for easy model switching, augmentation, and fine-tuning. Entity resolution is important for resolving entities across multiple points of data, with use cases in personalized marketing, healthcare, and fraud detection.
The Art of Ignoring Best Practices for React Performance
React Summit 2024

19 min
The Art of Ignoring Best Practices for React Performance

This Talk introduces the concept of being a 'React bad boy' by ignoring best practices and optimizing React rendering. It explains how to avoid unnecessary rerenders using React.memo and React DevTools. It also covers advanced techniques like isolating state changes and lazy loading hooks. The Talk explores reducing component rerenders using Svelte stores and optimizing with swap stores in Redux. These techniques improve React performance without the need for major refactors or rewrites.
Evaluating React Application Performance with a Sip of RUM
React Day Berlin 2024

10 min
Evaluating React Application Performance with a Sip of RUM

Hello, everybody. How are we all doing? I'm going to talk about Rome, OpenTelemetry, and identifying performance bottlenecks and issues in React applications. The pillars of observability are logs and metrics. Logs are structured messages that warn, indicate, or error. Metrics include throughput, latency, custom and core web vitals. Traces allow us to see through the pathway of our application and identify bottlenecks. One common open standard for collecting these signals is open telemetry. React's client instrumentation is experimental and mostly unspecified. The open telemetry demo provides an example of front-end tracing in React, giving you a unique service name and basic metrics. The demo shows an HTTP POST request with the pathway and timing. The open telemetry project is still working on core web vital metrics and other enhancements. Real user monitoring (RUM) fills the gaps in open telemetry, capturing missing information. In conclusion, we discussed the importance of capturing logs, metrics, and traces and provided resources for further exploration.
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
React Summit US 2024Watch video: Chrome DevTools: State of the Union 2024 - Debugging React & Beyond

30 min
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Top Content
Hi folks, in this Talk we learn about React and Chrome DevTools. We explore the new AI Assistant panel in DevTools that helps with UI tweaking. React DevTools now supports Gemini AI model for error fixing. Extensibility is important and React DevTools has features like highlight updates and server components. We also learn about server logging in the browser console and toggling suspense fallbacks. Browser DevTools allow experimenting with local overrides and improving color contrast. Advanced features include overriding headers, network panel customization, and performance tooling. We also discuss Core Web Vitals, optimizing pages, and debugging UI with DevTools. There are fun tips for enhancing animations and logging workflow. The Talk ends with Q&A and sharing/removing features based on user feedback.
Free workshops

112 min
Tracing: Frontend Issues With Backend Solutions
Featured WorkshopFree
Frontend issues that affect your users are often triggered by backend problems. In this workshop, you’ll learn how to identify issues causing slow web pages and poor Core Web Vitals using tracing.
Then, try it for yourself by setting up Sentry in a ready-made Next.js project to...
Then, try it for yourself by setting up Sentry in a ready-made Next.js project to...

105 min
Deploy and Test Full-Stack React Apps on Cloudflare
WorkshopFree
This 3 hour workshop will provide an introduction to the Cloudflare Developer Platform for application developers. It will focus on developing a full-stack React application backed by tests that can guarantee the correctness of its interactions with the resources and APIs provided by the Develope...

107 min
Powerful Data Visualisation with AG Grid & AG Charts
WorkshopFree
Does your React app have lots (and lots) of data that needs to be displayed in both Data Grids and Charts? Do your users want to interact with, analyse, and work with this data without compromising on performance or reliability? AG Grid provide the best React Data Grid & Charts libraries that...

87 min
Building Your Own GenAI Agent Application
WorkshopFree
GenAI agents are one of the most promising directions for complex GenAI based applications. These agents can search the web, code, and carry complex tasks completely autonomously for the user. In this workshop we will learn the basics of GenAI agents. Define the basic terms and frameworks...

66 min
Llms Workshop: What They Are and How to Leverage Them
WorkshopFree
Join Nathan in this hands-on session where you will first learn at a high level what large language models (LLMs) are and how they work. Then dive into an interactive coding exercise where you will implement LLM functionality into a basic example application. During this exercise you will get a f...

48 min
Can LLMs Learn? Let’s Customize an LLM to Chat With Your Own Data
WorkshopFree
Feeling the limitations of LLMs? They can be creative, but sometimes lack accuracy or rely on outdated information. In this workshop, we’ll break down the process of building and easily deploying a Retrieval-Augmented Generation system. This approach enables you to leverage the power of LLMs with...

37 min
Build a Full Stack React Native App with Oracle 23ai
WorkshopFree
In this workshop, you will set up a local full-stack environment and create a React Native Mobile app that runs against that stack.
Agenda:- Install Oracle 23ai Docker container- Build and run Parse Server with the new Oracle Storage Adapter - Build and ru...
Agenda:- Install Oracle 23ai Docker container- Build and run Parse Server with the new Oracle Storage Adapter - Build and ru...

88 min
How to Build Front-End Access Control with NFTs
WorkshopFree
Understand the fundamentals of NFT technology and its application in bolstering web security. Through practical demonstrations and hands-on exercises, attendees will learn how to seamlessly integrate NFT-based access control mechanisms into their front-end development projects.

82 min
Building Your Generative AI Application
WorkshopFree
Generative AI is exciting tech enthusiasts and businesses with its vast potential. In this session, we will introduce Retrieval Augmented Generation (RAG), a framework that provides context to Large Language Models (LLMs) without retraining them. We will guide you step-by-step in building your ow...

152 min
Build Peer-to-Peer Applications with Pear Runtime
WorkshopFree
Learn how to rapidly build peer-to-peer applications with Pear Runtime. No servers required. Understand peer-to-peer paradigms and construct applications from well-defined building blocks. This workshop will cover how to create both Desktop and Terminal applications (with discussion for Mobile) t...
Upcoming events
Subscribe to the top JS conferences
and grow in-depth as engineer with insights from library authors and core teams
Learn more