December 2
Conditional rendering issues in JSX, forwardRef, serveral ways to create refs, render props (yeah they still exist), higher-order components (do they still exist?), act, non-extendable classes, SuspenseList (well, maybe in 10 years), React.FC and of course our good old friend useEffect.
All these weird things are part of our favourite library (not a framework™) and yet we still use and love it. Why actually? Let's talk about. Disclaimer: This is not a very serious talk, mostly …
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.
Do you know we can replace API schemas with a lightweight and type-safe library? With tRPC you can easily replace GraphQL or REST with inferred shapes without schemas or code generation. In this talk we will understand the benefit of tRPC and how apply it in a NextJs application. If you want reduce your project complexity you can't miss this talk.
With React 18 the long awaited concurrent features are now available to the public. While they technically do not introduce new restrictions about how we build our components, there are many patterns that previously worked but might now introduce subtle bugs in your apps.
Let's re-learn the rules of React so that we can stay safe in this new concurrent world.
In this talk I'll demo the tool I've built at my current project. Basically this is a CLI (written in JS) that automates code changes for any codebase. I'll show how to use "jscodeshift" and AST to manipulate with React and (maybe) TypeScript.
Walkthrough of Nextra 2.0, the Next.js powered docs generator: redesigned interface, full-text search, MDX 2, SSG/SSR/ISR, image optimization, and a lot more.
In a nutshell, mobile DevOps best practises for React Native apps, from code to release.
React Flow is an open source library used by thousands of developers and hundreds of companies. How do we make sure it stays alive, and also free?
I’ll share some insights along our journey from open sourcing React Flow to passing the “black zero,” including findings from our user research where we spoke to some of the people who support us every month.
How many times in your developer career you forget to remove an event listener? Close web socket connection? Unsubscribe from updates from any source? Or you are just to run some cleanup tasks, but every time you should do it manually.
In this talk, I will show a new concept “Lifetime”, which will change your mindset about solving the problems above, make it all easy and even automated. I will show how I use it in everyday development and how it makes my application better and secure. I will also show how it improves DX and productivity. And I believe it’s something your team might want to use too.
Production errors can be tricky, especially when you can’t reproduce them easily or they don't happen very often. In this talk, we’ll go through a case study of a quantity mismatch Shopping Cart issue and what troubleshooting steps we took to solve it. Then drawing from that issue some lessons that we can all learn from as frontend developers.
Designers and developers work on different timelines—designers look to the future while developers build from what’s already been designed. They speak different languages and follow different processes. How can we bridge these gaps and build a more collaborative development process? This talk will showcase how design systems can improve communication between cross-functional teams—while boosting productivity and innovation.
Over the past few years, the number of web frameworks available to us has exploded. In some ways, the breadth of choice is a clear win for our ecosystem. However, for many of us, it also comes with harsh drawbacks:
- Have you ever used a popular open-sourced component built for framework A, and wished it existed in framework B? What about a design system library?
- Does your company have frontends built in different frameworks, and your web teams are frustrated about the wasted hours needed to achieve a consistent design system?
- Does your team build SDKs for web frameworks, and must manually re-write them for each framework?
The solution to all 3 of these problems exists today. To fully understand it, we must first examine today’s web frameworks, re-think what a component should look like, and introduce a new Intermediate Representation of our components. This is what we have done at Builder.io when we created Mitosis, and we’re excited to share it with everyone.
Everything we do, from the way in which we write our emails, to the method in which we provide negative feedback and evaluate performance, governs the performance of our teams. And understanding how culture impacts our efficacy as a team can drastically improve our day-to-day collaboration.
In this session you'll learn: How different cultures communicate, How different cultures evaluate performance and give constructive criticism, How different cultures make decisions, How different cultures trust, How different cultures perceive time.
Animation can make a huge difference in how users perceive a product. From visual feedback to status changes and even just a touch of fun. Animations give you a world of options! In this talk, you'll learn how to use functional and emotional UI animations as a way to make your React app more intuitive and memorable.
The need for Design Systems comes with the need for scale, efficiency, and consistency in design. Those have been one of the major talking points in the design—and front-end—community for the past years. Some love it; some are more skeptical.
In this session, I'm gathering the common denominators I've noticed while working on Design Systems across small, medium, and huge companies, with an eye on points like consistency, themeability, accessibility, the path to deliver designs to actual code, and their adoption.
Emerging build tools such as Bun, ESBuild, SWC and Rome will transform how we work with React in the future. Let's take a look at their current state, look at what's needed to adopt them and predict how the landscape will evolve.
There are amazing tools out there providing you with excellent type safety. But when you get to the client-side fetching, things go wild. Even if you have perfectly typed backed, you lose the type information during the client-side communication. Yes, you can use GraphQL or protobuf and generate types, but... what if I told you there's an easier way? A way that lets you develop your apps smoother than with REST or GraphQL? How? RPC! Say hi to maximum productivity with fantastic developer experience.
What's React like if you come from a C#/C++ and Unity background? Making tools is easy, but can you ship a whole game with it?
In this talk we will see how we can bridge React Native app with commonly used game engine Unity3d for two way interaction between the game and React Native app
At the end of 2021, we successfully rolled out the New React Native Architecture in the Facebook app. Now, it’s time to empower every React Native developer on the globe to use the New React Native Architecture, both the new Fabric renderer and the new TurboModule system. But migrating an entire ecosystem to a New Architecture is no easy task. To support the whole community in this endeavor, we lined up a set of tools and materials that will help both app and library developers to join us in this journey. In the talk, we will present how the New React Native Architecture looks in the OSS space. We will discuss the impact this will have on developing React Native projects. Lastly, we will cover what we learned from the React Native New Architecture migration at Meta, and how you can tackle your migration in your organization.
Combining the best of two cross-platform frameworks to build the ultimate multiplatform development experience.
December 5. Remote
Bun’s builtin JSX transpiler, hot reloads on the server, JSX prop punning, macro api, automatic package installs, console.log JSX support, 4x faster serverside rendering and more make Bun the best runtime for building React apps
What's better than quickly resolving a bug in production? How about never having had the bug in the first place? While TypeScript adds in many great checks for React app safety, its built-in type rules only check for correctness: not best practices. Enter typescript-eslint: a way to use the TypeScript type system to power advanced analyses on your code. This talk will go over the complexities of async code edge cases in React applications, and the various ways typescript-eslint detects them for you.
We already know, ""if some task takes time, promisify it!"". But some tasks can be computation heavy and can take time to complete, so making them async is of no use since those have to be anyway get picked. Solution? Simple, multithreading! Yeah I know that React and in turn javascript is single-threaded but what if I told you that our life was a lie ever since? Enter web workers!
Key takeaways of the talk: 1. An example of a simple product search showing why async js or concurrent mode cannot work. 2. Demystifying web workers. 3. How they make this magic happen under the hood? 4. The Question of life - Aren't they same as concurrent mode? 5. Comparing the same Product list app using web workers, diving deep into the performance. 6. How one can easily misuse web workers and how to avoid it.
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai
Have you ever wished to have a flexible approach to localize your content to scale easily? Join my talk, and I'll show you multiple strategies to translate and localize your content with Remix. I'll share with you flexible dynamic route options from Remix to generate localized content in a practical way, including a headless approach demo and how to scale your solution in the future. Let’s “Remix” to localize your content!
Making money with your React UI library.
Monorepos is a hot topic in the TypeScript/JavaScript community these days, but getting a high performing monorepo setup from the ground up can be challenging. In this talk, we will see how Turborepo can help you to move your monorepo tasks at light speed.
When we want to build a “cross-platform mobile app” the answer always is React Native but what if you want to build a “cross-platform app” that runs across mobile and browser? Here’s where React Native falls short. react-native-web is trying to bridge this gap to some extent but the primary requirement is to write your code in React Native which gets converted to the web, but that itself has a bunch of downsides and the biggest one being - forcing mobile app developers to understand how browsers work. In this talk, I’ll share how we are building a true cross-platform architecture without using react-native-web for our design system at Razorpay.
Did you know that about 250 000 websites are published every day? The majority uses too heavy fonts, unnecessary images or utilises redundant libraries generating carbon footprint. ec0lint is a tool for frontend developers that mitigates the carbon footprint of websites by showing tips on how to create a more climate-friendly code. Thanks to code optimization ec0lint can help in reducing emissions from 1.8 g to ~0.2 g per one view saving 216 kg CO2 for each website (-88%!) annually.
Did you know that Chrome extensions, or web extensions, are written in plain HTML, CSS, and JavaScript? That means you can use React to write fully featured and sophisticated web extensions using the web development skills you already know. During this talk, we'll go over the basics of web extension development, how to set up a build process for an extension using React, and review a fully functioning extension that's in the Chrome web store right now!
What is a generic component? How to write them? When to use it?
This talk gives an introduction about MediaPipe which is an open source Machine Learning Solutions that allows running machine learning models on low powered devices and helps integrate the models with mobile applications. It gives these creative professionals a lot of dynamic tools and utilizes Machine learning in a really easy way to create powerful and intuitive applications without having much / no knowledge of machine learning beforehand. So we can see how MediaPipe can be integrated with React. Giving easy access to include machine learning use cases to build web applications with React.
If you have some GraphQL data that you think would benefit from CDN caching at the edge, it’s actually really simple to get everything working well. This talk will walk you through the interplay between several tools:
- Automatic Persisted Queries with Apollo Link lets queries use GET while mutations still use POST
- Apollo Cache Control lets you specify cache control information in a fine-grained, schema oriented way
- Apollo Engine generates small query IDs you can use in those GET requests to limit the cache key size, and sets the Cache-Control header for the CDN Then, when we put it all together, you can see those results getting cached in your favorite CDN service, tada!!
We want to learn about mobile accessibility to build an accessible mobile app, but where do we start? What does making an app accessible mean? What should we developers do? We will answer that by deep diving into the fundamentals of accessibility and assistive technologies.