#best practices

Subscribe
Coding is like a piece of art — in its ideal state, it should be both functional and beautiful. But how to reach that point? Whether you’d like to make your JavaScript code cleaner or just discover how seasoned developers deal with debugging or building a product, the following tutorials will show you how to include best practices in your daily routine.
React Day Berlin 2023React Day Berlin 2023
16 min
Managing React State: 10 Years of Lessons Learned
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.
React Summit 2023React Summit 2023
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
React Summit 2023React Summit 2023
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.
React Summit 2023React Summit 2023
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.
Vue.js London 2023Vue.js London 2023
11 min
The Hidden Cost of Open Source
There is a cost that many companies don’t consider when using open source. It can cost a lot of money and time to keep upgrading sunsetted versions.Open source is free for companies to use until the author sunsets a version.These are some best practices that we we recommend when considering open source adoption:        - Who is the author? Do they have a strong reputation that is going to be around for a long time? Do they have the resources to support an enterprise library?        - How much online support is there in the community for this library? How many dependencies are on this library?        - Does it have an end of life policy? What’s going to happen when they rev on a version? Will companies have an option to stay on older versions for a long time?        - What should you consider when migrating to a supported framework after a version has been sunsetted?
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Fine-tuning DevOps for People over Perfection
Demand for DevOps has increased in recent years as more organizations adopt cloud native technologies. Complexity has also increased and a "zero to hero" mentality leaves many people chasing perfection and FOMO. This session focusses instead on why maybe we shouldn't adopt a technology practice and how sometimes teams can achieve the same results prioritizing people over ops automation & controls. Let's look at amounts of and fine-tuning everything as code, pull requests, DevSecOps, Monitoring and more to prioritize developer well-being over optimization perfection. It can be a valid decision to deploy less and sleep better. And finally we'll examine how manual practice and discipline can be the key to superb products and experiences.
React Advanced Conference 2021React Advanced Conference 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Top Content
Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well-thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions.
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
React Summit Remote Edition 2020React Summit Remote Edition 2020
32 min
AHA Programming
Top Content
Are you the kind of programmer who prefers to never see the same code in two places, or do you make liberal use of copy/paste? Many developers swear the Don't Repeat Yourself (DRY) philosophy while others prefer to Write Everything Twice (WET). But which of these produces more maintainable codebases? I've seen both of these approaches lay waste to codebases and I have a new ideology I would like to propose to you: Avoid Hasty Abstractions (AHA). In this keynote, we'll talk about abstraction and how you can improve a codebase applying and creating abstractions more thoughtfully as well as how to get yourself out of a mess of over or under-abstraction.
DevOps.js Conf 2024DevOps.js Conf 2024
26 min
Navigating the Chaos: A Holistic Approach to Incident Management
Incident management can be challenging and throw you curveballs with unexpected issues, resulting in data loss, downtimes, and overall money & hours of sleep going to waste, BUT! There are practical things you could do to make it a smoother process and handle it better.
Remember when we were at school, and people said - "Actively listening in class guarantees 50% prep for the upcoming test"?
The same goes for being proactive at work in ways that will instantly prepare you to manage incidents better (at night or in general).
In this talk, I'll cover the proactive ways you could take and incorporate into your day-to-day routine, in order to prepare you for a smoother and more efficient incident management process.
I will also show the best practices I've finalized over the years that helped me get a clear vision of how to manage production incidents in the quickest & efficient way possible.
Embracing the tips I'll give you will guarantee you'll not only talk the talk but also walk the walk when it comes to incident management.
React Day Berlin 2023React Day Berlin 2023
29 min
Crafting Pristine React: Best Practices for Maintainable Code
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 Summit US 2023React Summit US 2023
18 min
You's the Platform!
As web developers, it's sometimes easy to see "The Platform" as this thing we can't really change that does things for reasons we can't really understand. But that's not true! Browsers and specs are built by developers just like you and me, and the entire process is open source, which means we can do it too!

Let's take a journey through a real web platform improvement from start to finish, learning how the WHATWG and browser vendors work. By the end you'll know how to update a spec, write web platform tests, land a change in major browsers, and document your shiny new feature on MDN!
DevOps.js Conf 2024DevOps.js Conf 2024
21 min
Synthetic Monitoring and e2e Testing: 2 Sides of the Same Coin
Despite the emergency of DevOps to unite development, support and SRE factions together using common processes, we still face cultural and tooling challenges that create the Dev and SRE silos. Specifically, we often use different tools to achieve similar testing: case in point validating the user experience in production using Synthetic Monitoring and in development using E2E testing.
By joining forces around common tooling, we can use the same tool for both production monitoring and testing within CI. In this talk, I will discuss how Synthetic Monitoring and E2E Testing are two sides of the same coin. Furthermore, I shall show how production monitoring and development testing can be achieved for JavaScript-based applications using Playwright with Typescript, GitHub Actions and Elastic Synthetics.
TypeScript Congress 2023TypeScript Congress 2023
27 min
From Theory to Practice: harnessing Typescript for successful Atomic Design implementation
Everyone mentions the importance of code "scalability" and "maintainability" and how Typescript helps with it. But when I got started in tech, I remember struggling to find a practical "real-world" example with best practices.

My talk aims to provide such a practical, step-by-step example, sharing some of my learnings and shortcomings: crucially, how we leveraged typescript and atomic design - without over-engineering too early.ty
React Summit 2023React Summit 2023
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.
React Summit 2023React Summit 2023
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.
React Summit 2023React Summit 2023
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!
JSNation 2023JSNation 2023
21 min
Scaling Distributed Machine Learning, to the Edge & Back
This talk will cover why and how organizations are distributing data storage and machine learning to the edge. By pushing machine learning to the edge, we can geographically distribute learning so that the models will actually learn different things relevant to specific locations. By delivering both edge database and compute in a single platform, more people can transition to a distributed architecture. The performance gains from this new architecture cements the value that mobile edge computing brings.
React Summit 2023React Summit 2023
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.
React Summit 2023React Summit 2023
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.
React Summit 2022React Summit 2022
7 min
Content Modeling for React Developers
In today's world, it's no surprise that "Content is King". It helps in telling a story and helping you reach out to more people. Most of the time, developers aren't the ones managing this content. Hence, modeling content efficiently becomes crucial. Doing it well makes the content delivery process smooth for the team. But how does one go on with modeling content? What are the things that one should take care of? I'll answer such questions in this talk, and share my approach to content modeling as a React developer.
React Summit 2022React Summit 2022
25 min
Lifting Privacy and Accessibility Up
In React, Lifting State Up is a core concept. The aim of this talk is address two very important concerns in our landscape: privacy and accessibility and how we can achieve it and built in right from the components.
This talk will show my work with a little open source component ad its evolution to address privacy and accessibility with the help of community and how we as developers need to care and ship the best for our people using our tools down to the most simple component.
React Summit 2022React Summit 2022
21 min
Scale Your React App without Micro-frontends
As your team grows and becomes multiple teams, the size of your codebase follows. You get to 100k lines of code and your build time dangerously approaches the 10min mark 😱 But that’s not all, your static CI checks (linting, type coverage, dead code) and tests are also taking longer and longer...How do you keep your teams moving fast and shipping features to users regularly if your PRs take forever to be tested and deployed?After exploring a few options we decided to go down the Nx route. Let’s look at how to migrate a large codebase to Nx and take advantage of its incremental builds!
React Summit 2022React Summit 2022
23 min
Sharing is Caring: (How) Should Micro Frontends Share State?
Micro frontends architecture is extremely powerful when it comes to splitting large frontend monoliths into smaller, individually deployable blocks, each is owned by an autonomous team and is focused on a business domain. But what about State? We are often told that micro frontends shouldn't share state, as this would make them coupled to each other. However, when it comes to complex UIs, it is not rare to encounter scenarios where state management between micro frontends is necessary. This talk is about finding the sweet spot — In which scenarios it is reasonable for micro frontends to share State? and how should micro frontends share State while remaining decoupled of each other? We discuss & compare different solutions in React.
React Summit 2022React Summit 2022
27 min
Tame the Component Multiverse
Error state, loading state, awkward breakpoint, bad data, poor formatting, browser support. Every component is a multitude of challenges. How do you actually manage it? Disable the network — temporarily. Insert bad code — just for a minute. Paw at the edge of your screen. Hack local database fixtures to bits. Frontend development is a multiverse where dimensions like time and variation result in an infinite number of UI possibilities. In this talk, we'll use Storybook to progressively develop, test, document our work and tame the multiverse of our components.
JSNation 2022JSNation 2022
20 min
Building a Sustainable Codebase with FP
As software engineers we are always trying to be more productive, to deliver better code, and to have faster development feedback. In this talk, we'll explore how functional programming, tests and hexagonal architecture can perform great together in order to support a maintainable codebase for hundreds of engineers and services. Diving deeper on how we can leverage hexagonal architecture with dependency rejection in order to decouple decisions from effects, resulting in a code that is easier to reason, compose and test. The codebase is not the only one that takes advantages from that, but also the developers. It helps everyone feel more comfortable and engaged about maintaining good practices.
React Summit 2022React Summit 2022
7 min
Don't Forget React Memo
React developers intrigue us with the so-called React Forget compiler [that’s supposed to inject useMemo and useCallback into code automatically]. However, we still can't figure out best practices for useCallback, useMemo, and React.memo when we write it on our own. The worst scenario is if we continue to put it everywhere without understanding. As a result, it can bring noticeable harm to the performance of our application. In this talk, on real-life use cases, you will see solutions to the problem of using hooks wrong or overusing them!
JSNation 2022JSNation 2022
7 min
Content Modeling 101
In today's world, it's no surprise that "Content is King". It helps in telling a story and helping you reach out to more people. Most of the time, developers aren’t the ones managing this content. Hence, modeling content efficiently becomes crucial. Doing it well makes the content delivery process smooth for the team. But how does one go on with modeling content? What are the things that one should take care of? I’ll answer such questions in this talk, and share my approach to content modeling as a JavaScript developer.
TypeScript Congress 2022TypeScript Congress 2022
19 min
Onboarding React Developers to Typescript
Your team has just hired a React Developer to work on your Typescript codebase. Both your team and the new engineer are eager to start building features, but they only have experience writing Javascript. How can you quickly onboard the engineer to Typescript while still providing them with time and space needed to learn the language effectively? In this talk, we’ll discuss why Typescript fundamentals, like function types, interfaces, and generics, can be intimidating for learners. Then, we’ll walk through successful, practical approaches for teaching each of these concepts and relating them back to React. By the end of this talk, you’ll have the building blocks for creating a fruitful onboarding session for your engineers.
React Advanced Conference 2021React Advanced Conference 2021
24 min
The Legendary Fountain of Truth: Componentize Your Documentation!
"In Space, No One Can Hear You Scream." The same goes for your super-brand-new-revolutionary project: Documentation is the key to get people speaking about it.Building well-fitted documentation can be tricky. Having it updated each time you release a new feature had to be a challenging part of your adventure. We tried many things to prevent the gap between doc and code: code-generated documentation, live examples a-la-Storybook, REPL...It's time for a new era of documentation where people-oriented content lives along with code examples: this talk will guide you from Documentation Best Practices – covered from years of FOSS collaborative documentation – to the new fancy world of Components in Markdown: MDX, MDJS, MD Vite, and all.Let's build shiny documentation for brilliant people!
React Advanced Conference 2021React Advanced Conference 2021
7 min
A New Kind of Abstraction
Developers often look at abstractions as being "the closer to the metal, the better," meaning that as abstractions become further removed from the lowest possible level, the more you give up in terms of performance and features. But abstractions work as a spectrum also. We'll look at how we can adjust our view of abstractions and what kind of examples we can use to better understand that abstractions have less to do with programming and more to do with where we deploy.
React Summit 2020React Summit 2020
24 min
Accessibility as a First Class Citizen
All too often A11Y is only an afterthought and will be added to a project "when we have time" i.e. never. But there are a many reasons why you should develop with a11y in mind from the start including some that will convince The Higher-Ups. We'll explore tools we can use to help us develop more accessibly and talk about some of the quirks and limitations that React Native has.
React Summit 2020React Summit 2020
8 min
Improve Your SEO
Google announced that they will fully switch over to crawling and indexing sites using mobile-first indexing March 2021. Now for some companies their mobile site is dynamically rendered which has a high risk of decreased ranking on google once mobile-first indexing is fully implemented.
This presentation will share how to assess what changes needs to be made, best practices to increase SEO for Mobile First Indexing, how to increase performance, and how to turn parts of your site from dynamic rendering to mobile responsive in less than two months.
React Summit Remote Edition 2021React Summit Remote Edition 2021
23 min
Building the Right Product and Building It Right: Extreme Programming and Atomic Design
Have you heard about Atomic Design? How about Extreme Programming and Test Driven Development? For sure you have heard about React - a few things, I bet. In this talk you will get some insight on leveraging the power of Atomic Design to build the right product (using React, duh!) and capitalize on Extreme Programming and Test Driven Development to build it right ( exploring the React Testing Library).