# Getting started

Welcome to Squide (yes 🦑 with an "e"), a shell for Workleap federated applications. In this getting started section, you'll find an overview of the shell and a quick start guide to create a new federated application from scratch.

# Why a shell?

We have built this shell to facilitate the adoption of federated applications at Workleap by enforcing patterns that we believe will help feature teams successfully implement a distributed architecture.

The shell itself is a lightweight API layer built on top of Module Federation and React Router, with the goal of maximizing the strength of both libraries while interfering as little as possible with their functionality.

# Module Federation

We have identified 2 major challenges with frontend federated applications:

  • How can we prevent loading the same large dependencies twice when switching between modules?
  • How can we offer a cohesive experience that doesn't feel modular?

To address the first challenge, we believe that Module Federation provides a solution by offering a mechanism capable of deduping common dependencies shared between the host application and the remote modules at runtime.

With this mechanism in place, all federated parts of an application can now be loaded in the same browsing context instead of nested browsing contexts such as iframes.

By sharing the same browsing context (e.g. the same Document object, the same Window object, and the same DOM), federated parts now form a unified and cohesive single application, addressing the second challenge.

With Module Federation, we hope to develop federated applications that provide the same user experience as monolithic applications 🚀.

# React Router

React Router nested routes feature is ideal for federated applications as it enables highly composable and decoupled UI. For a more in-depth explanation, refer to this article.

# Module registration

The most distinctive aspect of this shell is the conventions it enforces for loading and registering remote modules. Here's a brief overview of the flow:

  1. During bootstrap, the host application attempts to load predefined modules and calls a registration function with a specific name and signature for each successfully loaded module.

  2. During registration, a module receives the shared services of the federated application and use them to dynamically register its routes and navigation items.

  3. Once all the modules are registered, the host application will create a React Router instance with the registered routes and renders a navigation menu with the registered navigation items.

That's a nutshell overview. Of course, there is more to it, but these are the main ideas.

# Guiding principles

While developing the API of Squide, we kept a few guiding principles in mind. Those principles are not settled stones, you might want to diverge from them from time to time, but adhering to those will make your experience more enjoyable:

  • A module should always correspond to a subdomain of the application's business domain.

  • A module should be fully autonomous. It shouldn't have to coordinate with other parts of the application for things as trivial as navigation links.

  • A federated application should feel cohesive. Different parts of a federation application should have the ability to communicate with each others and react to changes happening outside of their boundaries.

  • Data and state should never be shared between parts of a federated application. Even if two parts require the same data or the same state values, they should load, store and manage them independently.

# Limitations

Module Federation comes with a few manageable limitations that are important to consider when architecting your distributed application:

  • A shared dependency cannot be tree-shaken. Since remote modules are loaded at runtime, module federation cannot infer which parts of a shared dependency will be used by the application modules. Therefore, tree-shaking is disabled for shared dependencies.

  • Updating a shared dependency to a new major version is not always straightforward and may result in complex deployment processes.

# Create your project

To get started, follow the quick start guide to create a new federated application from scratch.