December 8 - 12, 2023
React Day Berlin
Berlin & Online

React Day Berlin 2023

Build apps, not walls

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



This edition of the event has finished, the latest updates of this React Conference are available on the Brand Website.
Managing React State: 10 Years of Lessons Learned
16 min
Managing React State: 10 Years of Lessons Learned
Top Content
Watch video: Managing React State: 10 Years of Lessons Learned
This Talk focuses on effective React state management and lessons learned over the past 10 years. Key points include separating related state, utilizing UseReducer for protecting state and updating multiple pieces of state simultaneously, avoiding unnecessary state syncing with useEffect, using abstractions like React Query or SWR for fetching data, simplifying state management with custom hooks, and leveraging refs and third-party libraries for managing state. Additional resources and services are also provided for further learning and support.
Exploring React Server Component Fundamentals
21 min
Exploring React Server Component Fundamentals
Top Content
Watch video: Exploring React Server Component Fundamentals
This Talk introduces React Server Components (RSC) and explores their serialization process. It compares RSC to traditional server-side rendering (SSR) and explains how RSC handles promises and integrates client components. The Talk also discusses the RSC manifest and deserialization process. The speaker then introduces the Waku framework, which supports bundling, server, routing, and SSR. The future plans for Waku include integration with client state management libraries.
React's Most Useful Types
21 min
React's Most Useful Types
Top Content
Watch video: React's Most Useful Types
Today's Talk focuses on React's best types and JSX. It covers the types of JSX and React components, including React.fc and React.reactnode. The discussion also explores JSX intrinsic elements and react.component props, highlighting their differences and use cases. The Talk concludes with insights on using React.componentType and passing components, as well as utilizing the react.element ref type for external libraries like React-Select.
Brace Your React, New Core Web Vitals are Coming
30 min
Brace Your React, New Core Web Vitals are Coming
Watch video: Brace Your React, New Core Web Vitals are Coming
The Talk discusses the NextPaint metric, a new performance metric introduced by Google that measures the speed of clicks or keyboard input on a page. It explores how React rendering can impact the NextPaint metric and offers optimization techniques such as using the useTransition hook in React 18. The Talk also covers the changes introduced in React 18's rendering process, the impact of wrapping with suspense, and the replacement of the First Input Delay metric with the interaction to the next page. The limitations of useTransition and general React performance optimization strategies are also discussed.
Rethinking Bundling Strategies
32 min
Rethinking Bundling Strategies
Watch video: Rethinking Bundling Strategies
The talk discusses rethinking bundling strategies, focusing on challenges such as long-term caching and improving the state of Next.js and Webpack. It explores handling immutable caching and content hashes, optimizing asset references and page manifests, and addressing issues with client-side navigation and long-term caching. The talk also covers tree shaking and optimization, optimizing module fragments and code placement, and the usage and relationship of TurboPack with Webpack. Additionally, it touches on customizing configuration and hash risks, barrel imports and code splitting, and entry points and chunking heuristics.
React Server Components
27 min
React Server Components
Watch video: React Server Components
React server components solve the problem of interrupting user interfaces caused by CPU-bound or network-bound web applications. They allow for read-only content to be rendered on the server and interactive elements to be shipped to the client, reducing code shipped and improving performance. Server-side rendering and server-side fetching improve the user experience by reducing delays and flash of unstyled content. Soft navigation with server components enables re-rendering without hard navigation, and using frameworks like Next.js helps with debugging and deployment challenges.
All Things Astro
28 min
All Things Astro
Watch video: All Things Astro
Astro is a powerful framework for content-driven websites, with its own syntax and the ability to use favorite front-end libraries. It has seen significant improvements in Astro 2 and Astro 3, including view transitions and improved performance. Astro 4 introduces features like a powerful dev toolbar, content caching, and internationalization support. The Astro community is highly regarded, and Astro is being used for production websites. Astro also supports migrating legacy websites and integrating with headless CMSs.
Javascript Should Come With Batteries
30 min
Javascript Should Come With Batteries
Watch video: Javascript Should Come With Batteries
JavaScript Should Come With Batteries: Deno is a next-generation JavaScript runtime that addresses the lack of built-in tooling in JavaScript. It provides a secure and simple way to develop applications with built-in testing, linting, formatting, and a language server for VS Code. Deno is compatible with Node.js and NPM, supports web standard APIs, and allows code portability between frontend and server. It also offers features like a built-in database, a key-value store, and transparent monetization with Deno Deploy.
Bringing React Server Components to React Native
29 min
Bringing React Server Components to React Native
Top Content
Watch video: Bringing React Server Components to React Native
React Server Components (RSC) offer a more accessible approach within the React model, addressing challenges like big initial bundle size and unnecessary data over the network. RSC can benefit React Native development by adding a new server layer and enabling faster requests. They also allow for faster publishing of changes in mobile apps and can be integrated into federated super apps. However, implementing RSC in mobile apps requires careful consideration of offline-first apps, caching, and Apple's review process.
Next.js for React.js Developers
157 min
Next.js for React.js Developers
Top Content
Workshop
Adrian Hajdin
Adrian Hajdin
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.
How Much RAM Is Your UseMemo Using? Let’s Profile It!
20 min
How Much RAM Is Your UseMemo Using? Let’s Profile It!
Top Content
Watch video: How Much RAM Is Your UseMemo Using? Let’s Profile It!
Memory usage is often overlooked in web applications, but excessive memory usage impacts performance and user experience. It's important to analyze memory usage and optimize it, considering concepts like count versus size and shallow versus retain memory. The Chrome Memory Profiler and Memlab are useful tools for analyzing memory usage. By optimizing React components and using tools like Memlab, memory usage can be reduced significantly. React hooks can be expensive for large-scale projects, and memory analysis is a challenging task.
Durable Objects - Everything Everywhere All At Once For Not Very Much Money
31 min
Durable Objects - Everything Everywhere All At Once For Not Very Much Money
Watch video: Durable Objects - Everything Everywhere All At Once For Not Very Much Money
Durable Objects is a versatile programming paradigm by Cloudflare that allows for stateful and uniquely addressable server environments. It simplifies feature development, enables real-time updates through WebSocket connections, and provides a built-in key-value store for long-term storage. It can be used to create collaborative applications, manage data storage efficiently, and explore co-located compute and data at the edge. Other companies like Azure also offer similar technologies. Deno's KV and fly.io's Flame are innovative products that eliminate the need for provisioning databases and Kubernetes clusters.
Authentication Beyond Passwords
127 min
Authentication Beyond Passwords
WorkshopFree
Juan Cruz Martinez
Juan Cruz Martinez
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?
React Server Components Unleashed: A Deep Dive into Next-Gen Web Development
149 min
React Server Components Unleashed: A Deep Dive into Next-Gen Web Development
Workshop
Maurice de Beijer
Maurice de Beijer
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
Building Enterprise-grade GraphQL APIs with Domain-Driven Design and Clean Architecture
22 min
Building Enterprise-grade GraphQL APIs with Domain-Driven Design and Clean Architecture
Watch video: Building Enterprise-grade GraphQL APIs with Domain-Driven Design and Clean Architecture
Today's Talk focuses on building enterprise-grade GraphQL APIs with domain-driven design and clean architecture. The speaker shares their experience and emphasizes the importance of understanding the business domain and aligning software with business requirements. They discuss the layered approach of clean architecture and the benefits it provides for separation of concerns and testing. The Talk also covers the use of GraphQL schema merging and mappers to create a unified schema. The speaker concludes by highlighting the importance of constant observation, evaluation, and improvement in software development.
Building AI Applications for the Web
98 min
Building AI Applications for the Web
Workshop
Roy Derks
Roy Derks
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.
Config Driven UI using ReactJS
7 min
Config Driven UI using ReactJS
Watch video: Config Driven UI using ReactJS
This lightning talk introduces the concept of config-driven UI using ReactJS, which allows for dynamic and customizable UIs without hard-coding. The technique involves using a JSON file to specify the type, size, position, and data source for each component. The talk also explains the structure of config-driven UI components, including elements, vertical and horizontal containers, and nested layouts.
Crash course into Astro and Storyblok
119 min
Crash course into Astro and Storyblok
WorkshopFree
Arisa Fukuzaki
Arisa Fukuzaki
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 & headless CMS approach- Use Atomic design in your Astro & Storyblok application- Creating pages, adding content and understanding how the dynamic routing works with headless
The Anatomy of Webpack: A Deep Dive Into Its Architecture
15 min
The Anatomy of Webpack: A Deep Dive Into Its Architecture
Watch video: The Anatomy of Webpack: A Deep Dive Into Its Architecture
Webpack is a module bundler that converts code into a format browsers can read. It has a plugin architecture built with Tappable that allows users to tap into hooks for important events. Tappable instances like compiler and compilation can be used to tap into hooks. The resolver in Webpack is used to check if required paths exist and can modify non-JavaScript files using loaders.
Challenges of Decomposing a Massive Front-End Using Micro-Frontends
28 min
Challenges of Decomposing a Massive Front-End Using Micro-Frontends
Watch video: Challenges of Decomposing a Massive Front-End Using Micro-Frontends
Microfrontends offer a potential solution to frontend engineering problems, improving testing efficiency and allowing for faster development. There are misconceptions about microfrontends, with different approaches such as horizontal and vertical splits. Monorepos are recommended for managing microfrontends. Data management and side effects can be handled through various approaches. Building microfrontends without a monorepo can be challenging, but it depends on the scale of the application. Trust in people and implementing a registry of components help avoid duplication. Tools like Module Federation and NX are useful for managing microfrontends.
Crafting Pristine React: Best Practices for Maintainable Code
29 min
Crafting Pristine React: Best Practices for Maintainable Code
Watch video: Crafting Pristine React: Best Practices for Maintainable Code
React best practices, including state management, component performance, testing, accessibility, and clean architecture, are discussed. The use of useMemo and useCallback should be limited to when necessary, and tools like React's new compiler and Million.js can aid in performance optimization. End-to-end testing and React Testing Library are important for critical functionalities. Accessibility is emphasized, and the use of the xCore/React package is recommended. Logic business can be extracted from components, and file naming and folder structure should be carefully considered. Import aliases and different folder structures can enhance code maintainability. The talk also touches on managing hooks and testing, and ends with a discussion on favorite pizza and online presence.
Break the Race: Easy Race Condition Detection for React
31 min
Break the Race: Easy Race Condition Detection for React
Watch video: Break the Race: Easy Race Condition Detection for React
Race conditions can be complex to debug and reproduce, causing frustration for users. The speaker discusses examples of race conditions and ways to fix and avoid them. They demonstrate an example of an auto-completion field in React and how to handle race conditions in API calls. The speaker introduces the FastCheck framework for property-based testing to address race conditions and improve tests. Randomizing inputs and outputs can help uncover bugs specific to certain scenarios. The speaker also discusses mitigating race conditions in React and handling test overhead and reproducibility.
Multiplayer Games with React Three Fiber and WebSockets
28 min
Multiplayer Games with React Three Fiber and WebSockets
Watch video: Multiplayer Games with React Three Fiber and WebSockets
We're discussing making multiplayer games in React, focusing on accessibility and development phases. The game architecture involves a monorepo with a single server and WebSocket connections. React context is used for server communication and updating the React state. The game introduces 3D using React 3 Fiber and implements game mechanics like timers. The talk also mentions using generative AI tools for game design and testing with tools like Cypress. Different rendering techniques and the use of Socket.io's rooms feature in the WebSocket server are also discussed.
Let AI Be Your Docs
88 min
Let AI Be Your Docs
Workshop
Jesse Hall
Jesse Hall
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.
Type System React
21 min
Type System React
Watch video: Type System React
This Talk is about implementing a limited subset of the type equivalent of React, specifically its JSX engine, in the TypeScript type system with no runtime code. The speaker demonstrates how to use TypeScript features like constrained types and template literal strings to infer and render JSX elements in the type system. They also show how to render headings and children using a utility called 'render component'. The Talk concludes with additional resources for learning TypeScript and related topics.
OpenAI in React: Integrating GPT-4 with Your React Application
11 min
OpenAI in React: Integrating GPT-4 with Your React Application
Watch video: OpenAI in React: Integrating GPT-4 with Your React Application
AI is a revolutionary change that helps businesses solve real problems and make applications smarter. Vectors enable semantic search, allowing us to find contextually relevant information. We'll build an AI-powered documentation site that answers questions, provides contextually relevant information, and offers links for further exploration. To enable vector search with MongoDB, we use the LingChain method to connect to MongoDB, create vector embeddings for user queries, and find related documents using maximal marginal reference. Join the workshop for a complete start-to-finish guide and integrate MongoDB Vector Search into your next React-based AI application.
Building a Better Micro-Frontend Framework That Enables Platform Freedom
28 min
Building a Better Micro-Frontend Framework That Enables Platform Freedom
Watch video: Building a Better Micro-Frontend Framework That Enables Platform Freedom
This talk discusses the challenges of scaling and maintaining applications and how architecture decisions can impact them. It introduces the concept of Microfrontend and its advantages of easier scaling, issue identification, and diversification of technology stacks. The implementation of Microfrontend at Red Hat is explained, including the use of a new framework, communication strategies, and the need for scalability and maintenance in large applications. The talk also covers the multiplying architecture framework of micro frontend and its core components. The implementation of Microfrontend in VS Code and examples of combining different frameworks into a single application are showcased. The issue of duplication of library loading is addressed using federated modules in webpack.
Hacking JSX: Building in Minecraft with React
7 min
Hacking JSX: Building in Minecraft with React
Watch video: Hacking JSX: Building in Minecraft with React
JSX can be used to create builds in Minecraft by writing pseudo-HTML code within JavaScript. It can be transpiled into a format that the browser can understand and is not limited to React. JSX allows for the creation of an intermediary representation that can be converted into commands for Minecraft. Existing tooling can be used with JSX, eliminating the need for custom parsers and enabling linting and IDE support. The source code for the project is available on GitHub.
Understanding Rendering Patterns
9 min
Understanding Rendering Patterns
Watch video: Understanding Rendering Patterns
This Talk discusses rendering patterns on the web, including the use of React and the concept of memoization. It explores the idea of using signals to change data without a full re-render and how frameworks like SolidJS, Vue, Svelte, and Angular are adopting signals. The React team is developing React for Get, a compiler that provides auto-memoization to reduce unnecessary re-renders. Different frameworks have their own ways of using signals, such as shallow ref or ref in Vue, use signal in Quick, and defining and accessing signals in Angular and Svelte.
CSS Only* Search: Improve React Filtering Performance with CSS!
11 min
CSS Only* Search: Improve React Filtering Performance with CSS!
Watch video: CSS Only* Search: Improve React Filtering Performance with CSS!
Evitar Alus, a frontend engineer, shares a trick to improve search performance in React applications by optimizing the search algorithm and reducing DOM updates. CSS attribute selectors can be used for filtering and applying styles based on emoji values. A component called CSS Search can be created to improve search performance by hiding emojis that do not match the search query. Despite some performance drawbacks, this solution works significantly faster. Visit Evitar Alus' website or Twitter account for more of their work.
To App or Not: When to Choose Native or Web
23 min
To App or Not: When to Choose Native or Web
Watch video: To App or Not: When to Choose Native or Web
The Talk discusses the choice between building native or web apps for software development. It explores the benefits of building web apps, such as fast development, easy debugging, and universal rendering. It also highlights the power of native apps, with their advanced features, better offline experience, and monetization opportunities. The Talk suggests using libraries like Capacitor or React Native to combine the benefits of both web and native apps.
How to Automatically Consume APIs with React
7 min
How to Automatically Consume APIs with React
Watch video: How to Automatically Consume APIs with React
Today's Talk covers the challenges of developing APIs and the available tools to simplify the process. It also demonstrates building a pizza menu application using React and Fastify, with documentation and SDK generation using Swagger and OpenAPI. Orval is introduced as a tool for generating mutations, testing with mock service worker-generated mocks, and using Zod for validation. It supports multiple languages and frameworks, and allows consuming APIs from various resources. The SDK can be tracked using version control, and Open API specifications can generate Swagger UI and Redux doc asserts.
SOLIDify Your React Code
11 min
SOLIDify Your React Code
Watch video: SOLIDify Your React Code
Clean code is easily understood, readable, changeable, extensible, and maintainable. SOLID principles enforce good practices for scalable and maintainable software. The Single Responsibility Principle (SRP) ensures that components have a single reason to change. The Open-Close Principle (OCP) allows components to be easily extended without modifying the underlying source code. The Liskov Substitution Principle (LSP) enables swapping child elements within a subtype component. The Interface Segregation Principle (ISP) states that components should only depend on the props they actually use.
What's New in Redux Toolkit 2.0
8 min
What's New in Redux Toolkit 2.0
Watch video: What's New in Redux Toolkit 2.0
Mark Erickson discusses the new features in Redux Toolkit 2.0, including the simplification of Redux logic and the addition of RTK query for data fetching. He mentions the challenges of achieving ESM common JS compatibility and refers to a blog post he wrote about it. The plan to ship major versions of RTK, Redux core, Reselect, and React Redux together is discussed, with a focus on the conversion of Redux core to TypeScript and the need for packaging updates and TypeScript type upgrades.
Preparing for Success: A Frontend Engineer's Guide to Tech Due Diligence
32 min
Preparing for Success: A Frontend Engineer's Guide to Tech Due Diligence
Watch video: Preparing for Success: A Frontend Engineer's Guide to Tech Due Diligence
Tech due diligence is a thorough examination that can influence a product or company's future, involving analyzing technical architecture, code base, team culture, and more. Front-end engineers play a crucial role in bridging design and functionality. Automation, infrastructure, and documentation are key areas in tech due diligence. Best practices, clean code, and market connections are important for selling. Tech due diligence requires data access and security measures, and companies may be hesitant to fully cooperate.
The Future of Web Storage: Exploring Advanced Storage APIs
9 min
The Future of Web Storage: Exploring Advanced Storage APIs
Watch video: The Future of Web Storage: Exploring Advanced Storage APIs
Today's Talk explores three powerful web APIs: indexedDB, cache storage, and the filesystem API. IndexedDB enables offline functionality and provides advanced features like coding & indexing, transactions, versioning, and security. Cache storage supports various caching strategies and namespaces, while the File System API allows fine-grained control over files, facilitating file uploads and downloads. A code example of interacting with the File System API is also provided.
Applying Product Thinking Principles to your Design System
6 min
Applying Product Thinking Principles to your Design System
Watch video: Applying Product Thinking Principles to your Design System
Today's Talk focuses on applying product-making principles to design systems, emphasizing prioritization, MVPs, and metrics. It highlights the importance of understanding user needs and business goals through research and data collection. The Talk also emphasizes the iterative process of building components, gathering feedback, and iterating based on user validation. Lastly, it stresses the significance of measuring progress with metrics to track usage and adoption, and to demonstrate the impact of design system efforts.
Daily Brush for Website Speed: Embrace the Performance Budget Ritual
13 min
Daily Brush for Website Speed: Embrace the Performance Budget Ritual
Watch video: Daily Brush for Website Speed: Embrace the Performance Budget Ritual
This Talk provides an introduction to web performance and emphasizes the importance of setting performance goals and budgets. It explains the steps for creating and applying a performance budget and suggests various tools for performance budgeting. The Talk also highlights the need to make the performance budget concrete and meaningful, connect it to business goals, and integrate it into the development pipeline. It concludes by emphasizing the importance of maintaining performance and connecting with the speaker for more information.
Let's build a TV Spatial Navigation
34 min
Let's build a TV Spatial Navigation
Watch video: Let's build a TV Spatial Navigation
Today's Talk is about building a spatial navigation library for Smart TVs. The speaker shares their experience and challenges in building applications for Smart TVs. They demonstrate the functionality of spatial navigation using React and React Router. The navigation engine class is developed to handle TV control events and navigate through elements. Circular navigation is implemented to make navigation easier for users in TV applications.
A Nerdy Guide to the Web Trending Concepts
10 min
A Nerdy Guide to the Web Trending Concepts
Watch video: A Nerdy Guide to the Web Trending Concepts
Going to conferences can be overwhelming, so the speaker created a guide to trending web concepts using comic book characters. The chosen topic is resumability, and the story of Tony Stark is used to explain it. Resumability allows for immediate interactivity on a web page and is achieved through serialization and execution of code. The speaker challenges the audience to propose topics for future guides.
How Do We Use React Native at Mattermost. Architecture and Design
18 min
How Do We Use React Native at Mattermost. Architecture and Design
Watch video: How Do We Use React Native at Mattermost. Architecture and Design
Today's talk is about how Mattermost uses React Native to develop their chat app. They faced challenges with multi-server support and offline support, but React Native's popularity and active community made it a good fit for their stack. They made decisions to improve reliability, such as using TypeScript and following coding rules. WatermelonDB brought scalability to their system, but also had challenges with a steep learning curve and database migrations. They use hooks for state management and native integration when necessary. They also implemented shared extensions and a portable device state feature.
WebAssembly and React: A New Era of High-Performance Web Applications
14 min
WebAssembly and React: A New Era of High-Performance Web Applications
Watch video: WebAssembly and React: A New Era of High-Performance Web Applications
WebAssembly is a binary instruction format for a stack-based virtual machine, enabling deployment of code in languages like Go, Rust, or C++ to run in the browser. It allows for efficient image compression algorithms and whole runtimes like Node.js in the browser. WebAssembly provides a capability-based security layer and eliminates the need to worry about server setup. It is already being used by well-known organizations and platforms, and continues to evolve with upcoming features such as a component model, neural network capabilities, garbage collection, and multithreading. WebAssembly modules can be used in React and as a server tool.
Virtual DOM: Back in Block
9 min
Virtual DOM: Back in Block
Watch video: Virtual DOM: Back in Block
Hi, my name is Anand Bai. I'll be talking about virtual DOM and its performance. Rich Harris argued that the virtual DOM is not as efficient as many believe, leading to the emergence of the meme that it's pure overhead. Today, I'm going to introduce something new, a new approach to doing the virtual DOM. MillionJS, a drop-in replacement for React, is significantly faster than Preact and React on benchmarks. The block virtual DOM, introduced by Block DOM, is a potential solution to existing virtual DOM libraries like React.
Deconstructing Distributed Tracing
8 min
Deconstructing Distributed Tracing
Watch video: Deconstructing Distributed Tracing
Distributed tracing is a powerful technique for tracking requests and operations in a system, especially in full stack and microservice applications. The reinvention of distributed tracing introduces the concept of a trace and spans to capture debugging data. Enhancements include tags and a status field for better analysis, and the distribution of traces using a trace context for continued tracing.
Local-first Apps with ElectricSQL and React
12 min
Local-first Apps with ElectricSQL and React
Watch video: Local-first Apps with ElectricSQL and React
Electric SQL is a local-first sync layer that allows you to build applications directly on top of Postgres using React. It provides instant results, offline functionality, and built-in multi-user collaboration. The system ensures transactional causal plus consistency and supports real-time multi-user sync and cross-platform usage. Electric SQL eliminates boilerplate code, provides a high-quality user experience, and allows for cost savings and operational simplicity.
How MDX is a game changer for your React Project's Documentation
28 min
How MDX is a game changer for your React Project's Documentation
Watch video: How MDX is a game changer for your React Project's Documentation
Good documentation is crucial and can make or break a project. Word of mouth is important in the industry, and great documentation can attract users. MDX is a powerful tool for writing documentation, allowing for customization and reuse of components. Documentation should be treated like code, with testing and continuous improvement. Responsible AI usage is important, and a balanced approach to documentation, including inline comments and different formats, should be used.
Building a Digital Sommelier on Top of ChatGPT and the OpenAI API
8 min
Building a Digital Sommelier on Top of ChatGPT and the OpenAI API
Watch video: Building a Digital Sommelier on Top of ChatGPT and the OpenAI API
Today's Talk introduces the concept of building a digital AI-powered sommelier using the Bracel.ai SDK. The speaker emphasizes the role of developers in shaping the impact of AI, particularly generative AI, on our work. The Talk showcases a simple digital sommelier built using the Resell AI SDK and OpenAI API, highlighting the ease of implementation and the potential of open source tools. The speaker encourages users to explore the possibilities of generative AI responsibly and recommends checking out And Why, a design and technology studio from Munich.
Superpowers of Browser's Web API
30 min
Superpowers of Browser's Web API
Watch video: Superpowers of Browser's Web API
Today's Talk covers various web APIs and their functionalities, including the intersection observer API, screen wake lock API, background sync API, and broadcast channel API. The speaker emphasizes the importance of optimizing performance and using standardized code to reduce application bundle size. They also highlight the need for environmental responsibility in JavaScript development. The Talk addresses handling API support and modifying code to suit different browser implementations.
How the Shadow DOM has Got You Covered?
18 min
How the Shadow DOM has Got You Covered?
Watch video: How the Shadow DOM has Got You Covered?
The Shadow DOM allows for encapsulation and composability, enabling elements to have their own features without affecting the rest of the webpage. Custom elements in the Shadow DOM have their own behavior through encapsulation and scoped styles. Composability is key in software development, allowing for dynamic data passing. The Shadow DOM provides a way to modify the appearance of elements within it, but some properties are marked as important and cannot be changed. Building a Chrome extension using the Shadow DOM allows for composable and encapsulated experiences.
How to Improve Your Web Application's Security Using Mozilla Observatory
9 min
How to Improve Your Web Application's Security Using Mozilla Observatory
Watch video: How to Improve Your Web Application's Security Using Mozilla Observatory
The Talk discusses how to improve web application security using Mozilla Observatory. It covers topics such as evaluating security headers, maintaining grade history, and implementing content security policies. The importance of securing cookies and enabling HTTP to HTTPS redirection is emphasized. The use of referrer headers to control browser behavior and sub-resource integrity to prevent compromising files are also highlighted.
Hacking an e-Reader to Show My Tea Menu With JSX
7 min
Hacking an e-Reader to Show My Tea Menu With JSX
Watch video: Hacking an e-Reader to Show My Tea Menu With JSX
React can be used to create custom menus for e-readers, and the process involves creating an image and e-book with React and loading them onto the e-reader. Writing an EPUB e-book for e-readers involves converting an SVG file into a PNG image and writing the e-book in EPUB format using HTML, CSS, and images. EPUB generators like Pandoc and Dino simplify the process of generating EPUBs from markdown and running JavaScript on the desktop, respectively.
React(ing) to WebRTC: Build Better Audio and Video Experiences with Daily React
10 min
React(ing) to WebRTC: Build Better Audio and Video Experiences with Daily React
Watch video: React(ing) to WebRTC: Build Better Audio and Video Experiences with Daily React
Imagine building your own video conferencing app in React using Daily React, a React library built on Daily's client SDK. Rendering components and user controls in the app is crucial, including joining the call, displaying participants, toggling camera and microphone, and leaving the call. Optimize hooks and add features like device pickers, screen sharing, and text chat. Find the code on daily's GitHub and documentation at docs.daily.co.
Mastering Mobile DevOps: Leveraging React Native for High Performance
8 min
Mastering Mobile DevOps: Leveraging React Native for High Performance
Watch video: Mastering Mobile DevOps: Leveraging React Native for High Performance
Today's Talk explores mobile DevOps and how React Native simplifies mobile releases. Key metrics for DevOps performance include deployment frequency, lead time for changes, time to restore service, and change failure rate. React Native allows over-the-air updates, eliminating the need for resubmission. Overdue updates offer advantages like bypassing app store validations and quick updates, but have limitations. Other options to consider are in-app models for forced upgrades, EAS Build and Submit, Repack for micro-frontends, and upcoming server components in React Native.
Panel discussion "Innovation in React"
32 min
Panel discussion "Innovation in React"
Watch video: Panel discussion "Innovation in React"
Tejas Kumar
Sara Vieira
Mark Erikson
Miguel Ángel Durán
Sylwia Vargas
Elian Van Cutsem
6 authors
The Talk discussed various topics related to React, including the wishlist for future versions, the importance of accessibility, reducing bundle size, and improving deployment. It also explored React's innovation, stability, and the role of meta-frameworks. The challenges of contributing to React's open source project were highlighted, along with the need for a more community-driven approach. The Talk concluded with a lunch break announcement.
Empathy Driven Development
29 min
Empathy Driven Development
Watch video: Empathy Driven Development
This Talk explores empathy-driven development in software engineering, emphasizing the importance of understanding and applying empathy in code reviews, communication, and team collaboration. It highlights the benefits of empathy, such as personal growth, effective communication, and high code quality, while cautioning against excessive empathy. The Talk also discusses building empathetic teams, conducting empathy workshops, and practicing empathy in interviews. It addresses language barriers, handling engineers, and the role of AI in fostering empathy.
WordPress-like Plugins, but for Next.js
Dec 12, 17:22
WordPress-like Plugins, but for Next.js
Watch video: WordPress-like Plugins, but for Next.js
This Talk discusses the implementation of a plugin system for Next.js, similar to Wordpress. The plugin system allows for the co-location of different functionalities within their own modules. Plugins can be easily added or removed without affecting other parts of the website. The Talk also showcases a demo of the plugin system in action. The key takeaways include the benefits of co-locating features, the importance of code abstraction beyond packages, and the future of copy-pasting as a means of code reuse.
A Tale of the Flip Floppers. From Engineer to Manager and Back Again
7 min
A Tale of the Flip Floppers. From Engineer to Manager and Back Again
Watch video: A Tale of the Flip Floppers. From Engineer to Manager and Back Again
This talk explores the experience of flip-flopping between being an engineer and a manager in the software development field. It emphasizes the importance of maintaining hands-on technical skills for effective engineering management. The talk also highlights the value of managers having recent technical experience and the importance of leadership from both managers and senior engineers. Overall, the talk encourages those considering a transition to management to go for it and emphasizes the unique role of an engineering manager.
The day I broke React Native
30 min
The day I broke React Native
Watch video: The day I broke React Native
The Talk discusses an incident where a React Native release caused broken builds and how it was fixed. The incident occurred due to the NPM package becoming too big, leading to the move of Android artifacts to Maven central. The use of dynamic versions and the plus dependency in React Native were identified as contributing factors to the problem. Lessons learned include the importance of removing plus dependencies and the need for better recommendations for creating resilient libraries.
Build Intelligence at the Edge - Machine Learning with React Native
13 min
Build Intelligence at the Edge - Machine Learning with React Native
Watch video: Build Intelligence at the Edge - Machine Learning with React Native
The Talk is about building intelligence at the edge with machine learning and React Native. It covers machine learning concepts, building ML models with React, challenges, best practices, and resources.
Escape Security Flaws
7 min
Escape Security Flaws
Watch video: Escape Security Flaws
The Talk discusses web security and the importance of strong code protection. It highlights a vulnerability where a weak five-digit numeric code was used, allowing easy access to sensitive content. The speaker emphasizes the need for throttling as a mechanism to prevent attacks. The company implemented throttling and blocked access to photos to improve security. However, stronger code and additional measures, such as limiting access to specific IP addresses and timeframes, are still needed.
Accelerating Design & Development Innovation with AI-driven Tools
21 min
Accelerating Design & Development Innovation with AI-driven Tools
Watch video: Accelerating Design & Development Innovation with AI-driven Tools
The Talk discusses the importance of innovation and quick iterations in solving problems. It emphasizes the benefits of blending designers and developers from the beginning and using React for component reusability. Figma's dev mode capabilities are mentioned as a tool for faster development, although it is still a work in progress.
Pushing Boundaries to the Edge
11 min
Pushing Boundaries to the Edge
Watch video: Pushing Boundaries to the Edge
Today's Talk introduces the concept of the Edge and Content Delivery Networks (CDNs), which bring content closer to users, improving performance and security. The Talk also discusses Edge Computing and Distributed Hosting (DH), which processes client data closer to the source for faster delivery of dynamic content. The use of DH offers benefits such as better performance, security, real-time insights, and scalability. The Talk concludes with an overview of Edge concepts, including server-side rendering logic and custom middleware for each request.