SlideShare a Scribd company logo
Java Script
Template Engine
최성식
template engine?
• static(html)서비스에서 dynamic(JS)
서비스의 기능을 사용 할 수 있도록
도와주는 도구
템플릿 엔진 계열비교
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
템플릿 엔진을 선택할 때 고려요소(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. Pug(Jade)
8. ECT
9. Template7
10. jTemplates
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.
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.
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.
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.
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 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
#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
#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
#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)
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

More Related Content

What's hot

Require.JS
Require.JSRequire.JS
Require.JS
Ivano Malavolta
 
TypeScript Jump Start
TypeScript Jump StartTypeScript Jump Start
TypeScript Jump Start
Mostafa
 
SPA, Scalable Application & AngularJS
SPA, Scalable Application & AngularJSSPA, Scalable Application & AngularJS
SPA, Scalable Application & AngularJS
Mitch Chen
 
The Tale of a React Native Contribution
The Tale of a React Native ContributionThe Tale of a React Native Contribution
The Tale of a React Native Contribution
Janic Duplessis
 
Lessons in Open Source from the MongooseJS ODM
Lessons in Open Source from the MongooseJS ODMLessons in Open Source from the MongooseJS ODM
Lessons in Open Source from the MongooseJS ODM
Valeri Karpov
 
AngularJS vs React JS vs Node JS: Which is Best For Web Development ?
AngularJS vs React JS vs Node JS: Which is Best For Web Development ?AngularJS vs React JS vs Node JS: Which is Best For Web Development ?
AngularJS vs React JS vs Node JS: Which is Best For Web Development ?
MarkupBox
 
Introduction to require js
Introduction to require jsIntroduction to require js
Introduction to require js
Ahmed Elharouny
 
Conquering AngularJS Limitations
Conquering AngularJS LimitationsConquering AngularJS Limitations
Conquering AngularJS Limitations
Valeri Karpov
 
MongoDB MEAN Stack Webinar October 7, 2015
MongoDB MEAN Stack Webinar October 7, 2015MongoDB MEAN Stack Webinar October 7, 2015
MongoDB MEAN Stack Webinar October 7, 2015
Valeri Karpov
 
Typescript overview
Typescript overviewTypescript overview
Typescript overview
Thanvilahari
 
Spa with angular
Spa with angularSpa with angular
Spa with angular
Danny Vernovsky
 
Using Javascript in today's world
Using Javascript in today's worldUsing Javascript in today's world
Using Javascript in today's world
Sudar Muthu
 
Benefits of Typescript and Javascript Limitations
Benefits of Typescript and Javascript LimitationsBenefits of Typescript and Javascript Limitations
Benefits of Typescript and Javascript Limitations
Srinivasa Perumal
 
A walkthrough of JavaScript ES6 features
A walkthrough of JavaScript ES6 featuresA walkthrough of JavaScript ES6 features
A walkthrough of JavaScript ES6 features
Michal Juhas
 
WHAT / WHY / HOW WE’RE ENGINEERING AT SMARTSTUDY (English)
WHAT / WHY / HOW WE’RE ENGINEERING AT SMARTSTUDY (English)WHAT / WHY / HOW WE’RE ENGINEERING AT SMARTSTUDY (English)
WHAT / WHY / HOW WE’RE ENGINEERING AT SMARTSTUDY (English)
Hyun-woo Park
 
Tech Talk Tokyo #2 tetsuya matsuzawa
Tech Talk Tokyo #2 tetsuya matsuzawaTech Talk Tokyo #2 tetsuya matsuzawa
Tech Talk Tokyo #2 tetsuya matsuzawa
Rarejob
 
Resftul API Web Development with Django Rest Framework & Celery
Resftul API Web Development with Django Rest Framework & CeleryResftul API Web Development with Django Rest Framework & Celery
Resftul API Web Development with Django Rest Framework & Celery
Ridwan Fadjar
 
TypeScript Introduction
TypeScript IntroductionTypeScript Introduction
TypeScript Introduction
Travis van der Font
 
Reusability is the goal
Reusability is the goalReusability is the goal
Reusability is the goal
Red Pill Now
 
When to use and when not to use AngularJS - Liju Pillai, www.perfomatix.com
When to use and when not to use AngularJS - Liju Pillai, www.perfomatix.comWhen to use and when not to use AngularJS - Liju Pillai, www.perfomatix.com
When to use and when not to use AngularJS - Liju Pillai, www.perfomatix.com
Perfomatix Solutions
 

What's hot (20)

Require.JS
Require.JSRequire.JS
Require.JS
 
TypeScript Jump Start
TypeScript Jump StartTypeScript Jump Start
TypeScript Jump Start
 
SPA, Scalable Application & AngularJS
SPA, Scalable Application & AngularJSSPA, Scalable Application & AngularJS
SPA, Scalable Application & AngularJS
 
The Tale of a React Native Contribution
The Tale of a React Native ContributionThe Tale of a React Native Contribution
The Tale of a React Native Contribution
 
Lessons in Open Source from the MongooseJS ODM
Lessons in Open Source from the MongooseJS ODMLessons in Open Source from the MongooseJS ODM
Lessons in Open Source from the MongooseJS ODM
 
AngularJS vs React JS vs Node JS: Which is Best For Web Development ?
AngularJS vs React JS vs Node JS: Which is Best For Web Development ?AngularJS vs React JS vs Node JS: Which is Best For Web Development ?
AngularJS vs React JS vs Node JS: Which is Best For Web Development ?
 
Introduction to require js
Introduction to require jsIntroduction to require js
Introduction to require js
 
Conquering AngularJS Limitations
Conquering AngularJS LimitationsConquering AngularJS Limitations
Conquering AngularJS Limitations
 
MongoDB MEAN Stack Webinar October 7, 2015
MongoDB MEAN Stack Webinar October 7, 2015MongoDB MEAN Stack Webinar October 7, 2015
MongoDB MEAN Stack Webinar October 7, 2015
 
Typescript overview
Typescript overviewTypescript overview
Typescript overview
 
Spa with angular
Spa with angularSpa with angular
Spa with angular
 
Using Javascript in today's world
Using Javascript in today's worldUsing Javascript in today's world
Using Javascript in today's world
 
Benefits of Typescript and Javascript Limitations
Benefits of Typescript and Javascript LimitationsBenefits of Typescript and Javascript Limitations
Benefits of Typescript and Javascript Limitations
 
A walkthrough of JavaScript ES6 features
A walkthrough of JavaScript ES6 featuresA walkthrough of JavaScript ES6 features
A walkthrough of JavaScript ES6 features
 
WHAT / WHY / HOW WE’RE ENGINEERING AT SMARTSTUDY (English)
WHAT / WHY / HOW WE’RE ENGINEERING AT SMARTSTUDY (English)WHAT / WHY / HOW WE’RE ENGINEERING AT SMARTSTUDY (English)
WHAT / WHY / HOW WE’RE ENGINEERING AT SMARTSTUDY (English)
 
Tech Talk Tokyo #2 tetsuya matsuzawa
Tech Talk Tokyo #2 tetsuya matsuzawaTech Talk Tokyo #2 tetsuya matsuzawa
Tech Talk Tokyo #2 tetsuya matsuzawa
 
Resftul API Web Development with Django Rest Framework & Celery
Resftul API Web Development with Django Rest Framework & CeleryResftul API Web Development with Django Rest Framework & Celery
Resftul API Web Development with Django Rest Framework & Celery
 
TypeScript Introduction
TypeScript IntroductionTypeScript Introduction
TypeScript Introduction
 
Reusability is the goal
Reusability is the goalReusability is the goal
Reusability is the goal
 
When to use and when not to use AngularJS - Liju Pillai, www.perfomatix.com
When to use and when not to use AngularJS - Liju Pillai, www.perfomatix.comWhen to use and when not to use AngularJS - Liju Pillai, www.perfomatix.com
When to use and when not to use AngularJS - Liju Pillai, www.perfomatix.com
 

Similar to Java Script Template Engine 비교하기

Javascript best practices
Javascript best practicesJavascript best practices
Javascript best practices
Jayanga V. Liyanage
 
Skillwise Dust JS Template
Skillwise Dust JS TemplateSkillwise Dust JS Template
Skillwise Dust JS Template
Skillwise Group
 
Swagger - Making REST APIs friendlier
Swagger - Making REST APIs friendlierSwagger - Making REST APIs friendlier
Swagger - Making REST APIs friendlier
Miroslav Resetar
 
Design Patterns In Scala
Design Patterns In ScalaDesign Patterns In Scala
Design Patterns In Scala
Knoldus Inc.
 
Selecting the Best Javascript Web Framework
Selecting the Best Javascript Web FrameworkSelecting the Best Javascript Web Framework
Selecting the Best Javascript Web Framework
Rajitha Pathiraja
 
node.js 실무 - node js in practice by Jesang Yoon
node.js 실무 - node js in practice by Jesang Yoonnode.js 실무 - node js in practice by Jesang Yoon
node.js 실무 - node js in practice by Jesang Yoon
Jesang Yoon
 
Frameworks Galore: A Pragmatic Review
Frameworks Galore: A Pragmatic ReviewFrameworks Galore: A Pragmatic Review
Frameworks Galore: A Pragmatic Review
netc2012
 
Single Page Applications - Desert Code Camp 2012
Single Page Applications - Desert Code Camp 2012Single Page Applications - Desert Code Camp 2012
Single Page Applications - Desert Code Camp 2012
Adam Mokan
 
Java 9, JShell, and Modularity
Java 9, JShell, and ModularityJava 9, JShell, and Modularity
Java 9, JShell, and Modularity
Mohammad Hossein Rimaz
 
Angular Js
Angular JsAngular Js
Angular Js
Knoldus Inc.
 
Welcome to React.pptx
Welcome to React.pptxWelcome to React.pptx
Welcome to React.pptx
PraveenKumar680401
 
Dust.js
Dust.jsDust.js
What is Mean Stack Development ?
What is Mean Stack Development ?What is Mean Stack Development ?
What is Mean Stack Development ?
Balajihope
 
Angular 2 overview
Angular 2 overviewAngular 2 overview
Angular 2 overview
Jesse Warden
 
React js TRAINING IN BANGALORE
React js TRAINING IN BANGALOREReact js TRAINING IN BANGALORE
React js TRAINING IN BANGALORE
nearlearn
 
React js TRAINING IN BANGALORE
React js TRAINING IN BANGALOREReact js TRAINING IN BANGALORE
React js TRAINING IN BANGALORE
nearlearn
 
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to concepts
Abhishek Sur
 
JS - The Unknown Basics.pptx
JS - The Unknown Basics.pptxJS - The Unknown Basics.pptx
JS - The Unknown Basics.pptx
ParveenSoni21
 
Autoframework design
Autoframework designAutoframework design
Autoframework design
Forge Events
 
Internship softwaretraining@ijse
Internship softwaretraining@ijseInternship softwaretraining@ijse
Internship softwaretraining@ijse
Jinadi Rashmika
 

Similar to Java Script Template Engine 비교하기 (20)

Javascript best practices
Javascript best practicesJavascript best practices
Javascript best practices
 
Skillwise Dust JS Template
Skillwise Dust JS TemplateSkillwise Dust JS Template
Skillwise Dust JS Template
 
Swagger - Making REST APIs friendlier
Swagger - Making REST APIs friendlierSwagger - Making REST APIs friendlier
Swagger - Making REST APIs friendlier
 
Design Patterns In Scala
Design Patterns In ScalaDesign Patterns In Scala
Design Patterns In Scala
 
Selecting the Best Javascript Web Framework
Selecting the Best Javascript Web FrameworkSelecting the Best Javascript Web Framework
Selecting the Best Javascript Web Framework
 
node.js 실무 - node js in practice by Jesang Yoon
node.js 실무 - node js in practice by Jesang Yoonnode.js 실무 - node js in practice by Jesang Yoon
node.js 실무 - node js in practice by Jesang Yoon
 
Frameworks Galore: A Pragmatic Review
Frameworks Galore: A Pragmatic ReviewFrameworks Galore: A Pragmatic Review
Frameworks Galore: A Pragmatic Review
 
Single Page Applications - Desert Code Camp 2012
Single Page Applications - Desert Code Camp 2012Single Page Applications - Desert Code Camp 2012
Single Page Applications - Desert Code Camp 2012
 
Java 9, JShell, and Modularity
Java 9, JShell, and ModularityJava 9, JShell, and Modularity
Java 9, JShell, and Modularity
 
Angular Js
Angular JsAngular Js
Angular Js
 
Welcome to React.pptx
Welcome to React.pptxWelcome to React.pptx
Welcome to React.pptx
 
Dust.js
Dust.jsDust.js
Dust.js
 
What is Mean Stack Development ?
What is Mean Stack Development ?What is Mean Stack Development ?
What is Mean Stack Development ?
 
Angular 2 overview
Angular 2 overviewAngular 2 overview
Angular 2 overview
 
React js TRAINING IN BANGALORE
React js TRAINING IN BANGALOREReact js TRAINING IN BANGALORE
React js TRAINING IN BANGALORE
 
React js TRAINING IN BANGALORE
React js TRAINING IN BANGALOREReact js TRAINING IN BANGALORE
React js TRAINING IN BANGALORE
 
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to concepts
 
JS - The Unknown Basics.pptx
JS - The Unknown Basics.pptxJS - The Unknown Basics.pptx
JS - The Unknown Basics.pptx
 
Autoframework design
Autoframework designAutoframework design
Autoframework design
 
Internship softwaretraining@ijse
Internship softwaretraining@ijseInternship softwaretraining@ijse
Internship softwaretraining@ijse
 

More from SeongSik Choi

W8(체중관리 챗봇)
W8(체중관리 챗봇)W8(체중관리 챗봇)
W8(체중관리 챗봇)
SeongSik Choi
 
Ubuntu & C9(node.js) with AWS
Ubuntu & C9(node.js) with AWSUbuntu & C9(node.js) with AWS
Ubuntu & C9(node.js) with AWS
SeongSik Choi
 
Kakao Bot(Plus friend)
Kakao Bot(Plus friend)Kakao Bot(Plus friend)
Kakao Bot(Plus friend)
SeongSik Choi
 
Linebot
LinebotLinebot
Linebot
SeongSik Choi
 
RokSeoul
RokSeoulRokSeoul
RokSeoul
SeongSik Choi
 
AR tool - Vuforia
AR tool - VuforiaAR tool - Vuforia
AR tool - Vuforia
SeongSik Choi
 
Din9talk(beta0.3.1)
Din9talk(beta0.3.1)Din9talk(beta0.3.1)
Din9talk(beta0.3.1)
SeongSik Choi
 
Din9talk(beta0.2.0)
Din9talk(beta0.2.0)Din9talk(beta0.2.0)
Din9talk(beta0.2.0)
SeongSik Choi
 
Firebase Database 둘러보기
Firebase Database 둘러보기Firebase Database 둘러보기
Firebase Database 둘러보기
SeongSik Choi
 
FCM알아보기
FCM알아보기FCM알아보기
FCM알아보기
SeongSik Choi
 
GCM demo on Android
GCM demo on AndroidGCM demo on Android
GCM demo on Android
SeongSik Choi
 
HTTPS, 원격제어
HTTPS, 원격제어HTTPS, 원격제어
HTTPS, 원격제어
SeongSik Choi
 
리눅스를 이용한 Nas만들기
리눅스를 이용한 Nas만들기리눅스를 이용한 Nas만들기
리눅스를 이용한 Nas만들기
SeongSik Choi
 

More from SeongSik Choi (13)

W8(체중관리 챗봇)
W8(체중관리 챗봇)W8(체중관리 챗봇)
W8(체중관리 챗봇)
 
Ubuntu & C9(node.js) with AWS
Ubuntu & C9(node.js) with AWSUbuntu & C9(node.js) with AWS
Ubuntu & C9(node.js) with AWS
 
Kakao Bot(Plus friend)
Kakao Bot(Plus friend)Kakao Bot(Plus friend)
Kakao Bot(Plus friend)
 
Linebot
LinebotLinebot
Linebot
 
RokSeoul
RokSeoulRokSeoul
RokSeoul
 
AR tool - Vuforia
AR tool - VuforiaAR tool - Vuforia
AR tool - Vuforia
 
Din9talk(beta0.3.1)
Din9talk(beta0.3.1)Din9talk(beta0.3.1)
Din9talk(beta0.3.1)
 
Din9talk(beta0.2.0)
Din9talk(beta0.2.0)Din9talk(beta0.2.0)
Din9talk(beta0.2.0)
 
Firebase Database 둘러보기
Firebase Database 둘러보기Firebase Database 둘러보기
Firebase Database 둘러보기
 
FCM알아보기
FCM알아보기FCM알아보기
FCM알아보기
 
GCM demo on Android
GCM demo on AndroidGCM demo on Android
GCM demo on Android
 
HTTPS, 원격제어
HTTPS, 원격제어HTTPS, 원격제어
HTTPS, 원격제어
 
리눅스를 이용한 Nas만들기
리눅스를 이용한 Nas만들기리눅스를 이용한 Nas만들기
리눅스를 이용한 Nas만들기
 

Recently uploaded

Building API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructureBuilding API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructure
confluent
 
Secure-by-Design Using Hardware and Software Protection for FDA Compliance
Secure-by-Design Using Hardware and Software Protection for FDA ComplianceSecure-by-Design Using Hardware and Software Protection for FDA Compliance
Secure-by-Design Using Hardware and Software Protection for FDA Compliance
ICS
 
Strengthening Web Development with CommandBox 6: Seamless Transition and Scal...
Strengthening Web Development with CommandBox 6: Seamless Transition and Scal...Strengthening Web Development with CommandBox 6: Seamless Transition and Scal...
Strengthening Web Development with CommandBox 6: Seamless Transition and Scal...
Ortus Solutions, Corp
 
ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.
Maitrey Patel
 
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
gapen1
 
Computer Science & Engineering VI Sem- New Syllabus.pdf
Computer Science & Engineering VI Sem- New Syllabus.pdfComputer Science & Engineering VI Sem- New Syllabus.pdf
Computer Science & Engineering VI Sem- New Syllabus.pdf
chandangoswami40933
 
Refactoring legacy systems using events commands and bubble contexts
Refactoring legacy systems using events commands and bubble contextsRefactoring legacy systems using events commands and bubble contexts
Refactoring legacy systems using events commands and bubble contexts
Michał Kurzeja
 
The Comprehensive Guide to Validating Audio-Visual Performances.pdf
The Comprehensive Guide to Validating Audio-Visual Performances.pdfThe Comprehensive Guide to Validating Audio-Visual Performances.pdf
The Comprehensive Guide to Validating Audio-Visual Performances.pdf
kalichargn70th171
 
Streamlining End-to-End Testing Automation
Streamlining End-to-End Testing AutomationStreamlining End-to-End Testing Automation
Streamlining End-to-End Testing Automation
Anand Bagmar
 
ppt on the brain chip neuralink.pptx
ppt  on   the brain  chip neuralink.pptxppt  on   the brain  chip neuralink.pptx
ppt on the brain chip neuralink.pptx
Reetu63
 
美洲杯赔率投注网【​网址​🎉3977·EE​🎉】
美洲杯赔率投注网【​网址​🎉3977·EE​🎉】美洲杯赔率投注网【​网址​🎉3977·EE​🎉】
美洲杯赔率投注网【​网址​🎉3977·EE​🎉】
widenerjobeyrl638
 
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdfBaha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid
 
Alluxio Webinar | 10x Faster Trino Queries on Your Data Platform
Alluxio Webinar | 10x Faster Trino Queries on Your Data PlatformAlluxio Webinar | 10x Faster Trino Queries on Your Data Platform
Alluxio Webinar | 10x Faster Trino Queries on Your Data Platform
Alluxio, Inc.
 
Optimizing Your E-commerce with WooCommerce.pptx
Optimizing Your E-commerce with WooCommerce.pptxOptimizing Your E-commerce with WooCommerce.pptx
Optimizing Your E-commerce with WooCommerce.pptx
WebConnect Pvt Ltd
 
Superpower Your Apache Kafka Applications Development with Complementary Open...
Superpower Your Apache Kafka Applications Development with Complementary Open...Superpower Your Apache Kafka Applications Development with Complementary Open...
Superpower Your Apache Kafka Applications Development with Complementary Open...
Paul Brebner
 
14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision
ShulagnaSarkar2
 
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Paul Brebner
 
Ensuring Efficiency and Speed with Practical Solutions for Clinical Operations
Ensuring Efficiency and Speed with Practical Solutions for Clinical OperationsEnsuring Efficiency and Speed with Practical Solutions for Clinical Operations
Ensuring Efficiency and Speed with Practical Solutions for Clinical Operations
OnePlan Solutions
 
Penify - Let AI do the Documentation, you write the Code.
Penify - Let AI do the Documentation, you write the Code.Penify - Let AI do the Documentation, you write the Code.
Penify - Let AI do the Documentation, you write the Code.
KrishnaveniMohan1
 
Going AOT: Everything you need to know about GraalVM for Java applications
Going AOT: Everything you need to know about GraalVM for Java applicationsGoing AOT: Everything you need to know about GraalVM for Java applications
Going AOT: Everything you need to know about GraalVM for Java applications
Alina Yurenko
 

Recently uploaded (20)

Building API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructureBuilding API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructure
 
Secure-by-Design Using Hardware and Software Protection for FDA Compliance
Secure-by-Design Using Hardware and Software Protection for FDA ComplianceSecure-by-Design Using Hardware and Software Protection for FDA Compliance
Secure-by-Design Using Hardware and Software Protection for FDA Compliance
 
Strengthening Web Development with CommandBox 6: Seamless Transition and Scal...
Strengthening Web Development with CommandBox 6: Seamless Transition and Scal...Strengthening Web Development with CommandBox 6: Seamless Transition and Scal...
Strengthening Web Development with CommandBox 6: Seamless Transition and Scal...
 
ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.
 
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
 
Computer Science & Engineering VI Sem- New Syllabus.pdf
Computer Science & Engineering VI Sem- New Syllabus.pdfComputer Science & Engineering VI Sem- New Syllabus.pdf
Computer Science & Engineering VI Sem- New Syllabus.pdf
 
Refactoring legacy systems using events commands and bubble contexts
Refactoring legacy systems using events commands and bubble contextsRefactoring legacy systems using events commands and bubble contexts
Refactoring legacy systems using events commands and bubble contexts
 
The Comprehensive Guide to Validating Audio-Visual Performances.pdf
The Comprehensive Guide to Validating Audio-Visual Performances.pdfThe Comprehensive Guide to Validating Audio-Visual Performances.pdf
The Comprehensive Guide to Validating Audio-Visual Performances.pdf
 
Streamlining End-to-End Testing Automation
Streamlining End-to-End Testing AutomationStreamlining End-to-End Testing Automation
Streamlining End-to-End Testing Automation
 
ppt on the brain chip neuralink.pptx
ppt  on   the brain  chip neuralink.pptxppt  on   the brain  chip neuralink.pptx
ppt on the brain chip neuralink.pptx
 
美洲杯赔率投注网【​网址​🎉3977·EE​🎉】
美洲杯赔率投注网【​网址​🎉3977·EE​🎉】美洲杯赔率投注网【​网址​🎉3977·EE​🎉】
美洲杯赔率投注网【​网址​🎉3977·EE​🎉】
 
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdfBaha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
 
Alluxio Webinar | 10x Faster Trino Queries on Your Data Platform
Alluxio Webinar | 10x Faster Trino Queries on Your Data PlatformAlluxio Webinar | 10x Faster Trino Queries on Your Data Platform
Alluxio Webinar | 10x Faster Trino Queries on Your Data Platform
 
Optimizing Your E-commerce with WooCommerce.pptx
Optimizing Your E-commerce with WooCommerce.pptxOptimizing Your E-commerce with WooCommerce.pptx
Optimizing Your E-commerce with WooCommerce.pptx
 
Superpower Your Apache Kafka Applications Development with Complementary Open...
Superpower Your Apache Kafka Applications Development with Complementary Open...Superpower Your Apache Kafka Applications Development with Complementary Open...
Superpower Your Apache Kafka Applications Development with Complementary Open...
 
14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision
 
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
 
Ensuring Efficiency and Speed with Practical Solutions for Clinical Operations
Ensuring Efficiency and Speed with Practical Solutions for Clinical OperationsEnsuring Efficiency and Speed with Practical Solutions for Clinical Operations
Ensuring Efficiency and Speed with Practical Solutions for Clinical Operations
 
Penify - Let AI do the Documentation, you write the Code.
Penify - Let AI do the Documentation, you write the Code.Penify - Let AI do the Documentation, you write the Code.
Penify - Let AI do the Documentation, you write the Code.
 
Going AOT: Everything you need to know about GraalVM for Java applications
Going AOT: Everything you need to know about GraalVM for Java applicationsGoing AOT: Everything you need to know about GraalVM for Java applications
Going AOT: Everything you need to know about GraalVM for Java applications
 

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.
  • 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

Editor's Notes

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