Architectures for huge Angular based enterprise applications @IT-Tage 2018 in Frankfurt

Contains:
- Monorepo
- Micro Apps w/ Hyperlinks
- Micro Apps w/ Shell

# Monorepo Example
https://github.com/manfredsteyer/monorepo-demo

# Micro Apps Example
https://github.com/manfredsteyer/Angular_MicroApps_Different_Technologies

# More Blog-Articles & Angular Trainings
https://www.softwarearchitekt.at

Transcript

1. @ManfredSteyer
   Architectures for huge
   Angular based enterprise applications
   Manfred Steyer
   SOFTWAREarchitekt.at
   ManfredSteyer
   

   View Slide

2. @ManfredSteyer
   About me…
   • Manfred Steyer
   • SOFTWAREarchitekt.at
   • Angular Trainings and Consultancy
   • Google Developer Expert (GDE)
   Page ▪ 2
   Manfred Steyer
   Public: Vienna, München, Stuttgart, Frankfurt
   In-House: everywhere
   http://softwarearchitekt.at/workshops
   

   View Slide

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

   View Slide

4. @ManfredSteyer
   Contents
   1)
   npm Packages
   2)
   Monorepo
   3)
   Micro Apps
   4)
   How to
   choose?
   

   View Slide

5. @ManfredSteyer
   1) npm Packages
   

   View Slide

6. @ManfredSteyer
   Why Packages?
   Sub
   Project
   Sub
   Project
   Sub
   Project
   Sub
   Project
   Sub
   Project
   Sub
   Project
   Sub
   Project
   Sub
   Project
   

   View Slide

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

   View Slide

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

   View Slide

9. @ManfredSteyer
   Lots of
   DETAILS
   

   View Slide

10. @ManfredSteyer
    Angular CLI 6+
    supports
    Packages
    

    View Slide

11. @ManfredSteyer
    Create npm-Packages with CLI >= 6
    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
    cd dist/flight-booking-lib
    npm publish --registry http://...
    

    View Slide

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

    View Slide

13. @ManfredSteyer
    Advantages
    • Distribution
    • Versioning
    

    View Slide

14. @ManfredSteyer
    Disadvantages
    • Distribution
    • Versioning
    ;-)
    

    View Slide

15. @ManfredSteyer
    Disadvantages
    Distribution
    • Annoying
    within project
    Versioning
    • Old versions
    • Conflicts
    • How to force
    devs to use
    latest version?
    

    View Slide

16. @ManfredSteyer
    2) Monorepos
    

    View Slide

17. @ManfredSteyer
    Workspace
    

    View Slide

18. @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, …
    

    View Slide

19. @ManfredSteyer
    Moving back and forth
    Npm Registry
    

    View Slide

20. @ManfredSteyer
    DEMO
    

    View Slide

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

    View Slide

22. @ManfredSteyer
    Visualize
    Module
    Structure
    

    View Slide

23. @ManfredSteyer
    Advantages
    Sub
    Project
    Sub
    Project
    Sub
    Project
    Sub
    Project
    Sub
    Project
    Sub
    Project
    Sub
    Project
    Sub
    Project
    

    View Slide

24. @ManfredSteyer
    Disadvantages
    Sub
    Project
    Sub
    Project
    Sub
    Project
    Sub
    Project
    Sub
    Project
    Sub
    Project
    Sub
    Project
    Sub
    Project
    

    View Slide

25. @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
    

    View Slide

26. @ManfredSteyer
    3) Micro Apps
    

    View Slide

27. @ManfredSteyer
    Idea
    System
    

    View Slide

28. @ManfredSteyer
    Idea
    µService
    µService
    µService
    

    View Slide

29. @ManfredSteyer
    Idea
    µApp
    µApp
    µApp
    

    View Slide

30. @ManfredSteyer
    Advantages
    No Contracts
    b/w Apps
    Separate
    Development
    Separate
    Deployment
    Mixing
    Technologies
    Mixing
    Architectures
    

    View Slide

31. @ManfredSteyer
    UI Composition
    w/ Hyperlinks
    µApp
    SPA
    µApp
    SPA
    µApp
    SPA
    …
    

    View Slide

32. @ManfredSteyer
    ✓ Simple
     Loosing State
     Load a new Application
    

    View Slide

33. @ManfredSteyer
    

    View Slide

34. @ManfredSteyer
    Web
    Components
    for Shared
    Widgets?
    

    View Slide

35. @ManfredSteyer
    µService
    Providing a (SPA based) Shell
    µApp
    µApp
    µApp
    Shell
    

    View Slide

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

    View Slide

37. @ManfredSteyer
    Wrap µApps into
    Web Components
    • Not a typical web component!
    • But: Unified API for Shell
    • And: Nesting
    

    View Slide

38. @ManfredSteyer
    DEMO
    

    View Slide

39. @ManfredSteyer
    Advantages
    • Several small and decoupled Projects
    • Autarkic Teams
    • Seperate development/ deployment
    • Own decisions (technology, architecture)
    

    View Slide

40. @ManfredSteyer
    Disadvantages ;-)
    • Several small and decoupled Projects
    • Autarkic Teams
    • Seperate development/ deployment
    • Own decisions (technology, architecture)
    

    View Slide

41. @ManfredSteyer
    Disadvantages ;-)
    • More Bundles
    • Less optimized Bundles/ duplicate Code?
    • UI Consistency
    

    View Slide

42. @ManfredSteyer
    4) Choosing a Solution
    

    View Slide

43. @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
    

    View Slide

44. @ManfredSteyer
    Blog > SOFTWAREarchitekt.at
    • A Software Architect's Approach Towards Using Angular (And SPAs In
    General) For Microservices Aka Microfrontends
    • A Lightweight And Solid Approach Towards Micro Frontends (Micro
    Service Clients) With Angular And/Or Other Frameworks
    • Micro Apps With Web Components Using Angular Elements
    

    View Slide

45. @ManfredSteyer
    Conclusion
    Packages:
    Reuse
    Monorepo:
    Structure
    Micro Apps:
    Decoupling
    CLI 6+ CLI 6+/ Nx
    Links,
    iframes,
    Several SPAs
    

    View Slide

46. @ManfredSteyer
    Beware the
    Frankenstein-
    Monster!!
    

    View Slide

47. @ManfredSteyer
    Contact and Downloads
    [mail] manfred.steyer@SOFTWAREarchitekt.at
    [web] SOFTWAREarchitekt.at
    [twitter] ManfredSteyer
    d
    Slides & Examples
    

    View Slide