React Day Berlin

Take part in the exploration of the React universe! Focusing on in-depth talks, hands-on workshops, and developing new opportunities, the React Day Berlin conference provides space for everyone to make friends and collaborate on stellar apps.

React Day Berlin 2023

FocusReactive

Storyblok

Sentry

Handsontable

Replay.io

Bonial

Ably

Okta

FocusReactive will help you architect, build, and lead technically advanced websites with a focus on performance and scalability. Partners and <a href="https://focusreactive.com/next-js-expert-agency/" target="_blank" rel="noopener noreferrer">experts in Next.js/Vercel</a>, Storyblok, Sanity, Contentful, Shopify Hydrogen, and other Headless eCommerce platforms.Whether you seek <a href="https://focusreactive.com/headless-cms-expert-agency/" target="_blank" rel="noopener noreferrer">expert Headless CMS consulting</a> services or an expert agency with deep experience with platforms like <a href="https://focusreactive.com/storyblok-expert-agency/" target="_blank" rel="noopener noreferrer">Storyblok</a> or <a href="https://focusreactive.com/sanity-expert-agency/" target="_blank" rel="noopener noreferrer">Sanity</a>, FocusReactive is the one to help you scale.

As a special perk, we're offering a complimentary NextJS audit designed to pinpoint areas for optimization, improve performance, and ensure you're following the best practices for SEO and security.&nbsp; Our expert team will closely examine your implementation, provide actionable insights, and help you leverage the full power of NextJS.

Free NextJS Performance and Best Practices Audit

Next.js, Headless CMS and eCommerce expert agency

Rethinking Bundling Strategies

Tobias Koppers

To App or Not: When to Choose Native or Web

Mike Hartington

The Anatomy of Webpack: A Deep Dive Into Its Architecture

Nitin Kumar

Exploring React Server Component Fundamentals

Daishi Kato

WordPress-like Plugins, but for Next.js

Sanket Sahu

Type System React

Josh Goldberg

Empathy Driven Development

Manjula Dube

Javascript Should Come With Batteries

Luca Casonato

The day I broke React Native

Nicola Corti

Pushing Boundaries to the Edge

Facundo Giuliani

A Nerdy Guide to the Web Trending Concepts

Daniel Afonso

Accelerating Design & Development Innovation with AI-driven Tools

Cristobal Chao

Brace Your React, New Core Web Vitals are Coming

Ivan Akulov

Hacking JSX: Building in Minecraft with React

Felix Wotschofsky

All Things Astro

Elian Van Cutsem

Understanding Rendering Patterns

Atila Fassina

Deconstructing Distributed Tracing

Lazar Nikolov

How Much RAM Is Your UseMemo Using? Let’s Profile It!

Giulio Zausa‮ 

How MDX is a game changer for your React Project's Documentation

Eddie Jaoude

Virtual DOM: Back in Block

Aiden Bai

React(ing) to WebRTC: Build Better Audio and Video Experiences with Daily React 

Christian Stuff

Hacking an e-Reader to Show My Tea Menu With JSX

Tiger Oakes

Break the Race: Easy Race Condition Detection for React

Nicolas Dubien

Superpowers of Browser's Web API

Nikola Mitrovic

Let's build a TV Spatial Navigation

Sergio Avalos

Local-first Apps with ElectricSQL and React

James Arthur

Multiplayer Games with React Three Fiber and WebSockets

Maya Nedeljković Batić

Preparing for Success: A Frontend Engineer's Guide to Tech Due Diligence

Armin Ayatollahi

Bringing React Server Components to React Native

Szymon Rybczak

How to Automatically Consume APIs with React

Theodore Vorillas

Challenges of Decomposing a Massive Front-End Using Micro-Frontends

Oleksandr Tryshchenko

How Do We Use React Native at Mattermost. Architecture and Design

Daniel Espino García

Escape Security Flaws

Henrik Fricke

Applying Product Thinking Principles to your Design System

Raymond Luong

How the Shadow DOM has Got You Covered?

Mukul Ramchandani

A Tale of the Flip Floppers. From Engineer to Manager and Back Again

Matt Colman

Mastering Mobile DevOps: Leveraging React Native for High Performance

 Cyril Bonaccini

Build Intelligence at the Edge - Machine Learning with React Native

Rashmi Nagpal

The Future of Web Storage: Exploring Advanced Storage APIs 

Shubham Gautam

SOLIDify Your React Code

Islem Maboud

WebAssembly and React: A New Era of High-Performance Web Applications

Ramón Huidobro

Durable Objects - Everything Everywhere All At Once For Not Very Much Money

Jani Eväkallio

React Server Components

Panel discussion  "Innovation in React"

Tejas Kumar

Building Enterprise-grade GraphQL APIs with Domain-Driven Design and Clean Architecture

Petar Ivanov

OpenAI in React: Integrating GPT-4 with Your React Application

Jesse Hall

React's Most Useful Types

Matt Pocock

CSS Only* Search: Improve React Filtering Performance with CSS!

Evyatar Alush

Managing React State: 10 Years of Lessons Learned

Cory House

Crafting Pristine React: Best Practices for Maintainable Code

Miguel Ángel Durán

Building a Better Micro-Frontend Framework That Enables Platform Freedom

Saravana Srinivasan

Daily Brush for Website Speed: Embrace the Performance Budget Ritual

Medhat Dawoud

Building a Digital Sommelier on Top of ChatGPT and the OpenAI API

Jan Demmerle

How to Improve Your Web Application's Security Using Mozilla Observatory

Karan Kiri

Sylwia Vargas

Config Driven UI using ReactJS

Joban Singh

Imagine being a knight preparing for a jousting tournament, but your horse is more interested in the fair's hay bales than your impending duel. That's what prepping your tech department for an investment round or exit can feel like sometimes. This talk provides an in-depth look into the role of a frontend engineer, especially working with React, in preparing a tech department for an investment round or an exit. Through a unique lens of tech due diligence, the presentation uncovers the importance of good practices, solid architecture, efficient documentation, and more.

React Server Components are new topic in community, bunch of frameworks are implementing them, people are discussing around this topic. But what if we could use React Server Components in React Native? And bring all optimisation features that RSC allows to mobile apps? In this talk I would present what we are able to do with RSC in React Native!

When writing code for the Web, there are a lot of capabilities that are offered out of the box by our browsers. If you ever wrote a File Upload component, used timers and intervals, interacted with the DOM, or stored something in the Local/Session Storage, you had to go to the MDN’s Web API docs, to find some relevant information on how to implement that code. In this session, we will delve into the exciting world of browser Web APIs that are not so commonly used (although they should be) and explore their incredible capabilities 🚀 All these features offer new opportunities for creating immersive web experiences that can help businesses grow and connect with customers. So if you are the kind of an engineer who wants to stay ahead of the curve when it comes to web development, learn how Intersection Observer, Background Sync API, Screen Wake Lock API (and many more) can help you create better web applications that will keep users engaged and coming back for more!

Memoize all the things!, is what most React guides will tell you, explaining how its memory cost is negligible compared to its performance benefits, but has anyone actually ever measured it? What about doing it in a complex React application with several thousands components? Turns out getting that answer is not simple at all, and requires delving into the complex world of Chrome Memory Profiling. This talk will explore the basics of heap profiling, moving on to more advanced tools and techniques for analysing memory usage in your React application, including how to profile it in your CI pipeline and answer your own optimisation questions by writing custom heap analyzers.

A modern tooling experience usually involves a user journey on multiple mediums, including Web, VS Code, GitHub, etc. Writing custom code and components for each platform is not the most efficient approach, leading to code duplication and, most importantly, the risk of a lack of a cohesive experience. Multiplying Architecture is a set of patterns, techniques, and libraries that, using micro frontends and some innovative backend services, allow for the re-use of the tooling component in different distribution mediums Come to this talk to learn how we are able to enable multiple tooling teams across Red Hat to deliver the best native experience of UI components (s and Views) on VS Code, Web, and Desktop, and directly integrate them on GitHub(Chrome Extension) with minimal changes on their code base.

I wanted to have a tea menu to show guests and for my own reference. Turns out e-Readers use so little power and can render HTML! I'll share how to generate an e-book with all your drinks with React, JSX, and Deno, as well as rendering a custom cover page with SVG. Wow your friends by turning an old device into a smart home tea menu, and learn how to write your next book with React.

Race conditions are among some of the most challenging to detect and reproduce issues. As such they pose a significant challenge in development notably in UI. In this talk, we explore how to detect race conditions by leveraging fuzzing techniques. We walk you through discovering the real problem of race conditions and how they impact user experience. We provide you tools and examples demonstrating how to easily detect them in your daily work thanks to tests relying on fuzzing. After that talk, we hope your React code will be race conditions free or at least that you will have the right tools to help you.

Is the Virtual DOM pure overhead? In this tech talk, Aiden Bai explores the performance implications of the Virtual DOM in frameworks like React and presents an alternative approach called the \"block virtual DOM.\" Aiden delves into the origins of the Virtual DOM, its purpose in addressing performance issues, and the process of diffing and reconciliation. The talk introduces the Block virtual DOM, which takes a different approach to diffing by using static analysis and dirty checking.

We don't think of React as shipping its own types. But React's types are a core part of the framework - overseen by the React team, and co-ordinated with React's major releases.In this live coding talk, we'll look at all the types you've been missing out on. How do you get the props type from a component? How do you know what ref a component takes? Should you use React.FC? And what's the deal with JSX.Element?You'll walk away with a bunch of exciting ideas to take to your React applications, and hopefully a new appreciation for the wonders of React and TypeScript working together.

In a few months, Google will DESTROY your React app......well, kinda. In March, Google is releasing a new Core Web Vital called Interaction to Next Paint (INP). It measures the speed of interactions – and every React site Ivan has seen so far had INP way in red. This is bad for any site that cares about SEO.In this talk, let’s learn how to prepare for the new Core Web Vital: how INP works, and how to improve it – both manually and with new React APIs like useTransition() and React Server Components.

Our web UI application is pretty big - hundreds of people have been actively building it during the past eight years. We started facing scalability issues and technological limitations. We evaluated plenty of options and settled on micro-frontends. This evening we will discuss:- Differences between various micro-frontend architectures- Why we made this choice and if it's helpful for you- What we gained- What we sacrificed (yes, there are downsides)- What challenges are still ahead of us

4th November 2022 - It was just a regular day for the "release crew" as we were approaching to prepare the first release candidate for React Native 0.71. Little did we know how an innocuous release could have triggered a domino effect resulting in failing builds for nearly every React Native developer out there. With the wisdom of hindsight, we'll walk through what happened, what are our lessons learned and the lowlights of this incident. We'll have the opportunity to look through the internals of React Native, discover our incident-response culture, and learn how we're hardening our ecosystem to protect us against similar events in the future.   Join me as we revive this incident, and don't miss this opportunity to gain insights, be inspired, and embrace the lessons learned from the day I broke React Native.

Empathy-driven development empowers developers to create software that truly understands and serves users' needs. This talk explores practical techniques for integrating empathy into the development process, leading to more intuitive, user-friendly applications. Learn how cultivating empathy can foster collaboration, improve code quality, and ultimately enhance user satisfaction. Join us to unlock the transformative potential of empathy in your development journey.

<div>We take a look at different challenges and decisions when bundling code for web applications. We look at how these are commonly solved and why we need to rethink them.</div>

In the dynamic world of React, ensuring that your code remains clean and maintainable is paramount. Dive into a session that demystifies the intricacies of structuring your React projects, distinctly separating concerns, and adhering to best practices that stand the test of time. Drawing from real-world experiences and hands-on tips, this talk promises to arm you with the knowledge to elevate your React codebase to the zenith of clarity and efficiency.

React Server Components are a newer way of working with React that is widely adopted in frameworks like Next.js. In this talk, we will look under the surface of how they work and are executed on the server side, and how they fit with server rendering and traditional React apps.

Documentation is essential to any project and it can really "make it or break it".  However documentation is time consuming to draft and can sometimes be forgotten, or updates and amendments to it left behind as the project moves forward.  Additionally, creating your documentation with Markdown has its limitations, so you may not end up with the result you want or that your contributor needs.  By using MDX you can combine Markdown with code and integrate it into your React project.  Documentation becomes a more streamlined and efficient process and dare I say it...fun.

Multiplayer games are the coolest: they bring us closer together, even when we’re battling it out. While you can’t build World of Warcraft in a weekend, you also don’t need a big AAA game studio production team to create a game that is fun and engaging. All you need is good old React with some Three.js and WebSocket magic sprinkled in! This talk walks you through creating a simple multiplayer game in the browser using React Three Fiber and Socket.IO. You will learn how to structure the game code, render an interactive 3D scene in the browser, and establish two-way communication between the client and server.

What do S.H.I.E.L.D. and A.R.G.U.S. have in common with edge computing?How can Iron Man and Batman help you understand hydration, partial hydration, and resumability?What can the Watchers or the Monitors tell you about Reactivity?Join this adventure straight from the pages of a comic book as your favorite heroes and villains help you understand some of the most discussed topics on the web now.

Astro 3 was released a while ago and brought some amazing new features with it. In this talk, we’ll take a look at some of the newly released features in Astro 3, do some live coding and have some fun. We can take a look at what’s coming next in Astro 4 and there also might be a 'one more thing

Setting up JavaScript projects is no fun. Getting started involves installing and configuring node, tsc, prettier, eslint, a testing framework, a database driver, and more. Why is JavaScript not batteries included? In this talk we'll talk about how Deno fixes this, letting you focus on building stuff. We explore what benefits full tooling integration unlocks, and remember how fun it is to program if your tools help you, rather than requiring your babysitting.

I've been developing a minimalistic framework for React Server Components (RSC). This talk will share my journey to deeply understand RSC from a technical perspective. I'll demonstrate how RSC features operate at a low level and provide insights into what RSC offers at its core. By the end, you should have a stronger mental model of React Server Components fundamentals.

Webpack is a powerful tool for building modern JavaScript applications, but its architecture can be complex and daunting for developers who are new to it. In this talk, we will dive into the inner workings of Webpack and explore how its various components work together to create a bundle. By the end of this talk, you will have a comprehensive understanding of Webpack's architecture and its plugin system. You will be equipped with the knowledge to build complex applications using Webpack confidently.

In today's landscape, deciding between building a native app or a web app can significantly impact your project's success and user experience. As technology advances and user expectations continue to evolve, the decision-making process becomes increasingly complex. Let's dive into the key considerations that can help you determine what is right for you, a native app or a web app. We'll also look at real-world examples of apps and examine the reasons behind their choice of development approach.

In this talk, attendees will learn how to integrate OpenAI's GPT-4 language model into their React applications, exploring practical use cases and implementation strategies to enhance user experience and create intelligent, interactive applications.

React has exploded in popularity thanks to the performance and unrivaled developer experience the virtual DOM and reconciliation could offer. But as our apps grew, we started pushing the boundaries of managing client state in a performant way. Let's see how to achieve fine-grained reactivity and what resumability brings to the table.

Writing a cleaner Code in React by following SOLID Principles

When treated as a platform, LLMs such as ChatGPT become powerful building blocks for custom, conversational agents. In this talk, we use the OpenAI API and Vercel AI SDK to build a digital sommelier that recommends the perfect wine.

When combined with a custom rendering function, JSX can be used to quickly build a custom domain-specific markup language. I will show you how to approach this using the example of creating builds in Minecraft.

We at Microsoft are rethinking the way we use ReactJS as frontend devs, traditional React UI Design patterns results in redundant code, making code maintainability cumbersome. By making UI Config driven we supercharged React components by making config file a single source of truth, The above approach made it easier to onboard new UI scenarios quickly and with minimal regression in the old UI Flows, resulting in a significant reduction in dev efforts, the best part is all the code was kept in Typescript only no XML or other declarative languages were used.

Learn how to build impressive AI projects quickly on weekends that can scale to millions of users. In this talk, I'll walk you through the 10 AI projects I built in 2023 that have reached 2.8 million combined users so far, and share the lessons I've learned building them.

The Weekend AI Engineer

Hassan El Mghari 

TypeScript's type system is incredibly powerful. It can represent bizarrely complex interdependent JavaScript types and comes with a Turing-complete set of logical conditions. But this is a React conference, right? Let's implement a primitive React purely in the type system. For fun!

At Mattermost we use React Native for our app. It is a fairly complex project with more than 100.000 lines of code, with plenty of challenges, like performance, reliability or offline support. This talk will cover some of those challenges and several design decisions we have made so far to address them, along some other decisions to keep the code base readable and navigable.

Have you ever wondered if we can really build machine learning models in React, rather than in the mainstream languages like Python or R? Afterall, React is the most used language by the developers, according to a 2019 survey by Stack Overflow. Well, this sounds like a crazy idea, because React is not designed for high performance computing and neural networks are compute-intensive! But, wait a minute - we have libraries such as Onnx.js, Tensorflow.js to our rescue! In this talk, I’ll be delving deeper into the process of building and deploying machine learning applications using React.

Local-first is a new paradigm for developing apps with instant reactivity, realtime multi-user and conflict-free offline built in. This talk shows how to develop local-first systems with React using ElectricSQL, a open source software platform from the inventors of CRDTs.

Are you tired of relying on outdated web storage techniques? Join us as we explore the latest advancements in web storage and data management that will supercharge your web applications! In this presentation, we will dive into the world of advanced APIs such as IndexedDB, CacheStorage, FileSystem API, and more. We'll compare the benefits and limitations of each API, discussing their persistence, quota, security, and performance. We'll also explore real-world use cases and discuss web storage beyond local-storage and session-storage

Managing React state is hard. Why? Because there are so many options to consider! Local state, reducers, custom hooks, context, and over a dozen third-party libraries. In this session, we’ll explore the lessons I’ve learned from managing complex state in React over the last seven years. I’ll share my strategy for categorizing React state including local, server, global, derived and many more. After this session, you’ll understand how to identify different types of state, where to declare state, and how to choose between these different options.

What is WebRTC (Web Real-Time Communication), its main challenges, and how does the combination of React + Daily solve for them? We'll take a deep dive into specifics like React audio and video media elements and Daily React components and hooks. You'll even walk (or code?) out knowing how to build a video grid in just two minutes.

In today's digital landscape, web application security is of paramount importance to protect sensitive user data and maintain user trust. The Mozilla Observatory is a powerful tool that can help developers assess the security posture of their web applications. In this talk we'll learn how to improve the security of web applications using the Mozilla Observatory.

You've planted the seeds of your design system. Maybe you've built out a few components and set up a basic Storybook. But where do you go from here? It can be easy to let your inner perfectionist take over and try to cover every scenario and edge case, especially when referencing established design systems. However, a more effective approach is to treat your design system as a product that grows and evolves with your users. Ultimately, its value lies in the problems it solves and the needs it meets. In this talk, I’ll explore how to apply product thinking principles to your design system, interweaving examples from my own experience as a design system engineering lead.

In this talk, I'll introduce the audience to the potential of OpenAPI in simplifying and enhancing the development process for React applications. I will demonstrate how OpenAPI can be harnessed to seamlessly autogenerate REST APIs, streamlining the consumption of data within React projects. With a keen focus on efficiency and reliability, attendees will gain valuable insights into implementing automated tests to ensure robustness and quality in their applications.

In this talk, we will explore how to build scalable and maintainable GraphQL APIs for enterprise applications using Domain-Driven Design and Clean Architecture patterns. We will discuss the importance of modularizing your API around the business domain and better subdomain organization. We will briefly go through the main components of a GraphQL API, including resolvers, domain layer, and database layer and how we've evolved them to our new architecture.

In this talk I will use the dental metaphor in order to introduce the performance budgets just like brushing teeth everyday to keep them clean and healthy you should do the same for your website by setting a performance budget and check it in every pull request in your pipelines, the target audience is mid-level to advanced, I will start by the example of the tooth decay and cleaning them then brushing them everyday as the dentist advice, then explain decay as the performance issue and performance budgeting is like the toothpaste and go from here with the different techniques that developers can do in order to prevent any loss in the performance wins they made.

I've flip flopped between engineer and manager three times already. I'm quite aware that this is not an unusual thing to do. There's a heap of flip floppers out there! At Atlassian I'm in a new managers group. Interestingly there are many managers in the group that have previously been managers but joined Atlassian as an engineer. So what's wrong with us? Why do we keep changing our role? Is it boredom? Are we crazy? I think there's actually method to the madness. Each time we make a change it's intentional and there's a purpose, and whilst some say it can hurt your career, I'd like to take you on a journey to explore why flip floppers are a very valuable breed!

Distributed tracing is a powerful technique that allows you to track the flow and timing of requests as they navigate through a system. By linking operations and requests between multiple services, distributed tracing provides valuable insights into app performance and helps identify bottlenecks. In this talk Lazar will explain the concept of Distributed Tracing by walking you through how monitoring tools build tracing solutions.

While the technology goes further and further, web development tries to get closer to the user. CDNs and web servers are evolving, and they now offer us the possibility to execute server-side logic without depending on a unique data center located in a specific place in the world. Let’s present the concept of The Edge. We will see how it works, and we’ll talk about Edge Functions. We’ll discuss why the main hosting providers are introducing this technology, and why different JavaScript frameworks are modeling their approaches based on Edge computing.

We learn about possibilities of what DOM can do but have you ever wondered what all possibilities Shadow DOM can have. Well, In this talk I will help you understand how the Shadow DOM has got you covered. We will further deep dive into how you can use React with Web Components.

An elevator pitch for security - yay! I know, security is often frustrating or even annoying. But we all work in tech and at some point, security always becomes a topic. Let's discover a real-world security flaw and what we can learn from it to prevent such incidents. It's gonna be fun, I promise.

Designers and developers work on different timelines—designers look to the future while developers build from what’s already been designed. They speak different languages and follow different processes. How can we bridge these gaps and build a more collaborative development process? In this talk, we will explore the integration of AI-driven tools and techniques to enhance design systems, fostering improved communication between cross-functional teams. By leveraging artificial intelligence, we can not only boost productivity and innovation but also create a more harmonious and efficient workflow for both designers and developers

In this talk, I'll take you through my journey as I joined the team supporting our Smart TVs application and share my experience learning one of the most overlooked but essential pieces of functionality we have.

Hold on, WebAssembly on the server?! I thought it was for browser! In this talk, we'll explore the benefits of using low-level languages on the server-side, and the different possibilities that WebAssembly provides for building high-performance web applications. We'll dive into different providers for WebAssembly functions, as well as practical use cases for integrating WebAssembly with React. By the end of this talk, you'll walk away with a deeper understanding of how server-side WebAssembly and React can be used together. You'll also gain practical insights into how to use low-level languages on the server-side, and tips for overcoming common challenges when integrating WebAssembly with React.

Working on emoji-picker-react I encountered a challenge - filtering the list of 1800 emojis triggered a significant delay due to re-renders.Let's learn how I fixed this only using CSS!

In the dynamic realm of software development, successful industry leaders share a common proficiency in four pivotal metrics: Deployment Frequency, Lead Time for Changes, Time to Restore Service, and Change Failure Rate. Yet, achieving high performance in these areas within the mobile world presents unique challenges. This talk delves into the depth of best practices and innovative technologies within React Native and mobile DevOps ecosystems, all aimed at our ultimate goal: the continuous delivery of value to our users.

Join me on my journey of creating the Next.js WordPress-like Plugin System, an experiment that enhances Next.js applications by allowing easy installation and customization of plugins for features like Google Analytics, Social Login, and E-commerce. I'll showcase the unique features of the file-based plugin system, such as persistent storage per plugin, registration of components, routes, and functions, and a cross-plugin event system. The talk also shares the story of how and why I solved this problem to make developers' lives easier. Check out the experiment at <a target="_blank" href="https://github.com/gluestack/next-wordpress-plugins.">https://github.com/gluestack/next-wordpress-plugins.</a>

Headless architecture has gained immense popularity in recent years for its ability to decouple the frontend and backend, empowering developers to create engaging, interactive, and scalable web applications.  In this workshop, we will quickly take a dive into the Headless World and Architecture.  Additionally, we will build a blog website super quickly using Storyblok, a headless CMS that offers a real-time preview feature with nestable component approach, and Astro (3.0) which is already creating a buzz with the new app directory.  - Master headless CMS fundamentals- Master an Astro &amp; headless CMS approach- Use Atomic design in your Astro &amp; Storyblok application- Creating pages, adding content and understanding how the dynamic routing works with headless

Crash course into Astro and Storyblok

Arisa Fukuzaki

Passwords have long been the keys to our kingdoms. However, they often become the weak points in our armor —forgotten, misused, or exploited. Our Next apps often make use of passwords to authenticate users, but what would a world with no passwords look like? And how we can start driving into that future today?

Authentication Beyond Passwords

Juan Cruz Martinez

Get ready to supercharge your web development skills with React Server Components! In this immersive, 3-hour workshop, we'll unlock the full potential of this revolutionary technology and explore how it's transforming the way developers build lightning-fast, efficient web applications. Join us as we delve into the exciting world of React Server Components, which seamlessly blend server-side rendering with client-side interactivity for unparalleled performance and user experience. You'll gain hands-on experience through practical exercises, real-world examples, and expert guidance on how to harness the power of Server Components in your own projects. Throughout the workshop, we'll cover essential topics, including:- Understanding the differences between Server and Client Components- Implementing Server Components to optimize data fetching and reduce JavaScript bundle size- Integrating Server and Client Components for a seamless user experience- Strategies for effectively passing data between components and managing state- Tips and best practices for maximizing the performance benefits of React Server Components

React Server Components Unleashed: A Deep Dive into Next-Gen Web Development

Maurice de Beijer

Unleash the power of AI in your documentation with this hands-on workshop. In this interactive session, I'll guide you through the process of creating a dynamic documentation site, supercharged with the intelligence of AI (ChatGPT). Imagine a world where you don't have to sift through pages of documentation to find that elusive line of code. With this AI-powered solution, you'll get precise answers, succinct summaries, and relevant links for deeper exploration, all at your fingertips. This workshop isn't just about learning; it's about doing. You'll get your hands dirty with some of the most sought-after technologies in the market today: Next.js 13.4 (app router), Tailwind CSS, shadcn-ui (Radix-ui), OpenAI, LangChain, and MongoDB Vector Search.

Let AI Be Your Docs

In this advanced Next.js workshop, we will delve into key concepts and techniques that empower React.js developers to harness the full potential of Next.js. We will explore advanced topics and hands-on practices, equipping you with the skills needed to build high-performance web applications and make informed architectural decisions. By the end of this workshop, you will be able to:1. Understand the benefits of React Server Components and their role in building interactive, server-rendered React applications.2. Differentiate between Edge and Node.js runtime in Next.js and know when to use each based on your project's requirements.3. Explore advanced Server-Side Rendering (SSR) techniques, including streaming, parallel vs. sequential fetching, and data synchronization.4. Implement caching strategies for enhanced performance and reduced server load in Next.js applications.5. Utilize React Actions to handle complex server mutation.6. Optimize your Next.js applications for SEO, social sharing, and overall performance to improve discoverability and user engagement.

Next.js for React.js Developers

Adrian Hajdin - JS Mastery

Today every developer is using LLMs in different forms and shapes. Lots of products have introduced embedded AI capabilities, and in this workshop you’ll learn how to build your own AI application. No experience in building LLMs or machine learning is needed. Instead, we’ll use web technologies such as JavaScript, React and GraphQL which you already know and love.

Build code, not walls