React Summit US

React Summit US 2024

I'm thrilled to be here at the React Summit to talk about React and Microfrontends. Micro frontends allow reusable components to be shared across the organization and are consumed at runtime using webpack's module federation feature. The module federation plugin enables sharing dependencies with unknown components. Micro frontends can be configured with Webpack by chunking and specifying shared dependencies. When rendering web components from a remote, it's best practice to import them using react lazy or loadable. When deciding between micro frontends and npm packages, consider the reusability at build time or runtime. Setting up micro frontend development involves installing the necessary libraries and deciding on eagerly or lazily sharing dependencies. Splitting monolithic content into microcontent requires considering independence and avoiding page awareness. Microcontent should be consistent and encapsulated using tools like emotion. Scaling and versioning microcontents is important for deployment at scale. Communication between microcontents can be done using React's one-way data binding. Shadow DOM can be used for encapsulation, but it has challenges with styling and accessibility. Developer mindset and clear documentation are crucial for consistency and communication in microfrontend development.

Leveraging reactjs to create reusable microfrontends addressing challenges and common pitfalls.

React and Microfrontends

Harsh Maheshwari

DevOps.js

DevOps.js Conf 2024

The workshop explores the intersection of serverless and AI, discussing the basics, benefits, scalability, and challenges of serverless. It also delves into AI architecture components, vector databases, and the use of context in querying. The workshop demonstrates the building process using HonoJS and Linkchain, setting up Cloudflare Workers and Wrangler, and loading data into a vector database. It also covers the creation of a chatbot with Cloudflare Workers AI and the use of API tokens and environment variables. The workshop concludes with information on pricing and recommendations for further questions.

In this workshop, we discuss the merits of serverless architecture and how it can be applied to the AI space. We'll explore options around building serverless RAG applications for a more lambda-esque approach to AI. Next, we'll get hands on and build a sample CRUD app that allows you to store information and query it using an LLM with Workers AI, Vectorize, D1, and Cloudflare Workers.

AI on Demand: Serverless AI

Nathan Disidore

Remix Conf Europe

Remix Conf Europe 2022

This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.

Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.

Scaling Up with Remix and Micro Frontends

Adrien Baron

RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.

Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example). In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.

Full Stack Components

Kent C. Dodds

React Advanced

React Advanced 2022

This Talk explores React's internal jargon, specifically fiber, which is an internal unit of work for rendering and committing. Fibers facilitate efficient updates to elements and play a crucial role in the reconciliation process. The work loop, complete work, and commit phase are essential steps in the rendering process. Understanding React's internals can help with optimizing code and pull request reviews. React 18 introduces the work loop sync and async functions for concurrent features and prioritization. Fiber brings benefits like async rendering and the ability to discard work-in-progress trees, improving user experience.

We've heard a lot about React's Fiber Architecture, but it feels like few of us understand it in depth (or have the time to). In this talk, Tejas will go over his best attempt at understanding Fiber (reviewed by other experts), and present it in an 'explain-like-I'm-five years old' way.

Understanding React’s Fiber Architecture

Tejas Kumar

React Finland

React Finland 2021

<div><div>For many years, we have migrated all our devtools to Node.js for the sake of simplicity: a common language (JS/TS), a large ecosystem (NPM), and a powerful engine. In the meantime, we moved a lot of computation tasks to the client-side thanks to PWA and JavaScript Hegemony. So we made Webapps for years, developing with awesome reactive frameworks and bundling a lot of dependencies. We progressively moved from our simplicity to complex apps toolchains. We've become the new Java-like ecosystem. It sucks. It's 2021, we've got a lot of new technologies to sustain our Users eXperience. It's time to have a break and rethink our tools rather than going faster and faster in the same direction. It's time to redesign the Developer eXperience. It's time for a bundle-free dev environment. It's time to embrace a new frontend building philosophy, still with our lovely JavaScript. Introducing Snowpack, Vite, Astro, and other Bare Modules tools concepts!</div></div><div><div> </div></div> <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The Eternal Sunshine of the Zero Build Pipeline

m4dz 

React Day Berlin

React Day Berlin 2024

Hello, welcome, everyone. Today, I'm going to talk about building web applications with signals in Grammarly. Signals are like values that can change over time and are used in Grammarly's editor for real-time updates. Signals can be implemented with React and are leveraged for state management and business logic. They enable functional reactive and declarative programming, allowing specific actions to be defined. Testing signals can be done using classical unit tests or marble tests. Signals are a perfect fit for Grammarly's domain and can be easily integrated with various libraries and frameworks. Handling cleanup and unsubscribing to signals can be done through the dispose method and React lifecycle. The main challenges in signal-driven systems are testing and debugging streams. Marble tests provide control over signal emission and combined states can be calculated using the view function. Grammarly is considering migrating to the signals proposal in the future. Thank you, Alexey!

Signals have recently become a popular concept. Their ideas are based on the functional reactive programming (FRP) approach, which has been leveraged in the industry for a while. I would like to share how someone can build an architecture based on signals and React and how we have used FRP at Grammarly for quite some time. The talk aims to showcase the foundational principles of observables and how to structure applications based on FRP ideas.

Building Web Applications with Signals at Grammarly 

Oleksii Levzhynskyi

We're going to talk about the age of universal React, the next paradigm shift of React. Universal React is cross-platform and follows the principle of learn once, write once, and run anywhere. React Native is born as a declarative way to build iOS and Android apps. React Native components and APIs are implemented in an interoperable way with React DOM, powering a large part of Twitter's web platform. Code sharing in a universal React app maximizes code reuse, reduces duplication, and allows platform optimization. React Native for Web is the compatibility layer that enables universal development, handling translations between React Native and React Dom. Expo is the framework of choice for React Native, with Expo Router V3 completing the universal story. Challenges in achieving parity with React Native Core due to specific platform implementations. React Strict DOM prioritizes web, bringing web APIs to React Native. Taking a universal React approach can improve performance across platforms. React Native Web and React Strict DOM prioritize performance and accessibility.

Web and Mobile are getting closer and closer in the React ecosystem. With the launch of Expo Router and React Strict DOM in the last year, the message is clear: Web and mobile can no longer be separated. The React Core Team and community have been working silently in the background on this project, and there have been RFCs to bring Web APIs to Native, and make the RN event loop closer to the web.This is great for developers - suddenly React devs can “learn once, write once, and run anywhere”, and can target web, iOS, and Android (and even more) from a single codebase. You might be thinking: is this just a pipe dream, and will the reality live up to the expectation of “writing once” for every platform? In this talk, we’ll share our real-world experiences of building universal React apps from a single codebase. We’ll look at the libraries and tools, cover some of the real-world challenges, and share with you a &lt;List /&gt; of what you can and can’t share across different platforms.

The Age of Universal React: What’s the Catch?

Mo Khazali

Anisha Malde

Welcome to Accelerating Value with HubSpot's deployment process and team structure. HubSpot is a leading growth platform that empowers businesses of all sizes to scale and succeed in the digital age. HubSpot's customer-centric approach focuses on value delivery, prioritizing the user experience, and building trust through consistent interactions. The front-end tech stack includes TypeScript, React, Redux, Styled Components, and GraphQL. HubSpot utilizes various developer tools to streamline workflows and reduce the technical burden on engineers. The testing philosophy at HubSpot emphasizes comprehensive testing, with a focus on unit, integration, and acceptance testing. HubSpot prioritizes customer-centricity, fosters innovation with small teams, and enhances developer efficiency with custom tooling.

Explore HubSpot's innovative deployment process and team structure that accelerate value creation by enabling developers to navigate projects efficiently. Gain actionable insights to adopt similar practices in your organization, enhancing productivity, collaboration, and business growth.

Accelerating Value With HubSpot’s Unique Deployment Process and Team Structure

Bree Hall

We're going to talk about making React work in Chrome extensions. We started building Chrome extensions during our freshman year and have learned a lot along the way. Chrome extensions have two parts: the content script and the background script. Our story begins before React, and we created the UT Registration Plus extension to simplify class registration. We initially built the extension using HTML strings and then tried using jQuery, resulting in unmaintainable code. When building Octoshop, we chose React for its support and package system, but integrating it with Ibotta's Vue extension led to a messy codebase. We centralized our code and managed Chrome's state using React portal and hooks, improving maintainability.

We will go over the unique challenges, solutions, and down right weird things we encountered while integrating React into the Ibotta Chrome extension! Learn about optimizing content-script performance, managing state, and overcoming issues with build tools!

Making React Work in Chrome Extensions

Sriram Hariharan

Darshan Bhatta

I'm Richard Kerrigan and I'll show you how to add multilingual support to your React apps. We need a way to support other languages on our websites and web apps without affecting team productivity. We'll explore a low-cost solution using AI and automation. When my team started tackling this problem, we looked at Azure and found the Azure AI Translator service, which offers both ad-hoc text translation and document translation. Key features include language support for over 100 languages and dialects, a generous free tier, Neural Machine Translation for accuracy, and the ability to use custom glossaries. Designing workflow for translating JSON content at runtime or incorporating translation process into CICD workflow for HTML or Markdown files. Exploring how to translate HTML files within a CICD pipeline. Translation service and storage account setup. Function app building and deployment. Configuring translation to Spanish with a glossary in CSV format for file translation. Sending a request to the translator and receiving the translated file. Discussing the problem of websites not offering content in additional languages. Highlighting the benefits of Azure AI Translator and its alternatives. Showcasing different versions of the app for translating JSON, HTML, and markdown content. Checking the progress of the workflow, deployment of Azure resources and function, and translation of markdown files. Quick explanation of infrastructure as code and deployment options. Changing languages shows translated title and excerpt while maintaining original formatting.

Does your React app serve a global audience, but is only available in English? Let's change that. In this talk, I'll show you how i18n can become an automatic part of your CI/CD workflow, enabling your team, regardless of size, to deliver your React app in over 100 different languages without any extra effort.

How I Support More Than 100 Languages in My React app...and You Can Too!

Richard Carrigan

Hey, everybody, I'm Graham, and I'm really excited to give you a talk today on feature flagging with React server components. We're going to give examples of how you can deploy feature flags in your application, and how feature flagging interacts with React's rendering strategies. Feature flags are conditional logic that allows you to control the state of a feature independent from the code deploy. This separation of code deployments from feature releases is critical for large product organizations. It enables frequent commits without exposing changes to users, conditional release of features, and easy rollback in case of unexpected bugs. Using FeatureFlag gives you a kill switch where you can turn off your feature. It allows you to do A-B testing and measure the impact of new features. You conditionally release the feature to different sets of users, allowing you to control for externalities and changes to your product. A FeatureFlag is used to get the state and conditionally show a component. The flag state can be stored in a file or using environment variables. However, environment variables have limitations in terms of complexity. A more complex example uses growth book syntax, allowing for advanced control over feature rollout. Building your own system can be tricky, but feature flagging platforms offer fully-featured solutions with two main advantages. Feature flagging applications have a nice UI for controlling feature releases and an SDK that integrates with the code. React poses complications in using feature flags due to its rendering strategies. Static site generators like Next.js have limitations in user targeting and require redeploy for updates. Client components are not async, requiring the use of React primitives. These approaches have their own challenges in implementing feature flags. To initialize the SDK, instantiate the SDK outside of the app and use a user effect hook to download the feature flag payload and update the user data on the SDK. The growth book provider builds context for evaluating feature flags, allowing components to easily access feature flag states. However, there may be a slight flicker in the UX due to the time it takes to initialize the SDK and download the feature flag state. Network optimization can help reduce flickering, but the client's network connection is beyond your control. There are some workarounds for flickering, like showing a loading spinner while rendering in the background. Using feature flags for SEO is not ideal as the initial HTML payload doesn't include all the contents. Server components in React 19 provide an async solution without the need for complicated useEffect and state. react.cache allows caching expensive operations scoped to the current request. The getSdk function call retrieves the value of the feature flag from the cache, providing faster subsequent calls. Our SDK has its own in-memory cache. Dynamic rendering can be expensive in terms of requests, rendering, network calls, and running React on the service side. It can also be slow, and tracking events may be challenging. The server-client hybrid approach combines the advantages of the previous strategies without the downsides. By making the outer app a server component and caching the feature flag payload, we can achieve no-flicker client-side feature flagging. The client component can use the UseMemo hook and the initSync method with the payload already in memory. Passing the SDK instance and wrapping the main app in a provider allows us to have the best of both worlds. Although it may be slightly more complex to set up, using Next.js with React server components offers a cool and modern approach to feature flagging with high performance.

Feature flagging is a great way to reduce risk by separating code deployments from feature releases, but with React Server Components present some unique challenges and complexities. In this talk, you will learn about these challenges and how to overcome them.  I will also give a live demo that will illustrate step-by-step implementation, showcasing how to dynamically render components based on feature flags using a variety of rendering strategies.

Feature Flagging with React Server Components

Graham McNicoll

Welcome to the session on microfrontends. Microfrontends allow for independent implementations and local development. It is possible to develop and integrate microfrontends locally using an emulator and achieve automatic updates. Fine-tuning modules and user experience can be done using a discovery service. Rules can be created in the discovery service to selectively load microfrontends for specific browsers. AI can be leveraged to generate AI-enhanced variants and compare them with the original implementation. Microfrontends are highly portable and can be used in different applications. Code isolation and enhanced performance are important considerations in microfrontends. The benefits of microfrontends include improvements in file name changes and performance overhead. The Netflix application is a case study for microfrontends. Overall, microfrontends offer various benefits and opportunities for architectural discussions.

Did you know that micro frontends can be much faster than their monolithic counter parts? How about rollbacks of specific features? In this talk you will hear and see 8 examples of things that will not only teach you a bit about micro frontends, but also in what cases they are most useful.

8 Things You Did Now Know Micro Frontends Can Do

Florian Rappl

Hi, my name is Kirill and I have a little obsession with UI components. Let's talk React, specifically React 19 Server Components. I will show you how to build a polymorphic data table using server components. We explore mixing server and client components and applying the composition pattern. We discuss polymorphic components and separating client logic to render custom components without breaking client functionality. The component can be used in different environments, morphing into server or client components accordingly. This talk focuses on building a polymorphic component with minimal bundle size and access to both server and client APIs.

Explore Server Components through the lens of reusable UI Component, where everything "depends" on the individual requirements of the use-case and individual application needs. Instead of fighting over 'server' vs 'client' - let's have the best of both worlds.

Polymorphic React Components for Both the Client and the Server

Kiril Peyanski

JSNation US

JSNation US 2024

In this talk, the speaker introduces web workers and discusses how they can handle large processing on the client side. Examples, benchmarks, and tradeoffs are provided. The benefits of using web workers are discussed, and a demo project using VanillaJS and the live server extension of VS Code is showcased. The speaker demonstrates how to use web workers to prevent the main thread from getting blocked during large operations. The process of creating a web worker file and moving functions to it is explained. The speaker also shows how to handle messages and perform operations with web workers. The final remarks include contact information and an invitation to check out the speaker's YouTube channel for React courses and articles.

In this talk I will bring an overview how we handle with large process on Client Side (WebApp Applications)  using Web Api called Web Worker. I'm going to bring a view of a use case that I had to apply web workers and the advantages it brought in heavy processing, called “Rinha Front end” on Brazil, an challenge where we had to process Json files of various sizes just using the client side and without affecting the user experience and blocking the use of the application. So I this talk I will bring a simple case where using pure Javascript and how to use Web Workers to process out of the main thread and block our interactions with the page.  We will create a simple application using vanilla JS and I will introduce you this feature.

Web Workers: Handling Heavy Processing on the Client Side

Kevin Uehara

Welcome to a session about micro-frontends and security. This Talk discusses the vulnerabilities in micro-frontend systems, including injections, insecure design, and security misconfiguration. It also explores identification and authentication flaws, and suggests mitigation strategies like using session cookies and secure HTTP channels. The Talk highlights the importance of implementing a gateway for enhanced security and addresses concerns about insecure design. It emphasizes integrity verification of JavaScript files and the prevention of code injection. The use of environment variables and configuration mismanagement is also discussed, along with the importance of vulnerability scanning and testing. The Talk concludes by emphasizing the need for authenticity and monitoring in micro-frontend development.

Micro Frontends are everywhere - on the client, on the server, and on the edge. Quite often the scalability of micro frontends is determined by the freedom and independence of the teams using them. This can lead to problems as potentially arbitrary code enters the applications at runtime asking the question of what potential vulnerabilities exist and how to mitigate them. In this session, you'll hear about some of the most frequent vulnerabilities that appear in real-world projects using micro frontends. You'll see what you can do to get rid of them and avoid mistakes leading to security issues. The quest for this talk is to deliver at speed and scale, but do it without compromises on security.

Micro Frontends and Security

Hello and welcome to this talk about scaling accessibility. The web was created with accessibility in mind, we just need to utilize it to create accessible web applications. Digital accessibility is about creating applications that are accessible for everyone, regardless of disability. WCAG stands for Web Content Accessibility Guidelines, which provide a baseline for web accessibility. To scale up accessibility, an organization-wide approach is crucial, including management support, a person with final responsibility for accessibility, and inclusion of accessibility in all processes. Collaboration and consistent design elements are key to preventing the release of inaccessible features. Internal researching, testing, and monitoring are essential to ensure accessibility. Challenges with WCAG requirements and audits exist, as not all issues are shown and sample sizes can lead to missed issues. Auditing and fixing in a cycle doesn't work for larger organizations, so accessibility should be checked in every step. An accessibility certificate and the feedback loop help build knowledge within teams and ensure ongoing accessibility. The talk concludes with a summary of previous topics and an invitation for further discussion.

How does a big organization become accessible? Let’s talk about a11y scaling strategies. To find out how to become accessible, and stay accessible.

Scaling a11y

Tim Damen

In this talk, you'll learn about the problem with internationalizing software and how the Lake Exchange Control System solves it. Internationalizing software involves adapting it for different markets and demographics, which includes design, translations, and currencies. The goal is to enable any software company to go global in a day. The challenge lies in the coordination required among developers, designers, translators, and other stakeholders. The current process involves a complex pipeline and manual processes for translation hand-off. The key to solving this challenge is an interoperable file format and a change control system called Lix, which allows for collaboration and automation. Lix will have a public pre-release on December 16th, followed by the .inlang file specification in Q1 2025.

Every developer knows that i18n is painful. We found the curing pill in the form of version control.  We'll talk about:  - what's the *actual* problem with i18n? - how to solve the orchestration problem? - demo e2e collabroation between devs, designers, and translators

inlang - Using Version Control to Solve i18n

Samuel Stroschein

Hello everyone. I'd like to start off by telling you a story about a guy named Dan. He's a mechanic and his job is fixing spaceships. Dan is a metaphor for all of us developers. Let's talk about monorepos as you've probably guessed from the title. I'll start off by talking about polyrepos, what they do well, but also where they fall short. Then I'll talk about monorepos and what issues they solve, as well as why you need good monorepo tooling, especially at scale. A Monorepo is a single repository containing multiple distinct projects with well-defined relationships. It allows teams to work together in a unified manner. Monorepos help with velocity, safety, and mobility. Monorepos can be adopted incrementally and good tooling can help with running tests. CI time is now coupled to the size of the change made, rather than the size of the monorepo. By generating a task graph from the project graph, we can optimize the build process by parallelizing and scheduling tasks. NX offers a solution by distributing tasks across multiple agents, allowing for time and cost optimization. Visit monorepo.tools or nx.dev to learn more and achieve focus and contentment like Dan.

Building a monorepo is like flying a spaceship: many people work together to make sure things don't go up in flames. In this talk we'll go over tools, techniques and best practices to help us put out fires and stay on course throughout our intergalactic journey. Disclaimer: attending this talk probably doesn't qualify you to fly spaceships!

Monorepos & Spaceships – Navigating Successfully Through Code and Cosmos

Max Kless

Hello, I'm Vitor Norton, a developer advocate at SuperViz. I'm passionate about connecting people, highly dependent on my productivity tools, and love the idea of working anywhere in the world. Working remotely is a top priority, but we also don't want to feel alone. Let's explore some examples of companies that have addressed this issue: Gather Town, Miro, and Microsoft Teams. Collaborative components enable real-time collaboration by synchronizing participants' actions. The mouse pointers component utilizes a room concept to synchronize mouse positions. Channels and WebSockets are used for real-time data synchronization. CR-DTS is a conflict-free data-related type used to handle counter conflicts in collaborative environments.

Figma, Google Docs, Miro, and several other tools allow you to see in real time what a person is doing, but how? In this talk, you’ll get to know the concept of event-brokers, pubsub design pattern, web sockets. We will unravel these features and understand how to make them.

Breaking the Code Behind Realtime Collaboration With Websockets

Vitor Norton

Today's Talk introduces Graphi, a declarative dataflow programming environment for AI. It emphasizes the importance of asynchronous APIs and deep programming environments in the era of AI. The JavaScript version of OpenAPI enables easier handling of multiple asynchronous calls. Declarative dataflow programming improves efficiency and async/await simplifies calling asynchronous API functions. To further optimize asynchronous programming, a dataflow approach is recommended. Graphi allows building conversational graphs and handling cyclic dataflow. It offers advantages like parallelism, resultability, and scalability. Graphi introduces new concepts like nested graphs and distributed computing. It is an open-source project actively being improved and welcomes contributions.

Because of the availability of various AI services and open source LLMs, we are now able to build very sophisticated "agentic" applications. Managing concurrently running multiple AI agents and controlling data-flow among them is quite difficult in traditional Promise or async/await programming. We propose a "data-flow programming" style along with a reference open-source implementation, GraphAI (https://github.com/receptron/graphai).

Leveraging Data Flow Programming for Scalable and Efficient AI Systems in Distributed Environments

Satoshi Nakajima

React Advanced 2024

In this Talk, Deepanshu discusses the concept of server-driven UI (SDUI) and its benefits. SDUI shifts the responsibility of determining the UI from the client to the server, enabling dynamic changes without touching client-side code. React's component-based architecture makes it a natural fit for SDUI, allowing for flexibility and real-time control. The server sends a schema that guides the UI structure, and React components dynamically render the UI based on the schema. SDUI enables real-time updates, personalized experiences, and enhances the user experience. However, it also presents challenges such as increased server load and managing state. Examples of companies using SDUI include Airbnb, Spotify, Netflix, and Amazon.

Front-end developers often face the challenge of building UIs that need frequent updates to keep up with changing business requirements and user preferences. This can lead to slow release cycles and frustration for both developers and users. Server-Driven UI (SDUI) offers a solution by shifting UI logic to the backend, enabling rapid updates without requiring app store approvals or complex deployments. This talk will explore how SDUI, combined with React, empowers teams to build flexible, maintainable, and quickly adaptable applications that deliver exceptional user experiences.

Server-Driven UI: Building Dynamic React Applications

Dipanshu Gupta

I'm Gil, a performance architect at Wix. Today, I'll explain how we use code splitting to improve website performance. Code splitting breaks down JavaScript into smaller chunks or React components, loading them only when needed. This reduces JavaScript size and improves user experience. We measure performance using Core Web Vitals, focusing on INP scores, which evaluate interactivity. Reducing JavaScript improves INP. Our INP scores have significantly improved, thanks to our code splitting techniques. Let's dive into the code splitting strategies we use, starting with dynamic import and React Lazy. Let's move on to a more advanced example: conditionally loading components on page load, not on user interactions. We fetch the comments data and render the comment section only if there are any comments. This method is supported in React 18 and works for server-side rendering (SSR). React components can be loaded dynamically on scroll or hover interactions with suspense. If the components are already rendered with SSR, we just need to download and hydrate them. This is only possible with the new suspense in server-side rendering (SSR). We use react-lazy with dynamic imports to render the component when it enters the viewport. I created a download on viewport wrapper that creates a ref and uses the intersection observer to resolve a promise when the component enters the viewport. I use the viewport and a wrapper that calls a function called use, which is implemented using the suspense API from React. This function is used to manage the promise and render the components only after it's resolved. The suspense component handles this promise. We moved props calculation to the server side and fetched them in the React component. This approach simplifies the process and can be implemented using the dynamic API in Next.js. By conditionally rendering components and calculating props on the server side, we can significantly reduce the amount of JavaScript code loaded in the client side, resulting in improved performance.

In this talk, we'll dive into Wix's journey towards achieving unmatched web performance through advanced code-splitting techniques in React, tackling the significant challenges posed by large JavaScript bundles and excessive main thread usage.  As Wix's application expanded, facing increased complexity and demand, traditional performance optimization methods fell short. This presentation will trace the evolution from basic dynamic imports to sophisticated strategies like React component splitting, server-side logic separation, and the adoption of modern techniques including SSR, Suspense, and React server components. Emphasizing the necessity for scalable solutions in large-scale applications, we will also discuss the implementation of the Inversion of Control (IOC) pattern for efficient feature loading.  Importantly, for each solution, I will provide code examples of both the issue and the solution, suitable for both beginners and advanced React developers.  This story not only showcases our significant performance improvement but also highlights the importance of evolving optimization strategies to align with the scale of the application, offering insights into transitioning from simple fixes to advanced, robust solutions for enhancing web application performance in React.

Scaling React Performance: From Basic to Advanced Code-Splitting Techniques

Gil Eckstein

Welcome to the talk on Microfrontends and Betamax. The speaker shares their experience of accidentally building a plugin SDK for microfrontends. They discuss the goals and bootstrapping process, emphasizing the importance of adaptability and separation of concerns. The use of behavior subjects and portal rendering is explained, along with the composition and resilience of microfrontends. The speaker demonstrates rendering REC.js within AngularJS and highlights the challenges of handling communication and deployment. They also discuss managing breaking changes, local development, testing, and shared dependencies. The talk concludes with a humorous anecdote and contact information for further engagement.

React portals + RxJs = micro frontends on steroids.At bettermarks, we are migrating an AngularJS app to React using micro frontends. Picture a dashboard with widgets from different frontends depending on permissions and settings without coupling.We implemented a reliable solution for our micro frontends - and yes, we can embed React components within AngularJs!I'll showcase our solution and demonstrate how this can help you build more robust applications by trying to break our.

We Accidentally Built a Plugin SDK for Micro Frontends

André Bauer

JS Nation

JSNation 2024

Approximately one year ago, we started a modernization effort, but faced challenges with company politics and the reality of our tech stack. Lesson one is the importance of aligning goals and understanding current problems. Lesson two is the importance of getting everyone on board and committed to the project's success. Lesson three is repeatedly telling stakeholders why big technological changes are worth the investment.

Which technology stack to choose? What to do to get rid of legacy applications? And how the heck can we structure our teams to support our efforts? Let's talk about the big problems that can arise during a large-scale modernization effort, offering solutions and preventative measures to ensure a successful migration. We delve into the intricacies of transitioning from a hodgepodge of diverse projects and technologies to a more streamlined architecture. Let's explore leveraging Domain-Driven Design (DDD) to structure teams, their responsibilities, and project boundaries, creating a more efficient and effective tech environment.

Navigating a Large Scale Modernization With DDD

Markus Oberlehner

AWS SafeKit is a market leader in airport control software, managing the entire operation of an airport. Microfrontends extend microservice architecture to the frontend, allowing components to be combined at runtime. Module federation from Webpack is a popular approach for loading remote modules. Microfrontends offer benefits such as incremental upgrades and deployment independence, but also come with downsides like poor performance and complexity. Microfrontends are recommended for large-scale enterprise applications with distinct requirements and the need for experimentation.

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.

Microfrontends in Safety Critical Aviation Systems

Jarred Utt

C3 Dev Festival

C3 Dev Festival 2024

As a software engineer, achieving success in software development requires having a strategy and tactics. However, obstacles such as unnecessary meetings and miscommunication with clients can hinder progress. The methodology used in software development is more important than the programming language. Soft engineering is about understanding strategy and tactics and finding efficient solutions to problems. Software architecture should be aligned with business goals and objectives. Documentation is important for scalability and avoiding miscommunication, but finding the right balance is key. Task efficiency and simplicity in code design are crucial. Embracing simplicity and improving documentation can lead to better software architecture. Communication and collaboration between management and engineering teams is essential for making informed decisions.

Being pragmatic and understanding the tasks are crucial for effectively achieving your activity as a software developer. Unfortunately more is needed to acquire successful software. At this point, you need to go beyond and understand the strategy and tactics of the software engineer.Good software is closer to business and needs to be ready to change often. Rewriting the whole system from scratch becomes a real temptation. New shiny solutions like microservices pretend to solve this problem using new technology. But is there any guarantee that this feeling won't come up again after some time?It does not matter if it is a micro, nano, or even atomic service; no new buzzword or trend can help us with this problem.So here's the answer you've been looking for: you must explore multiple tactics and strategies in software engineering practices, such as documentation, testing, domain-driven design, persistence, cloud adoption, and the different design and architecture styles.This interaction will cover the ultimate guide to making the best use of architecture and design to guarantee a better, maintainable, and evolutionary solution. You'll also learn how to avoid complex systems and fight against legacy to achieve the desired innovation with stability.

Tactics and Strategies on Software Development: How to Reach a Successful Software

Otavio Santana

Building JavaScript Apps and Privacy: Understanding the importance of privacy in software development and the impact it can have on the world. Privacy concerns extend beyond targeted advertising and include data leaks and breaches. The connection of multiple pieces of data by data brokers poses a threat to privacy. The local first approach allows for data storage on local devices while still using a server for synchronization. Implementing local first requires a good database and APIs for data storage. Principles like end-to-end encryption and password protection bring benefits but also present challenges. Moving to privacy-focused analytics, using passkeys for encryption, and secure data sharing are ways to protect user privacy.

Local-first community created a fresh new architecture for our world dominated by cloud. In this talk, Andrey Sitnik, will advocate for local-first architecture, delve into its unique futures, and provide real-world production experience. This talk is helpful for every engineer because it contains multiple steps to improve privacy. From simple first steps without rewriting the app to profound revisions utilizing local-first architecture- there’s something for everyone.

Privacy-First Architecture

Andrey Sitnik

Node Congress

Node Congress 2024

Today's Talk discusses microservices optimization strategies for distributed systems, specifically focusing on implementing casual consistency to ensure data synchronization. Vector clocks are commonly used to track the casual relationship between write events in distributed systems. Casual consistency allows for concurrent and independent operations without synchronization, maximizing parallelism and system resource utilization. It enables effective scalability, better latency, and fault tolerance in distributed systems through coordination, resilience, reconfiguration, recovery, and data replication.

- Delve into the intricacies of optimizing microservice architecture for achieving high performance and resilience.- Explore the challenges related to performance bottlenecks and resilience in microservices-based systems.- Deep dive into the strategies for enhancing performance, such as efficient communication protocols, asynchronous messaging, and load balancing, while also discussing techniques for building resilience, including circuit breakers, fault tolerance, and chaos engineering.- Explore relevant tooling and technologies, such as service mesh and container orchestration, and offer insightful case studies and lessons learned from real-world implementations.- Emphasize the importance of continuous improvement and adaptation in microservices environments, alongside reflections on the future trajectory of microservices architecture.

Optimizing Microservice Architecture for High Performance and Resilience

Santosh Nikhil Kumar

React Day Berlin 2023

This lightning talk introduces the concept of config-driven UI using ReactJS, which allows for dynamic and customizable UIs without hard-coding. The technique involves using a JSON file to specify the type, size, position, and data source for each component. The talk also explains the structure of config-driven UI components, including elements, vertical and horizontal containers, and nested layouts.

We at Microsoft are rethinking the way we use ReactJS as frontend devs, traditional React UI Design patterns results in redundant code, making code maintainability cumbersome. By making UI Config driven we supercharged React components by making config file a single source of truth, The above approach made it easier to onboard new UI scenarios quickly and with minimal regression in the old UI Flows, resulting in a significant reduction in dev efforts, the best part is all the code was kept in Typescript only no XML or other declarative languages were used.

Config Driven UI using ReactJS

Joban Singh

Webpack is a module bundler that converts code into a format browsers can read. It has a plugin architecture built with Tappable that allows users to tap into hooks for important events. Tappable instances like compiler and compilation can be used to tap into hooks. The resolver in Webpack is used to check if required paths exist and can modify non-JavaScript files using loaders.

Webpack is a powerful tool for building modern JavaScript applications, but its architecture can be complex and daunting for developers who are new to it. In this talk, we will dive into the inner workings of Webpack and explore how its various components work together to create a bundle. By the end of this talk, you will have a comprehensive understanding of Webpack's architecture and its plugin system. You will be equipped with the knowledge to build complex applications using Webpack confidently.

The Anatomy of Webpack: A Deep Dive Into Its Architecture

Nitin Kumar

React Summit US 2023

Nithya Narasimhan discusses how to build an enterprise-grade application by deconstructing a reference implementation. The development environment includes GitHub Codespaces, devcontainer, and GitHub Copilot Chat. The Contoso Real Estate app provides a fully functioning experience in the browser. The Composable Enterprise pattern and API-first design are key components. Deployment is facilitated through infrastructure as code and an azure.yml file.

Building enterprise-grade applications is challenging. So how can you learn to build one? Start by tearing one down!! Say hello to Contoso Real Estate - an open-source reference implementation featuring a composable architecture with micro-frontends and a cloud-native backend - that provides the perfect sandbox for hands-on exploration and learning. In this talk, we'll take the implementation for a spin using GitHub Codespaces as our local development environment to explore the code, build &amp; preview the application and deploy it to the cloud with one command. We'll dive under the hood to understand the project structure (monorepo), developer experience (tooling) and application insights (monitoring). Want to join me on the teardown adventure? Just bring your browser and a GitHub account!

Want to Build an Enterprise-Grade App? Tear One Down!

Nitya Narasimhan

React Advanced 2023

Today's Talk explores the value of using frameworks in software development, specifically focusing on React and its impact on web development. The Talk delves into the benefits of frameworks, such as solving routing and data fetching challenges, handling edge cases, and providing server-side rendering. It also introduces the concept of server components and their role in server-side rendering. The Talk highlights the advantages of soft navigation and the seamless communication between client and server. Overall, frameworks offer valuable functionality that enhances productivity and addresses common development challenges.

The prevalent advice on how to use React today is to use a framework: either to start with one or to incrementally adopt one. This deep-dive talk will explore why, and how to go about this with live code examples.

Why Everybody Needs a Framework

Today's Talk introduces the concepts of hydration and off islands, explores the benefits of islands for enhancing server-side rendered HTML with client-side JavaScript, discusses the lazy approach of re-zoomability and its advantages over traditional hydration, highlights the use of resumability and concurrent React for improved rendering performance, examines the features and concerns of React server components, touches on the co-location of client and server code, and explores future trends in rendering and navigation. The Talk also reflects on past ideas and emphasizes the importance of identifying core metrics for performance optimization.

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!

Matheus Albuquerque

JS GameDev Summit

JS GameDev Summit 2023

Today's Talk covers game design and architecture, including entity component systems, game loops, and decoupling game logic from rendering. Entity component systems are popular in JavaScript game development for representing games as entities and their components as behavior on data. Game loops control the flow of the game and updating its state, with different architectures like fixed time step and variable time step. Decoupling game logic from rendering improves performance and flexibility, allowing for independent updates and easy addition of new features. Having a clear separation of concerns in game development improves performance, increases flexibility, and makes debugging easier.

In the realm of game development, the right architecture and design patterns can make all the difference. This session delves into the world of game development patterns and architectures in JavaScript, offering a comprehensive exploration of the techniques and strategies used to create engaging and well-structured games.

Game Development Patterns and Architectures in JavaScript

Olayinka Atobiloye

TS Congress

TypeScript Congress 2023

Hi, everyone. Today, I'll be showing you some of the features that modern frameworks implement or frameworks that leverage Typescript implement to improve the developer and user experience. I'll cover some of the features that Expo with Expo Router and Next.js with the AppRouter implements. Let's talk about setting up TypeScript in both Expo and Next.js. Both frameworks provide a TypeScript-first development experience. The most important feature is type safe routing, which enhances developer productivity and app stability. Frameworks provide a built-in link component for link generation. It reduces the risk of typos and throws type errors when linking to non-existent routes. In Expo, enable the .typed experiment and import the link component from the exporouter package. Expo supports static and dynamic routes, and throws errors for incorrect parameters. ExpoRouter provides hooks like UseSegments and UseRouter for more control. In Next.js, enable typedRoutes in the next config file. We can import the link component from the next link package and restart the dev server after updating the next config file. Next.js automatically generates route definitions and includes the type file in the TS config. Autocompletion is available for the href attribute, which can be a string or dynamic value. Next.js provides hooks like use router for static navigation and router.push to prevent redirection to broken routes. Catch all routes in type safe routing pose a challenge for enforcing type safety on the href attribute. TypeScript may not throw an error for routes that may be broken or lead to unwanted pages. Keep this in mind when working with catch all routes. Before a production build, route types should be in place to ensure accurate type definitions. Generating routes is an ongoing task that needs to happen at the right moment to avoid build-time errors. When implemented correctly, type-safe routes can elevate the developer experience by preventing broken links or dysfunctional routes. In Next.js, server components and client components have different limitations. Next.js provides automatic error checking for importing useState in server components and enforces the useClientDirective to prevent using client-related code in the wrong places. Next.js also ensures type safety by throwing errors for invalid segment config options and requiring the alt attribute for image components to improve accessibility. Config files in Expo and Next.js have different approaches to incorporating TypeScript, with Expo using the TS node require hook and Next.js supporting type checking through jsdoc in the config JS file. By enabling type-safe routing, we catch potential issues at compile time, ensuring robust routes and unbroken links. Many other frameworks and tools leverage TypeScript to empower developers and deliver error-free experiences to users.

TypeScript goes beyond annotating syntax. We’ll explore how modern frameworks leverage type-safety at the project-level to empower better architecture, greater stability, and higher velocities.

Exploring the TypeScript-first architecture of modern frameworks

Lydia Hallie

React Summit

React Summit 2023

Legacy can refer to ancient architecture or old code, and it is important to acknowledge and address legacy issues. Legacy code can be disorganized and outdated, making it difficult to update and extend. The goal is to leave the code base in a better condition than before, prioritizing code that is easily modifiable by others.

As a front-end teamlead, I was faced with the challenge of transitioning multiple legacy projects, which happened rapidly and was a painful process. One of the main issues I encountered was dealing with a legacy project that had no documentation. I had to figure out how to stabilize it, put it in order, and reduce the cost of its maintenance and development.

The Path Through Legacy: Delicate Balance Between Tolerance and Phobia

Maxim Nam

Today's Talk explores architectural shifts in transactions, highlighting the dominance of JavaScript in the modern transactional stack and the elimination of the frontend-backend divide. The use of serverless and component-driven toolings allows for scalable infrastructure provisioning and removes the need for DevOps teams. Additionally, workflow engines play a crucial role in orchestrating async functions in the serverless native world.

Databases and transactional backends are the heartbeats of our everyday lives - they power nearly every transaction in the modern world, from booking airplane tickets to ordering food on Doordash. The status quo of powering these transactions today is building on top of a microservices-heavy architecture -- by leveraging caches and queues to preserve transaction state and OLTP that guarantees idempotency and consistency. The next evolution of this stack is replacing cache/queues with a central orchestrator -- workflow engines like cadence and conductor. This all happened in what we traditionally call "the backend", but a new stack is emerging for the Javascript world: more and more greenfield projects are written only in Javascript/Typescript, and this group of projects share a unique stack unlike what we have seen previously. The presentation will dive into the history and evolution of platform shifts, and focus on the most exciting transactional problems presented in the modern monoliths world that's edge-native, 100% Javascript -- and argue why the word "serverless" is out of date :)

The Rise of Modern Transactional Stack

Yoko Li

This Talk explores the evolution of styling architecture, dynamic theming with style components, and optimizing style updates. It discusses the challenges of CSS migration and the choice between JavaScript and CSS native tooling. The Talk also touches on CSS tools and libraries, including Tailwind CSS and CSS in JS major libraries like MUI. The importance of picking a stack based on team members' strengths and the use of namespacing CSS for conflict-free dependency trees are highlighted.

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.

Moving on From Runtime Css-In-Js at Scale

Siddharth Kshetrapal

This Talk discusses the transition from a PHP monolith to a federated micro-frontend setup at Personio. They implemented orchestration and federation using Next.js as a module host and router. The use of federated modules and the integration library allowed for a single runtime while building and deploying independently. The Talk also highlights the importance of early adopters and the challenges of building an internal open source system.

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.

Federated Microfrontends at Scale

Daniel Bolivar

JSNation 2023

Technology is a spiral, with foundational ideas resurfacing. Java revolutionized enterprise applications. REST and JSON simplified building APIs and websites. Node.js enabled fast and custom development, leading to the microservices revolution. Platformatic aims to fill the gap in building, managing, and scaling microservices painlessly.

As developers we stand on the shoulders of giants, and it can be helpful to take a look at the past to gain a better perspective. In this talk we’ll briefly explore the past decade of backend development and architectural patterns. We’ve often ditched technologies in an attempt to make the developer experience frictionless. However we sometimes forget what we can learn from “the good old days”. What are you building: a monolith, a microservices system or something in between? A shift in how we see things can help us keep moving forwards.

APIs are Evolving. Again.

Matteo Collina

Luca Maraschi

Node Congress 2023

This talk explores the creation of a full-text search engine in JavaScript, highlighting the challenges with existing search engines like Algolia and the advantages of using JavaScript. The speaker emphasizes the importance of code optimization and performance enhancement techniques in JavaScript. The talk also discusses the evolution of the Lyra search engine into the open-source project Orama, which offers a feature-rich and highly performant full-text search engine for JavaScript. The speaker addresses questions about language choice, scalability, and deployment, and showcases the benefits of deploying an immutable database to a CDN.

During the past months, I developed Lyra, an incredibly fast full-text search engine entirely written in TypeScript. It was surprising to me to see how it could compete with solutions written in Rust, Java, and Golang, all languages known for being typically "faster than JavaScript"... but is that even true? In this talk, I will share some lessons I learned while developing complex, performance-critical applications in JavaScript.

Things I learned while writing high-performance JavaScript applications

Michele Riva

Daphne uses Remix for their web application, benefiting from its resilience, error boundaries, cache boundaries, and progressive enhancement. Remix simplifies form submission, authorization, and validation, and allows for easier refactoring and code duplication avoidance. Next and Remix are used together, with Remix serving as the backend for the frontend and handling data aggregation. Remix provides query functions for fetching data, mutations for form data validation and API calls, and custom conventions using the handle export. Migrating to Remix resulted in smaller JavaScript files, faster navigation, and the ability to preload data and assets. The migration process took around nine months and involved mixing Next.js and Remix using Express. Hiring someone to work on Remix is easier than hiring for other frameworks.

A review of how we're using Remix at Daffy.org to change the way people give to charities. We'll talk about why we decided to use Remix, how we've used it and migrated from our previous frontend application and some patterns and libraries we have developed internally.

#architecture