Structure for you big Angular applicatoins: npm-Packages, Monorepos, and Micro Apps @AngularDays 2019, Munich

@ManfredSteyer Structure for you big Angular applicatoins: npm-Packages, Monorepos, and
Micro Apps Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer

@ManfredSteyer Ever started a project from the scratch? Kick-off After
some weeks After some years

@ManfredSteyer Contents 1) npm Packages 2) Monorepos 3) Micro Apps
4) Choosing a solution

@ManfredSteyer About me… • Manfred Steyer SOFTWAREarchitekt.at • Angular Trainings
and Consultancy • Google Developer Expert (GDE) • Trusted Collaborator for Angular Team Page ▪ 4 Manfred Steyer Public: Munich, Frankfurt, Stuttgart, Vienna In-House: everywhere http://softwarearchitekt.at/workshops

@ManfredSteyer 1) npm Packages

@ManfredSteyer Why Packages? Sub Project Sub Project Sub Project Sub
Project Sub Project Sub Project Sub Project Sub Project

@ManfredSteyer Structure of an npm Package • /node_modules • your-stuff
• package.json

@ManfredSteyer Properties in package.json (Selection) name version description dependencies peer-
dependencies devdependencies

@ManfredSteyer package.json { "dependencies": { "@angular/core": "7.3.0", "@angular/http": "7.3.0" }
}

@ManfredSteyer package.json { "dependencies": { }, "peerDependencies": { "@angular/core": "^7.0.0",
"@angular/http": "^7.0.0" } }

@ManfredSteyer package.json { "dependencies": { }, "peerDependencies": { "@angular/core": "^7.0.0",
"@angular/http": "^7.0.0" }, "devDependencies": { [...] } }

@ManfredSteyer Angular Package Format https://goo.gl/hjt7G3

@ManfredSteyer Lots of DETAILS

@ManfredSteyer ng-packagr

@ManfredSteyer Angular CLI 6+ supports Packages

@ManfredSteyer Create Library with CLI >= 6 npm install -g
@angular/cli ng new lib-project cd lib-project ng generate library flight-booking-lib ng generate application playground-app ng serve --project playground-app ng build --project flight-booking-lib

@ManfredSteyer Folder Structure

@ManfredSteyer DEMO

@ManfredSteyer LogFormatter

@ManfredSteyer LogAppender

@ManfredSteyer Deployment

@ManfredSteyer Publishing to npm Registry • Increment version in package.json
• ng build --project flight-booking-lib • npm publish --registry http://localhost:4873 • npm install --registry http://localhost:4873

@ManfredSteyer Alternatives for setting the Registry • Global: npm set
registry http://localhost:4873 • Default: registry.npmjs.org • npm get registry • Project: .npmrc in project root

@ManfredSteyer npm Registries Nexus Artifactory Team Foundation Server Verdaccio npm
i -g verdaccio verdaccio

@ManfredSteyer DEMO

@ManfredSteyer Advantages • Distribution • Versioning • Decoupling between lib
authors and app authors

@ManfredSteyer Disadvantages • Distribution • Versioning • Decoupling between lib
authors and app authors ;-)

@ManfredSteyer Disadvantages Distribution • Annoying within project • Prevents gritting
further libs Versioning • Old versions • Conflicts • How to force devs to use latest version? Decoupling • What if lib authors == app authors?

@ManfredSteyer 2) Monorepos

@ManfredSteyer Workspace

@ManfredSteyer Advantages Everyone uses the latest versions No version conflicts
No burden with distributing libs Creating new libs: Adding folder Experience: Successfully used at Google, Facebook, …

@ManfredSteyer Two Flavors • Like Workspaces/Solutions in different IDEs Project
Monorepo • E. g. used at Google or Facebook Company-wide Monorepo

@ManfredSteyer Moving back and forth Npm Registry

@ManfredSteyer Tooling & Generator https://nrwl.io/nx

@ManfredSteyer Visualize Module Structure

@ManfredSteyer DEMO

@ManfredSteyer Advantages Sub Project Sub Project Sub Project Sub Project
Sub Project Sub Project Sub Project Sub Project

@ManfredSteyer Disadvantages Sub Project Sub Project Sub Project Sub Project
Sub Project Sub Project Sub Project Sub Project

@ManfredSteyer Disadvantages Sub Project Sub Project Sub Project Sub Project
Sub Project Sub Project Sub Project Sub Project Team A Team B Contract Maintainability? One Architecture/ One Framework

@ManfredSteyer 2) Micro Apps

@ManfredSteyer Idea µService µService µService

@ManfredSteyer Idea µApp µApp µApp

@ManfredSteyer Folie▪ 46 Pro Contra

@ManfredSteyer UI Composition w/ Hyperlinks µApp SPA µApp SPA µApp
SPA <a href="…>…</a> <a href="…>…</a>

@ManfredSteyer ✓ Simple  Loosing State  Load a new
Application  Consistent Look and Feel

@ManfredSteyer

@ManfredSteyer Web Components for Shared Widgets?

@ManfredSteyer µService Providing a (SPA based) Shell µApp µApp µApp
Shell ▪ iframes ▪ Bootstrapping several SPAs ▪ Consider Lazy Loading!

@ManfredSteyer Common Interface for µApps • Shell should not know
details of µApp and used Frameworks! • µApp provides events • µApp consumes events • Wrap µApp as Web Component?

@ManfredSteyer 3) DEMO

@ManfredSteyer Web Components

@ManfredSteyer Framework independent Components

@ManfredSteyer Can be dynamically loaded into the browser!

@ManfredSteyer Umbrella Term for several Standards

@ManfredSteyer Standards Templates HTML Imports Custom Elements Shadow DOM

@ManfredSteyer Can be pollyfilled down to IE11

@ManfredSteyer Polyfill

@ManfredSteyer Selected Polyfills • webcomponents-loader.js • Loads Polyfills on demand
• Custom Elements • Shadom DOM • Templates • native-shim.js • Needed for browsers that DO support polyfills • When downleveled to ES5 • Alternative: Differential Loading (providing ES5 + ES2015 bundles)

@ManfredSteyer API class CustomerSelector extends HTMLElement { […] }

@ManfredSteyer API class CustomerSelector extends HTMLElement { constructor() { super();
this.attachShadow({mode: 'open'}); this.shadowRoot.innerHTML = '<div>[…]</div>'; } […] }

@ManfredSteyer API class CustomerSelector extends HTMLElement { constructor() { super();
this.attachShadow({mode: 'open'}); this.shadowRoot.innerHTML = '<div>[…]</div>'; } […] } customElements.define('customer-selector', CustomerSelector);

@ManfredSteyer API <script src="customer-selector.min.js"></script> […] <customer-selector></customer-selector>

@ManfredSteyer Angular Elements

@ManfredSteyer Angular Elements Wrap Angular Components Expose Custom Elements

@ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [DateComponent], bootstrap: [],
entryComponents: [DateComponent] }) export class AppModule { }

entryComponents: [DateComponent] }) export class AppModule { constructor(private injector: Injector) { } ngDoBootstrap() { } }

entryComponents: [DateComponent] }) export class AppModule { constructor(private injector: Injector) { } ngDoBootstrap() { const DateElement = createCustomElement( DateComponent, { injector: this.injector }); customElements.define('date-picker', DateElement); } }

@ManfredSteyer Loading MicroApps <script src="date-element.bundle.js"></script> <date-picker></date-picker>

@ManfredSteyer DEMO

@ManfredSteyer 3) Recipes

@ManfredSteyer Communication

@ManfredSteyer Communication b/w Web Components <client-a state="appState" message="handle(event)"></client-a> <client-b state="appState"
message="handle(event)"></client-b> JavaScript in Shell

@ManfredSteyer Routing

@ManfredSteyer Routing /client-a/this/that /client-b/this/that /client-c/this/that :

@ManfredSteyer Lazy Loading

@ManfredSteyer Lazy Loading const content = document.getElementById('content');

@ManfredSteyer Lazy Loading const content = document.getElementById('content'); // Add script-Tag
const script = document.createElement('script'); script.src = [...]; content.appendChild(script);

@ManfredSteyer Lazy Loading const content = document.getElementById('content'); // Add script-Tag
const script = document.createElement('script'); script.src = [...]; content.appendChild(script); // Add Element const element: HTMLElement = document.createElement('client-a'); element.addEventListener('message', (event) => [...]); element.setAttribute('appState', [...]); content.appendChild(element);

@ManfredSteyer Bundling

@ManfredSteyer Bundles Custom Element 1 Custom Element 2 Custom Element
3 Libraries: Angular, Bootstrap, … Libraries: Angular, Bootstrap, …

@ManfredSteyer Tree Shaking + Ivy (Angular 8) Custom Element 1
Custom Element 2 Custom Element 3

@ManfredSteyer Sharing Libs Custom Element 1 Custom Element 2 Custom
Element 3 Libraries: Angular, Bootstrap, … UMD ngx-build-plus Drawbacks: Complexity, no isolation

@ManfredSteyer 4) Choosing a Solution

@ManfredSteyer Some General Advice Shared state, navigation b/w apps Hyperlinks
Legacy Apps or *very very* strong isolation? iframes Separate Deployment/ mix Technologies? Bootstrap several SPAs Monorepo little much yes no yes no Not a good fit for public web sites Wrap as Web Component?

@ManfredSteyer Blog > SOFTWAREarchitekt.at • A Software Architect's Approach Towards
Using Angular (And SPAs In General) For Microservices Aka Microfrontends • Micro Apps With Web Components Using Angular Elements • Angular Elements: A dynamic Dashboard … • Angular, React, Vue.Js And Co. Peacefully United Thanks To Micro Apps And Web Components

@ManfredSteyer Conclusion Packages: Reuse Monorepo: Structure Micro Apps: Decoupling CLI
6+ CLI 6+/ Nx Links, iframes, n SPAs, Web Components

@ManfredSteyer Contact and Downloads [mail] [email protected] [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer
d http://softwarearchitekt.at/workshops Slides & Examples

Structure for you big Angular applicatoins: npm-Packages, Monorepos, and Micro Apps @AngularDays 2019, Munich

Structure for you big Angular applicatoins: npm-Packages, Monorepos, and Micro Apps @AngularDays 2019, Munich

More Decks by Manfred Steyer

Other Decks in Programming

Featured

Transcript