또한 잘 고안된 아키텍처를 통해 앱을 향상시키고 확장하는 모범 사례를 찾고 있습니다. 위에서 언급 한 모든 관행은 중소 규모의 앱에서 작동하지만 더 큰 팀에서 작업하면 실패합니다. 내가 시도한 몇 가지 방법이 있습니다.
1) 템플릿을 확장하고 재사용하기 위해 https://github.com/aldeed/meteor-autoform 전략을 따랐습니다 . 저자는 컴포넌트와 필드 디자인에 대해 아주 좋은 아이디어를 가지고 있습니다. 커뮤니티가 거의 모든 경우를 다루는 36 개의 패키지를 개발했기 때문에 현재 구현 중이며 개발 단계에서 TypeScript 를 사용 하여 유형이 안전합니다.
<template name="autoForm">
{{#unless afDestroyUpdateForm this.id}}
{{! afDestroyUpdateForm is a workaround for sticky input attributes}}
{{! See https://github.com/meteor/meteor/issues/2431 }}
<form {{atts}}>
{{> Template.contentBlock ..}}
</form>
{{/unless}}
</template>
http://blog.east5th.co/2015/01/13/custom-block-helpers-and-meteor-composability/ 뿐만 아니라 여기 에 좋은 블로그 게시물이 있습니다 : http : // meteorpedia .com / read / Blaze_Notes
2) 이것은 유망 해 보이지만 최근 업데이트되지 않았습니다. 커피 스크립트로 작성된 패키지입니다. Meteor 용 Blaze 구성 요소 ( https://github.com/peerlibrary/meteor-blaze-components )는 Meteor 앱 주변에서 재사용해야하는 복잡한 UI 요소를 쉽게 개발하기위한 시스템입니다. CoffeeScript, vanilla JavaScript 및 ES6에서 사용할 수 있습니다. 가장 좋은 점은 구성 요소가 OOP입니다. 다음은 그 예 중 하나입니다.
class ExampleComponent extends BlazeComponent {
onCreated() {
this.counter = new ReactiveVar(0);
}
events() {
return [{
'click .increment': this.onClick
}];
}
onClick(event) {
this.counter.set(this.counter.get() + 1);
}
customHelper() {
if (this.counter.get() > 10) {
return "Too many times";
}
else if (this.counter.get() === 10) {
return "Just enough";
}
else {
return "Click more";
}
}
}
ExampleComponent.register('ExampleComponent');
{{> ExampleComponent }}
3) 나는 언제 어디서 잘못 될 것인지 알려주는 타입과 트랜스 필러를 좋아한다. TypeScript를 사용하여 Meteor와 작업하고 다음 리포지토리를 찾았습니다. https://github.com/dataflows/meteor-typescript-utils 작성자가 MVC 접근 방식을 시도한 것처럼 보입니다.
class MainTemplateContext extends MainTemplateData {
@MeteorTemplate.event("click #heybutton")
buttonClick(event: Meteor.Event, template: Blaze.Template): void {
// ...
}
@MeteorTemplate.helper
clicksCount(): number {
// ...
}
}
class MainTemplate extends MeteorTemplate.Base<MainTemplateData> {
constructor() {
super("MainTemplate", new MainTemplateContext());
}
rendered(): void {
// ...
}
}
MeteorTemplate.register(new MainTemplate());
<template name="MainTemplate">
<p>
<input type="text" placeholder="Say your name..." id="name">
<input type="button" value="Hey!" id="heybutton">
</p>
<p>
Clicks count: {{ clicksCount }}
</p>
<p>
<ul>
{{#each clicks }}
<li> {{ name }} at <a href="{{pathFor 'SingleClick' clickId=_id}}">{{ time }}</a></li>
{{/each}}
</ul>
</p>
</template>
불행히도이 프로젝트는 유지되거나 활발히 개발되지 않았습니다.
4) 이미 언급 했으므로 패키지를 사용하여 확장 할 수 있습니다. 좋은 추상적 사고 방식이 필요합니다. 망원경에서 작동하는 것 같습니다 : https://github.com/TelescopeJS/Telescope
5) 유성 템플릿 확장 – 템플릿 도우미, 이벤트 핸들러 및 템플릿 사이의 후크를 복사하여 코드를 재사용 할 수있는 다양한 방법을 제공합니다. 단점은 모든 복사가 개발자에 의해 반복적으로 관리되어야한다는 것입니다. 코드베이스가 커짐에 따라 문제가됩니다. 또한 명확하게 정의 된 API 커뮤니티가 없으면 구성 요소를 빌드하고 공유 할 수 없습니다.
6) 흐름 구성 요소 – 흐름 구성 요소는 API 디자인에서 React에 더 가까운 반면 Blaze 구성 요소 는 데이터 컨텍스트 및 템플릿 도우미와 같은 친숙한 개념을 유지합니다. 반면 플로우 구성 요소는 여전히 템플릿 기반 이벤트 처리기를 사용하지만 Blaze 구성 요소는 클래스 메서드를 사용하여 상속을 통해 확장하거나 재정의하기가 더 쉽습니다. 일반적으로 Blaze Components는보다 OOP 지향적입니다. 플로우 구성 요소가 아직 공식적으로 출시되지 않았습니다 ( # 5 및 # 6에 대한 텍스트 크레딧) https://github.com/peerlibrary/meteor-blaze-components#javascript-and-es6-support )
2 번과 3 번은 어느 정도 익숙해 져야하지만 시간이 지남에 따라 개발 속도가 빨라집니다. 4 번으로 구성 요소를 빌드하고 테스트하여 코드를보다 안정적으로 만들 수 있습니다. 세 번째는 Typescript의 전체 유형 안전성을 활용하는 것입니다. 이는 문서가 열악한 팀에서 개발할 때 큰 이점입니다. 그러나 현재 2 위를 TypeScript로 포팅하고 있는데, 사용하기가 매우 편하고 Gulp를 사용하지 않을 때 Meteor와 함께 작동하도록 컴파일러 패키지를 tweek 할 필요가 없습니다.
Meteor와 함께 작업하는 올바른 방법을 찾는 것은 여전히 어렵습니다. 스스로 알아 내야합니다. 그렇지 않으면 멋지게 배열 된 폴더 구조로 끝나지 만 모든 것이 어디에 있는지 전혀 알 수 없습니다. 행복한 코딩.
