TS Congress

TypeScript Congress 2023

I'll dive into the internals of Nuxt to describe how we've built a TypeScript-first framework that is deeply integrated with the user's IDE and type checking setup to offer end-to-end full-stack type safety, hints for layouts, middleware and more, typed runtime configuration options and even typed routing. Plus, I'll highlight what I'm most excited about doing in the days to come and how TypeScript makes that possible not just for us but for any library author.

Making Magic: Building a TypeScript-First Framework

Daniel Roe

React Summit

React Summit 2023

React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning? In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests. Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn

Designing Effective Tests With React Testing Library

Josh Justice

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 Concurrency, Explained

Ivan Akulov

React Advanced

React Advanced Conference 2022

React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering

A Guide to React Rendering Behavior

Mark Erikson

Writing fluid user interfaces becomes more and more challenging as the application complexity increases. In this talk, we’ll explore how proper scheduling improves your app’s experience by diving into some of the concurrent React features, understanding their rationales, and how they work under the hood.

Deep Diving on Concurrent React

Matheus Albuquerque

React Summit 2022

I want to provide an in-depth overview of the important concepts behind reconciliation. We'll then explore how React uses the algorithm and go through a few magic words we hear a lot, like coroutines, continuations, fibers, generators, algebraic effects and see how they all relate to React.js.

Inside Fiber: the in-depth overview you wanted a TLDR for

React Summit Remote Edition

React Summit Remote Edition 2021

The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Hooks Tips Only the Pros Know

Maurice de Beijer

React Advanced Conference 2023

Our ecosystem can be overwhelming! First, we had the rise of SSR and SSG—and each had its own gigantic pile of frameworks and tools. Then partial hydration enabled us to hydrate only some of our components on the client, which we've seen in React Server Components.  But what about islands? Do they relate at all to Streaming SSR? Moreover, what is resumability, and why do I keep hearing about it? […] Oh, did anyone say rendering on the Edge? Well… There are many approaches out there, and all of them argue that their philosophy is best. In this session, we’ll go over these architecture/rendering patterns, to help shed some light on how some are implemented and the concepts behind them.

Hydration, Islands, Streaming, Resumability… Oh My!

You must or must not have heard of object proxies before, but have you ever understood how to use them? What the actual usecase of an object proxy is? In this talk, we will do a deep dive into object proxies, understanding how they work, and the kinds of things you can build using them. We will build higher-order wrappers for existing libraries, and learn how to wrap over them in a type-safe manner.

Unleashing Object Proxies: Building Type-Safe Wrappers for Anything

Akash Joshi

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.

How TypeScript is integrated in your editor

Maria Solano

A deep dive into the proposal which could de-fork TypeScript and bring all us users back to being "JavaScripters, but with some TypeScript types." We'll cover the author's motives, how it could work, why now and how it is going.ort

What is "TC39: Type Annotations" aka the Types as Comments proposal

Orta Therox

When refactoring large code bases, Find and Replace even with Regexes, can only get you so far. When that fails don’t fallback to painful manual updates instead reach for Abstract Syntax Trees (AST). In this session we introduce AST’s and show how they can be used to reason about / generate code. You will leave with a greater understanding of how you can automatically update code and new insights into how code linters work under the hood.

Supercharged Code Refactoring via Abstract Syntax Trees

Stephen Cooper

An introduction to the emerging islands architecture which can significantly improve the performance of your apps.

Astro & Fresh - Understanding the Islands Architecture

Arpit Bharti

How better to learn about the capabilities of a technology than to do something it was expressly not designed for? What can we learn about the square peg as we mercilessly shove it into the triangular hole? In an attempt to rebuild Age of Empires 2 using React we'll learn about the limitations and possibilities of the tool we use everyday.

Building Age of Empires 2 in React

Joe Hart

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.

Arrows (At Length)

Steve Ruiz

How do you start your app on your simulator in the morning? Do you always run react-native run-ios? If so, you might be wasting a lot of time. Let’s check out together what a React Native app looks like under the hood. It will help us to be more efficient on a daily basis. We’ll identify the shortest steps to execute daily actions, like starting our apps as fast as possible (no more unnecessary compilations of native modules!), or dealing with pesky red errors that metro throws at us.

What Happens When You Build Your App

Charlotte Isambert

React is a fantastic tool to implement complicated applications fast, we all know it. But are they going to be fast when implemented fast? Let’s talk about re-renders and their danger in react: how easy it is to make a mistake, why some small mistakes can have a huge downstream effect, and how to avoid and prevent them.This is a deep-dive type of talk, that focuses on why React components re-render, what kind of performance impact it can have, and what to do about it

Let’s Talk about Re-renders

Nadia Makarevich

TypeScript Congress 2022

If you're looking to get the most out of TypeScript, this workshop is for you! In this interactive workshop, we will explore the use of advanced types to improve the safety and predictability of your TypeScript code. You will learn when to use types like unknown or never. We will explore the use of type predicates, guards and exhaustive checking to make your TypeScript code more reliable both at compile and run-time. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring. Are you familiar with the basics of TypeScript and want to dive deeper? Then please join me with your laptop in this advanced and interactive workshop to learn all these topics and more. You can find the slides, with links, here: <a href="http://theproblemsolver.nl/docs/ts-advanced-workshop.pdf">http://theproblemsolver.nl/docs/ts-advanced-workshop.pdf</a> And the repository we will be using is here: <a href="https://github.com/mauricedb/ts-advanced">https://github.com/mauricedb/ts-advanced</a>

Advanced TypeScript types for fun and reliability

React Advanced Conference 2021

One of the biggest pain points when developing an app is the tricky business of managing state, race conditions, etc. Finite state machines can help eliminate such bugs entirely while providing a welcome, structured way to build components. Looks cool? Let’s build one, it’s even cooler! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#deep dive