Sheriff: Modularity in TypeScript Applications

Modularity is a crucial aspect of any architecture. The same applies to frontend applications.

Keeping track of dependencies and maintaining a clear overview of classes and functions can be overwhelming. Fortunately, there are tools that can help automate this process.

In my talk, I'll demonstrate common tools, like nx or dependency cruiser. The main focus, though, will be a new tool which is called Sheriff.

Furthermore, I will present a reference architecture based on Domain-Driven Design (DDD), which is widely adopted in frameworks like Angular. This architecture, combined with the accompanying Sheriff configuration, provides a practical and effective approach to structuring frontend applications.

Transcript

1. Rainer Hahnekamp 14. October 2023 DevFest Vienna Modularity in TypeScript Applications
2. About Me... Professional NgRx https://www.youtube.com/ @RainerHahnekamp https://www.ng-news.com https://github.com/softarc-consulting/sheriff • Rainer Hahnekamp ANGULARarchitects.io • Developer / Trainer / Speaker Modern Spring for Angular
3. Agenda • Frontend Architecture • Sheriff in Theory • Modularity in JavaScript/TypeScript • Sheriff in Practice • Q&A
4. Shared Forms Grid Error Handling Widgets Backend Middleware ... App Shell Domain (Holidays ) Domain (Customers) Domain (Bookings) Domain (Diary) Layer 1 - Domain modules
5. Domain Feature (Container Cmp.) Data UI (Presentational Cmp.) Domain Models Layer 2 Sub Modules
6. Modularity in JavaScript • Native with ESM • Third-Party Libraries ◦ Nx ◦ dependency-cruiser ◦ madge ◦ good-fences ◦ eslint-plugin-boundaries
7. Sheriff: Modularity in TypeScript • Module Encapsulation
12. Sheriff: Modularity in TypeScript • Module Encapsulation • Dependency Rules
15. Sheriff: Modularity in TypeScript • Module Encapsulation • Dependency Rules • Lightweight
16. Sheriff: Modularity in TypeScript • Module Encapsulation • Dependency Rules • Lightweight • Convention over Configuration
17. Sheriff: Modularity in TypeScript • Module Encapsulation • Dependency Rules • Lightweight • Convention over Configuration • Zero Dependencies
18. Sheriff: Modularity in TypeScript • Module Encapsulation • Dependency Rules • Lightweight • Convention over Configuration • Zero Dependencies • For all TypeScript Projects
19. Sheriff: Modularity in TypeScript • Module Encapsulation • Dependency Rules • Lightweight • Convention over Configuration • Zero Dependencies • For all TypeScript Projects • (Heavily) Influenced by Nx
20. https://github.com/ softarc-consulting/sheriff
21. Thanks!!!
22. Contact Data @Rainer Hahnekamp https://www.youtube.com/@RainerHahnekamp https://www.youtube.com/@ng-news https://www.angulararchitects.io https://www.rainerhahnekamp.com https://github.com/softarc-consulting/sheriff