#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.
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
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.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
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.
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!
React Day Berlin 2023React Day Berlin 2023
7 min
Config Driven UI using ReactJS
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.
React Day Berlin 2023React Day Berlin 2023
15 min
The Anatomy of Webpack: A Deep Dive Into Its Architecture
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.
React Summit US 2023React Summit US 2023
13 min
Want to Build an Enterprise-Grade App? Tear One Down!
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 & 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!
React Advanced Conference 2023React Advanced Conference 2023
26 min
Hydration, Islands, Streaming, Resumability… Oh My!
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.
JS GameDev Summit 2023JS GameDev Summit 2023
28 min
Game Development Patterns and Architectures in JavaScript
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.
React Summit 2023React Summit 2023
8 min
The Path Through Legacy: Delicate Balance Between Tolerance and Phobia
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.
React Summit 2023React Summit 2023
7 min
The Rise of Modern Transactional Stack
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 :)
React Summit 2023React Summit 2023
29 min
Moving on From Runtime Css-In-Js at Scale
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.
JSNation 2023JSNation 2023
28 min
APIs are Evolving. Again.
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.
Node Congress 2023Node Congress 2023
31 min
Things I learned while writing high-performance JavaScript applications
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.
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Remix Architecture Patterns
Remix provides amazing flexibility and can be deployed anywhere where JavaScript is running. But how does Remix fit into the bigger application landscape of an organization? Remix provides great utility, but how to best take advantage of it? What things should be handled inside of Remix, and what things are better off done elsewhere? Should we use the express adapter to add a WebSocket server or should that be a standalone microservice? How will enterprise organizations integrate Remix into their current stacks? Let’s talk architecture patterns! In this talk, I want to share my thoughts about how to best integrate Remix into a greater (enterprise) stack.
React Advanced Conference 2022React Advanced Conference 2022
31 min
Platform Freedom with Micro-frontends
Can React and TypeScript applications run on different platforms (app shells) with minimal source code changes ? Yes !!! with the Micro-frontend strategy in Multiplying architecture. I’ll be presenting a new dimension of Micro-frontend, that paved a way to decouple the components of a larger monolithic React application using a new framework called Multiplying architecture. The framework is highly flexible and scalable for code development, also aiding the business and community.
React Advanced Conference 2022React Advanced Conference 2022
21 min
Treat your users right with Segmented Rendering
If you think that static rendering is limited to generic and public content that is the same for every user of your website, this talk is for you. Segmented Rendering is a new pattern for the Jamstack that lets you personalize content, statically, without any sort of client-side rendering or per-request Server-Side Rendering. Get the best possible performances for use cases such as theming, internationalization, A/B testing, multi-tenancy, and start treating your users right!
React Advanced Conference 2022React Advanced Conference 2022
22 min
The New Architecture Is Here… What Now?
The React Native new architecture has been "coming next year!" since 2019 - but, this time, it’s actually here! So… what now? What do we actually need to do, to benefit from this all new shiny tech? In this talk, I want to provide some insights and in-depth analysis of the current state of the migration path to the new architecture, to help you and your team evaluate and estimate when and how and how long it will take you to get to the next level!
React Advanced Conference 2022React Advanced Conference 2022
26 min
Bringing the New React Native Architecture to the OSS Community
At the end of 2021, we successfully rolled out the New React Native Architecture in the Facebook app. Now, it’s time to empower every React Native developer on the globe to use the New React Native Architecture, both the new Fabric renderer and the new TurboModule system. But migrating an entire ecosystem to a New Architecture is no easy task. To support the whole community in this endeavour, we lined up a set of tools and materials that will help both app and library developers to join us in this journey. In the talk, we will present how the New React Native Architecture looks in the OSS space. We will discuss the impact this will have on developing React Native projects. Lastly, we will cover what we learned from the React Native New Architecture migration at Meta, and how you can tackle your migration in your organization.
React Summit 2022React Summit 2022
17 min
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
There are many ways of authoring components in React, and doing it right might not be that easy, especially when components get more complex. In this talk, you will learn how to build future-proof React components. We will cover two different approaches to building components - Composition and Configuration, to build the same component using both approaches and explore their advantages and disadvantages.
React Summit 2022React Summit 2022
25 min
Bringing the New React Native Architecture to the OSS community
At the end of 2021, we successfully rolled out the New React Native Architecture in the Facebook app.Now, it’s time to empower every React Native developer on the globe to use the New React Native Architecture, both the new Fabric renderer and the new TurboModule system.But migrating an entire ecosystem to a New Architecture is no easy task.To support the whole community in this endeavor, we lined up a set of tools and materials that will help both app and library developers to join us in this journey.In the talk, we will present how the New React Native Architecture looks in the OSS space. We will discuss the impact this will have on developing React Native projects. Lastly, we will cover what we learned from the React Native New Architecture migration at Meta, and how you can tackle your migration in your organization.
React Summit 2022React Summit 2022
20 min
Multiple apps, one code to rule them all
More and more, React is being used for complex apps that accommodate numerous types of users, workflows, and mechanics. Sometimes it’s different people who each use part of the app, but a single-user multi-workflow scenario isn’t uncommon as well.In this session, we’ll learn about our options when building multiple experiences within a single React app — without losing our sanity. I’ll use some examples from what we do at Wilco.
React Summit 2022React Summit 2022
23 min
Sharing is Caring: (How) Should Micro Frontends Share State?
Micro frontends architecture is extremely powerful when it comes to splitting large frontend monoliths into smaller, individually deployable blocks, each is owned by an autonomous team and is focused on a business domain. But what about State? We are often told that micro frontends shouldn't share state, as this would make them coupled to each other. However, when it comes to complex UIs, it is not rare to encounter scenarios where state management between micro frontends is necessary. This talk is about finding the sweet spot — In which scenarios it is reasonable for micro frontends to share State? and how should micro frontends share State while remaining decoupled of each other? We discuss & compare different solutions in React.
JSNation 2022JSNation 2022
20 min
Building a Sustainable Codebase with FP
As software engineers we are always trying to be more productive, to deliver better code, and to have faster development feedback. In this talk, we'll explore how functional programming, tests and hexagonal architecture can perform great together in order to support a maintainable codebase for hundreds of engineers and services. Diving deeper on how we can leverage hexagonal architecture with dependency rejection in order to decouple decisions from effects, resulting in a code that is easier to reason, compose and test. The codebase is not the only one that takes advantages from that, but also the developers. It helps everyone feel more comfortable and engaged about maintaining good practices.
React Summit 2022React Summit 2022
25 min
React Microfrontend Applications for TVs and Game Consoles
DAZN is the fastest-growing sports streaming service and during this talk, we will consider our experience building tv applications (for ps5, xbox, LG, Samsung and other targets) with micro frontend architecture. You may expect time travel to see how it started and what we have at the moment, what makes tv development different compared to the web, same as techniques that allow us to share code between targets. You will learn how we test our application with an in-house remote testing lab as well as our deployment and release process.
TypeScript Congress 2022TypeScript Congress 2022
15 min
Plug-in architecture: how TypeScript let us paint-by-numbers
Adding a new feature to an unfamiliar codebase can be painfully slow. What if you could lean on TypeScript to guide you?

At Snyk plugin architecture is a common pattern to extend language support across different products and codebases. Adding TypeScript to the mix has allowed us to add new features quickly and it can be as simple as painting by numbers when it comes to extending the code.

Join me as we create a simple library using plugin architecture and follow the trail of TypeScript hints to add a new feature. 
GraphQL Galaxy 2021GraphQL Galaxy 2021
8 min
All Things Graph...
REST is an API design architecture, which, in the last few years, has become the norm for implementing web services. It uses HTTP to get data and perform various operations (POST, GET, PUT, and DELETE) in JSON format, allowing better and faster parsing of data. But REST comes with some downsides that have enterprises considering alternative mechanisms to manage performance, developer time, and production of their APIs — enter GraphQL. GraphQL doesn't have to be a replacement to REST, the two API designs can co-exist and be leveraged for the appropriate use-case. Join us for a conversation about what benefits, shortcomings, tooling, and design decisions you need to consider while making this evaluation.
React Advanced Conference 2021React Advanced Conference 2021
7 min
A New Kind of Abstraction
Developers often look at abstractions as being "the closer to the metal, the better," meaning that as abstractions become further removed from the lowest possible level, the more you give up in terms of performance and features. But abstractions work as a spectrum also. We'll look at how we can adjust our view of abstractions and what kind of examples we can use to better understand that abstractions have less to do with programming and more to do with where we deploy.
DevOps.js Conf 2021DevOps.js Conf 2021
31 min
Software Architectures Gone Wild
Get ready for a run through the world of Software Architectures! Everyone who works in software has heard of terms like ‘pwa’, ‘monoliths’, ‘headless’ , ‘microservices’ and even ’service oriented architectures’. We all know what they are, but how much do we really know about them? In this talk, we will show you the differences, the similarities, when to use them, when not to use them, the success stories and of course: the massive failures. Get ready for a half an hour of tech-comedy: architecture is going to be fast and fun!
TestJS Summit - January, 2021TestJS Summit - January, 2021
28 min
Writing Testable Serverless Apps Using Hexagonal Architecture
According to many polls, testing serverless applications and fear of the cloud vendor lock-in are among the top five challenges organizations face when adopting serverless. We often hear that using serverless effectively requires a mind shift. But what does that mean? Do we need new tools and strategies for testing serverless applications, or can we use existing tools we already use for our non-serverless applications? And what about cloud vendor lock-in? Is that a real thing or just a fictional story that scares people away from serverless? Can we decrease a risk of vendor lock-in using a well-known architecture, such as hexagonal architecture?
JSNation Live 2021JSNation Live 2021
21 min
Micro-scopes – How to Build a Modular Modern App in a Bundled World
In this talk we will explore the great benefits of breaking a big modern app to meaningful, independent pieces – each can be built, deployed and loaded separately. We will discuss best practices and gotchas when trying to apply this microservice-like pattern to the chaotic world of the browser, and we'll see how building the right pieces guarantees a brighter future for your apps. Let's dive into Neverendering story of modern front-end architecture.
JSNation Live 2021JSNation Live 2021
8 min
How Your Architecture and Infrastructure Can Make (or Break) Your Team’s Productivity
Developers want to ship and create value for our users. Why, then, do so many teams struggle with getting things to production quickly? In this talk, Jason Lengstorf will look at the impact our frontend architecture and infrastructure has on our teams’ ability to build, iterate, and deploy software — and how it affects the quality and risks of deployment.