#architecture

Subscribe
Architecture in the context of JavaScript refers to the overall design and structure of an application. It involves the selection of appropriate technologies and frameworks, the organization of code into logical components, and the development of a coherent plan for how these pieces fit together. Good architecture ensures that the application is maintainable, extensible, and efficient.
AI on Demand: Serverless AI
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
AI on Demand: Serverless AI
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
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.
Scaling Up with Remix and Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
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.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
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.
Understanding React’s Fiber Architecture
React Advanced 2022React Advanced 2022
29 min
Understanding React’s Fiber Architecture
Top Content
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.
The Eternal Sunshine of the Zero Build Pipeline
React Finland 2021React Finland 2021
36 min
The Eternal Sunshine of the Zero Build Pipeline
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!
Accelerating Value With HubSpot’s Unique Deployment Process and Team Structure
React Summit US 2024React Summit US 2024
15 min
Accelerating Value With HubSpot’s Unique Deployment Process and Team Structure
Watch video: Accelerating Value With HubSpot’s Unique Deployment Process and Team Structure
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.
Making React Work in Chrome Extensions
React Summit US 2024React Summit US 2024
11 min
Making React Work in Chrome Extensions
Watch video: Making React Work in Chrome Extensions
Sriram Hariharan
Darshan Bhatta
2 authors
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.
How I Support More Than 100 Languages in My React app...and You Can Too!
React Summit US 2024React Summit US 2024
28 min
How I Support More Than 100 Languages in My React app...and You Can Too!
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.
Feature Flagging with React Server Components
React Summit US 2024React Summit US 2024
20 min
Feature Flagging with React Server Components
Watch video: Feature Flagging with React Server Components
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.
8 Things You Did Now Know Micro Frontends Can Do
React Summit US 2024React Summit US 2024
22 min
8 Things You Did Now Know Micro Frontends Can Do
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.
Polymorphic React Components for Both the Client and the Server
React Summit US 2024React Summit US 2024
10 min
Polymorphic React Components for Both the Client and the Server
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.
Web Workers: Handling Heavy Processing on the Client Side
JSNation US 2024JSNation US 2024
18 min
Web Workers: Handling Heavy Processing on the Client Side
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.
Micro Frontends and Security
JSNation US 2024JSNation US 2024
23 min
Micro Frontends and Security
Watch video: Micro Frontends and Security
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.
Scaling a11y
JSNation US 2024JSNation US 2024
20 min
Scaling a11y
Watch video: Scaling a11y
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.
inlang - Using Version Control to Solve i18n
JSNation US 2024JSNation US 2024
14 min
inlang - Using Version Control to Solve i18n
Watch video: inlang - Using Version Control to Solve i18n
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.
Monorepos & Spaceships – Navigating Successfully Through Code and Cosmos
JSNation US 2024JSNation US 2024
28 min
Monorepos & Spaceships – Navigating Successfully Through Code and Cosmos
Watch video: Monorepos & Spaceships – Navigating Successfully Through Code and Cosmos
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.
Breaking the Code Behind Realtime Collaboration With Websockets
JSNation US 2024JSNation US 2024
20 min
Breaking the Code Behind Realtime Collaboration With Websockets
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.
Leveraging Data Flow Programming for Scalable and Efficient AI Systems in Distributed Environments
JSNation US 2024JSNation US 2024
19 min
Leveraging Data Flow Programming for Scalable and Efficient AI Systems in Distributed Environments
Watch video: Leveraging Data Flow Programming for Scalable and Efficient AI Systems in Distributed Environments
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.
Server-Driven UI: Building Dynamic React Applications
React Advanced 2024React Advanced 2024
19 min
Server-Driven UI: Building Dynamic React Applications
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.
Scaling React Performance: From Basic to Advanced Code-Splitting Techniques
React Advanced 2024React Advanced 2024
12 min
Scaling React Performance: From Basic to Advanced Code-Splitting Techniques
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.
We Accidentally Built a Plugin SDK for Micro Frontends
React Advanced 2024React Advanced 2024
27 min
We Accidentally Built a Plugin SDK for Micro Frontends
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.
Navigating a Large Scale Modernization With DDD
JSNation 2024JSNation 2024
11 min
Navigating a Large Scale Modernization With DDD
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.
Microfrontends in Safety Critical Aviation Systems
JSNation 2024JSNation 2024
9 min
Microfrontends in Safety Critical Aviation Systems
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.
Tactics and Strategies on Software Development: How to Reach a Successful Software
C3 Dev Festival 2024C3 Dev Festival 2024
31 min
Tactics and Strategies on Software Development: How to Reach a Successful Software
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.
Privacy-First Architecture
JSNation 2024JSNation 2024
29 min
Privacy-First Architecture
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.
Optimizing Microservice Architecture for High Performance and Resilience
Node Congress 2024Node Congress 2024
24 min
Optimizing Microservice Architecture for High Performance and Resilience
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.
Config Driven UI using ReactJS
React Day Berlin 2023React Day Berlin 2023
7 min
Config Driven UI using ReactJS
Watch video: Config Driven UI using ReactJS
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.
The Anatomy of Webpack: A Deep Dive Into Its Architecture
React Day Berlin 2023React Day Berlin 2023
15 min
The Anatomy of Webpack: A Deep Dive Into Its Architecture
Watch video: The Anatomy of Webpack: A Deep Dive Into Its Architecture
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.
Want to Build an Enterprise-Grade App? Tear One Down!
React Summit US 2023React Summit US 2023
13 min
Want to Build an Enterprise-Grade App? Tear One Down!
Watch video: Want to Build an Enterprise-Grade App? Tear One Down!
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.
Why Everybody Needs a Framework
React Advanced 2023React Advanced 2023
39 min
Why Everybody Needs a Framework
Watch video: Why Everybody Needs a Framework
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.
Hydration, Islands, Streaming, Resumability… Oh My!
React Advanced 2023React Advanced 2023
26 min
Hydration, Islands, Streaming, Resumability… Oh My!
Watch video: Hydration, Islands, Streaming, Resumability… Oh My!
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.
Game Development Patterns and Architectures in JavaScript
JS GameDev Summit 2023JS GameDev Summit 2023
28 min
Game Development Patterns and Architectures in JavaScript
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.
Exploring the TypeScript-first architecture of modern frameworks
TypeScript Congress 2023TypeScript Congress 2023
25 min
Exploring the TypeScript-first architecture of modern frameworks
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.
The Path Through Legacy: Delicate Balance Between Tolerance and Phobia
React Summit 2023React Summit 2023
8 min
The Path Through Legacy: Delicate Balance Between Tolerance and Phobia
Watch video: The Path Through Legacy: Delicate Balance Between Tolerance and Phobia
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.
The Rise of Modern Transactional Stack
React Summit 2023React Summit 2023
7 min
The Rise of Modern Transactional Stack
Watch video: The Rise of Modern Transactional Stack
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.
Moving on From Runtime Css-In-Js at Scale
React Summit 2023React Summit 2023
29 min
Moving on From Runtime Css-In-Js at Scale
Watch video: Moving on From Runtime Css-In-Js at Scale
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.
Federated Microfrontends at Scale
React Summit 2023React Summit 2023
31 min
Federated Microfrontends at Scale
Top Content
Watch video: Federated Microfrontends at Scale
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.
APIs are Evolving. Again.
JSNation 2023JSNation 2023
28 min
APIs are Evolving. Again.
Matteo Collina
Luca Maraschi
2 authors
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.
Things I learned while writing high-performance JavaScript applications
Node Congress 2023Node Congress 2023
31 min
Things I learned while writing high-performance JavaScript applications
Top Content
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.
Remixing How We Give
Remix Conf Europe 2022Remix Conf Europe 2022
32 min
Remixing How We Give
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.
Remix Architecture Patterns
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Remix Architecture Patterns
Top Content
This Talk introduces the Remix architecture patterns for web applications, with over 50% of participants using Remix professionally. The migration from single page applications to Remix involves step-by-step refactoring and offers flexibility in deployment options. Scalability can be achieved by distributing the database layer and implementing application caching. The backend for frontend pattern simplifies data fetching, and Remix provides real-time capabilities for collaborative features through WebSocket servers and Server-SendEvents.
Astro & Fresh - Understanding the Islands Architecture
React Advanced 2022React Advanced 2022
21 min
Astro & Fresh - Understanding the Islands Architecture
The islands architecture is a new way to build websites with low or no JavaScript, using libraries like Astro and Fresh. Server-side rendering improves SEO and loading times, but can still result in large JavaScript payloads. Hydration allows for islands of interactivity, loading only necessary JavaScript. Astro is a framework for implementing the islands architecture, supporting multiple libraries like React and SolidJS. It enables progressive migration between frameworks and integration of different libraries in the same project.
Platform Freedom with Micro-frontends
React Advanced 2022React Advanced 2022
31 min
Platform Freedom with Micro-frontends
This talk explores Microfrontend strategies and the benefits of using the multiplying architecture to deploy applications on multiple platforms. It discusses the concepts of platform freedom, microfrontend implementation, and Backend for Frontend (BFF). The talk also highlights the challenges of debugging and styling in larger microfrontend applications and introduces the multiplying architecture as a solution. It explains the core elements of the multiplying architecture and how it enables communication between different tech stacks. The talk concludes by showcasing the use of embedded lists, federated modules, and Webpack configuration to achieve efficient code sharing and deployment across multiple distributions.
Treat your users right with Segmented Rendering
React Advanced 2022React Advanced 2022
21 min
Treat your users right with Segmented Rendering
The Talk discusses the concept of segmented rendering for personalization in web development. It explores different rendering techniques, including server-side rendering, static seed generation, and dynamic rendering. The issue of rich guests and poor customers is addressed through segmented rendering. The implementation of segmented rendering with Next.js involves a lightweight proxy server and URL rewriting. The Talk also highlights the benefits of invisible server-side rendering and suggests a future unified API for server rendering.
The New Architecture Is Here… What Now?
React Advanced 2022React Advanced 2022
22 min
The New Architecture Is Here… What Now?
The Talk discusses the new architecture in React Native, highlighting its benefits such as native interoperability, concurrency, faster startup, better memory management, and improved code quality. The migration process to the new architecture involves refactoring, codegen, and extending native interfaces. Challenges include typing, configuration, and migrating third-party libraries. React 18 introduces automatic batching and compatibility with the new architecture. Microsoft is expanding React Native to target desktop platforms and has a dedicated open-source tooling repository. The Talk emphasizes the importance of open-source contribution and setting healthy boundaries.
Bringing the New React Native Architecture to the OSS Community
React Advanced 2022React Advanced 2022
26 min
Bringing the New React Native Architecture to the OSS Community
The React Native community has been focusing on the new architecture, which aims to improve performance by rewriting internals using C++. The new architecture brings features like view flattening, CodeGen, and bridgeless mode. It also includes updates to build tools and JavaScript engine, such as Hermes. React Native 0.71 will include TypeScript types bundled in the NPM package, and Kotlin is fully supported on Android. The new architecture offers a transition from the legacy renderer and concurrent features, and there are resources available for migration and community support.
High-performance Next.js
React Summit 2022React Summit 2022
50 min
High-performance Next.js
Workshop
Michele Riva
Michele Riva
Next.js is a compelling framework that makes many tasks effortless by providing many out-of-the-box solutions. But as soon as our app needs to scale, it is essential to maintain high performance without compromising maintenance and server costs. In this workshop, we will see how to analyze Next.js performances, resources usage, how to scale it, and how to make the right decisions while writing the application architecture.
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
React Summit 2022React Summit 2022
17 min
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
Top Content
Today's Talk discusses building flexible, resilient, and future-proof React components using composition and configuration approaches. The composition approach allows for flexibility without excessive conditional logic by using multiple components and passing props. The context API can be used for variant styling, allowing for appropriate styling and class specification. Adding variants and icons is made easy by consuming the variant context. The composition and configuration approaches can be combined for the best of both worlds.
Bringing the New React Native Architecture to the OSS community
React Summit 2022React Summit 2022
25 min
Bringing the New React Native Architecture to the OSS community
Today's Talk introduces the new React Native architecture and its rollout to the open-source community. The new architecture eliminates the bridge component, improves performance, and enhances the developer experience. It includes features such as Fabric, Turbo Module, and Cogent component. The architecture also supports modern languages like TypeScript and Kotlin. Upgrading to the new architecture enables the use of React 18's concurrent features and new APIs. Proper documentation and a new architecture section on the website provide valuable resources for contributors and advanced developers.
Multiple apps, one code to rule them all
React Summit 2022React Summit 2022
20 min
Multiple apps, one code to rule them all
This Talk discusses the benefits of using a single app to host multiple experiences or mini-apps, as opposed to a micro front-end architecture. By using a single app, it becomes easier to share state, simplify code sharing, handle analytics and errors, and deploy and monitor the app. The Talk also covers the handling of the shell app, routing, authentication, and subdomains for authentication.
Sharing is Caring: (How) Should Micro Frontends Share State?
React Summit 2022React Summit 2022
23 min
Sharing is Caring: (How) Should Micro Frontends Share State?
Top Content
Micro-frontends allow development teams to work autonomously and with less friction and limitations. Organizing teams around business concerns, in alignment with subdomains, rather than technical concerns, can lead to software that is split nicely and user stories falling under the responsibility of a single team. Having a logical backup or reference point is important for implementing microfrontends without breaking their isolation. Microfrontends can communicate with each other using the window object and custom events. Microfrontends should be kept isolated while maintaining communication through various approaches.
Building a Sustainable Codebase with FP
JSNation 2022JSNation 2022
20 min
Building a Sustainable Codebase with FP
Today's Talk focuses on building sustainable architecture through functional programming, tests, and hexagonal architecture. It emphasizes the importance of maximizing functional programming and immutability to improve code quality and maintainability. The Talk also highlights the significance of tests for accuracy and speed, and discusses the benefits of hexagonal architecture in separating business logic from technical concerns. The concept of isolation and encapsulation in functional programming is explored, along with the advantages of using pure functions. Overall, the Talk provides insights into designing and implementing a sustainable and efficient codebase.
React Microfrontend Applications for TVs and Game Consoles
React Summit 2022React Summit 2022
25 min
React Microfrontend Applications for TVs and Game Consoles
This Talk discusses the architecture journey of a sports engagement platform, transitioning from a monolith to a microfrontend architecture. The ALEP microfrontend architecture is introduced to manage the complexity of a complex catalog and enable efficient deployment and version management. The deployment and release process involves using AliB and updating metadata in the deployment dashboard. The integration to React and TV development process involves using the AliB package and having independent lifecycles for packages. Shared code is used across different targets, and testing is done in a remote virtual lab. Focus management and key moments detection in sports are also addressed.
Plug-in architecture: how TypeScript let us paint-by-numbers
TypeScript Congress 2022TypeScript Congress 2022
15 min
Plug-in architecture: how TypeScript let us paint-by-numbers
When faced with challenges in supporting multiple package managers and keeping up with growth, implementing a plugin architecture can help. Extending a CLI for source control management systems like GitHub and GitLab can be done using TypeScript and Oclef CLI. TypeScript errors can be resolved by adding missing properties and implementing required functions for plugins. Supporting multiple repositories by following TypeScript errors and having the right setup can reduce time to production and onboarding. Plugin architecture with TypeScript can be a valuable tool for faster development and onboarding onto repositories.
All Things Graph...
GraphQL Galaxy 2021GraphQL Galaxy 2021
8 min
All Things Graph...
GraphQL is an up and coming trend in API development, allowing for the combination of REST endpoints into a single API call. Tyk, an open source API gateway vendor, is now offering full lifecycle API management. With GraphQL, developers can import REST APIs into Tyk and convert them into GraphQL APIs, simplifying the process and reducing the number of API calls required. This lightning talk provides a demonstration of importing IDs, defining data sources, and combining endpoints using GraphQL.
A New Kind of Abstraction
React Advanced 2021React Advanced 2021
7 min
A New Kind of Abstraction
Abstractions in software development build on top of other things and provide utility or make development easier. They can be low-level or high-level, and the smaller the abstraction, the closer it is to the lower level. Abstractions can operate in different environments and their level determines how the code operates and is approached. It's important to evaluate the abstractions used, their portability, and their distance from the low level.
Software Architectures Gone Wild
DevOps.js Conf 2021DevOps.js Conf 2021
31 min
Software Architectures Gone Wild
The Talk discusses different software architectures and their challenges. It highlights the trend of decoupling the front-end from the back-end and embracing headless architecture and Progressive Web Apps (PWA). The benefits of a service-oriented architecture (SOA) are emphasized, including flexibility, reliability, and scalability. The Talk also explores breaking down monolithic architectures into microservices and the importance of addressing pain points first. Additionally, it mentions the challenges of testing in a QA environment and the choice between microservices and monoliths depending on project goals.
Writing Testable Serverless Apps Using Hexagonal Architecture
TestJS Summit - January, 2021TestJS Summit - January, 2021
28 min
Writing Testable Serverless Apps Using Hexagonal Architecture
The scariest thing about serverless is the fear of vendor lock-in and losing control. Planning, good architecture, and deployment procedures help keep switching costs reasonable. Hexagonal architecture is a useful approach for writing testable serverless apps. Integration testing is crucial for serverless apps, and hexagonal architecture helps fight vendor lock-in and reduce switching costs. Docker is used for testing serverless functions, and the practicality of hexagonal architecture remains a question.
Micro-scopes – How to Build a Modular Modern App in a Bundled World
JSNation Live 2021JSNation Live 2021
21 min
Micro-scopes – How to Build a Modular Modern App in a Bundled World
This Talk discusses the importance of bundling code in the modern JavaScript world and introduces Webpack as the de facto standard for bundling modules. It explores techniques such as code splitting, multiple entry points, and controlling the build process to optimize code organization and improve performance. The Talk also delves into concepts like Universal Model Definition (UMD) and using externals in Webpack to avoid code duplication. It highlights the benefits of separating and maintaining code in an application, as well as the use of micro-frontends and monorepos for scalability and collaboration. Overall, the Talk emphasizes the significance of code separation, dependency management, and efficient bundling strategies for developing robust and modular applications.
How Your Architecture and Infrastructure Can Make (or Break) Your Team’s Productivity
JSNation Live 2021JSNation Live 2021
8 min
How Your Architecture and Infrastructure Can Make (or Break) Your Team’s Productivity
Today's Talk discusses how architecture and infrastructure choices impact team productivity. Complex systems can lead to frustration, fragility, and slowness, hindering efficiency and creating knowledge silos. Decoupled front-ends, pre-compiled front-ends, and serverless functions can improve productivity and enable faster deployment. Supportive architectures are crucial for building a shipping culture and avoiding frustrating, fragile, and slow systems.