Micro-scopes – How to Build a Modular Modern App in a Bundled World

Rate this content
Bookmark

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.

Liad Yosef
Liad Yosef
21 min
11 Jun, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

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.

Available in Español

1. Introduction to Bundling Code

Short description:

Welcome to my talk about bundling code in the modern JavaScript world. Let me start with a small story. The Hubble space telescope, launched in 1990, encountered a problem with its broken camera. Astronauts had to be trained for three years to fix it. Today, we have a much simpler solution with nano satellites that are small, cheap, and easy to replace. This illustrates the genuineness of a modular architecture.

Hi everyone, welcome to my talk, microscopes, about bundling code in the modern JavaScript world. But before we start the talk, a little bit, a small story. So this amazing image that you see right now, the Pillar of Creation, was being taken by a space telescope. And this space telescope is called Hubble. And Hubble was launched in 1990, costing 4.7 billion dollars to launch. And it was a huge project, maybe one of the biggest ones that humanity ever undertook. And it was launched, and it was amazing, and it didn't work, because something was broken. The camera was broken. So they couldn't fix it. They couldn't pull it back to Earth and fix it. So they had to train astronauts for three years to go up there and fix the camera. And today, we have a much simpler solution. So today, we're using nano satellites, nano satellites, hundreds of thousands of satellites that are going around the Earth. And they're really small. They're really cheap. It's really easy to launch each one of them. And if one of them gets broken, then we just replace it. We just decommission it, and we just replace it. And that's the genuineness of a modular architecture. Instead of sending one big thing, a monolith if you want, you send a lot of small things. And if something breaks down, you just fix them.

2. Managing Bundled JavaScript Code with Webpack

Short description:

Today, we'll talk about bundled JavaScript code and how to handle it. In the past, code bases were unmaintained and files were large and difficult to understand. We now want to write modular code, but the browser's module system is not fully ready. So we use Webpack, the de facto standard for bundling modules. Webpack creates a single bundle file that contains the entire code. It analyzes the dependencies and builds a dependency tree, bundling them into a nice package. However, Webpack bundles everything into one file by default, resulting in large bundles. To solve this, we can use code splits to bundle code only when needed.

I'm Riyad Youssef. I'm the client architect at Dooda. And today, we'll talk a little bit about bundled world above and beyond. So how do we manage, how do we handle bundled JavaScript code? The first question you probably ask yourself is why? Why do we need to bundle at all? I have my code, I have it in the files, why do I need to bundle? And for that, we have to go a little bit back in history, a little bit back to maybe the dinosaur's age, where our code bases were unmaintained. And our files looked like that. We had huge files, a lot of lines. And if we did want to break into small files, we had to put a lot of script tags inside a document, and it was really tough to maintain. It was really tough to understand what's happening there.

So today, we want to write some sort of modular code. We have modules in the browser, but it's not fully ready yet, so we just write modules in our source code, right? We have a code, a file, let's say app.jsx, and it has dependencies. So it has app-reference dependency, top, bottom, and button. Maybe they have interdependencies between themselves, and maybe those dependencies have their own dependencies, and they connect between themselves. So how do we handle that? How do we handle all of these dependency chain, all of this dependency tree? We have Webpack. Webpack is today the standard way, and with an asterisk, because there are a lot of similar tools that make it a little bit better, but Webpack is the de facto standard for bundling modules. So we're talking a little bit about Webpack today, and we're talking a bit about how to use it. So just a little bit, a primer on Webpack, Webpack creates a single file, a single bundle, containing the entire code, and it does it, if we don't tell it, we just tell it, okay, we point it to the main entry, to the index, to the main file, and we tell it where to output.

Webpack works in this way. It goes to the entry, it tries to understand from the entry what are the dependencies, and it parses them, and recursively it builds the entire dependency tree and maybe Lodash has its own dependency, and then it just collects all of the dependencies, understands the dependencies, and bundles them. Bundles them in a nice package Bundle.js. It basically serializes the dependency with a little bit of magic from the top, so it serializes them to a single file, Bundle.js, and we can then take this Bundle.js file and use it in our HTML. We can put it in a script tag, because that's something that browsers know how to handle. But we have a problem, because Webpack, unless called otherwise, it will bundle everything to one file. So you can see here a dependency graph. It's an actual dependency graph of a medium-size application, and if you bundle all of this together, you get 15 megabytes of Bundle. So that's enough to get everyone desperate. But in Webpack, we can do code splits. So we can define for Webpack. We have split points in the code, so we don't want to bundle everything into one file, but we want, from these points, to bundle to this file, and then have a dynamic chunk. So split my code and include it only when I need it. So this is the easiest way to do that.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

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
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.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
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.
Understanding React’s Fiber Architecture
React Advanced Conference 2022React Advanced Conference 2022
29 min
Understanding React’s Fiber Architecture
Top Content
We've heard a lot about React's Fiber Architecture, but it feels like few of us understand it in depth (or have the time to). In this talk, Tejas will go over his best attempt at understanding Fiber (reviewed by other experts), and present it in an 'explain-like-I'm-five years old' way.
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!
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
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.
How to Build CI/CD Pipelines for a Microservices Application
DevOps.js Conf 2021DevOps.js Conf 2021
33 min
How to Build CI/CD Pipelines for a Microservices Application
Top Content
Microservices present many advantages for running modern software, but they also bring new challenges for both Deployment and Operational tasks. This session will discuss advantages and challenges of microservices and review the best practices of developing a microservice-based architecture.We will discuss how container orchestration using Kubernetes or Red Hat OpenShift can help us and bring it all together with an example of Continuous Integration and Continuous Delivery (CI/CD) pipelines on top of OpenShift.

Workshops on related topic

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.
Decomposing Monolith NestJS API into GRPC Microservices
Node Congress 2023Node Congress 2023
119 min
Decomposing Monolith NestJS API into GRPC Microservices
Workshop
Alex Korzhikov
Alex Korzhikov
The workshop focuses on concepts, algorithms, and practices to decompose a monolithic application into GRPC microservices. It overviews architecture principles, design patterns, and technologies used to build microservices. It covers the theory of the GRPC framework and protocol buffers mechanism, as well as techniques and specifics of building isolated TypeScript services in the Node.js stack. The workshop includes a live use case demo of decomposing an API application into a set of microservices. It fits the best architects, tech leads, and developers who want to learn microservices patterns.
Level: AdvancedPatterns: DDD, MicroservicesTechnologies: GRPC, Protocol Buffers, Node.js, TypeScript, NestJS, Express.js, PostgreSQL, TurborepoExample structure: monorepo configuration, packages configuration, common utilities, demo servicePractical exercise: refactor monolith app
Decoupling in Practice
Node Congress 2023Node Congress 2023
102 min
Decoupling in Practice
WorkshopFree
Chad Carlson
Chad Carlson
Deploying decoupled and microservice applications isn't just a problem to be solved on migration day. Moving forward with these architectures depends completely on what your team's workflow experience will look like day-to-day post-migration.
The hardest part of this can often be the number of vendors involved. Some targets are best suited for specific frontend frameworks, while others are more so for CMSs and custom APIs. Unfortunately their assumptions, workflows, APIs, and notions of security can be quite different. While there are certain advantages to relying on a strict contract between apps – where backend and frontend teams work is limited to a single vendor – this isn't always realistic. This could be because you're still experimenting, or simply the size of your organization doesn't allow for this kind of specialization just yet.
In this workshop, you'll have a chance to explore a different, single vendor approach to microservices using Strapi and Next.js as an example. You'll deploy each app individually, establishing a workflow from the start that simplifies customization, introducing new features, investigating performance issues, and even framework interchangeability from the start.
Structure:- Getting started- Overview of Strapi- Overview of Platform.sh workflow- Deploying the project- Switching services- Adding the frontend
Prerequisites:- A Platform.sh trial account created- The Platform.sh CLI installed
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.
How to develop, build, and deploy Node.js microservices with Pulumi and Azure DevOps
DevOps.js Conf 2022DevOps.js Conf 2022
163 min
How to develop, build, and deploy Node.js microservices with Pulumi and Azure DevOps
Workshop
Alex Korzhikov
Andrew Reddikh
2 authors
The workshop gives a practical perspective of key principles needed to develop, build, and maintain a set of microservices in the Node.js stack. It covers specifics of creating isolated TypeScript services using the monorepo approach with lerna and yarn workspaces. The workshop includes an overview and a live exercise to create cloud environment with Pulumi framework and Azure services. The sessions fits the best developers who want to learn and practice build and deploy techniques using Azure stack and Pulumi for Node.js.
How to Convert Crypto Currencies With GRPC Microservices in Node.js
JSNation 2023JSNation 2023
117 min
How to Convert Crypto Currencies With GRPC Microservices in Node.js
Workshop
Alex Korzhikov
Andrew Reddikh
2 authors
The workshop overviews key architecture principles, design patterns, and technologies used to build microservices in the Node.js stack. It covers the theory of the GRPC framework and protocol buffers mechanism, as well as techniques and specifics of building isolated services using the monorepo approach with lerna and yarn workspaces, TypeScript. The workshop includes a live practical assignment to create a currency converter application that follows microservices paradigms. It fits the best developers who want to learn and practice GRPC microservices pattern with the Node.js platform.
Prerequistes:- Good understanding of JavaScript or TypeScript- Experience with Node.js and writing Backend applications- Preinstall Node.js, npm- Preinstall Protocol Buffer Compiler- We prefer to use VSCode for a better experience with JavaScript and TypeScript (other IDEs are also ok)