1.
Java Script
Template Engine
최성식

2.
template engine?
• static(html)서비스에서 dynamic(JS)
서비스의 기능을 사용 할 수 있도록
도와주는 도구

3.
템플릿 엔진 계열비교
Embedded JavaScript Templates 계열 Logic-less Templates계열
특징 • JS로직을 사용 할 수 있다.
• Syntax가 간단하고 직관적이다.
• 다소 보기가 어려울수도 있다.
• 배우기 쉽다.
• 프로젝트 사이즈가 크지 않을 경우 추천
• JS로직이 없다.
• 반복문이나 조건문 같은 로직을 템플릿 자체 문
법을 가지고 해결한다.
• 비교적 간결한 템플릿을 만들 수 있다.
• 프로젝트 사이즈가 어느정도 있고 템플릿을 적극
활용할 경우 추천
종류 • underscore.js
• Jade
• haml-js
• jQote2
• doT
• Stencil
• Parrot
• Eco
• EJS
• jQuery templates
• node-asyncEJS
• mustache
• dust.js
• handlebars
• Google Closure Templates
• Nun
• Mu
• kite

4.
템플릿 엔진을 선택할 때 고려요소(LinkedIn)
Don't Repeat Yourself

5.
Top Rank 10 templating engines
(2017.03.14 Alex Ivanoves)
1. Mustache
2. Handlebars
3. doT
4. Dust
5. EJS
6. Underscore
7. Pug(Jade)
8. ECT
9. Template7
10. jTemplates

6.
1. Handlebars
Mustache와 비교해서..
• Helper를 이용해 간단한 JS로직 구현가능
• 대략적인 성능테스트에서 렌더링 시간이
Mustache의 절반
Handlebars is a close successor to
Mustache, and both can actually be used
at the same time, with the ability to swap
out tags where necessary.

7.
2. EJS
The last of the most popular JavaScript
template engines is going to be Embedded
JavaScript Templates (EJS)
a lightweight solution towards creating HTML
markup with simple JavaScript code.

8.
3. Underscore
Underscore provides over 100
functions that support both your
favorite workaday functional helpers
Underscore is an external
JavaScript library that enables
developers to take advantage of
functional helpers that keep the
code base intact.
Underscore solves the problem of
having to open your code editor and
not knowing where to start.

9.
4. Pug(Jade)
The Pug template engine (for Node.js) is
literally enabling developers to write code
that looks like paragraphs straight out of
a book
Not only does this improve the overall
code productivity, it can help to
streamline the work on a project that
consists of multiple team members.

10.
https://www.slant.co/topics/51/~best-javascript-templating-engines

11.
#1 Pug
• Clean syntax
• Indentation reflects nesting
• Easy to read, powerful mix-ins
• Logic done in JavaScript
• Easy sub layouts using block and extends
• Compiles to JavaScript
• Allows writing inline JavaScript
• Preprocessor support
• Use Markdown for readable markup
• High performance on the server and client side
• Reuse code in other languages
• Interactive documentation
• No HTML syntax
• Unforgiving in case of indentation
errors
• Performance is not great compared
to other popular templating engines

12.
#2 Handlebars
• Clean syntax
• Multiple implementations
• Mustache compatible
• Compiled rather than interpreted
templates
• Good global helpers support
• Logic-less
• Good paths support
• Clear separation of logic and markup
• Does not play well with Angular.js
• Not much editor support
• Hard to use documentation
• Using partials is cumbersome

13.
#4 EJS
• Cryptic syntax
• No support for block by default
• Complete JavaScript logic
• Same language before and after
rendering
• Consistently scores rather well in
benchmarks
• Powerful error handling

14.
#7 Underscore
• For micro templating
• Pre-compilation
• Not a true templating engine

15.
Reference
• template system image
https://en.wikipedia.org/wiki/File:TempEngWeb016.svg
• 템플릿 엔진 랭킹colorlib(Alex Ivanoves)
https://colorlib.com/wp/top-templating-engines-for-javascript/
• Handlebars
 http://handlebarsjs.com
 http://blog.naver.com/PostView.nhn?blogId=tmondev&logNo=220398995882
 http://sailboat-d.tistory.com/40
• EJS
http://ejs.co
• Underscore
http://underscorejs.org/#template
• 자바스크립트 템플릿 엔진 비교
http://miconblog.com/archives/2013/06/자바스크립트-템플릿-엔진-비교/
• 템플릿 엔진평가
https://www.slant.co/topics/51/~best-javascript-templating-engines