전통적인 3-Tier(MvC) 구조의 어플리케이션에서는 오른쪽 모형처럼 Server Side에서 UI 페이지가 생성되었으나, 최근 마이크로서비스에서는 MVVM (Model-View-ViewModel) 패턴을 적용해 좀더 효율적인 UI를 구성할 수 있습니다.

Web Components 기법

facebook 이나 amazon 같은 site 는 겉보기에는 하나의 통합된 site 이지만 내부적으로는 100개가 넘는 마이크로 서비스들을 호출하여 각각의 데이터를 가져 오고 있습니다. 각각의 서비스들은 꾸준히 업그레이드를 하고 있기에, 지속적으로 ui 나 data 가 변경이 될 것입니다. ui 를 담당하는 팀은 각 서비스들의 데이터를 잘 배치하고, 재사용성을 높이고, 꾸준히 업그레이드를 해줘야 하는데 이는 일반적인 HTML 로는 표현이 너무 복잡해 진다.

웹 컴포넌트는 재사용을 원하는 어느곳이든 코드 충돌에 대한 걱정이 없는 캡슐화된 기능을 갖춘 다용도의 커스텀 엘리먼트를 생성하기 위해 만들어 졌다. 다음의 3가지 주요 기술을 가진다.

• Custom elements: 사용자 인터페이스에서 원하는대로 사용할 수있는 사용자 정의 요소 및 해당 동작을 정의 할 수있는 JavaScript API 세트.

• Shadow DOM: 캡슐화된 ‘그림자’ DOM 트리 - 엘리먼트(메인 다큐먼트 DOM 으로부터 독립적으로 렌더링 되는)를 추가하고 연관된 기능을 제어하기 위한 JavaScript API 의 집합. 이 방법으로 엘리먼트의 기능을 프라이빗하게 유지할 수 있어, 다큐먼트의 다른 부분과의 충돌에 대한 걱정 없이 스크립트와 스타일을 작성할 수 있습니다.

• HTML 템플릿: