hawm
6월 8, 2020, 12:10오후
1
모달 다이얼로그가 필요한 플러그인을 개발 중입니다. 메타에서 검색해 보니 Ember 컴포넌트와 Discourse 위젯 모두 이를 구현할 수 있다는 것을 알게 되었습니다. Ember 컴포넌트와 Discourse 위젯은 모두 플러그인 아웃렛에 연결되고, HTML을 렌더링하며, 이벤트를 처리할 수 있습니다.
This is out of date. See Widgets, the Widget API and their roadmap?
The latest builds of Discourse are much faster at rendering topics thanks to our re-written post stream . I’ve written up our new plugin API but so far haven’t explained how the code all fits together. The purpose of this topic is to allow Discourse developers to understand how the new code works.
위젯에 관한 주제는 위에서 언급한 것 하나만 찾을 수 있었는데, 거기서는 Discourse 위젯이 더 빠르게 렌더링된다고만 되어 있었습니다. 하지만 Discourse 코어와 다른 많은 플러그인들을 살펴보니 Ember 컴포넌트와 Discourse 위젯을 모두 사용하고 있었습니다. 예를 들어:
두 가지의 차이점을 설명해 주실 수 있는 분이 있을까요?
justin
6월 8, 2020, 2:34오후
2
컴포넌트는 Discourse의 대부분에서 널리 사용됩니다. 위젯이 유용하게 쓰이는 곳은 트래픽이 가장 높은 요소들, 예를 들어 토픽 게시물 스트림이나 여러 메뉴를 가진 헤더 같은 부분입니다.
플러그인이나 테마에서 기존 위젯에 기능을 추가하거나 수정할 때 위젯이 사용되는 것을 자주 볼 수 있습니다.
예를 들어 discourse-calendar 플러그인의 이 위젯을 살펴보세요:
import hbs from "discourse/widgets/hbs-compiler";
import { createWidget } from "discourse/widgets/widget";
export default createWidget("going-button", {
tagName: "button.going-button.btn.btn-default",
click() {
this.sendWidgetAction("changeWatchingInviteeStatus", "going");
},
template: hbs`
{{d-icon "check"}}
<span class="label">
{{i18n "discourse_post_event.models.invitee.status.going"}}
</span>
`
});
이것은 토픽의 원본 게시물에 렌더링되는 버튼입니다. 게시물 자체가 성능상의 이유로 위젯으로 렌더링되므로, 이 버튼도 위젯이어야 합니다.
그러나 해당 파일의 11~17행을 보면, hbs 헬퍼를 통해 JavaScript에서 정의된 Handlebars 템플릿을 볼 수 있고, 그 템플릿 안에는 {{i18n ...}}와 같이 렌더링되는 컴포넌트들이 포함되어 있습니다.
즉, 일반적으로 UI 요소가 이미 위젯으로 렌더링되는 경우가 아니라면 컴포넌트를 사용할 수 있습니다. 위젯으로 렌더링되는 경우라면 위젯을 사용해야 하며, 의미가 있다면 위젯 내부에서 기존 컴포넌트를 활용할 수도 있습니다.
hawm
6월 8, 2020, 3:17오후
3
답변해 주셔서 감사합니다! 바로 제가 알고 싶었던 내용입니다.
j.jaffeux
6월 8, 2020, 4:17오후
4
컴포넌트/위젯 선택에 대한 몇 가지 원칙:
대량으로 표시해야 하는 경우 성능을 위해 위젯을 선택하는 것이 좋습니다.
위젯은 컴포넌트보다 제한적이며, 복잡한 UI를 구축할 때 완벽하게 작동하도록 하려면 더 많은 지식이 필요합니다.
결국 성능이 문제가 되지 않고 사용할 수 있다면 컴포넌트를 선호합니다. 성능이 문제가 되거나, 사용이 강제되는 경우(예: 플러그인 API를 사용하여 다른 위젯을 장식하는 경우)에는 위젯을 사용할 가능성이 높습니다.