The Visual Future of State Management

David Khourshid

Measuring and Improving React Native Performance

Alexandre Moureaux

VS Code Can Do That!

John Papa

Modern Web Debugging

Debugging with Chrome DevTools

Jecelyn Yeen

Unlocking TypeScript's Potential: Exploring the Power of Ecosystem Tooling

Lizz Parody

I See What is Going on: Visual Testing for Your Components

Gleb Bahmutov

Beyond Virtual Lists: How to Render 100K Items with 100s of Updates/sec in React

Flipper: The Extensible DevTool Platform for React Native

Michel Weststrate

Visualising Front-End Performance Bottlenecks

Richie McColl

Advanced linting rules with ESLint 

Tibor Blenessy

Improving Developer Happiness with Preview.js

François Wouts

Supercharging Developer Productivity With Advanced Code Search

Prosper Otemuyiwa

React, TypeScript, and TDD

Paul Everitt

Static Analysis in JavaScript: What’s Easy and What’s Hard

Elena Vilchik

pnpm – a Fast, Disk Space Efficient Package Manager for JavaScript

Zoltan Kochan

Tale of Two Repos 

Tally Barak

Building Better React Debugging with Replay Analysis

Mark Erikson

High-Speed Web Applications: Beyond the Basics

Michael Hladky

Bringing the Power of AI into your Editor with GitHub Copilot

Krzysztof Cieślak

The Future of Performance Tooling

Addy Osmani

Building Figma’s Widget Code Generator

Jenny Lea

Understand Your Codebase to Innovate Faster

Simon Waterer

All You Need Is a Contract…

Daniel Afonso

How TypeScript is integrated in your editor

Maria Solano

Break the Race: Easy Race Condition Detection for React

Nicolas Dubien

Real-Time Collaborative State on the Edge

Steven Fabre

Trees aren't just Foliage: ASTs and Practical Usage

Chris Griffing

Durable Objects - Everything Everywhere All At Once For Not Very Much Money

Jani Eväkallio

JavaScript to Wasi Enabled Wasm: Portable JavaScript Composition

Natalia Venditto

JS Nation

JSNation 2023

Few developers enjoy debugging, and debugging can be complex for modern web apps because of the multiple frameworks, languages, and libraries used. But, developer tools have come a long way in making the process easier. In this talk, Jecelyn will dig into the modern state of debugging, improvements in DevTools, and how you can use them to reliably debug your apps.

JSNation 2022

Our understanding of performance &amp; user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.

DevOps.js

DevOps.js Conf 2022

You will learn about one of the most popular package managers for JavaScript and its advantages over npm and Yarn.<ul><li>A brief history of JavaScript package managers</li><li>The isolated node_modules structure created pnpm</li><li>What makes pnpm so fast</li><li>What makes pnpm disk space efficient</li><li>Monorepo support</li><li>Managing Node.js versions with pnpm</li></ul> <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

DevOps.js Conf 2024

JavaScript is no longer a language confined to the browsers. New standards are enabling fully portable, lightweight runtimes, to make JavaScript the definitive language for isomorphic applications. Let's explore use-cases, some experimental, some consolidated, to take our Wasm game with JavaScript, to the next level.

React Day Berlin

React Day Berlin 2023

Cloudflare's Durable Objects are a new JavaScript runtime that makes building stateful, on-demand backend servers on the edge as easy and cheap as serverless functions. By colocating compute and state, Durable Objects melt complexity at scale, and allow you to focus on building your product.In this fast-paced talk we'll live code a real-time backend from scratch, show how Durable Objects work, and explore how you can apply this versatile tool to a wide range of everyday engineering problems.

Race conditions are among some of the most challenging to detect and reproduce issues. As such they pose a significant challenge in development notably in UI. In this talk, we explore how to detect race conditions by leveraging fuzzing techniques. We walk you through discovering the real problem of race conditions and how they impact user experience. We provide you tools and examples demonstrating how to easily detect them in your daily work thanks to tests relying on fuzzing. After that talk, we hope your React code will be race conditions free or at least that you will have the right tools to help you.

React Summit US

React Summit US 2023

ASTs are prevalent in everything we do. ESLint, Typescript, etc allow us to dive into our source code in a way we might not be familiar with. Let's take a look at how some modern tools use ASTs to improve our lives as developers. Some of the tools to be covered include: TS-Morph, Typescript, TreeSitter, and ESlint. Depending on time, I can dig into various tools and patterns for working with ASTs and how they can fit into any modern developer workflow.

React Advanced

React Advanced Conference 2023

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.

React's component model and one-way data flow give us a great mental model for building our apps, but debugging React apps can still be confusing. React's internals are a black box, and it's often hard to understand why components rendered or what caused errors. The Replay time-travel debugger makes it easier to debug React apps by letting you inspect what's happening at any point in time. But what if we could go beyond the usual debugger features, and build new debugging features that tell us more about what React is doing? Let's see how Replay's API makes that possible.

How many times have you had to wait for your backend team to finish building the API so you can start your tasks? What if all you needed to move that task to in progress was the API contract? What if there was a library that did this for REST and GraphQL APIs and, at the same time, taking your tests to the next level? Join me and prepare to enhance your developer experience while learning all the battle-earned experiences of using one of my favorite libraries: Mock Service Worker.

TS Congress

TypeScript Congress 2023

This talk will explore more advanced ways to write static analysis rules in ESLint using ESLint's control flow APIs. I will quickly explain what a control flow graph is and how you can use it to find issues in your code. I will show you how to detect when a value is assigned to variable uselessly and other logical problems you can detect using this technique.

Dive into the world of TypeScript ecosystem tooling and uncover the transformative capabilities that can supercharge your development workflow. In this talk, you can discover essential tools for project setup, code analysis, testing, and deployment. Also, learn how intelligent code editors, formatters, and linters improve code quality. Finally, let's explore type checkers, static analyzers, and refactoring tools that enhance codebase maintainability, TypeScript libraries and frameworks, and witness their seamless integration with bundlers, task runners, testing frameworks, and CI pipelines. Don't miss this talk to unleash the full potential of TypeScript and maximize your productivity with the extensive ecosystem of tools at your disposal and that you probably didn't know!

How can an editor ""automagically"" show type errors when you create a single TypeScript file without running ""npm install typescript"" or having a tsconfig.json file? Is a completion list build by your coding editor, TypeScript itself, or some other mysterious being? What is TSServer? In this talk I will give you an overview of how the TypeScript server communicates with IDEs and other editors, delivering rich language features without ever running tsc.

We are all using static analysis tools like ESLint every day to ensure the better quality of our code. How does it work, and what is tricky about JavaScript, making writing a proper rule often not trivial?

Node Congress

Node Congress 2023

Not all monorepos are made the same, and not all teams are equal. Managing a monorepo is way more than just ""let's select this tool or that tool"". It comprises many design decisions that you need to make for the product and for the developers.  In this talk, I will go over the main monorepos challenges - packages installation and linking, development and deployment processes - and describe the possibilities that exist for each stage.  At the end of the talk, you will have a simple and powerful model that will help you in making the right choice of tools and processes for your monorepo.

React Advanced Conference 2022

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.

The transition from a monolithic architecture to a service based approach began a number of years ago. The advantage of a service based approach is to increase agility and shorten the build and release development cycle. And more recently the rise of micro frontends means that this approach not only encompasses backend application but also frontend development. However one side effect is increased complexity of the codebase. Resulting in challenges in terms of visibility into how components relate, who owns a component and the impact of activities on dependent components. This session will touch on these challenges and what is needed to maintain individual developer velocity.

React Summit

React Summit 2022

A look into Preview.js, an open-source extension for Visual Studio Code, IntelliJ and WebStorm that lets you preview individual React components instantly, updated as you type.

The web has several tools to measure performance, but what about us, React Native devs? Have you ever added some optimization in your code (like a memo here and there) and wondered if it had a real impact on performance?Presenting a Flipper plugin to measure React Native performance, with a concrete case of how we used it to bring our app performance to the top quality.Bonus: a deep dive into React DevTools flame charts!

Knowing how to run performance tests on your web application properly is one thing, and putting those metrics to good use is another. And both these aspects are crucial to the overall success of your performance optimization efforts. However, it can be quite an endeavor at times for it means you need to have a precise understanding of all the ins and outs of both performance data and performance tooling. This talk will shed light on how to overcome this challenge and walk you through the pitfalls and tricks of the trade of Chrome DevTools, providing you with a complete roadmap for performance analysis and optimization.

GitHub Copilot is an AI pair programmer tool that puts the collective knowledge of millions of developers right at your fingertips, directly in your IDE.During the talk, Krzysztof, a core team member behind GitHub Copilot, will demo how Copilot works and discuss the design principles used while creating the project.He will also dive into some of the project's technical details - how Copilot communicates with its AI, what ""queries"" it uses, how it processes responses, and how it integrates with various IDE to create characteristic Copilot's UX.

React Advanced Conference 2021

There is generally a good understanding on how to render large (say, 100K items) datasets using virtual lists, …if they remain largely static. But what if new entries are being added or updated at a rate of hundreds per second? And what if the user should be able to filter and sort them freely? How can we stay responsive in such scenarios? In this talk we discuss how Flipper introduced map-reduce inspired FSRW transformations to handle such scenarios gracefully. By applying the techniques introduced in this talk Flipper frame rates increased at least 10-fold and we hope to open-source this approach soon. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Google &amp; Facebook Engineers are able to search over their gargantuan codebase using an internal code search engine. The search engine accelerates the ability of their developers (both old &amp; new) to understand any part of their codebase &amp; start contributing immediately! What about the rest of us? In this talk, I'll walk through the different types of code search, tools &amp; software, and advanced tips &amp; tricks to navigate any type of codebase easily. With the advent of large code repositories and sophisticated search capabilities, code search is increasingly becoming a key software development activity. Every developer in the world that spends an insane amount of time reading rather than writing code should have access to the best code search tools that amplifies their productivity. The audience will walk away with everything they need to confidently onboard, navigate &amp; understand any small, medium-sized and daunting codebase. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

JSNation Live

JSNation Live 2020

Many modern web frameworks use components as their building blocks. In this talk, I will show component testing using Cypress - and I mean "show" literally. You will see the component running inside a real browser, you will interact with the component like a real user, and you can debug the component using the real browser's DevTools. Finally, I will go through the current open source and commercial options for visually testing the component's styles and rendering. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Summit 2020

Are you a React Native developer? Have you always been longing for the rich ecosystem of developer tooling that exists for the web in e.g. Chrome and Firefox? Flipper is Facebooks internal, extensible mobile devtool platform, used the mobile devs that work on the Facebook, WhatsApp, Instagram and many more apps. Recently the React Native and Flipper team have been working hard to add first class support for React Native as well. This means that monitoring network traffic and performance, using the React Devtools, inspecting device and application logs or even debugging JavaScript can now can now be conveniently done using one coherent tool. And best of all: Flipper is extensible, so let's build our own plugin while at it! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

There are many ways to measure web performance, but the most important thing is to measure what actually matters to users. This talk is about how to measure, analyze and fix slow running JavaScript code using browser APIs. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

JSNation Live 2021

Jecelyn will share some tips and tricks to help you debug your web app effectively with Chrome DevTools. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How do you debug so easily in VS Code? How do codespaces work? What are those key combinations to edit code so quickly? What extensions are the ones I shouldn't code without? Get ready to hit the ground running in this fast-paced, demo-heavy talk that takes you through some of the best and most effective tips and tricks in VS Code. Learn how to setup your environment and customize it the way you like it. You'll walk out with several tips on how to be more efficient with one of the hottest tools on the Web today! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Learn about state modeling with state machines and statecharts can improve the way you develop application logic, and get a sneak peek of never-before-seen upcoming visual tools that will take state management to the next level. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported. The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials. React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#devtools