Angular based enterprise level frontend architecture
0 likes197 views
This document discusses different frontend architectures for Angular applications: 1. Using npm packages to create and distribute libraries that can be installed and used by other applications. 2. Implementing a mono repo architecture where related projects share a single code repository and node_modules folder. 3. Developing applications using a micro frontend architecture where features are developed as separate modules that can be independently deployed. The document compares the advantages and disadvantages of each approach and provides examples of how to implement them using Angular CLI or Nx.
Angular based enterprise level frontend architecture
- 1. Angular Based Frontend Architecture Himanshu Tamrakar
- 2. About me Himanshu Tamrakar | Developer at Decimal Email: [email protected] Contact No. : (+91)-8989468903 Github: https://github.com/Himanshu-Tamrakar
- 3. Agenda Introduction (npm)- package Mono repo Micro Frontend How to choose
- 4. Introduction
- 5. Root Module Feature Modules Shared Module App Module ... Feature Module 1 Shared Module Typical Angular Architecture Feature Module 2
- 7. (npm)-package Concept ➔ Node_module ➔ Your stuff ➔ Package.json ➔ package-lock.json
- 8. Angular Package Formatter ➔ Google Guidelines For Creating Library To Work Seamlessly With Angular
- 9. Tool for aligning towards library ➔ ng-packagr .
- 10. Angular CLI6+
- 11. 1 Creating Library using CLI 6+ 01 Since angular CLI6+, we have an option to generate library which follow all guidelines proposed by google. Commands ➔ npm install -g @angular/cli ➔ ng new lib-project --create-application=false ➔ cd lib-project ➔ ng generate library password-strength-lib ➔ ng generate application playground-app ➔ ng server --project playground-app ➔ ng build --project password-strength-lib
- 12. Folder Structure 02 Folder structure after creating password-strength-lib library and playgroung-app application playgroung-app is to test library. It helps creating documentation related to library and library maintenance.
- 13. Publish library to npm registry 03 --registry option is to point to particular registry. It could be npm public or in-house registry. ➔ Increment package version ➔ ng build --project password-strength-lib ➔ npm publish --registry http://localhost ➔ npm install --registry http://localhost ➔ Another way to manager library
- 14. Publish library to local artifactory 04 npm pack command package you library build into .tgz file ➔ Increment package version ➔ ng build --project password-strength-lib ➔ Write script in package.json ➔ "build_lib": "ng build password-strength-lib" ➔ "npm_pack": "cd dist/password-strength-lib && npm pack" ➔ "package": "npm run build_lib && npm run npm_pack" ➔ npm install ‘path to .tgz file..’
- 15. package.json
- 16. ➔ Distribution ➔ Versioning ➔ Decoupling between library author and app author Advantages
- 17. Disadvantages ➔ Distribution ➔ Versioning ➔ Decoupling between library author and app author
- 18. Distribution ➔ Annoying ➔ Stop organizations to develop further library Versioning ➔ Version management cost is high ➔ Version Conflicts ➔ How to force developers to use latest version of npm package What is app author is same as lib author
- 19. Conclusion When it comes to big project or ecosystem, we need something better than library. Note: Inv compiled library build can’t be published to npm registry. If you are creating a library using Angular 9 then you have to compile your library without Inv compiler. For this mentions enableIvy: false at angularCompilationOption at .tsconfig.json. Reason: It uses ViewEngine.
- 20. 2. Mono repo
- 21. Folder Structure It’s call a workspace that contains several tiny self contained projects. Library also works as project in monorepo. To use library, we need not to build and publish. Further we can publish library is necessary. We have one node_module for all projects.
- 22. ➔ Every projects uses latest version ➔ No version conflicts ➔ No burden of distributing library ➔ Creating new library is very easy ➔ You can even publish your library easily ➔ Successfully used at Google, Facebook... Advantages
- 23. Ways of creating Monorepo architecture Nx is not a replacement for Angular CLI. Under the hood, Nx uses the Angular CLI to generate code and run tasks. ➔ By Angular CLI 6+ ➔ By nx-nrwl
- 24. Monorepo architecture using Angular CLI We access project by project name. This could be possible because we define public api in project src folder. Note: Using mono repo in organization is not for beginner or intermediate programmer. ➔ npm install -g @angular/cli ➔ ng new vahana-workspace --create-application=false ➔ cd vahana-workspace ➔ ng generate application login, iam, vdesigner, vconnect ➔ ng generate library validation, dashboard-lib ➔ We need to update path in .tsconf file
- 25. Folder Structure It’s call a workspace that contains several tiny self contained projects. Library also works as project in monorepo. To use library, we need not to build and publish. Further we can publish library is necessary. We have one node_module for all projects.
- 26. .tsconfig file in cli generated monorepo Check the path statement. When ever we import validation or dashboard-lib, It point to there public apis.
- 27. Monorepo architecture using Nx-nrwl Nx provide more features that will use full when creating many projects. It provide many feature like dep-graph generate visual dependency graph between projects. ➔ npx create-nx-workspace vahana-workspace-nx ➔ Select angular type mono repo ➔ cd vahana-workspace-nx ➔ ng g @nrwl/angular:app account, aim, vconnect…. ➔ ng g @nrwl/angular:lib chart-lib, dashboard-api-lib.. ➔ ng serve --project account ➔ npm run dep-graph
- 28. Folder Structure
- 29. .tsconfig file in nx generated monrepo
- 30. Visualize Module Structure Graph dependencies within workspace. npm run dep-graph generate visualize dependency graph within workspace.
- 31. Demo
- 32. ➔ Tightly couples or contract. It is hard to break the contract. ➔ Complex structure ➔ One architecture, Hard to change ➔ One Technology stack Disadvantages ➔ More coordination ➔ Blocking tasks ➔ Dependency with other team. ➔ You can’t deploy your code until your colleague done with his code or ➔ You can’t even start you work until your colleague finished his work.
- 33. Conclusion?
- 35. Idea Here is ……. BIG System Micro Frontend 1 Micro Frontend 3 Micro Frontend n Micro Frontend 2 …..
- 36. ➔ Separate development and deployment ➔ Different technology ➔ Less coordination ➔ Less complexity Advantages
- 37. ➔ Highly distributed system ➔ Distributed data ➔ UI composition Disadvantages Note: UI-composition means that to provide hole system software as one consistent thing to the users.
- 38. Solution to micro frontend Hyperlinks are best and secure way to move to another document. ➔ UI composition using hyperlinks ➔ SPA based shell app
- 39. UI composition using Hyperlinks APP 1 APP 2 APP 3
- 40. SPA based shell SPA 1 SPA 2 SPA 3 SHELL APP
- 41. SPA based shell SPA 1 SPA 2 SPA 3 SHELL APP ➔ Iframe ➔ Web components ➔ Bootstrapping several spa’s
- 42. 4. How to choose
- 43. Decision Tree
- 44. Questions?
- 45. References Enterprise Angular Confluence: Angular Library Confluence: Architecture Web Based Enterprise application Confluence: Web components