I was blown away when I tried Remix for the first time. After building full-stack applications for clients as my day job, this is the closest it got to real full-stack experience.

Join me for a 4-year retrospective as we explore the lessons learned from building a video player from scratch with React Native. I'll share insights, pitfalls, and key takeaways from this development journey.

We'll explore essential considerations before diving into custom video player development with React Native, including challenges like background audio management, platform nuances between Android and iOS, subtitles implementation and custom controls.
Whether you're a seasoned developer or new to React Native, this retrospective will help you navigate the challenges we faced when developing a video player, ensuring a smoother development process for your own projects.

In this talk, we explore the application of React Server Components (RSC) to elevate the functionality and efficiency of forms. We will touch upon the core principles of RSC and their specific benefits for form development, such as improved load times and streamlined server-side processing. Additionally, we’ll learn the latest advancements in React 19 and the introduction of multiple new hooks.

Attendees will gain insights into practical strategies for integrating RSC into forms, focusing on enhancing user experience and reducing front-end complexities.

Front-end developers often face the challenge of building UIs that need frequent updates to keep up with changing business requirements and user preferences. This can lead to slow release cycles and frustration for both developers and users. Server-Driven UI (SDUI) offers a solution by shifting UI logic to the backend, enabling rapid updates without requiring app store approvals or complex deployments. This talk will explore how SDUI, combined with React, empowers teams to build flexible, maintainable, and quickly adaptable applications that deliver exceptional user experiences.

Talk Structure and Content:
1. Introduction (3 minutes)
a. The UI Adaptability Challenge: Quickly summarizing the common struggle of keeping UIs up-to-date with changing requirements.
b. Enter Server-Driven UI (SDUI): Concisely explaining the core principle of SDUI – shifting UI logic to the backend for flexible control.
c. React's Perfect Fit: Emphasizing how React's component model aligns seamlessly with SDUI's structure.

2. Real-World Impact: The E-commerce Example (5 minutes)
a. The Problem: Describing the pain points of managing frequent promotions, seasonal changes, and personalized recommendations in a traditional e-commerce app.
b. The SDUI Solution: Showcasing how SDUI allows dynamic updates to product displays, banners, and personalized content without app updates.

3. Building Blocks of SDUI with React (10 minutes)
a. Simplified Architecture: A concise illustration of the core components: API, schema, and React components.
b. Flexible Schemas: Briefly touching on best practices for designing schemas that can handle diverse UI elements.
c. Data Flow in Action: Demonstrating a simplified code snippet, showing how React components fetch data from the server and render elements based on the received configuration.
d. State Management Tips: Highlighting key strategy for handling state in a SDUI-powered React app (e.g., prioritizing server-side state for core UI logic).

Have you ever wondered how React magically updates the user interface with lightning speed?

In this session, we embark on an illuminating journey into the inner workings of React's virtual DOM and reconciliation algorithm. Together, we'll unravel the mysteries behind React's ability to efficiently update the UI in response to changes in state and props. Throughout the session, we'll dissect key concepts like element diffing, where React intelligently identifies the minimal set of DOM manipulations needed for updates.

Additionally, we'll explore the intricate dance of component lifecycle methods, understanding how React orchestrates the rendering process from birth to destruction. Along the way, we'll shine a spotlight on the often-overlooked role of keys in optimizing rendering performance, showcasing how they enable React to maintain component identity across re-renders.

Pickpalette is one of the saas products I build and is having currently 40+ users. In this session will be talking about building inside a saas ecosystem and using the power of the GitHub actions and edge functions.
The bonus will be about leveraging the power of zustand along with tanstack query and building optimistic usecase.

This talk explores the intersection of Next.js, React Query, and the Backend for Frontend (BFF) design pattern, three vital elements pieces that help solve the puzzle of performant and scalable data fetching.

I’ll start by discussing Next.js and its capabilities for React applications, highlighting its features like server rendering and data pre fetching, and route pre-fetching. I’d then delve into client data fetching and state management, showcasing how React Query brings a new perspective to managing server state hydration in React applications, simplifying data fetching, caching, synchronization, and updates.
The last part of the talk will take the topic further by introducing the Backend For Frontend (BFF) design pattern, demonstrating how a BFF can be integrated with NextJs API handler to work seamlessly as a Proxy with a React application, enhancing user experience and performance by spreading the load of large payloads.

Throughout the talk, real-world examples will be used to provide a practical understanding of these topics.

Everyone has heard of feature flags: boolean switches in your code that you can flip at runtime for different users, environments, etc. But they are just one part of a much broader best practice called “application configuration”. Big tech companies like Meta and Google have internal tools for structured, type-safe app configuration that help them accelerate development of products and backend services. This talk dives into what app configuration is, how you can use it in React and how it can empower your whole team to move faster, including your nontechnical colleagues.

Bio: Miraan is the founder at Hypertune. He was previously at Meta where he led teams across frontend, mobile, backend and machine learning.

Talk structure

- Refresher on feature flags
- Other kinds of “app configuration”: permission flags, limits, rules, in-app content and more
- How we used app configuration at Meta
- Requirements of an app configuration system
- Live code walkthrough and demo of app configuration in action in a React app

In this talk, we'll delve into the critical aspects of React performance optimization, covering both fundamental principles and advanced tactics. Whether you're building a small web application or a complex enterprise-level app, these tips and tricks will empower you to deliver a superior user experience.

We will create an application case where I will introduce you how you can use AI to generate locations on front-end. We will use some tools to create and integrate with OpenAI to generate some locations given an user input. I will bring an overview how to create a web-app using React app and integrate with some maps Open Source tools to display on our application and introduce the integration with OpenAI to generate locations on map and be interactive for the users.

I will bring an overview of a web application using AI (openAI) to generate locations on web and display on map suggested by OpenAI. In this talk I will introduce some tools like Javascript, Typescript, MapLibre, MapTiler, React Map GL.

How we can integrate webapp with AI? This is the answer I want to ask yourseft and I will breing the overview of this application and teach you,

An immersive session designed exclusively for the "React and Chill" online conference, aiming to introduce React developers to the harmonious blend of coding and mindfulness. This session offers a tranquil refuge from fast-paced world of technology, guiding attendees through meditative exercises specifically tailored for the developer's mind. From the mindful setting of initial states with useState, to embracing the present moment with useEffect, this session explores how React's hooks can inspire a more mindful and intentional approach to coding and life; ensuring that every line of code is not just a task, but a step towards inner harmony.

For React developers, the typical practice when creating React applications involves generating components, pages, and routes for various features required by the application. This process can become laborious, dedicating extensive hours to fine-tuning the implementation details. However, what if you are uncertain about the components your page application will encompass? One might assume that such an application cannot be developed. Fear not!

We all have heard "If it walks like a duck and it quacks like a duck, then it must be a duck". It is called "duck typing" a TypeScript’s core principle: type checking focuses on the shape that values have. This powerful concept is used to determine whether an object can be used for a particular purpose, which means that if an object behaves like a certain type, then it can be treated as that type. The idea is to describe duck typing, using TS examples, checking why duck typing is important, and we'll check together when and when not to use it.

How can we apply this concept to a react application?
Duck typing offers a powerful and flexible way of working with objects, eliminating concerns about their specific internal content. Once we've established duck-typing functions for all our application components, such as inputs, checkboxes, buttons, lists, modals, and custom components, we can channel them through a component switchyard. The outcome of this process is then rendered to the UI as a page.

But why should React developers specifically embrace duck typing in TypeScript?
Duck typing provides a way to achieve type safety by allowing us to define and validate the expected shapes of our components. This ensures that only compatible components are used together, reducing the likelihood of runtime errors and enhancing the robustness of our applications. With clearly defined types, refactoring becomes a smooth process, and the compiler assists in catching potential issues early in the development phase, contributing to a more maintainable codebase.

In this talk, you will learn about duck typing in TypeScript, focusing on a React application. Following this pattern makes it possible to build generic applications that serve an unlimited number of pages.

Table of contents

1. What and Why Duck-typing?
- General description
- Advantages / Disadvantages
- Examples
2. Overview of a generic React application written in TS
- Routing
- Components
3. Duck-typing in action
- Component switchyard

React is a declarative UI library, which is to say that the view is a function of current state. The natural inclination is to have your state primitives align closely with the dynamic parts of the UI. I'm going to show that this isn't going nearly far enough. Once you throw user and network events into the mix - and those events have different ideas of "current state", you need to denormalize your state data and derive "current state" based an assortment of event metadata.