June 2 - 6, 2023
React Summit
Amsterdam & Online
React Summit 2023

The biggest React conference worldwide

FocusReactiveAg GridMUIWix CoduxTinyDescopeKontent.aiReact BricksContentfulRangleRapydJetBrainsShopifyChromaticGitHubThe GraphCallstack
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
26 min
Principles for Scaling Frontend Application Development
After spending over a decade at Google, and now as the CTO of Vercel, Malte Ubl is no stranger to being responsible for a team’s software infrastructure. However, being in charge of defining how people write software, and in turn, building the infrastructure that they’re using to write said software, presents significant challenges. This presentation by Malte Ubl will uncover the guiding principles to leading a large software infrastructure.
23 min
React Concurrency, Explained
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar
32 min
How Not to Build a Video Game
In this talk we'll delve into the art of creating something meaningful and fulfilling. Through the lens of my own journey of rediscovering my passion for coding and building a video game from the ground up with JavaScript and React, we will explore the trade-offs between easy solutions and fast performance. You will gain valuable insights into rapid prototyping, test infrastructure, and a range of CSS tricks that can be applied to both game development and your day-to-day work.
24 min
Video Editing in the Browser
Video editing is a booming market with influencers being all the rage with Reels, TikTok, Youtube. Did you know that browsers now have all the APIs to do video editing in the browser? In this talk I'm going to give you a primer on how video encoding works and how to make it work within the browser. Spoiler, it's not trivial!
26 min
Server Components: The Epic Tale of Rendering UX
Server components, introduced in React v18 end these shortcomings, enabling rendering React components fully on the server, into an intermediate abstraction format without needing to add to the JavaScript bundle. This talk aims to cover the following points:1. A fun story of how we needed CSR and how SSR started to take its place2. What are server components and what benefits did they bring like 0 javascript bundle size3. Demo of a simple app using client-side rendering, SSR, and server components and analyzing the performance gains and understanding when to use what4. My take on how rendering UI will change with this approach
29 min
Improving Developer Happiness with AI
GitHub Copilot is an AI pair programmer that can help you write code faster and spend less time writing repetitive code.This session will cover some interesting use cases for Copilot that could shine a light on its possibilities. This ranges from prompting Copilot to suggest a function based on a comment, learning how to use a new framework, tackling a security or accessibility bug, better documenting your code, translating  code from one language to another, etc.Agenda:
Introduction to CoPilot
- What is Copilot
- How can you use it
- How it can help you write code faster
- Copilot Labs experimental features I will pick examples from the React ecosystem and show how we can fix Security Vulnerabilities and Accessibility issues in some components.
29 min
Moving on From Runtime Css-In-Js at Scale
In this talk, Siddharth shares the challenges his team faced with optimising runtime css in js (styled-components) for performance. At GitHub, there are about 4000 React components that contain styles, Siddharth dives into the reasons for rethinking styling architecture, the challenges faced and lessons learned by migrating a big application.
28 min
You Can’t Use Hooks Conditionally… or Can You?
It’s the hooks rule number one: “Only call hooks at the top level”.
But what if I told you that this rule does not apply to every hook? One of them can actually safely be used conditionally. 
To understand how useContext is different from other hooks, and why it is exempted from this major rule, we need to know why this rule exists in the first place. We will build our own mental model of react’s rendering behavior, focused on how react keeps track of data at runtime: props, states, refs… and context values.
21 min
Optimising Images in Web and Native
It's safe to say that a lot of websites and apps these days are heavily reliant on images: product images, avatars, social sharing. With continued technological advances, the variety of device sizes you need to support keeps growing. How exactly are we to make the same page look great and feel performant on both a 16'' MacBook Pro with a retina display as well as a small 5 year old Android phone? We will look at some of the modern approaches to tackle just this problem on web and native - as well as what happens if you don't.
30 min
Making Interactions Accessible to All Users
Are your websites accessible to all users? Are all the users able to interact with your application as intended regardless of their disabilities? Accessibility often remains an afterthought even today, and I am here to share how we can change that. In this talk, we will explore best practices for designing and building user interactions for websites that are accessible and user-friendly for our users. Using semantic HTML and ARIA attributes, we will cover strategies for interaction from a simple button, to navigation, to different form elements and custom components.
31 min
Should You Use React in 2023?
Meta frameworks are increasingly popular. People dunk on React all the time. Are you insane for still using React? The talk is going to cover how real companies make this evaluation of which framework to choose. It's talking about the advantages of using React, primarily focusing on the positives but also offering constructive thoughts on why you might not want to.Should you use React in 2023?
29 min
Supercharged Code Refactoring via Abstract Syntax Trees
When refactoring large code bases, Find and Replace even with Regexes, can only get you so far. When that fails don’t fallback to painful manual updates instead reach for Abstract Syntax Trees (AST). In this session we introduce AST’s and show how they can be used to reason about / generate code. You will leave with a greater understanding of how you can automatically update code and new insights into how code linters work under the hood. 
9 min
Building Pixel-Perfect UI Components Using CSS Variables
CSS variables have become so sophisticated in recent years that they now enable us to do things that aren't possible with JavaScript. In this lightning talk, I'll explain how MUI's engineers are leveraging the power of CSS variables in our new React component library, Joy UI, to deliver components that automatically adapt their style and structure to the context in which they're rendered.
25 min
Supercharging React Apps with WASM
WASM has taken over the web-development scene in the past few years. It is a language that can be run by the web platform alongside with Javascript. Being treated as a target language, a variety of low-level, statically-typed languages such as C++ and Rust can be compiled to WASM. Thus, a variety of complex, computationally intense applications can now be tackled through readily available web applications. Demos of 2 such applications are shown in the presentation and a side-to-side comparison is done next to JS code.
7 min
How to Become a Fintech Developer in Seven Minutes
Developers play an essential role in integrating and monetizing financial services. In this lightning talk, we will explore the concept of embedded fintech and its use cases. We will then dive into a demo showing how to set up and integrate financial services using the Rapyd API. By the end of this talk, attendees will have a clearunderstanding of how to get started integrating fintech into applications. With clear instructions on how to get started, this talk will provide developers with the knowledge and resources they need to get started as fintech developers in just seven minutes.
7 min
No CRA? What now?
So CRA is no more and it probably was about time. The React docs suggest Next, Remix or Gatsby...but you're not ready yet for a full-blown React Meta-Framework and really just want pure React. Any alternatives? In this talk, I'm going to explore exactly that. We've got 7 minutes, so no slides, just code where we're going to set up a new React standalone application using Nx.
28 min
Advanced GraphQL Architectures: Serverless Event Sourcing and CQRS
GraphQL is a powerful and useful tool, especially popular among frontend developers. It can significantly speed up app development and improve application speed, API discoverability, and documentation. GraphQL is not an excellent fit for simple APIs only - it can power more advanced architectures. The separation between queries and mutations makes GraphQL perfect for event sourcing and Command Query Responsibility Segregation (CQRS). By making your advanced GraphQL app serverless, you get a fully managed, cheap, and extremely powerful architecture.
25 min
Off with Their Heads: Rise of the Headless Components
Aren't You Tired of Repeating Yourself? Tired of repeating the same code over and over again in your React projects? In this talk, we'll discover the power of headless components, a design pattern that separates the logic from the presentation layer, allowing you to create reusable and flexible UI components.
We'll explore how headless components can simplify your development process, saving you both time and effort. We'll examine popular headless component libraries and provide tips for integrating them into your projects. Whether you're a beginner or an experienced developer, join us to discover how headless components can help you streamline your React development and create high-quality, customizable UIs.
9 min
WHOA, I Wrote This React App With My Voice!
Have you ever imagined writing code without even touching the keyboard? In this talk, I'll show you how I wrote a React app with my voice. But more importantly, I'll demonstrate how this technology can developers with disabilities to write code with ease and efficiency. Together, we'll explore the ways in which voice-activated AI assistants can revolutionize the way we think about coding. Join me as we explore the exciting possibilities of voice-activated AI programming in the React community and the ways in which it can make React coding more accessible and fun for everyone.
9 min
Overcoming Performance Limitations in React Components for Low-end Devices
In this session, I will discuss our experiences in overcoming performance limitations while developing React components for web apps on low-end embedded devices such as Smart TVs. I will share actual application cases from the development of millions of webOS Smart TVs and show how we improved user input response and app launch time. The ideas and techniques shared will be beneficial to developers facing similar challenges.
9 min
Pushing Boundaries To The Edge
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.
20 min
Improve Your Website's Speed and Efficiency with Partytown
Unleash the full potential of your website with Partytown! Say goodbye to sluggish pages and low Lighthouse scores caused by clunky third-party scripts. With Partytown, your main thread is dedicated solely to your code, freeing it up to run smoother, faster, and more efficiently than ever before. Empower your website with lightning-fast performance by moving all non-critical scripts to a web worker, where they’ll run seamlessly in the background. Get ready to blast off to the next level of web performance with Partytown!
7 min
Code Signing React Native Apps
You've built a React Native app and now it's time to get it in the hands of your users. If you're used to web, dealing with mobile-specific deployment issues can be a struggle. There are native build hardware and config requirements, signing certificates, app store approvals, app versions, pushing updates, and more. You also have to consider all the tooling options -- do you manually deploy on your own, use a React Native-specific solution, or try to configure web CI/CD for mobile? This crash course will outline the build and ship process and review some common tools in the React Native ecosystem so you can feel confident deploying and get back to developing.
10 min
Go From Zero To Hero: Be Cross-Platform Devs With React Native
We know if we have the fundamental of JavaScript and React knowledge, we can build cross-platform apps. But how many of you have tried out? Learning once and shipping for several operating systems sounds so cool. Don’t you want to experience how it’s easy to transfer your JS & React knowledge and powerful built-in APIs to extend your dev skills? In this talk, we’ll see some facts from a developer perspective and a few examples of how you can transfer your JS & React knowledge.
11 min
Giving Superpowers to Your React Apps with Machine Learning
Have you ever questioned whether Javascript is a viable alternative to Python or R for creating machine learning models? After all, a 2019 survey by Stack Overflow found that Javascript is the language that developers use the most. Given that machine learning models like neural networks require a lot of computational power and that javascript was not intended for high-speed computing, this approach seems unreasonable. But hold on, this not entirely true, as javascript libraries like Onnx.js and Tensorflow.js are here to save the day! I'll be going into further detail on how to create intuitive and innovative machine learning applications with React in this talk.
8 min
Visual CMS… cool for React devs? Now’s the time!
1. A brief history of web content management since 1996, with alternating code and visual tools:
   - The “FTP” era: Code editors > FrontPage/Dreamweaver
   - The “monolithic” era: CGI/ASP/PHP simple CMSs with gray tables > WordPress visual > WordPress with ACF
   - The “current” era: Headless CMSs <> Visual tools like Wix and WebFlow
2. Why now’s the time we need a new kind of CMS
3. What is React Bricks
4. The experience for content editors (explained by a customer’s content editor)
5. The experience for developers (explained by a partner agency’s web developer)
22 min
Thinking in React Query
In this talk, I'll explain React Query from a different perspective. After having maintained React Query for over two years and having answered many questions (often the same ones multiple times), I feel like there might be a fundamental understanding missing about the lib. I'll start with a quick introduction about my journey into open source and how I got to know React Query, followed by showing which mindset change is beneficial when working with React Query - how to "think in React Query". I'll have 3 major takeaways: 1) React Query is not a data fetching library It's an async state manager, we'll quickly talk about what makes a state manager, why React Query is one and what "async state" means. 2) staleTime is your best friend I've seen a bit of confusion about how to use React Query as a state manager, so I'll explain why setting staleTime is mostly all you need 3) parameters are dependencies This is important to understand to show the boundaries between client state and server state, and is essential when doing state management with React Query I will then end with a note on "separation of concerns" and about the tradeoffs of just calling `useQuery` wherever you need it in your component tree.
12 min
Canaries in the CloudFront
* intro to DB application architecture (gateway + backend, multi-module react app + component library, etc)
* Deep dive into CI/CD pipeline to do component library build + publish, app deploys pre canary (branch, dev, staging, prod), Lambda@Edge role
* Side  note - multi module applications, enabling the right level of modularity, and B2B SaaS vs B2C
* First canary problem - run full FE regression against stable (release candidate) backend early and often - before FE release candidates are cut
* Second canary problem - run pointed FE regression even earlier - before MRs are even merged
* Third canary question - what does this look like in production? Once again, B2B SaaS vs B2C
* End result - Canaries in the CloudFront! 
8 min
Zod === Typescript, but at Runtime in Your React Applications
In this talk, I want to show how we can use Zod to guarantee the type in a React Application at runtime. Environment variables, HTTP requests, forms and so on could create troubles in our applications, mainly if they contain unexpected types. Using Zod, we can create schemas to guarantee the types expected in our editor at runtime. In this way, we can react quickly when an environment variable misses or when someone changes the API contract without informing us.
A small validation layer in our applications can prevent a bad user experience and notify us immediately, so we can fix the problem as soon as possible and mitigate the visualization of wrong data.
20 min
Scaling React-Three-Fiber Applications beyond the Hello World
A lot of recent talks at other conferences have talked about how to start using React and THREE.js to create 3D experiences on the web. In my career I've built several complex applications using those technologies, including a big Figma-like 3D editor, and I've learnt a lot of patterns and tricks on how to make it actually fast and scalable. Unfortunately, though, nobody is also talking about those tricks an what it really takes to build an rendering engine similar to the one that Figma uses.
My goal with this talk is to give people an overview of the challenges that may arise when you try scaling your application, and what are some lesser known tricks to overcome them: instancing, memory usage reduction techniques, SDF-based text rendering, GPGPU and tree data structures. Everything of course done with Javascript, React and THREE.js.
8 min
Tired of Tech? Hit Reset with a Sabbatical or LOA
Tech is tiring. Whether you’re trying to stay upskilled on the latest JavaScript framework or wading through toxic work swamps, it feels like burnout is constantly looming on the horizon. Sabbaticals and leaves of absence (LOAs) are two benefits you could take advantage of to catch a much-needed (and overdue) extended break. I’ve taken both, one time to live abroad in France for 6 months and the other time to take the summer off for 10 weeks, both at different Fortune 500 companies and each time they moved my career forward, not backward. I’ll walk through step-by-step how to figure out if you’re eligible for these benefits, break down the implications to insurance and job security in plain language, and illustrate some strategies on bridging the income gap so you can sleep at night. By the end you’ll walk away with the confidence to finally give yourself permission to reset and get excited about tech again.
9 min
Synthetic Monitoring and E2E Testing - 2 Sides of the Same Coin
Over the last few years, there has been a great focus on shifting tests left to earlier in the software development cycle. It's great that the emergence of trends such as e2e testing has enabled us to validate the user workflow earlier. However, they do not eliminate the need to monitor this workflow against a live production system. I have seen that the segregation of development and support teams leads to both teams using different tools to build similar automation that simply targets different environments of the same software.
By joining forces, we can build automated scripts that can be used both for production monitoring and testing within CI. In this talk, I will discuss the causes of this cultural divide, and why this needs to change for us to shift user testing both left and right. Furthermore, I shall show how this can be achieved using Playwright and Elastic Synthetics and also chat through the challenges you may face shifting left and right.
11 min
Our Journey Into μFrontends
Building products using Test Driven Development with React and Atomic Design has become my modus operandi over the years. Some products tend to grow in complexity and it is crucial to have a good workflow to keep them healthy and scalable. The time has come to add another player to the game - enter Micro-Frontends. This talk will share a practical example of this setup, some lessons learned and the bumps that were hit to get there.
24 min
GraphQL in 2023 - Still Relevant?
With fetching libraries like TanStack Query, swr, or RTK Query becoming more widespread, some of the immediate “selling points” of GraphQL clients seem to be less unique - so it might be a good idea to take a step back and ask the question “is this even still relevant?”. And to already take the answer away - it is “yes”. The unique selling points of GraphQL go far beyond having a smooth data fetching experience by solving many inter-team and architectural problems. While it might not always be immediately evident as a benefit for us as Frontend Developers,  GraphQL gives us a lot of freedom and makes us less dependent on backend teams implementing a Backend-for-the-frontend for us. Also, while data-fetching libraries have made it a lot easier to work with REST nowadays, GraphQL still has properties that are just not present in traditional REST APIs, and on top of that GraphQL has kept evolving. New directives like @live or @defer enable developers to create a fantastic user experience with very little work - especially when combined with React’s new suspense features.
6 min
How (The Heck) Did We End Up Here?!
Web development has changed significantly over the past 15 years, and we'll take a satirical look at how daunting it is for newcomers to get started nowadays. In doing so, we'll discuss what is necessary to build a full web application, and I will be going over most of the technology I personally like to use for that.
9 min
useMachineLearning… and Have Fun with It!
Machine learning is seen by many as the next step in artificial intelligence towards a new stage of human evolution. And thus helps us find new approaches to solving real-world problems. Phew... That sounds complex… And how is that supposed to be fun? Well, in addition to the big issues of our time, it is ultimately just another tool that we can play with. While it is important to first understand the core concepts of machine learning, we can quickly go way beyond that. Get ready for some unexpected examples of how to get started with machine learning in your React application!
8 min
Bringing Controversial Ideas to React
Join me in a thought-provoking discussion on Bringing Controversial Ideas to React.js, where we will explore some of the most debated topics in the React ecosystem. This talk delves into the concepts of mutability and observability in React and compares them to frameworks like Solid.js and Svelte. We will also discuss the debate on granular updates versus Reconciler and the potential of a plugin system to extend React applications, and the impact it could have on the React community. Attendees will gain a deeper understanding of React's challenges and controversies compared to other frameworks and how the community is addressing them.
7 min
10x Your Teamwork Through Pair Programming
Selena and Michael will take you on a roller coaster journey of how to get started and get the most out of pair programming. Live on stage they will switch from conversational overview straight into acting out various highs, lows, do’s and don’ts of pair-programming collaboration. Laughs and tears are guaranteed as the audience connect on the difficulties and ultimately the rewards that can be reaped from teamwork through effective pairing.
30 min
It's 2023 and I Can Finally Talk About Atomic CSS
Libraries like Tailwind became quite popular and their utility-first—aka atomic classes—approach was an interesting paradigm shift in CSS. Many developers love it, and it's understandable why.However, we tend to forget that the core of this technique isn't new. Way before Bootstrap, we all had our small CSS snippets copied from project to project with similar classes.In this session, we'll discuss the evolution of scalable CSS, walk through the limitations and drawbacks of Atomic CSS, and also figure out where this concept can be beneficial.
7 min
The Rise of Modern Transactional Stack
Databases and transactional backends are the heartbeats of our everyday lives - they power nearly every transaction in the modern world, from booking airplane tickets to ordering food on Doordash. The status quo of powering these transactions today is building on top of a microservices-heavy architecture -- by leveraging caches and queues to preserve transaction state and OLTP that guarantees idempotency and consistency. The next evolution of this stack is replacing cache/queues with a central orchestrator -- workflow engines like cadence and conductor. This all happened in what we traditionally call "the backend", but a new stack is emerging for the Javascript world: more and more greenfield projects are written only in Javascript/Typescript, and this group of projects share a unique stack unlike what we have seen previously. The presentation will dive into the history and evolution of platform shifts, and focus on the most exciting transactional problems presented in the modern monoliths world that's edge-native, 100% Javascript -- and argue why the word "serverless" is out of date :)
24 min
Extending React Using Astro
We'll start out by taking a look at Astro; What is Astro, why does it exist and what problems does it solve. How can we optimise our React application / components by using Astro? Let's do some live coding and start out exploring Astro in combination with React! Main talking points: - What is Astro - Astro integrations - React in Astro - Partial Hydration - Server Side Rendering vs Server Side Generation
11 min
Is My React Web App Ready for Launch?
If you need a launch checklist as a frontend engineer, this is the talk you should attend. Before launch of an applications one needs to make sure that load testing and performance testing, user tracking, FE error tracking, security testing for FE, along with other such checks are done and dusted. Learn about these 11th hour activities and what tool set can come handy.
8 min
Making Impossible States with fp-ts and TypeScript in a React Application
Types and Functional Programming are a great combination to get feedback quickly about types that don't make sense and compose functionality to get a desired result. fp-ts is a very powerful library that provides the tools to work with types and functional programming in an outstanding way. Let’s see it in action in a React Application to make it more type safe and composable by defining impossible states that will reduce the possibility of edge cases in our application.
7 min
Meet Your New BFF: Backend to Frontend without the Duct Tape
Even with all of the incredible frameworks available today vs. a decade ago (or even two––for devs who have been around as long as I have), it still feels like much of our work as fullstack developers is still repetitive, and held together by duct tape code we shouldn’t be writing.  This is because we write a lot of duplicate and boilerplate code for everyday things such as simple database CRUD, data validation, authorization, and data-type conversions, but the majority of these tasks haven’t advanced at the pace of modern web architecture.  In this live coding session we'll turn a front-end React app into a fullstack app with code that is easy to write, follow, and, most importantly - maintain with end-to-end typesafety (say no to GraphQL!), consistent and encapsulated validations, live querying, access control, secured APIs, you get the idea. You’ll come away from this session able to build apps for modern web architecture while still maintaining our code DRY and increase productivity while you’re at it through a fully open source and common [React / Vue etc.] stack.
8 min
The Path Through Legacy: Delicate Balance Between Tolerance and Phobia
As a front-end teamlead, I was faced with the challenge of transitioning multiple legacy projects, which happened rapidly and was a painful process. One of the main issues I encountered was dealing with a legacy project that had no documentation. I had to figure out how to stabilize it, put it in order, and reduce the cost of its maintenance and development.
31 min
Tuning Retro Video Archives for Display on the Modern Web using WebGL in React
- Background on why retro video archives need custom scaling - Implementing a WebGL video player canvas in React with custom hooks - Bundling WebGL shaders from separate files for GLSL syntax highlighting - Live Demonstration of applications for footage from retro video game consoles, VHS tapes, etc
9 min
The Future is Composable: Where to Start in Building for It
Composable architecture is changing the trajectory of the web as we know it. In this session, Netlify Senior Solutions Engineer Henry Smith will offer a deep dive into how adopting a composable architecture can help create more agile, adaptable and scalable web applications. He will explain why the future of the web is composable, share real-life examples of teams building dynamic web experiences, and cover common challenges in going composable and how to tackle them.
11 min
Get Rid of Your API Schemas with tRPC
Do you know we can replace API schemas with a lightweight and type-safe library? With tRPC you can easily replace GraphQL or REST with inferred shapes without schemas or code generation.
19 min
Development History of Zustand
In this talk, I will talk about how I joined the development of Zustand. It started with another library of mine, which is similar to Zustand. My involvement was from Zustand v3 and it's currently v4. Philosophy of Zustand is being small, and we improve it with keeping the philosophy. Finally, we compare Zustand with Jotai, which is another state management library that I develop.
12 min
I Run Code From the Internet!
Is it wise to run code from strangers? Well, we do it all the time and there's no backing out of it. Let's take a look at how a JavaScript project could get hacked and then defend itself from supply chain attacks. Limit access to globals for each package? Sure. Control if a package can access network or file system? Yup, that too. And no more install scripts or prototype pollution.
11 min
Secrets in Source Code - How Your JS Code is Exposing Your Credentials
Secrets like API keys are constantly leaking through source code. The 2021 State of Secret Sprawl report found over 6 million secrets in public git repos. This presentation reviews the new, unreleased, 2022 State of Secrets Sprawl report focusing on how JavaScript source code specifically leak secrets.
7 min
Config Driven UI using ReactJS
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.

18 min
How To Build a Chrome Extension Using React
Last year, as part of my work at Bloomberg, I was tasked with building a Chrome Extension, and persuaded my team to let me build the extension in React instead of vanilla JavaScript. This had several advantages, such as making the code more maintainable and easier to understand, as well as enabling us to use a pre-existing component library for consistent styling across the company, reducing the amount of CSS code we had to write. In my presentation, I will show you a sample Chrome Extension for personal use that I built using React and Material UI that auto-responds to emails sent in Gmail and allows you to take notes regarding the conversation. I will also share steps to build your own Chrome Extension using React, and lessons learned along the way!
19 min
7 TypeScript Patterns You Should Be Using
In this talk, we will be going over a number of common useful and best-practice-proven TypeScript patterns to use in React 18. This includes how to correctly type component properties, children and return types, using React's built-in types, typing contexts, and the usual enum rant (but constructively).
22 min
React Myths And Legends
The talks explore various misleading patterns and concepts in React, that seem to be “common knowledge”, but which a lot (if not most) developers either get wrong or are just not aware of those. Some examples, covered in the talk (and more):
* that “react component re-renders when its props change” (this is not true)
* that wrapping a component in React.memo will prevent its re-render (not always true)
* that use of Context causes re-renders and is bad for performance (not always true, sometimes Context can actually reduce the number of re-renders in the app)
* that creating an element like this `const A = <Child />` is when the Child's render lifecycle is triggered (not true)