The Shell Library patterns with Nx and Monorepo Architectures

Nacho Vazquez Calleja
Angular In Depth
Published in
2 min readMar 3, 2020

Co-authored with Lars Gyrup Brink Nielsen

AngularInDepth is moving away from Medium. This article, its updates and more recent articles are hosted on the new platform inDepth.dev

In this article, we will discuss the concepts of shell libraries and how they differ. At the end, we will settle on a shell library pattern and discuss under which circumstances it’s useful.

This is article is part of the Angular Architectural Patterns series.

In their architecture books, Nrwl and Manfred Steyer define related concepts called feature shell libraries and shell libraries, respectively. We will discuss both definitions and how they differ.

Finally, we will settle on a new variation that we called the composite shell library pattern and discuss under which circumstances it’s useful.

The Feature shell library

In their free e-book “Enterprise Angular Monorepo Patterns”, the Nrwl authors state that:

feature-shell is the app-specific feature library

Not very clear, right!? That’s probably because we have omitted some essential parts. First, let’s divide and conquer the definition.

The first part indicates that the feature-shell is app-specific. Therefore it cannot be appropriately described outside an application context.

The example used in the Nwrl book represents a Airline company developing different applications for its business. One of those applications is the Booking Application. The Booking Application is the domain-wise encapsulation of two real-world applications, the Booking Web Application and the Booking Mobile Application. Such encapsulation is made under the premise that both applications will share the same functionality and features.

In this case the feature-shell would be the booking-feature-shell.

We now know that the feature-shell is directly connected with the domain-level concept of an application.

The second part of the definition and the final piece of the puzzle is that the feature-shell is a feature library.

According to Nrwl, a feature library contains a set of files that configure a business use case or a page in an application. It includes container components, page components, routed components, and use case-specific presentational components. In general, every type of business-related component.

Besides the booking-feature-shell, there are at least three more feature libraries in the booking application example. The flight search, passenger information, and a seatmap, each representing different pages of the application, and why not different subdomains.

But, how exactly do these two concepts glue together?

(…)

Continue reading the full article for free on inDepth.dev to learn about:

  • Nx feature shell library use cases and examples
  • Manfred Steyer shell library use cases and examples
  • Composite shell library use cases and examples

--

--

Nacho Vazquez Calleja
Angular In Depth

inDepth.dev writer, front-end architect, meetup speaker, scuba diving lover. Passionate about Software architecture and sharing knowledge.