#case study

Subscribe
A case study is an in-depth analysis of a particular event, situation or project. It focuses on examining the details of the subject at hand and providing an understanding of its context, processes and outcomes. In the context of JavaScript, a case study would involve researching the implementation of a specific JavaScript application or technology, such as a web framework or library, and then analyzing the results of its use. This could include exploring the advantages and disadvantages of the technology, user feedback, and any other relevant information. Case studies are useful for determining best practices and gaining insight into how certain technologies work in the real world.
Power Fixing React Performance Woes
React Advanced Conference 2023React Advanced Conference 2023
22 min
Power Fixing React Performance Woes
Top Content
Next.js and other wrapping React frameworks provide great power in building larger applications. But with great power comes great performance responsibility - and if you don’t pay attention, it’s easy to add multiple seconds of loading penalty on all of your pages. Eek! Let’s walk through a case study of how a few hours of performance debugging improved both load and parse times for the Centered app by several hundred percent each. We’ll learn not just why those performance problems happen, but how to diagnose and fix them. Hooray, performance! ⚡️
Raising the Bar: Our Journey Making React Native a Preferred Choice
React Advanced Conference 2023React Advanced Conference 2023
29 min
Raising the Bar: Our Journey Making React Native a Preferred Choice
At Microsoft, we're committed to providing our teams with the best tools and technologies to build high-quality mobile applications. React Native has long been a preferred choice for its high performance and great user experience, but getting stakeholders on board can be a challenge. In this talk, we will share our journey of making React Native a preferred choice for stakeholders who prioritize ease of integration and developer experience. We'll discuss the specific strategies we used to achieve our goal and the results we achieved.
A Practical Guide for Migrating to Server Components
React Advanced Conference 2023React Advanced Conference 2023
28 min
A Practical Guide for Migrating to Server Components
Server Components are the hot new thing, but so far much of the discourse around them has been abstract. Let's change that. This talk will focus on the practical side of things, providing a roadmap to navigate the migration journey. Starting from an app using the older Next.js pages router and React Query, we’ll break this journey down into a set of actionable, incremental steps, stopping only when we have something shippable that’s clearly superior to what we began with. We’ll also discuss next steps and strategies for gradually embracing more aspects of this transformative paradigm.
Building the AI for Athena Crisis
JS GameDev Summit 2023JS GameDev Summit 2023
37 min
Building the AI for Athena Crisis
This talk will dive into how to build an AI for a turn based strategy game from scratch. When I started building Athena Crisis, I had no idea how to build an AI. All the available resources were too complex or confusing, so I just started building it based on how I would play the game. If you would like to learn how to build an AI, check out this talk!
Video Editing in the Browser
React Summit 2023React Summit 2023
24 min
Video Editing in the Browser
Top Content
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!
Building a Voice-Enabled AI Assistant With Javascript
JSNation 2023JSNation 2023
21 min
Building a Voice-Enabled AI Assistant With Javascript
Top Content
In this talk, we'll build our own Jarvis using Web APIs and langchain. There will be live coding.
How Not to Build a Video Game
React Summit 2023React Summit 2023
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.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
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.
A Framework for Managing Technical Debt
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Top Content
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

How to Build Your Own Open Source Project
React Advanced Conference 2022React Advanced Conference 2022
16 min
How to Build Your Own Open Source Project
We all used open source projects every day such as npm packages, editors, web applications, and even operating systems... Have you ever thought of building one of your own? In this talk, I will share my journey building jest-preview, from when it was just a vague idea, to currently a well-adopted library to help frontend engineers write tests faster. I will share with you how to come up with an idea for a project to work on, what is the struggles you have to overcome as an author of an open source project, how to manage time efficiently, and how you get attention from engineers around the world.
Monolith to Micro-Frontends
React Advanced Conference 2022React Advanced Conference 2022
22 min
Monolith to Micro-Frontends
Top Content
Many companies worldwide are considering adopting Micro-Frontends to improve business agility and scale, however, there are many unknowns when it comes to what the migration path looks like in practice. In this talk, I will discuss the steps required to successfully migrate a monolithic React Application into a more modular decoupled frontend architecture.
Accessibility at Discord
React Advanced Conference 2021React Advanced Conference 2021
22 min
Accessibility at Discord
Full Stack Development Using Oracle 23ai
React Summit 2024React Summit 2024
23 min
Full Stack Development Using Oracle 23ai
This 20 min talk will discuss how to use Oracle 23ai in a full stack development environment. It will discuss the different layers of the stack, Oracle 23ai as the database, Parse Server as the Backend and React Native for Front End development. The talk will also discuss the new features offered to developers such as Vector Search, Property Graphs, JSON Duality and JavaScript Stored Procedures.
Perfect Pitch: Unveiling the Mathematical Symphony Behind a Guitar Tuner
React Summit 2024React Summit 2024
22 min
Perfect Pitch: Unveiling the Mathematical Symphony Behind a Guitar Tuner
Join me on a musical journey through the world of open source software as I share the story behind crafting from scratch an online guitar tuner with Javascript.In this talk, we'll explore the delightful intersection of mathematics and development, where a simple curiosity led to the creation of an open-source tuner using React and Next.js.I'll share insights and challenges into the implementation of the tuner, navigating through the algorithmic landscape of autocorrelation and frequency calculations.
Search Speed: Making Expedia Flights Faster
JSNation 2024JSNation 2024
10 min
Search Speed: Making Expedia Flights Faster
Performance plays a crucial role in ensuring the responsiveness and functionalities of an application. A deeper knowledge on prefetching, preemptive search, faster caching and frontend optimisations and many other performance initiatives will be learnt. 
Microfrontends in Safety Critical Aviation Systems
JSNation 2024JSNation 2024
9 min
Microfrontends in Safety Critical Aviation Systems
Are you being asked to create more frequent release with higher quality, but the team in the other office is constantly breaking your features? Microfrontends might be the answer for you! During this flight, we will fly over the pros and cons of microservices and frontend architectures, navigate the turbulent airs of migrating products to new architecture, and finally land at our destination of scalable software.
JS on the Big Screen: Making TV Apps
JSNation 2024JSNation 2024
22 min
JS on the Big Screen: Making TV Apps
The ever-expanding landscape of JavaScript applications has now reached the big screen - yes, you heard it right, you can build TV apps with JavaScript! 
The TV operating space is a mess; there’s more fragmentation than the Android ecosystem, and that’s saying something. Each manufacturer has tried to reinvent the wheel by making their own OS. At the moment, the main players are Android TV, tvOS, WebOS, Tizen, among a whole myriad of others. 
This makes it a unique place where Javascript and web technologies can become a uniting factor and save you from the stress of trying to develop and maintain handfuls of apps for the big screen. 
We’ll talk about how to build TV apps, what JS frameworks can help in this, and explore the challenges that come hand-in-hand with TV app development, namely performance bottlenecks and focus management using remote controls.
Using WebAssembly to Bring Command-Line Tutorials to Life
JSNation 2024JSNation 2024
23 min
Using WebAssembly to Bring Command-Line Tutorials to Life
This talk is a case study on using WebAssembly to power sandbox.bio, a platform for command-line tutorials for bioinformatics. We'll focus on how WebAssembly helps us provide interactive tutorials, and how it makes our application scalable and cost-effective by running computations on each user's browser instead of our servers. We'll discuss alternative architectures, their pros & cons, and lessons learned using WebAssembly.
Reverse-Engineering Everything to Get Rid of Trust Issues
JSNation 2024JSNation 2024
20 min
Reverse-Engineering Everything to Get Rid of Trust Issues
Like it or not, those days lots of things around us run on JavaScript. Web, mobile and desktop apps, TVs, fridges and space rockets - you name it! I will talk about how to put this to good use by utilizing the forbidden craft of "disassembling". We'll also talk about not knowing things, trusting facts and becoming a better engineer.
Testing: Do More With Less
JSNation 2024JSNation 2024
27 min
Testing: Do More With Less
How can you be confident that your code is well-tested? For me, the criteria are straightforward: you feel comfortable deploying it automatically to production on a Friday evening, and the release pipeline stays as green as an evergreen tree. In this talk, I'll share some approaches that I am following to hit both targets for Node.js apps (APIs, BFFs, etc).
Why Your Performance Work Is Not Seen
JSNation 2024JSNation 2024
25 min
Why Your Performance Work Is Not Seen
Between core-web vitals and profiling tools there's always one big obstacle, company buy-in. There are many ways your performance work might not be seen or prioritised. So let's talk about them.
Lessons for Building Resilient Codebases
JSNation 2024JSNation 2024
29 min
Lessons for Building Resilient Codebases
The harsh reality is that software development is messy. You start with the best tools, the best architecture and the best intentions, but quality inevitably degrades over time. Frontend code is particularly fragile in time as it sits at the intersection of product, design and engineering. A while ago I started asking myself if all codebases are destined to fail and become legacy or obsolete. Then I began collecting lessons from past wins and failures and noticed how important resilience was to the success of a long term project.
Resilience is the ability of a codebase to survive through waves of chaotic development and unplanned changes. Resilience has less to do with the tools and frameworks you deploy, and more to do with the discipline of writing and maintaining clean code. Have you ever wondered how much work will be required to update the code you are writing today, 6 months from now? Let's see if we can answer that with a simple: "not too much".
Learning To Learn : How To Web Dev The Right Way With Vue If You Are A Beginner
Vue.js Live 2024Vue.js Live 2024
8 min
Learning To Learn : How To Web Dev The Right Way With Vue If You Are A Beginner
It is not common that people trying to break in to web dev literally learn to start from HTML/CSS or "create xyz" workflows where 25 files pop up all of a sudden after you run one command and there's no way to comprehend what just happened. Learning should be crafted and tuned to one's way of learning else we are all just dogs pretending to be sheep in a horse stable(literally not absurd at all). We will explore how I went from oh marquee is cool(it still is,believe me) to being a person that could build web apps with people having web dev experience equal to my age. I'll share my learnings, findings, lessons, how to and especially what to learn and most importantly where do I start (the most common beginner question) and why mentorship is important.We'll talk about (in no specific order)- How and why(like really why) to start learning;- Choosing the right speed and mentor;- Choosing the right framework(welp, this is gonna turn heads) and why this matters and why it should be Vue;- Struggles and lessons learned(Rome, built, one day sorts...);- What you should know before you really decide now based on above experiences about getting into this wibbly wobbly web stuff.
To App or Not: When to Choose Native or Web
React Day Berlin 2023React Day Berlin 2023
23 min
To App or Not: When to Choose Native or Web
In today's landscape, deciding between building a native app or a web app can significantly impact your project's success and user experience. As technology advances and user expectations continue to evolve, the decision-making process becomes increasingly complex. Let's dive into the key considerations that can help you determine what is right for you, a native app or a web app. We'll also look at real-world examples of apps and examine the reasons behind their choice of development approach.
React(ing) to WebRTC: Build Better Audio and Video Experiences with Daily React
React Day Berlin 2023React Day Berlin 2023
10 min
React(ing) to WebRTC: Build Better Audio and Video Experiences with Daily React
What is WebRTC (Web Real-Time Communication), its main challenges, and how does the combination of React + Daily solve for them? We'll take a deep dive into specifics like React audio and video media elements and Daily React components and hooks. You'll even walk (or code?) out knowing how to build a video grid in just two minutes. 
Empathy Driven Development
React Day Berlin 2023React Day Berlin 2023
29 min
Empathy Driven Development
Empathy-driven development empowers developers to create software that truly understands and serves users' needs. This talk explores practical techniques for integrating empathy into the development process, leading to more intuitive, user-friendly applications. Learn how cultivating empathy can foster collaboration, improve code quality, and ultimately enhance user satisfaction. Join us to unlock the transformative potential of empathy in your development journey.
What I Learned About Software Quality From The 10 Most Popular Javascript Projects On Github
TestJS Summit 2023TestJS Summit 2023
27 min
What I Learned About Software Quality From The 10 Most Popular Javascript Projects On Github
It is very common for teams to have code review processes and this usually happens through pull requests. Each comment represents a step towards improving the quality of the software, however, there is a wide variety of points of view. The seniority of the team, the team itself, the company, the time left, the mentality, internal agreements, all of this impacts the way of reviewing code.

As a tester, I need to understand what happens in the code and when reviewing it, to identify flaws in the development process and improve my testing strategy.

In this talk, I will bring the results of research I carried out analyzing the comments contained in pull requests from the 10 most popular GitHub projects created in Javascript and bring some insights related to what I discovered. Among them: are which software quality characteristics are most exercised by Devs, which are weak points in their development process, where we can improve our tests to anticipate failures, and tools that can be used to test more comprehensively, among others.
React Server Components from Scratch
React Summit US 2023React Summit US 2023
29 min
React Server Components from Scratch
React server components (RSCs) are a huge paradigm shift for React. You might even ask if NextJS and server components are the same thing (spoiler: they're not!) This talk demystifies how RSCs *really* work outside the framework. We'll build our own Node server, hook up the RSC renderer by hand, and understand the bundling and routing logic to ship a server component to your browser. Yes, all with live coding. What could go wrong...?
Journey Into the Unknown: My Adventure Unravelling the Mysteries of the Netflix TVUI Universe
React Summit US 2023React Summit US 2023
30 min
Journey Into the Unknown: My Adventure Unravelling the Mysteries of the Netflix TVUI Universe
At Netflix, millions of our users watch Netflix on TV Devices. How do we develop the UI for all of the different types of devices? That's exactly what I wanted to know! I'll be sharing why it's important to take on new growth opportunities, how to navigate the difficulties of learning a whole new platform at a new company, and some of the things I've learned about how we use React to bring Netflix to your TV!
Let’s Build a TV Spatial Navigation
React Advanced Conference 2023React Advanced Conference 2023
18 min
Let’s Build a TV Spatial Navigation
In this talk, I'll take you through my journey as I joined the team supporting our Smart TVs application and share my experience learning one of the most overlooked but essential pieces of functionality we have.
Local-First Software With ElectricSQL
React Advanced Conference 2023React Advanced Conference 2023
29 min
Local-First Software With ElectricSQL
Local-first is a new paradigm for developing apps, where your components talk to a local embedded database and you get instant reactivity, multi-user sync and conflict-free offline support built in. ElectricSQL is a new, open-source, platform for local-first development from the inventors of CRDTs. This talk introduces local-first development and shows how you can develop real-world local-first apps today with React + ElectricSQL.
Real-Time Collaborative State on the Edge
React Advanced Conference 2023React Advanced Conference 2023
26 min
Real-Time Collaborative State on the Edge
Practical talk showing how to go from a local state to an on-the-edge offline capable persisted state to make an app like Figma, Notion, and more.
Implementation of Schedules and Timelines
React Advanced Conference 2023React Advanced Conference 2023
6 min
Implementation of Schedules and Timelines
Planby is a React based component for a quick implementation of Schedules, Timelines, Electronic Program Guide, Music/Sport events, Calendar Planner  and many more ideas.  It uses a custom virtual view which allows you to operate on a really big number of data. The component has a simple API that you can easily integrate with other third party UI libraries. The component theme is customised to the needs of the application design.
Hacking an e-Reader with React
React Advanced Conference 2023React Advanced Conference 2023
7 min
Hacking an e-Reader with React
I wanted to have a tea menu to show guests and for my own reference. Turns out e-Readers use so little power and can render HTML! I'll share how to generate an e-book with all your drinks with React using Deno, as well as rendering a custom cover page with SVG. Wow your friends by turning an old device into a smart home tea menu, and learn how to write your next book with React.
Feature Flagging With React
React Advanced Conference 2023React Advanced Conference 2023
27 min
Feature Flagging With React
Decouple your releases from deployments, while maintaining full engineering control of your application.
Superpowers of Browser’s Web API
React Advanced Conference 2023React Advanced Conference 2023
23 min
Superpowers of Browser’s Web API
When writing code for the Web, there are a lot of capabilities that are offered out of the box by our browsers. If you ever wrote a File Upload component, used timers and intervals, interacted with the DOM, or stored something in the Local/Session Storage, you had to go to the MDN’s Web API docs, to find some relevant information on how to implement that code.
In this session, we will delve into the exciting world of browser Web APIs that are not so commonly used (although they should be) and explore their incredible capabilities 🚀
All these features offer new opportunities for creating immersive web experiences that can help businesses grow and connect with customers.
So if you are the kind of an engineer who wants to stay ahead of the curve when it comes to web development, learn how Intersection Observer, Background Sync API, Screen Wake Lock API (and many more) can help you create better web applications that will keep users engaged and coming back for more!
Thinking Differently About a11y – Accessible Website Design for the Neurospicy
React Advanced Conference 2023React Advanced Conference 2023
30 min
Thinking Differently About a11y – Accessible Website Design for the Neurospicy
Did you know that approximately 1 in 7 people are neurodivergent? Within that group there is an entire spectrum of people whose brains process information differently. However, as frontend engineers we often forget to take these idiosyncrasies into account, or choose to simply apply industry standards such as WCAG 2.1 AA without digging deeper. In this talk, Steph shares some of the ways you can create better web experiences for the neurodivergent.
The Rocky Journey of Data Fetching Libraries in React’s New Streaming SSR
React Advanced Conference 2023React Advanced Conference 2023
28 min
The Rocky Journey of Data Fetching Libraries in React’s New Streaming SSR
If you use the Next.js app directory, you might not even have noticed it, but you are not only using React Server Components, but you are also using the new streaming SSR feature of React.That means that on first page load, your Client Components will now be server-side rendered, suspense boundary by suspense boundary, and constantly streamed to the client, where they are rehydrated piece-by-piece.
If you combine that with suspense for data fetching in your client components, you will suddenly be facing hydration mismatches - as your client components will start fetching data on the server, but the data will not be transported to the client.
In this talk, I will go over the rocky journey that we had to go through to support suspense for data fetching in Streaming SSR with Apollo Client, looking at all the curious timing problems that come up with these technologies, and how we try to solve them as best as we can - always with the best possible user and developer experience in mind.
Leveraging the Event Loop for Blazing-Fast Applications!
React Advanced Conference 2023React Advanced Conference 2023
35 min
Leveraging the Event Loop for Blazing-Fast Applications!
Some weeks ago I made my own implementation of signals, capable of updating 300k times the DOM in circa 600ms. Leveraging the Microtask Queue, I was able to bring that number down to 6ms, effectively improving performances by 100x. I wanna share how the Microtask Queue works and how you can leverage the Event Loop to improve performances.
From Theory to Practice: harnessing Typescript for successful Atomic Design implementation
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
Taming Language Models through TypeScript
TypeScript Congress 2023TypeScript Congress 2023
26 min
Taming Language Models through TypeScript
You've probably played with bots like ChatGPT and used them to brainstorm. Maybe you've noticed that getting responses in the right structure or format has been a challenge. As people, we're okay with that - but programs are much more finicky. We've been experimenting with using TypeScript itself as a way of guiding and validating responses from language models.
How Grafana Uses React to Power the World of Observability
React Summit 2023React Summit 2023
7 min
How Grafana Uses React to Power the World of Observability
Why does Grafana use React for its frontend?
How we leverage React’s features at Grafana
What are some pain points we have ran into with using React at Grafana
What are lessons learned from adopting React for the past 5+ years?
Visual CMS… cool for React devs? Now’s the time!
React Summit 2023React Summit 2023
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)
Overcoming Performance Limitations in React Components for Low-end Devices
React Summit 2023React Summit 2023
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.
WHOA, I Wrote This React App With My Voice!
React Summit 2023React Summit 2023
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.
The Future Stack of Code Review
JSNation 2023JSNation 2023
22 min
The Future Stack of Code Review
Somehow, the code review had the same jokes and process while the software development world changed daily. Join us to learn how to adapt this process to the modern stacks and make the CR process an efficiency party.
Using PKCE to Communicate Between React and Native Mobile SDKs
React Summit 2023React Summit 2023
8 min
Using PKCE to Communicate Between React and Native Mobile SDKs
It’s important to have a frictionless, secure, and performant authentication system for any app, be it web or mobile. In this lightning talk, Itai Hanski covers the importance of authentication and how the Descope team used PKCE to communicate between their React web app and native mobile SDKs.
No CRA? What now?
React Summit 2023React Summit 2023
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.
How to Become a Fintech Developer in Seven Minutes
React Summit 2023React Summit 2023
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.
Moving on From Runtime Css-In-Js at Scale
React Summit 2023React Summit 2023
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.
Federated Microfrontends at Scale
React Summit 2023React Summit 2023
31 min
Federated Microfrontends at Scale
Top Content
The talk will be a story of how Personio went from rendering through a Monolithical PHP architecture, to a microfrontend oriented Next JS app, powered by Module Federation and the NX monorepo toolchain.
Accessible Component System Through Customization
JSNation 2023JSNation 2023
30 min
Accessible Component System Through Customization
Most current UI libraries provide great user experience with a vast of components. But when it comes to heavy customization, and non-standard scenarios, especially for E-Commerce, they become hard to manage, scale or even slow down performance.
How to create a UI library that provides users the most possible freedom in customizing components, while keeping our performance and scalability to the fullest? How much accessible we can provide out of the box to our users? How much customization freedom is enough?
That's what my talk's about.
Maintaining a Component Library at Scale
JSNation 2023JSNation 2023
9 min
Maintaining a Component Library at Scale
This talk is about an example approach on how to organise maintenance across multiple teams, where we talk about how we came to this plan at Jumbo and what benefits it brings to the Developer Experience while being able to continuously deliver features to our customers.
We're dealing with maintenance, ownership, adding small features, upgrading from Vue2 to Vue3 and the culture that supports this way of working.
Bun, Deno, Node.js? Recreating a JavaScript Runtime From Scratch
JSNation 2023JSNation 2023
28 min
Bun, Deno, Node.js? Recreating a JavaScript Runtime From Scratch
Bun, Deno, and many other JavaScript runtimes have been hype, but do you know why? Is it that easy to make a runtime from scratch?
I've been researching the secret behind Node.js' power and why there are so many new JavaScript runtimes coming up. Breaking down each key component used on Node.js I've come to interesting conclusions that many people used to say whereas in practice it works a bit differently.
In this talk, attendees will learn the concepts used to create a new JavaScript runtime. They're going to go through an example of how to make a JavaScript runtime by following what's behind the scenes on the Node.js project using C++. They'll learn the relationship between Chrome's V8 and Libuv and what makes one JavaScript runtime better than others.
Why Scaling Bottom-up? How Teams’ Interactions Should Impact the Organizational Structure
TechLead Conference 2023TechLead Conference 2023
17 min
Why Scaling Bottom-up? How Teams’ Interactions Should Impact the Organizational Structure
We all have been through companies’ reorgs, probably more than once. If some are understandable and produce good outcomes, others aren’t — creating insecurities, lack of confidence in leadership, unnecessary changes, and even more complex paths of communication or decision-making. What is the difference, then? Is there a well-proven way of scaling or changing the current landscape of companies’ organizations? Yes, there is. In this session I’ll go through, supported by an actual study case in the industry, Conway’s Law and the importance of teams’ landscape and interactions, and how well-designed teams charts can improve independence, autonomy, motivation of the teams, leading to a faster and better rate and quality of delivery.
The Rewrite Trap
TechLead Conference 2023TechLead Conference 2023
22 min
The Rewrite Trap
Let's throw away everything and start fresh. Sounds great, right? While this can feel very good it rarely speeds up anything. I'll show you why a complete rewrite is usually not what you want.
Purpose: What I Learned from Stepping Down as Team Lead Twice
TechLead Conference 2023TechLead Conference 2023
8 min
Purpose: What I Learned from Stepping Down as Team Lead Twice
I know developers feel doubts of choosing the IC role over a manager or vice versa. I'll tell about my own road how to find own purpose doing things I like.
What Engineering Leaders Should Know About DevRel (But Were Too Busy to Ask)
TechLead Conference 2023TechLead Conference 2023
21 min
What Engineering Leaders Should Know About DevRel (But Were Too Busy to Ask)
The field of developer relations or DevRel is rapidly increasing in popularity, with roles for developer advocates, evangelists, program managers, and directors appearing seemingly everywhere. It could very well be that you too have colleagues who work in the field. DevRel is a unique discipline aligned with every part of the business from engineering and product, to marketing, and even sales, and acts as a bridge between the company and the wider developer community. Our aligned incentives with engineering leadership are especially obvious in the fact that we exist to serve and enable developer audiences, whether external or internal.For engineering teams, working closely with your DevRel teams provides a great opportunity to better understand your developer audiences, raise the profiles and skills of your colleagues, and make your company more attractive for hiring. Yet, despite many DevRel teams being highly technical, because of DevRel’s perceived lack of focus, our departments are often dismissed as “just marketing” by engineering.In this talk I will answer the question of “what is it that DevRel people do”, and present some approaches for how DevRel and engineering can best collaborate and break down silos to benefit everyone, from the company to the wider developer community.


Building Figma’s Widget Code Generator
React Advanced Conference 2022React Advanced Conference 2022
19 min
Building Figma’s Widget Code Generator
Widgets are custom, interactive objects you place in a Figma or Figjam file to extend functionality and make everything a bit more fun. They are written in a declarative style similar to React components, which gets translated to become a node on the canvas. So can you go the other way, from canvas to code? Yes! We’ll discuss how we used the public Figma plugin API to generate widget code from a design file, and make a working widget together using this.
Making a Splash: The Story of a Toilet Map Migration
React Advanced Conference 2022React Advanced Conference 2022
24 min
Making a Splash: The Story of a Toilet Map Migration
The Great British Public Toilet Map is an open source, community driven project dedicated to helping people find toilets across the UK, with around 14,000 loos recorded and counting. In 2021 we took on the challenge of migrating the project from a SPA React app written in JavaScript to NextJS and Typescript. Together we'll discover why we decided it was time to migrate, the myriad technical challenges we faced along the way, how this work benefits our users, and the many exciting plans we have for the future.
Lessons Learnt While Creating a New Framework on Top of React
React Advanced Conference 2022React Advanced Conference 2022
20 min
Lessons Learnt While Creating a New Framework on Top of React
React is so powerful that it can be used for more than frontend development. E.g. creating UI programmatically in the backend using a rule-based system or machine learning is another use case where React can serve as the best fit. Similarly, documentation earlier used to have only .md files but now it also includes .mdx file that contains React code. To fulfill such use cases, developers need to understand the internals of React and the tooling around it. Some great sources are popular codebases such as create-react-app, Next.js, etc. In this talk, I will share the lessons we learnt while creating a framework that achieves more than web development using React. Firstly, I will cover how create-react-app codebase is the best codebase to understand how webpack, babel, eslint, typescript etc. can be used alongside React. Secondly, I will share how Next.js teaches us to create a js framework where we can write backend and frontend in the same file and still be able to separate the two during calls. Thirdly, I will share how our framework supports plugins, i.e. the React code resides in multiple repositories but all of this code can share a single React runtime inside the browser. This is a very advanced use of React that cannot be achieved by code splitting using React.lazy. This talk will enable developers to use React for more than frontend development.
Building a Lightning-Fast Site with Next.js, GraphQL and Tailwind ⚡️
React Advanced Conference 2022React Advanced Conference 2022
9 min
Building a Lightning-Fast Site with Next.js, GraphQL and Tailwind ⚡️
Next.js has grown in popularity over the past couple of years with features like server-side rendering, incremental static regeneration, image optimization, and more. Next.js is known as the production ready framework for React. In contrast, GraphQL is known for not just returning data for what you need with good schema design practices but also a good dev experience. In this talk, I’ll talk about how one can build an app that not just scales but also has high performance with Next.js, GraphQL and Tailwind. And Lastly, the future of CSS and Frontend development is building utilities, so CSS does not feel like an afterthought. At the end of this talk, you will learn how to go from making a sample app to a highly performant production-ready application.
Arrows (At Length)
React Advanced Conference 2022React Advanced Conference 2022
23 min
Arrows (At Length)
Love linking lines? Join me in considering the humble arrow as both a programming problem and a user experience challenge. In this talk, I'll present the many complex problems and solutions that I've encountered when working with arrows in my open source library perfect-arrows and later in tldraw (tldraw.com). With a narrow scope and plenty of animations to guide the way, we'll look at intersections, arrow heads, arrow head angles, and all of the different user interface issues behind authoring and adjusting arrows between shapes, other shapes, and points.
How I Test a Million UI States with Every Merge — Visual Testing with Storybook
React Advanced Conference 2022React Advanced Conference 2022
29 min
How I Test a Million UI States with Every Merge — Visual Testing with Storybook
Error state, loading state, awkward breakpoint, bad data, poor formatting, browser support. Every component can result represent hundreds or thousands of discrete visual states. How do you test it? Manually 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 has so many dimensions. Time and variation result in an infinite number of UI possibilities. In this talk, we'll use Storybook to progressively develop, test, and document our work — automating the grunt work of UI development.
AG Grid's New React Rendering Engine
React Advanced Conference 2022React Advanced Conference 2022
6 min
AG Grid's New React Rendering Engine
AG Grid is the industry standard JavaScript datagrid for building data centric Business Applications. Recently the AG Grid team redesigned the grid to implement the React Rendering Engine in 100% React code. Given the complexity of a datagrid, this was a very challenging task. Hear from Sean, Lead Framework Developer at AG Grid, about the journey of this migration including how this was achieved, lessons learned along the way, and how it will impact your React applications using AG Grid.
Back to the Future
React Advanced Conference 2022React Advanced Conference 2022
30 min
Back to the Future
Everything old is new again. But this time we have the lessons of the past to guide us into the wild unknown. Sunil wants to revisit a few older ideas, and mix them up with the new capabilities of the edge and the web platform, and see if we can 10x the applications we build today.
The Journey of CodeSandbox Projects
React Advanced Conference 2022React Advanced Conference 2022
25 min
The Journey of CodeSandbox Projects
CodeSandbox Projects is the new version of CodeSandbox that enables the workflow of CodeSandbox today, but for projects of any size. During this talk, Ives will share the story of how Projects was created, and how we made it technically possible to build Projects.
Find Out If Your Design System Is Better Than Nothing
React Summit 2022React Summit 2022
20 min
Find Out If Your Design System Is Better Than Nothing
Building a design system is not enough. Your dev team has to prefer it over one-off components and third-party libraries. Otherwise, the whole effort is a waste of time. Learn how to use static code analysis to measure if your design system wins over the internal competition and data-driven ways to improve your position.
Don't take it Personally, it is Personalization
React Summit 2022React Summit 2022
22 min
Don't take it Personally, it is Personalization
"Personalization" is right now one of the hottest buzzwords in the development world. Marketers, developers, and content creators evaluate the possibilities and alternatives to handle custom scenarios while offering powerful experiences to the users. Let's talk about personalization, the benefits, the challenges, and how we can manage and offer personalized experiences. We will see code examples using some of the features introduced in Next.js 12, the newest version of the framework, and connecting to Storyblok, a Headless CMS that offers a real-time visual editor.
Large scale projects challenges (NextJS - Contentful)
React Summit 2022React Summit 2022
20 min
Large scale projects challenges (NextJS - Contentful)
NextJS is an excellent full stack framework. Contentful is a well-known flexible headless CMS. Together are a great match, but when we talk large scale projects the challenges are completely different than the ones you may face in a small to medium scale project. Leonidas will try to raise your awareness on such challenges based on Greece's experience on redesigning Vodafone's site to create beautiful self-serve and guided journeys for Vodafone customers.
Introducing Design System to Multinational Web Apps
React Summit 2022React Summit 2022
18 min
Introducing Design System to Multinational Web Apps
I will walk through the process of my team introducing design system to our company's web applications that are built separately in different countries - UK, US, Germany, Spain and Japan. After that, I will add a practical guide to set up a design system for a project.
Multiple apps, one code to rule them all
React Summit 2022React Summit 2022
20 min
Multiple apps, one code to rule them all
More and more, React is being used for complex apps that accommodate numerous types of users, workflows, and mechanics. Sometimes it’s different people who each use part of the app, but a single-user multi-workflow scenario isn’t uncommon as well.In this session, we’ll learn about our options when building multiple experiences within a single React app — without losing our sanity. I’ll use some examples from what we do at Wilco.
Finding Stealthy Bots in Javascript Hide and Seek
JSNation 2022JSNation 2022
11 min
Finding Stealthy Bots in Javascript Hide and Seek
JavaScript has a lot of use cases - one of them is automated browser detection. This is a technical talk overviewing the state of the art automated browser for ad fraud, how it cheats many bot detection solutions, and the unique methods that have been used to identify it anyway.
You Do Have Time to Build it Twice
React Summit 2022React Summit 2022
21 min
You Do Have Time to Build it Twice
Top Content
If you don’t have time to build it right, when will you have time to build it twice? In hyper growth startups the old adage breaks down. You get an expanding time horizon – IF you can get it shipped. An imperfect feature next week beats the perfect feature 2 months from now. Your code won’t matter if you’re dead. I didn’t believe this until I saw it myself. A startup on the cusp of hockeystick hired me to rewrite their jQuery app in React. Their tech proved the idea then became a burden. Over the next year we rewrote the whole app from scratch, grew a team of React experts, created a codebase that’s a joy to work with, and got the company to a $100,000,000 Series B. All because the early engineers knew that if the crappy version works out, there’s going to be time and resources to fix it later. This talk is about what I’ve learned while rewriting an app with users banging down the door.
Localization for Real-World Use-Cases: Key Learnings from Onboarding Global Brands
React Summit 2022React Summit 2022
8 min
Localization for Real-World Use-Cases: Key Learnings from Onboarding Global Brands
i18n isn't easy, but with careful planning of your content model I'll show you how to structure the setup, authoring, and querying of localized content. Covering whole-or-part translated documents, the difference between market and language-specific content, ways to author that in a CMS like Sanity, and ways to query for it on frontends like Next.js and Remix.
How React Applications Get Hacked in the Real-World
React Summit 2022React Summit 2022
7 min
How React Applications Get Hacked in the Real-World
React has a great security standard as default, but if you don’t pay close attention to the details you could get burned by some of the escape hatches APIs, or even by just passing props insecurely to components. I’ll teach you how to avoid these pitfalls.
5 Years of Building React Table
React Summit 2022React Summit 2022
24 min
5 Years of Building React Table
Top Content
Join me as a I dive into the history of React Table and discuss everything it’s taught me (both successes and failures!) since I built the first component-based version 5 years ago. We’ll cover tons of sub-topics including, but not limited to: .... takes a breath ... Headless UI, React Hooks, Advanced TypeScript, Branding & Naming-Things, Build Pipelines, Open Source Software, API Design, React/JavaScript performance and even Framework Agnostic Tooling!
Automatically maintaining thousands of code demos across multiple framework variations
JSNation 2022JSNation 2022
7 min
Automatically maintaining thousands of code demos across multiple framework variations
At AG Grid, we maintain thousands of code demos, with the same demo in Angular, React, Vue, and Vanilla JS. Additionally, each framework has different variations covering JavaScript, TypeScript, Modules, Packages, Hooks, Classes, Vue 2, and Vue 3. How do we do it? We automate. This session will explain how we start with a single TypeScript version and automatically convert it to every combination we need and finally use Cypress to test the converted example.
Plug-in architecture: how TypeScript let us paint-by-numbers
TypeScript Congress 2022TypeScript Congress 2022
15 min
Plug-in architecture: how TypeScript let us paint-by-numbers
Adding a new feature to an unfamiliar codebase can be painfully slow. What if you could lean on TypeScript to guide you?

At Snyk plugin architecture is a common pattern to extend language support across different products and codebases. Adding TypeScript to the mix has allowed us to add new features quickly and it can be as simple as painting by numbers when it comes to extending the code.

Join me as we create a simple library using plugin architecture and follow the trail of TypeScript hints to add a new feature. 
Making Multiplayer Games with Colyseus, Node.js and TypeScript
JS GameDev Summit 2022JS GameDev Summit 2022
31 min
Making Multiplayer Games with Colyseus, Node.js and TypeScript
Top Content
By interacting with the Colyseus community over the past few years, some fundamental questions (not necessarily connected with the framework) seem to appear time and time again when developers start to build their own multiplayer games. This talk is going to cover some of these questions, as well as the most common scenarios and techniques you can start using today when building your own multiplayer game.
Semantic Search through the Complete Wikipedia with Weaviate’s GraphQL API
GraphQL Galaxy 2021GraphQL Galaxy 2021
17 min
Semantic Search through the Complete Wikipedia with Weaviate’s GraphQL API
Weaviate uses GraphQL to provide user-friendly data interaction. Weaviate is an open-source vector search engine, and all searches (e.g. semantic, contextual) are done via its GraphQL API. We’ve put a lot of thought into the design of the GraphQL API, which results in good user and developer experience. In this talk, I will take you along in the journey of how our GraphQL implementation was shaped according to user needs and software requirements, and show a demo of the current design for Weaviate. The demo will show how Weaviate’s GraphQL design enables semantic (vector) search in combination with scalar search through unstructured data. Machine learning models are used in the background, but with the current GraphQL design, users without a technical background can query the vector database easily.
Weaviate has a modular architecture, so users can connect various machine learning models on top of the vector database. Examples are the newly released Question Answering module and the Named Entity Recognition module. Modules can extend the GraphQL schema dynamically, to query the new features intuitively.This presentation contains a demo where we will query the complete Wikipedia, conduct semantic search queries and more. All through Weaviate’s GraphQL API. No prior knowledge is required.
So Now You Know: Learnings on People, Product and Culture from Hypergrowth at Snyk
React Advanced Conference 2021React Advanced Conference 2021
8 min
So Now You Know: Learnings on People, Product and Culture from Hypergrowth at Snyk
Everyone wants ‘hyper growth’, to be the organisation that is backed market investment and interest - but what is the reality of getting there? What challenges does it provide in terms of people, leadership, system and scale? This talk will explore Snyk’s journey so far from its founding in 2015 and exponential growth in the last 18 months culminating in its Series F funding this past September. Exploring some of the key principles of culture, leadership and recruitment on this hyper growth journey, we will share some of our lessons learned from our experiences so far.
Debugging a Non Reproducible Crash
React Advanced Conference 2021React Advanced Conference 2021
20 min
Debugging a Non Reproducible Crash
POV: Your app has a crash affecting thousands of users, but for the life of you, you can't reproduce it and have no idea what's causing it. Hear the story of an epic struggle to vanquish a non reproducible bug and learn what to do (and what not to do) when facing such a foe.
How Hopin is Moving 10x Faster: Microfrontends at Scale
React Advanced Conference 2021React Advanced Conference 2021
25 min
How Hopin is Moving 10x Faster: Microfrontends at Scale
Hopin is the fastest-growing startup in the world. Many engineers join every month. Companies with different technologies are acquired every other month. It brings many challenges to our front-end architecture. In this talk I'll explain how we're breaking up our React monoliths and enabling interoperability using multiple React trees and reactive variables.
Components, Patterns and sh*t it’s Hard to Deal with
React Advanced Conference 2021React Advanced Conference 2021
29 min
Components, Patterns and sh*t it’s Hard to Deal with
Everyone has a pattern library or dreams about having one. We went through conversations and the codification of our visual dictionary and then we ended up with a beautiful living document.But what happens when we need to re-use our components and they don’t fit in the design? How do we re-use our patterns in slightly different use cases?We have all the tech to make a front end really modular, we have techniques and methodologies which enabled us avoiding the bad parts of the languages we use. Every part of the puzzle seems to be falling in the right place.Yet, sometimes we are struggling in handling the variations of our patterns in a reliable and maintainable way. Our codebase is getting filled with exceptions and overrides and refactoring of base patterns becomes impossible.Not a recipe for success, more of a way to frame the problem, identify some ideas we tried and re-discuss the way we approach componentisation.
How Coinbase Rewrote the App in React Native
React Advanced Conference 2021React Advanced Conference 2021
30 min
How Coinbase Rewrote the App in React Native
Last year, our team rewrote the Coinbase app from Android/iOS Native to React Native. The new app was launched successfully and with higher quality. The native engineers were re-platformed to React Native, and our productivity has increased. The talk will share our journey from the start of the transition, how we mitigate the risks, and the lessons learned.
Make legacy code delightful with statecharts
React Finland 2021React Finland 2021
22 min
Make legacy code delightful with statecharts
If you must have legacy code, you want it written in statecharts. We'll break down the mental models required for understanding unfamiliar UI code, and compare the maintenance costs with and without statecharts.
Designing with Code in Mind
React Summit Remote Edition 2020React Summit Remote Edition 2020
30 min
Designing with Code in Mind
For years I've been a designer who codes and I believe that designing with code or with a coding mindset can help your team to be more productive. In this talk, I'm exploring this concept and showing my daily workflow that can probably help to bridge the gap between devs and designers.
Designing Boardgames and How Tech (and React) Can Help
React Summit Remote Edition 2020React Summit Remote Edition 2020
8 min
Designing Boardgames and How Tech (and React) Can Help
ING’s Journey in Building and Deploying Frond-end Code
DevOps.js Conf 2021DevOps.js Conf 2021
8 min
ING’s Journey in Building and Deploying Frond-end Code
Within ING we have been dealing with JS/FE for quite some years now. Starting with nothing we evaluated the CI/CD process for this, via multiple stages into what it is right now. I will go along these stages to inspire you to create a similar process for your own company.