Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sheriff: Modularity in TypeScript Applications

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.

Rainer Hahnekamp

October 16, 2023
Tweet

More Decks by Rainer Hahnekamp

Other Decks in Technology

Transcript

  1. Rainer Hahnekamp
    14. October 2023
    DevFest Vienna
    Modularity in
    TypeScript
    Applications

    View full-size slide

  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

    View full-size slide

  3. Agenda
    ● Frontend Architecture
    ● Sheriff in Theory
    ● Modularity in JavaScript/TypeScript
    ● Sheriff in Practice
    ● Q&A

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. Modularity in JavaScript
    ● Native with ESM
    ● Third-Party Libraries
    ○ Nx
    ○ dependency-cruiser
    ○ madge
    ○ good-fences
    ○ eslint-plugin-boundaries

    View full-size slide

  7. Sheriff: Modularity in TypeScript
    ● Module Encapsulation

    View full-size slide

  8. Sheriff: Modularity in TypeScript
    ● Module Encapsulation
    ● Dependency Rules

    View full-size slide

  9. Sheriff: Modularity in TypeScript
    ● Module Encapsulation
    ● Dependency Rules
    ● Lightweight

    View full-size slide

  10. Sheriff: Modularity in TypeScript
    ● Module Encapsulation
    ● Dependency Rules
    ● Lightweight
    ● Convention over Configuration

    View full-size slide

  11. Sheriff: Modularity in TypeScript
    ● Module Encapsulation
    ● Dependency Rules
    ● Lightweight
    ● Convention over Configuration
    ● Zero Dependencies

    View full-size slide

  12. Sheriff: Modularity in TypeScript
    ● Module Encapsulation
    ● Dependency Rules
    ● Lightweight
    ● Convention over Configuration
    ● Zero Dependencies
    ● For all TypeScript Projects

    View full-size slide

  13. Sheriff: Modularity in TypeScript
    ● Module Encapsulation
    ● Dependency Rules
    ● Lightweight
    ● Convention over Configuration
    ● Zero Dependencies
    ● For all TypeScript Projects
    ● (Heavily) Influenced by Nx

    View full-size slide

  14. https://github.com/
    softarc-consulting/sheriff

    View full-size slide

  15. 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

    View full-size slide