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
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.
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
Notes de l'éditeur
정보의 중복을 줄이는 것
다중 언어를 지원하는가
변경사항이 즉시 적용되는지 또는 컴파일/디플로이 사이클이 있는지
브라우저와 서버에 렌더되는게 얼마나 오래걸리는지
배우기 쉬운지
한번 배우면 얼마나 빠르게 적용할 수 있는지
클라이언트 및 서버사이드에 같은 템플릿을 사용하여 렌더링 할 수 있는지
활동적인 관련 커뮤니티가 있는지
다른 js라이브러리에 의존하는지
테스트하기 쉬운지
단계적 디버깅이 가능한지
에디터를 지원하는 지
얼마나 안정적인지
메뉴얼 정리가 잘 되어있는지
템플릿의 문서화를 장려하는지 혹은 주석을 요구하는지
Mustache의 중첩괄호방식을 차용 {{ }}
*Helper 개념을 도입하여 **Mustache의 제약사항을 상당히 덜어냄
서버에서 받아온 JSON 데이터를 필요에 따라간편하게 가공하여 사용할수 있다는 점이 가장 큰 매력
Precompiling Templates??
*if, unless 등의 기본 헬퍼와 사용자 정의 헬퍼를 이용해서 간단한 로직을 구현할 수 있다.
**Codelss를 지향하는 Mustache는 코드의 중간 가공에 제약이 많음.
<%= %>를 이용하여 구분
html파일에 JS를 직접 사용가능
비교적 배우기가 쉬움
디버깅 가능
개발자가 코드 베이스를 그대로 유지할 수 있는 기능 도우미를 이용할 수 있는 외부 자바 스크립트 라이브러리.
< % 자바스크립트 코드 %>
< %= 치환될 데이터 변수 %>
< %- escaped 데이터 변수 %>
jQuery를 좀 알아야할 것 같음.
indentation errors 들여쓰기 오류
mixin 기존에 있던 객체의 기능을 그대로 가져가면서 다른 객체에 추가할 때 주로 사용(이벤트에 유용)