React Summit

React Summit 2023

This Talk discusses scaling front-end applications through principles such as tearing down barriers, sharing code in a monorepo, and making it easy to delete code. It also emphasizes incremental migration, embracing lack of knowledge, and eliminating systematic complexity. The Talk highlights the use of automation in code migration and the importance of removing barriers to enable smoother code migration.

After spending over a decade at Google, and now as the CTO of Vercel, Malte Ubl is no stranger to being responsible for a team’s software infrastructure. However, being in charge of defining how people write software, and in turn, building the infrastructure that they’re using to write said software, presents significant challenges. This presentation by Malte Ubl will uncover the guiding principles to leading a large software infrastructure.

Principles for Scaling Frontend Application Development

Malte Ubl

JS Nation

JSNation 2023

Misko Havry introduces himself and discusses the impact of JavaScript on performance. The concepts of reconciliation, hydration, and resumability are explored, along with the importance of clean code and compiler optimization. The Talk includes demos of application components and showcases the power of code extraction. The QUIC framework is highlighted for its ability to optimize code loading and prioritize interactions. The service worker is used to selectively download components for improved performance. SEO and debugging in QUIC are also discussed, along with comparisons to other frameworks.

We use frameworks to make building our applications easier. Yet as the application scales, its performance suffers. There is no one thing, but rather a death by thousand cuts. Developers are under pressure, and they often choose the easy and quick path to deliver a feature rather than the performant path. The performant path is usually more work. So let's look at these two paths and imagine a world where the performant path is the quick and easy path.

Building a Web-App: The Easy Path and the Performant Path. Why Are They Not the Same?

Miško Hevery

We discuss developing at scale with NxMonoRepos, which provide the benefits of a monorepo without the drawbacks of code collocation. Nx helps with code consistency and automation through plugins and generators. The workshop covers folder structure, workspace creation, using plugins, updating files, using executors, libraries and migrations, running generators and migration scripts, connecting APIs, creating type libraries, and using generators for Storybook configuration. It also covers configuring Storybook, enforcing module boundaries, setting up CI, using workspaces, and the trade-offs of libraries and applications.

We're going to be using Nx and some its plugins to accelerate the development of this app. Some of the things you'll learn:- Generating a pristine Nx workspace- Generating frontend React apps and backend APIs inside your workspace, with pre-configured proxies- Creating shared libs for re-using code- Generating new routed components with all the routes pre-configured by Nx and ready to go- How to organize code in a monorepo- Easily move libs around your folder structure- Creating Storybook stories and e2e Cypress tests for your components Table of contents: - Lab 1 - Generate an empty workspace- Lab 2 - Generate a React app- Lab 3 - Executors- Lab 3.1 - Migrations- Lab 4 - Generate a component lib- Lab 5 - Generate a utility lib- Lab 6 - Generate a route lib- Lab 7 - Add an Express API- Lab 8 - Displaying a full game in the routed game-detail component- Lab 9 - Generate a type lib that the API and frontend can share- Lab 10 - Generate Storybook stories for the shared ui component- Lab 11 - E2E test the shared component

React at Scale with Nx

Isaac Mann

Vue.js Live Conference

Vue.js London 2023

This Talk discusses the problems faced in building and rendering web applications, different rendering methods and strategies, and the benefits of the Yamstack architecture. It covers server-side rendering, static site generation, incremental static regeneration, and edge rendering. The speaker demonstrates how to build a static site using a Hello CMS and the JAMstack architecture. Other topics include connecting Storyboard with a Nuxt application, mock data, hybrid rendering, and handling I18N with a static site generator.

This talk will look at the evolution of web rendering modes and what the Jamstack movement is all about. We will build a demo project to show how a static site generator and a Headless CMS can be combined to create dynamic and engaging stories while maintaining a static site's performance and scalability benefits.You will learn about the advantages and limitations of each rendering mode and gain a deeper understanding of how to use Jamstack to build powerful and dynamic storytelling experiences.

A Saga of Web Rendering Woes

Alba Silvente Fuentes

React Summit US

React Summit US 2023

This Talk discusses the journey from thousands of Lint failures to zero in a codebase at Linton that is over 80 years old. The approach involved implementing rules, incentives, and tooling to address the issue. The tool called Checkup was used to visualize ESLint failures by team and lint rule, providing accountability and responsibility. The efforts resulted in cleaning up over 6,000 lint failures, with 55 contributors, and a 30% increase in perceived code quality.

Lint rules enable us to uphold code quality and minimize errors. It can positively impact developer productivity and happiness especially when working in a massive application with multiple teams working together. But what if your large scale application contains thousands of lint failures over the many years it has been running in production? This talk will explore actionable strategies for effectively addressing lint failures at scale so that we can once again rely on lint rules to ensure consistent code quality and streamline development processes, leading to a more robust and maintainable codebase.

Road to Zero Lint Failures: Tackling Code Quality Challenges at Scale

Chris Ng

WebGL has evolved from showcasing technology to being used in everyday applications like Google Maps and Figma. React and 3.js can be used together to build WebGL applications, allowing for reusable components and declarative development. Building complex 3D graphics applications requires efficient data structures, algorithms, and rendering techniques. The Flux CAD editor uses React, 3.js, and React ReFiber to handle complex engineering documents and optimize GPU utilization. Optimizing the render loop and GPU performance is crucial for improving WebGL application performance. Instance rendering can be used to optimize text rendering in WebGL applications, achieving efficient rendering of thousands of 3D characters.

A lot of recent talks at other conferences have talked about how to start using React and THREE.js to create 3D experiences on the web. In my career I've built several complex applications using those technologies, including a big Figma-like 3D editor, and I've learnt a lot of patterns and tricks on how to make it actually fast and scalable. Unfortunately, though, nobody is also talking about those tricks an what it really takes to build an rendering engine similar to the one that Figma uses. My goal with this talk is to give people an overview of the challenges that may arise when you try scaling your application, and what are some lesser known tricks to overcome them: instancing, memory usage reduction techniques, SDF-based text rendering, GPGPU and tree data structures. Everything of course done with Javascript, React and THREE.js.

Scaling React-Three-Fiber Applications beyond the Hello World

Giulio Zausa‮ 

Today's Talk discusses how Zod, an NPM library, can guarantee the TypeSystem at runtime, providing all the benefits of TypeScript. Zod's parse method allows for checking if objects match the schema, creating a validation layer between applications and APIs. By combining TypeScript with Zod, developers can ensure type safety at both runtime and build time, preventing code execution with incorrect data and improving the user experience.

In this talk, I want to show how we can use Zod to guarantee the type in a React Application at runtime. Environment variables, HTTP requests, forms and so on could create troubles in our applications, mainly if they contain unexpected types. Using Zod, we can create schemas to guarantee the types expected in our editor at runtime. In this way, we can react quickly when an environment variable misses or when someone changes the API contract without informing us. A small validation layer in our applications can prevent a bad user experience and notify us immediately, so we can fix the problem as soon as possible and mitigate the visualization of wrong data.

Zod === Typescript, but at Runtime in Your React Applications

Luca Del Puppo

React Day Berlin

React Day Berlin 2022

This Talk explores the benefits of using TuberApple, a tool for supercharging the development experience. It highlights the advantages of monorepos, such as code reuse, shared standards, improved team collaboration, and atomic changes. TuberApple, specifically Tuburepo, offers efficient task execution through caching and optimized scheduling. It simplifies monorepo development by allowing parallel execution of tasks and seamless coordination of changes. Tubo, another tool within TuberApple, enables smart task execution, declaring task dependencies, and efficient caching in monorepos.

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.

Supercharging Your Dev Experience With Turborepo

Bruno Paulino

React Summit 2022

This Talk discusses handling data at scale for React developers, including scaling databases and the need for search. It explores different ways to fetch data in React, such as using useEffect, fetch, and setState. The Talk also introduces Suspense for data fetching and how it improves user experience. It covers controlling React Suspense, handling search, and using render-as-you-fetch. The Talk concludes with a discussion on the RFC status and fetching in event handlers.

It is very difficult to scale modern web applications to millions of concurrent users. Oftentimes, we've got to provision and consider in-memory Key/Value stores, search engines, analytics engines, and databases, all while preserving traceability through the layers. This talk expands on the technical details of web apps at this scale, and offers a simpler way to achieve the same effect without the technical hassle.

Handling Data at Scale for React Developers

Tejas Kumar

GraphQL Galaxy

GraphQL Galaxy 2021

The Workshop covered various topics related to GraphQL at Shopify, including the Nplusone problem, batch loading with lazy resolvers, contextualizing GraphQL APIs with directives, optimizing GraphQL for mobile, managing large GraphQL APIs, and handling deprecated fields and nullability. The speakers shared insights and solutions to these challenges, such as using Active Record Preloading, GraphQL Batch library, and custom directives. They also discussed the importance of measuring performance, pagination design, and parallel querying for mobile optimization. Overall, the Workshop provided valuable information on improving GraphQL performance, API design, and versioning strategies.

At Shopify scale, we solve some pretty hard problems. In this workshop, five different speakers will outline some of the challenges we’ve faced, and how we’ve overcome them. Table of contents: 1 - The infamous "N+1" problem: Jonathan Baker - Let's talk about what it is, why it is a problem, and how Shopify handles it at scale across several GraphQL APIs. 2 - Contextualizing GraphQL APIs: Alex Ackerman - How and why we decided to use directives. I’ll share what directives are, which directives are available out of the box, and how to create custom directives. 3 - Faster GraphQL queries for mobile clients: Theo Ben Hassen - As your mobile app grows, so will your GraphQL queries. In this talk, I will go over diverse strategies to make your queries faster and more effective. 4 - Building tomorrow’s product today: Greg MacWilliam - How Shopify adopts future features in today’s code. 5 - Managing large APIs effectively: Rebecca Friedman - We have thousands of developers at Shopify. Let’s take a look at how we’re ensuring the quality and consistency of our GraphQL APIs with so many contributors. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Hard GraphQL Problems at Shopify

Rebecca Friedman

Jonathan Baker

Alex Ackerman

Théo Ben Hassen

 Greg MacWilliam

React Advanced

React Advanced 2021

Sneak, a software company, has experienced significant growth since its founding in 2015. They face challenges in culture, hiring, and scaling but focus on communication and transparency to manage change. Sneak emphasizes building a strong culture and supporting communities of practice. They hire based on key values and provide support for new hires to thrive. The concept of 'giving away our Legos' is embraced to scale effectively.

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. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

So Now You Know: Learnings on People, Product and Culture from Hypergrowth at Snyk

Patrick Mullarkey

The speaker discusses their experience with edge caching GraphQL APIs, starting with the struggles they faced with a poor database choice. They found success with GraphQL, which helped their servers scale and led to an acquisition by GitHub. The speaker delves into the key piece that enables GraphQL caching, the __typename metafield. They also address challenges with caching at the edge, including authorization and global cache purging. The speaker shares a success story with GraphCDN and mentions the ongoing challenge of handling cache for lists with pagination.

For years, not being able to cache GraphQL was considered one of its main downsides compared to RESTful APIs. Not anymore. GraphCDN makes it possible to cache almost any GraphQL API at the edge, and not only that but our cache is even smarter than any RESTful cache could ever be. Let's dive deep into the inner workings of GraphCDN to figure out how exactly we make this happen. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How to Edge Cache GraphQL APIs

Max Stoiber

React Summit Remote Edition

React Summit Remote Edition 2020

Scalable React development made easy by NX, a monorepo-based approach used by large tech companies. Challenges of sharing code in multiple repos include duplicate tooling, separate workflows, and version conflicts. Benefits of a monorepo include unified tooling, single version of dependencies, and simplified development. NX enables monorepo workflows with intelligent build systems and easy code sharing. It also supports custom code generation, enforces standards and dependencies, improves build times, and provides modern tools and plugins.

Scaling React development across multiple teams can be incredibly difficult. Teams need to share core functionality while staying autonomous. Changes need to propagate through many projects while being tested. Nx is an open-source toolkit that allows organizations to scale development more easily than before! Nx makes setting up Cypress, Prettier, Storybook, Next.js, and Gats faster than ever. You can also develop full-stack using Node frameworks like Apollo and Nest.js and share code between frontend and backend. In this talk you’ll learn how large organizations like Facebook, Microsoft, and Google are able to successfully scale across multiple teams, business units, and products.

Scalable React Development for Large Projects

Jason Jean

GraphQL Galaxy 2020

GraphQL at Scale - Panel Discussion

Tanmai Gopal

Nick Schrock

Dan Schafer

Danielle Man

Taz Singh

GraphQL is gaining rapid adoption, providing autonomy for UX developers to retrieve only the data they need. The use of GraphQL subscriptions allows for real-time updates without constant data polling. These features were evaluated in real-world use cases like e-commerce and order management systems.

Off late GraphQL workloads see wide adoption in enterprise workloads as GraphQL provides a consistent and flexible way for UI to consume data from the APIs. For API developers like me, seeing GraphQL servers abstracting away the data filtering and the access patterns associated with backend APIs is a complete paradigm shift. Traditional API design tasks, like data modeling, access patterns required to implement high-performance Data APIs, are still relevant when implementing GraphQL applications?This talk will walk you through the learnings as a backend API developer building a hello world GraphQL application to implement a globally distributed GraphQL API for a real-world e-commerce application. We will look into scaling and resiliency required for building high-performance GraphQL APIs. Also, look into how database capabilities play an essential role in implementing a successful GraphQL application. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Going from Zero to Building Multi-Region GraphQL Applications

Nikhil Chandrappa

React Summit Remote Edition 2021

This Talk discusses Schedule React development with NX and introduces Annex, an open-source dev tool for Monorepos. It covers topics like generating workspaces and libraries, creating public-facing Next.js applications, imposing restrictions and defining boundaries, testing with linting, speed improvements with the 'affected' command and caching, retrofitting NX into an existing Monorepo, migrating, testing, deployment, and publishing, publishable libraries in NX, Webpack 5 module federation, React context API, and managing tags, scope, and dependencies.

In this talk, I will show you how to avoid a monolithic codebase, how to modularize your React app and how that might even help you speed up your CI builds: thus help you scale development as your team grows. We'll be doing this in a very concrete and practical way, using Nx as our toolkit. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Scaling React Development with Nx

Juri Strumpflohner

Lyft has developed a next-generation microservice platform called Lyft Service, built on Next.js. They use a plugin system to reuse code and keep their stack modern. The plugin system allows for easy packaging and delivery of application functionality. Lyft has a structured approach to migrations and versioning, ensuring seamless upgrades. The success of the platform is attributed to organizational and cultural processes, as well as buy-in from senior leadership.

In 2019, our frontend engineers were asking hard questions about the future of our frontend build system. As new engineering teams continued to spin up new frontend microservices, our custom-built platform grew increasingly fragmented. This led to more headaches for our teams, who were struggling to keep up with maintenance patches and security updates. What could we do to get ourselves out of this mess? Come join us as we discuss how we built a new platform with Next.js at its core to solve the challenges we faced. With the momentum of the Next.js community, we were able to extend this framework with a unique plugin architecture that allowed our engineers to hot-swap new packages and tools while allowing us to upgrade entire swaths of the stack at once. At the same time, we've multiplied the productivity (and happiness) of every frontend engineer at Lyft. We'll end with some great things to share that can be taken with you to address the challenges you face scaling your own frontend platforms! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Platform-powered: Building a Frontend Platform to Scale as Fast as You Do 🚀

Andrew Hao

The Talk discusses how Stencil, a low-level compiler, helps generate and maintain reusable components that work across different frameworks. Stencil enables the creation of self-contained applications by relying on existing web APIs within the browser. It allows components to work in different frameworks without maintaining multiple code bases. The speaker highlights the usefulness of web components and how they can benefit different use cases. Stencil solves the problem of maintaining one code base while working everywhere, making it worth exploring for those in similar situations.

React provides a great ecosystem for React developers, but challenges often arise for multi-team organizations who get to pick the technology of their choice. As teams and projects scale, and technologies change over time, being able to provide a universal component library as a design system for an entire organization proves to be difficult. Stencil was created to help address this issue, most notably for Ionic, which is a UI library for mobile app development using web-technologies. In this talk we’ll walk through how Ionic is able to create an Ionic React library, using custom elements (web components) as the lowest level. Using the Stencil compiler, the Ionic team is able to generate various bindings for each of the frameworks, such as React, Angular, and Vue. The benefit of this allows the design team to focus on maintaining one codebase, while the Stencil compiler does the heavy lifting to generate the various output targets. Additionally, end-users of each framework binding get to interact with their traditional component model they’re familiar with. React developers use @ionic/react no differently than any other React component, and the same goes for Angular and Vue. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#scalability