$30 off During Our Annual Pro Sale. View Details »

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

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

Manfred Steyer
PRO

December 13, 2018
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

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] [email protected]
    [web] SOFTWAREarchitekt.at
    [twitter] ManfredSteyer
    d
    Slides & Examples

    View Slide