Tweet
Tweet

Slide 1

Slide 1 text

RainerHahnekamp The End of Barrel Files Rainer Hahnekamp ng-Poland 6. November 2024 New Modularization Techniques with Sheriff

Slide 2

Slide 2 text

RainerHahnekamp About Me... https://www.ng-news.com https://github.com/softarc-consulting/sheriff ● Rainer Hahnekamp ANGULARarchitects.io NgRx Team (Trusted Collaborator) ● Developer / Trainer / Speaker @RainerHahnekamp Workshops NgRx • Testing • Spring • Quality

Slide 3

Slide 3 text

RainerHahnekamp Agenda ● Barrel Files as Module Boundaries ○ Nx & Sheriff ● Tree-Shaking & Barrel Files ● Barrel-less Modules in Sheriff

Slide 4

Slide 4 text

RainerHahnekamp Barrel Files as Module Boundaries

Slide 5

Slide 5 text

RainerHahnekamp Main Ingredients for Modules Encapsulation Dependency Rules

Slide 6

Slide 6 text

RainerHahnekamp Shared Forms Grid Error Handling Widgets Backend Middleware ... App Shell Domain (Holidays ) Domain (Customers) Domain (Bookings) Domain (Diary) Layer 1 - Domain modules

Slide 7

Slide 7 text

RainerHahnekamp Domain Feature (Container Cmp.) Data UI (Presentational Cmp.) Domain Models Layer 2 Sub Modules

Slide 8

Slide 8 text

RainerHahnekamp Barrel File 💔 Tree Shaking

Slide 9

Slide 9 text

RainerHahnekamp Application Barrel File (index.ts) Lazy Loaded Chunk (Component, Route,...)

Slide 10

Slide 10 text

RainerHahnekamp Application Lazy Loaded Chunk (Component, Route,...) Bundler

Slide 11

Slide 11 text

RainerHahnekamp Application Lazy Loaded Chunk (Component, Route,...) Bundler

Slide 12

Slide 12 text

RainerHahnekamp Application Lazy Loaded Chunk (Component, Route,...) Bundler

Slide 13

Slide 13 text

RainerHahnekamp Application Lazy Loaded Chunk (Component, Route,...) Bundler Issues with Tree-Shaking

Slide 14

Slide 14 text

RainerHahnekamp Application Lazy Loaded Chunk (Component, Route,...) Bundler Playing it Safe

Slide 15

Slide 15 text

RainerHahnekamp Application Lazy Loaded Chunk (Component, Route,...) Bundler Playing it Safe

Slide 16

Slide 16 text

RainerHahnekamp Application Lazy Loaded Chunk (Component, Route,...) Bundler main.ts

Slide 17

Slide 17 text

RainerHahnekamp Application Lazy Loaded Chunk (Component, Route,...) Bundler main.ts Unoptimized Main Bundle

Slide 18

Slide 18 text

RainerHahnekamp Demo Time

Slide 19

Slide 19 text

RainerHahnekamp Application Barrel File (index.ts) Lazy Loaded Chunk (Component, Route,...)

Slide 20

Slide 20 text

RainerHahnekamp Application Barrel File (index.ts) Lazy Loaded Chunk (Component, Route,...)

Slide 21

Slide 21 text

RainerHahnekamp Application Lazy Loaded Chunk (Component, Route,...)

Slide 22

Slide 22 text

RainerHahnekamp Application Lazy Loaded Chunk (Component, Route,...) Bundler

Slide 23

Slide 23 text

RainerHahnekamp Application Lazy Loaded Chunk (Component, Route,...) Bundler main.ts

Slide 24

Slide 24 text

RainerHahnekamp Application Lazy Loaded Chunk (Component, Route,...) Bundler main.ts Optimized Main Bundle

Slide 25

Slide 25 text

RainerHahnekamp

Slide 26

Slide 26 text

RainerHahnekamp

Slide 27

Slide 27 text

RainerHahnekamp No Encapsulation without Barrels!!!

Slide 28

Slide 28 text

RainerHahnekamp Sheriff: Barrel-less Modules

Slide 29

Slide 29 text

RainerHahnekamp Demo Time

Slide 30

Slide 30 text

RainerHahnekamp Before we end… ● Hybrid Mode ○ Modules as Folder ○ Nx Libraries ○ Sheriff for both Barrel-less and Barrel Modules (=Libraries) ● Secondary Entry Points for Libraries ○ Smaller, but multiple "Barrel Files" ○ Angular Material as Example

Slide 31

Slide 31 text

RainerHahnekamp Thanks