대부분의 기존 웹 프레임 워크는 마크 업에 템플릿 패러다임을 사용합니다. 대부분 HTML과 비슷하지만, 컨트롤 플로우를 관리 할 때 프레임 워크가 훅하는 커스텀 HTML 애트리뷰트, 동적 컨텐트의 플레이스 홀더 구문 등등과 같은 모든 종류의 DSL 애드온이있다. 여기마크 업을위한 함수 기반 패러다임에 템플리트 기반 패러다임을 선호하는 객관적인 이유가 있습니까?
인기있는 템플릿의 예는 접근 방법은 다음과 같습니다
{% extends "base_generic.html" %}
{% block title %}{{ section.title }}{% endblock %}
{% block content %}
<h1>{{ section.title }}</h1>
{% for story in story_list %}
<h2>
<a href="{{ story.get_absolute_url }}">
{{ story.headline|upper }}
</a>
</h2>
<p>{{ story.tease|truncatewords:"100" }}</p>
{% endfor %}
{% endblock %}
<div v-bind:id="dynamicId">
<!--This markup will be the template of the root instance-->
<h1 v-if="seen">My Vue.js App</h1>
<p> {{ message.split('').reverse().join('') }}</p>
<NonStandardMarkupIsFineHere/>
</div>
<button (click)="onSave($event)">Save</button>
<button *ngFor="let hero of heroes" (click)="deleteHero(hero)">
{{hero.name}}
</button>
<form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>
대조적으로, React, Cycle 또는 Elm 아키텍처와 같은 프레임 워크는 기능 기반 패러다임을 사용합니다. DOM 또는 중간 가상 DOM을 직접 업데이트하는 함수를 호출합니다.
Cycle.js :
다음은 몇 가지 예입니다 프레임 워크 사이에 선택할 때,이 종종 결정 요인이다
const Button = props => {
const { kind, ...other } = props;
const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton";
return <button className={className} {...other} />;
};
const App =() => {
return (
<div>
<Button kind="primary" onClick={() => console.log("clicked!")}>
Hello World!
</Button>
</div>
);
};
const sinks = {
DOM: sources.DOM.select('input').events('click')
.map(ev => ev.target.checked)
.startWith(false)
.map(toggled =>
div([
input({attrs: {type: 'checkbox'}}), 'Toggle me',
p(toggled ? 'ON' : 'off')
])
)
}
내 질문은 : 다른 것을 선호하는 객관적인 이유가 있습니까? 아니면이 차이가 단순한 주관적인 선호도에 해당합니까? 템플릿 기반 시스템에 더 적합한 일반적인 유스 케이스가 있습니까? 기능 기반 시스템보다 작성하거나 추론하기가 실질적으로 더 어려울까요?
예를 들어 템플릿 시스템이 "단순한 HTML"이므로 템플릿이 더 간단하고 익숙하다는 것입니다. 그러나 이것은 사실이 아닙니다. 그것들은 단지 HTML이 아니며, 매번 차례대로 DSL 개념으로 HTML을 확장합니다. 마크 업은 논리로 가득 차고 문자열 및 기타 비 -HTML 구문으로 만 작성됩니다. 또한 많은 함수 기반 패러다임은 JSX와 같은 구문 설탕을 제공하여 대부분의 템플릿 언어와 비슷한 모양을 HTML에 가깝게 만듭니다.