From Chaos to Order:

How Angular Monorepos Can Simplify Your Codebase

devpato

Staff Developer Advocate at 

Patricio Vargas (Pato)

  • Google Developer Expert on Web Technologies
  • Microsoft MVP
  • Auth0 Ambassador
  • AWS Community Builder
  • Postman Supernova
  • Twilio Champion
  • Media Developer Expert at Cloudinary
  • Google Women Techmaker

devpato

Architecture

devpato

Architecture Considerations

devpato

App Overview

App Features

Domain Security

Domain Rules

Logging

Services/

Communication

Data Models

Features

Components

Shared

Functionality

Feature Modules

devpato

Shared Code?

2 Kinds

  • App Shared Code
  • Projects Shared Code

devpato

App Shared Code

devpato

Projects Shared Code

NPM Enterprise Registry

devpato

Libraries, Microfrontends, and Monorepos

devpato

Angular Libraries

Where search-lib is the name of your library

ng generate library search-lib

devpato

Wait what!!

devpato

Angular Libraries

PROS

  • Publish and share these libraries with other teams or projects.

devpato

Angular Libraries

CONS

  • Link your library to your main project and rebuild it for every change.
  • You will need to keep syncing your project with the latest version of the library.

devpato

Be careful when using libraries

  • Every shared lib needs to have its own CI/CD pipeline.
  • Each CI/CD pipeline should handle versioning of changes.
  • Every time a new change happens in a shared repo, you need to go to all your projects using this library and update their npm packages.
  • There can be mismatches with different npm packages for angular projects.

devpato

Microservices

microfrontend allows large applications to be split into smaller apps in their own codebase, maybe using a totally different stack, that can be composed. For example, your search component could be written in Angular and the rest of the app in Polymer and React.

devpato

Monorepos

Monorepos are a source control pattern where essentially all the codebase lives in the same repository. All projects will always use the latest version of the code.

What is a Monorepo?

devpato

Angular Monorepos

  • Same library version for every app.
  • Ease of maintenance: when you update a shared library, you update it for all apps.
  • No conflicts between versions.

PROS

devpato

Where should I build my libraries?

  • If developers of a company are set to work on the same main project, no matter how large, use a monorepos.
  • If developers are set to work on different projects, teams, locations, and codebases, you may want to build each library in their own repository.

devpato

devpato

Getting started with Nx

devpato

Getting started with Nx

npm install -g @nrwl/schematics
npx create-nx-workspace@latest paypal

Install Nx globally

Create a Nx Workspace

devpato

Getting started with Nx

devpato

Creating an App

Now create your Angular app:

ng g @nrwl/angular:application store

devpato

Nx Workspace structure

Angular apps go here

Libraries used by your Angular apps go here

devpato

Project structure

devpato

Shared assets

devpato

Share assets

"assets": [
             "apps/employees/src/favicon.ico",
              "apps/employees/src/assets",
            {
              "glob": "**/*",
              "input": "./libs/ui/src/lib/shared-assets",
              "output": "./assets"
            }
          ]

devpato

devpato

Recuerden amigos

"Mi codigo limpio, pero mi perreo sucio"

-@LeonidasEsteban

resources

Angular Libraries with Nx for

Enterprise Apps
https://tinyurl.com/wt2kmqb

Angular Development in Enterprise
https://tinyurl.com/w5nv8pz

Angular Architecture
https://tinyurl.com/ycheksoa

devpato

Find the project on GitHub

https://tinyurl.com/52rdunj5

Angular for Enterprise - Short

By Patricio Vargas

Made with Slides.com

Angular for Enterprise - Short

  • 159

More from Patricio Vargas