Tweet
Tweet

Slide 1

Slide 1 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Angular Architecture Workshop ANGULARarchitects.io

Slide 2

Slide 2 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 2 Agenda #1 Modularization with Nx & Sheriff #2 Micro Frontends with Federation #3 Signals & Signal Forms #4 Signal Store

Slide 3

Slide 3 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 3 About me (Remote) Angular Workshops and Consulting Google Developer Expert for Angular Blog, Books, Articles, and Talks about Angular Manfred Steyer, ANGULARarchitects.io

Slide 4

Slide 4 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 5 Workshop Website Link

Slide 5

Slide 5 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten How to Structure our Solution?

Slide 6

Slide 6 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Good Fences Makes Good Neighbors!

Slide 7

Slide 7 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 8 Vertical Architectures < Minimal Dependencies Vertical 1 Vertical 2 Vertical 3 Feature Feature Feature Feature Feature Feature Feature Feature Feature Conway's law

Slide 8

Slide 8 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 9 Strategic Design (DDD) Booking Check-in Boarding Luggage Sub-Domains

Slide 9

Slide 9 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 10 Booking Boarding Bounded Context Flight Price Seats Passenger Tickets Flight Ticket Ubiquitous Language

Slide 10

Slide 10 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 11 Finding Bounded Contexts Passenger Travel Agency Check-in Agent Boarding Agent Book Flight Check-in Passenger Check-in Luggage Board Plane Pickup Luggage

Slide 11

Slide 11 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 12 Event Storming

Slide 12

Slide 12 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Translation Into The Frontend

Slide 13

Slide 13 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 14 Booking Boarding Shared Feature Feature Feature Feature Feature UI UI UI UI UI UI UI UI UI Domain Domain Domain Domain Domain Domain Util Util Util Util Util Util Enterprise Monorepo Patterns, Nrwl 2018: https://tinyurl.com/y2jjxld7 Smart Comp. Dumb Comp. Shared Kernel (if really needed) & other libs

Slide 14

Slide 14 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Nx

Slide 15

Slide 15 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 16

Slide 16

Slide 16 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 17 • Organize Repos and Project(s) Around Libraries • Module Boundaries • Build Cache • Dependency Graph Selected Features

Slide 17

Slide 17 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 18 DEMO

Slide 18

Slide 18 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Sheriff

Slide 19

Slide 19 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @softarc/eslint-plugin-sheriff Works with the Angular CLI and with Nx 20 Modularization Boundaries on a per-folder basis

Slide 20

Slide 20 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten • Visualizing your Architecture • Analyzing your Architecture • Works with CLI and Nx 21 Detective

Slide 21

Slide 21 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 22 DEMO

Slide 22

Slide 22 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 23 Micro Frontends

Slide 23

Slide 23 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 24 Micro Frontends Booking App Check-in App Boarding App Luggage App

Slide 24

Slide 24 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 25 Module Federation Shell (Host) Micro Frontend (Remote) // Maps Urls in // webpack config remotes: { mfe1: "http://..." } import('mfe1/Cmp') // Expose files in // webpack config exposes: { './Cmp': './my.cmp.ts' }

Slide 25

Slide 25 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 26 Sharing Libs Shell (Host) Micro Frontend (Remote) shared: [ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]

Slide 26

Slide 26 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 2 7 Alternatives Getting Popular TURBOPACK

Slide 27

Slide 27 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 28

Slide 28

Slide 28 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 29 DEMO

Slide 29

Slide 29 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 30 Free eBook (6th Edition) ANGULARarchitects.io/book Module Federation & Nx

Slide 30

Slide 30 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 31 [Social Media] Manfred Steyer [web] ANGULARarchitects.io Manfred Steyer @ Manfred Steyer Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io