#architecture

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.

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.

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!

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.