Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Java Script
Template Engine
최성식
template engine?
• static(html)서비스에서 dynamic(JS)
서비스의 기능을 사용 할 수 있도록
도와주는 도구
템플릿 엔진 계열비교
Embedded JavaScript Templates 계열 Logic-less Templates계열
특징 • JS로직을 사용 할 수 있다.
• Syntax가 간단하고 직관적이다.
• 다소 보기가 어...
템플릿 엔진을 선택할 때 고려요소(LinkedIn)
Don't Repeat Yourself
Top Rank 10 templating engines
(2017.03.14 Alex Ivanoves)
1. Mustache
2. Handlebars
3. doT
4. Dust
5. EJS
6. Underscore
7....
1. Handlebars
Mustache와 비교해서..
• Helper를 이용해 간단한 JS로직 구현가능
• 대략적인 성능테스트에서 렌더링 시간이
Mustache의 절반
Handlebars is a close succe...
2. EJS
The last of the most popular JavaScript
template engines is going to be Embedded
JavaScript Templates (EJS)
a light...
3. Underscore
Underscore provides over 100
functions that support both your
favorite workaday functional helpers
Underscor...
4. Pug(Jade)
The Pug template engine (for Node.js) is
literally enabling developers to write code
that looks like paragrap...
https://www.slant.co/topics/51/~best-javascript-templating-engines
#1 Pug
• Clean syntax
• Indentation reflects nesting
• Easy to read, powerful mix-ins
• Logic done in JavaScript
• Easy su...
#2 Handlebars
• Clean syntax
• Multiple implementations
• Mustache compatible
• Compiled rather than interpreted
templates...
#4 EJS
• Cryptic syntax
• No support for block by default
• Complete JavaScript logic
• Same language before and after
ren...
#7 Underscore
• For micro templating
• Pre-compilation
• Not a true templating engine
Reference
• template system image
https://en.wikipedia.org/wiki/File:TempEngWeb016.svg
• 템플릿 엔진 랭킹colorlib(Alex Ivanoves)
...
Upcoming SlideShare
Loading in …5
×

Java Script Template Engine 비교하기

3,056 views

Published on

자바스크립트 템플릿 엔진을 간단히 비교해 봤습니다.

Published in: Software
  • Login to see the comments

Java Script Template Engine 비교하기

  1. 1. Java Script Template Engine 최성식
  2. 2. template engine? • static(html)서비스에서 dynamic(JS) 서비스의 기능을 사용 할 수 있도록 도와주는 도구
  3. 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. 4. 템플릿 엔진을 선택할 때 고려요소(LinkedIn) Don't Repeat Yourself
  5. 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. 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. 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. 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. 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. 10. https://www.slant.co/topics/51/~best-javascript-templating-engines
  11. 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. 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. 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. 14. #7 Underscore • For micro templating • Pre-compilation • Not a true templating engine
  15. 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

×