각도 및 마이크로 프런트 엔드
거대한 단일 페이지 모놀리스를 마이크로 프런트 엔드 아키텍처로 분할하는 방법에 대한 연구를 진행 중입니다.
아이디어:
- 페이지는 자율적으로 실행되는 여러 구성 요소로 구성됩니다.
- 각 구성 요소는 하나의 개발 팀에서 관리합니다.
- 각 팀은 다른 팀의 구성 요소를 중단하지 않고 구성 요소를 변경, 업데이트 및 배포 할 수 있습니다.
- 각 팀은 자체 도구 스택을 선택합니다.
이유
대규모 애플리케이션을 효율적으로 개발하려면 많은 사람이 작업해야합니다. 그러나 앱 / 팀당 개발자 수는 제대로 확장되지 않습니다. 독립적 인 팀이 여러 개의 독립적 인 앱을 병렬로 개발하지만 임의로 확장 할 수 있습니다.
이를 염두에두고 팀이 자체 도구 스택을 선택하고 특히 타사 라이브러리 (예 : angular, react, jquery)의 독립적 인 버전 업그레이드를 수행 할 수 있어야합니다. 그렇지 않은 경우 프레임 워크 업데이트는 프로덕션에 배포하기 전에 모든 단일 구성 요소와 호환되어야합니다.
Angular에서 작동합니까?
독립적 인 버전 업그레이드가 필요하지만 팀을 지원되는 몇 가지 프레임 워크 (Angular, React, Vue, Polymer ...)로 제한하는 것이 합리적이며 지금은 Angular-Apps로만 구성된 데모를 구축하려고합니다.
그러나 Angular 5는 거대한 다중 모듈 앱을 지원하는 플랫폼 프레임 워크로 추정되지만 동일한 브라우저 창에서 여러 개의 독립적 인 각도 앱을 실행하는 것은 거의 불가능한 것 같습니다.
HTML 가져 오기를 사용하여 단일 웹앱에서 여러 Angular-Apps (각각 자체 서버에서 호스팅되는 다른 버전)를 부트 스트랩했습니다. 그러나 global앱간에 공유해야하는 몇 가지 종속성이 있습니다.
- zone.js는 한 번만 시작할 수 있습니다.
- 라우팅에는 URL 변경이 필요합니다.
- 쿠키, 세션 저장 등과 같은 브라우저
여러 앵귤러 모듈을 부트 스트랩하는 방법에 대한 여러 기사가 인터넷에 있지만 모두 동일한 코어 앱의 여러 모듈을 참조하므로 모두 동일한 프레임 워크 버전에서 실행되고 업데이트를 통해 다음을 수행해야합니다. 전체 모놀리스를 다시 빌드하고 배포합니다.
iframes동일한 페이지에서 여러 Angular (5) 앱을 실행하는 " " 이외의 솔루션이 있습니까?
주로 별도의 스택 요구 사항으로 인해이 아이디어에 반대하는 것을 완전히 제안하는 대신 트레이드 오프를 배치하고이를 가능하게하는 몇 가지 제한 사항을 제공 할 것입니다.
페이지는 자율적으로 실행되는 여러 구성 요소로 구성됩니다.
우리 모두는 이것이 입력과 출력의 명확한 구분과 함께 Angular 구성 요소에서 즉시 제공된다는 것을 알고 있습니다.
작은주의 사항 : 상호 작용하는 구성 요소를 사용 @Input하여 개체를 전달 하고 이벤트 개체를 생성하는 시기 / 경우 @Output()사전에 정의 된 인터페이스에 동의해야합니다.
해결 방법 : 이러한 아티팩트 만 정의하는 다른 TypeScript 프로젝트를 만듭니다. 다른 모든 "구성 요소 프로젝트"는 이것의 특정 버전에 따라 달라집니다.
각 구성 요소는 하나의 개발 팀에서 관리합니다.
Dev Teams는 오픈 소스의 다른 Angular 프로젝트와 마찬가지로 구성 요소를 배포 할 수 있습니다. 일부 npm 저장소에 아티팩트를 게시 할 수 있습니다. 기여 가능한 구성 요소를 개발하려면 압도적 일 수있는 Angular Material2 를 참조 하거나 각 구성 요소 팀이 사용하는 ngx-library-builder ( Angular Team Member filipesilva / angular-quickstart-lib 기반) 와 같은 것을 사용할 수 있습니다 .
주의 :이 날짜까지 Angular 팀은 Angular CLI에서 분명한 것처럼 프로젝트 설정을 공유하는 빠른 구성 요소 라이브러리를 가지고 있지 않습니다. 그러나 수많은 개발자가 Angular CLI의 격차를 채우기 위해 일종의 라이브러리 빌더를 만들었습니다.
각 팀은 다른 팀의 구성 요소를 중단하지 않고 구성 요소를 변경, 업데이트 및 배포 할 수 있습니다.
주 프로젝트에서 모든 구성 요소를 가져오고 일부 CI 서버에서 주기적 / 변경 트리거 빌드 / 배포를 수행하도록합니다. 이것은 본질적으로 모든 최신 구성 요소 릴리스로 AOT 프로덕션 빌드를 생성합니다. 추가 보너스로 한 구성 요소의 부작용이 다른 구성 요소를 손상시키지 않도록 일부 자동화 된 통합 테스트를 수행하도록 빌드 된 추상 e2e 테스트를 가질 수 있습니다.
주의 : 각 팀이 구성 요소를 개발하는 방법, 즉 메모리, CPU 및 기타 리소스를 최적으로 사용하고 배치하는 방법을 관리하는 것은 어려울 것입니다. 예를 들어 한 팀이 구독 생성을 시작하고 제거하지 않으면 어떻게 될까요? 일부 정적 코드 분석을 사용하는 것이 유용 할 수 있지만 소스 코드도 게시하지 않는 한 현재이 소스 코드를 사용할 수 없습니다.
각 팀은 자체 도구 스택을 선택합니다.
IDE 및 일부 "devDependencies"와 같은 개발자 도구에서와 같이 "도구 스택"을 의미하지 않는 한 이것은 완전한 거래 차단기입니다. 각 팀의 "devDependencies"의 특정 부분은 컴파일러 등과 같은 정확한 버전의 각도 개발 키트를 가져야합니다.
최소한 각 팀은 동일한 Angular, RxJS 등을 사용해야합니다.
가장 중요한 것은 각 팀이 구성 요소를 부트 스트랩하지 않도록주의해야합니다. 주 프로젝트에만 부트 스트랩 모듈이 있고 루트 구성 요소가 부트 스트랩됩니다. zone.js문제를 해결하는 데 도움이됩니다.
Angular에서 작동합니까?
제한 사항을 인식하고 거버넌스를 제공한다면 그렇게 할 것을 제안합니다.
우리도 같은 질문을했습니다. 불행히도 질문에 대한 대답은
Is there any solution other than "iframes" to get multiple Angular (5) Apps running on the same Page (edit: where each Angular app can use a different Angular version)?
currently is
No, unfortunately not, as long as you want to use Angular‘s change detection (which uses zone.js).
Due to zone.js Angular pollutes the global scope. Even worse zone.js patches an awful lot of browser APIs (https://github.com/angular/zone.js/blob/master/STANDARD-APIS.md) to detect when a zone is completed.
It’s only possible to use different versions of a framework in one page without side effects if the framework does not touch global scope (this seems to be true for React und Vue). Then you can bundle different framework versions with each application via Webpack (with separated scope and the downside that the size of each application bundle increases).
So, if you want to build a web page with Angular where different applications/modules should be integrated on one page, the only feasible solution currently is to create a deployment monolith (e.g. bundle different modules from different teams in one Angular application by a CI/CD system as bhantol explained in his answer).
It seems that the Angular team is also aware of the problem and that they might tackle it with following major versions. See robwormwald’s answer on the following Github issue regarding the Angular Elements roadmap: https://github.com/angular/angular/issues/20891
Hopefully there will be more information by the Angular team on that topic when the next major version Angular 6 is release at the end of march.
Take a look at Angular Elements (Custom Elements). https://moduscreate.com/blog/angular-elements-ngcomponents-everywhere/
The new Ionic version (4) is totally based on it to be able to be used on every version of Angular and on every JS frameworks.
For that, they created https://stenciljs.com/ that will help you to create Custom Elements.
But if all teams are using Angular, each of them can create a library using ngm for exemple.
Yes you can.
However you don't really want to get stuck in a framework when you are writing web components, because the whole point of a web component is to be reused possibly anywhere.
I share your vision, it's definitely better for the quality of the software as well as the productivity of developers to work on focused features rather than large apps when it comes to implementation.
Finally, what you are looking for right now is not Angular, but StencilJS. Stencil is a compiler for web components who also generate a virtual DOM inside your component to improve it's UI performances. Check it out ;-)
Other than Iframe there is one more option is currently available is SPA framework, you can get the sample code from here
https://github.com/PlaceMe-SAS/single-spa-angular-cli-examples https://github.com/joeldenning/simple-single-spa-webpack-example
It seems that there has been a solution for your needs for a while now. Take a look at Single-SPA project HERE.
It's a wrapper SPA project for your micro SPA projects.
The only way to integrate different Angular Apps apart from IFrames and communication via postMessage is by "Deep-Linking" them and exchanging information using URL-Parameter. All Angular apps are then located on their own browser tab. But for common services and components you may want to implement a "Shared Kernel" used by all of your Angular apps, therefore your a stuck on a certain Angular version range. When you want this shared kernel the NGModule approach is the recommended way to go. You can mix Angular 2 and Angular 5 versions in one app because they are backward compatible. There ist no urgent need for the teams to stuck on the same version, until the Angular Team introduces breaking changes. Despite of that your technical debts grow, when you are not updating. The frequency for technical-updates is definitly higher in the Angular/Javascript area.
ReferenceURL : https://stackoverflow.com/questions/47793065/angular-and-micro-frontends
'Nice programing' 카테고리의 다른 글
| Inkscape의 투명도 대 흰색 배경 (0) | 2021.01.08 |
|---|---|
| 로봇 시뮬레이터 (0) | 2021.01.08 |
| Android에서 서식있는 텍스트 편집기를 구현하고 계십니까? (0) | 2021.01.08 |
| git의 병합 전략은 무엇입니까? (0) | 2021.01.08 |
| Node.js는 Blob을 만들 수 없습니까? (0) | 2021.01.08 |