O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Java Script Template Engine 비교하기

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio

Confira estes a seguir

1 de 15 Anúncio
Anúncio

Mais Conteúdo rRelacionado

Anúncio
Anúncio

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

Notas do Editor

  • 정보의 중복을 줄이는 것
    다중 언어를 지원하는가
    변경사항이 즉시 적용되는지 또는 컴파일/디플로이 사이클이 있는지
    브라우저와 서버에 렌더되는게 얼마나 오래걸리는지
    배우기 쉬운지
    한번 배우면 얼마나 빠르게 적용할 수 있는지
    클라이언트 및 서버사이드에 같은 템플릿을 사용하여 렌더링 할 수 있는지
    활동적인 관련 커뮤니티가 있는지
    다른 js라이브러리에 의존하는지
    테스트하기 쉬운지
    단계적 디버깅이 가능한지
    에디터를 지원하는 지
    얼마나 안정적인지
    메뉴얼 정리가 잘 되어있는지
    템플릿의 문서화를 장려하는지 혹은 주석을 요구하는지
  • Mustache의 중첩괄호방식을 차용 {{ }}
    *Helper 개념을 도입하여 **Mustache의 제약사항을 상당히 덜어냄
    서버에서 받아온 JSON 데이터를 필요에 따라간편하게 가공하여 사용할수 있다는 점이 가장 큰 매력
    Precompiling Templates??
    *if, unless 등의 기본 헬퍼와 사용자 정의 헬퍼를 이용해서 간단한 로직을 구현할 수 있다. 
    **Codelss를 지향하는 Mustache는 코드의 중간 가공에 제약이 많음.

  • <%= %>를 이용하여 구분
    html파일에 JS를 직접 사용가능
    비교적 배우기가 쉬움
    디버깅 가능
  • 개발자가 코드 베이스를 그대로 유지할 수 있는 기능 도우미를 이용할 수 있는 외부 자바 스크립트 라이브러리.
    < % 자바스크립트 코드 %> 
    < %= 치환될 데이터 변수 %>
    < %- escaped 데이터 변수 %>
    jQuery를 좀 알아야할 것 같음.
  • indentation errors 들여쓰기 오류
    mixin 기존에 있던 객체의 기능을 그대로 가져가면서 다른 객체에 추가할 때 주로 사용(이벤트에 유용)
  • EJS는 다양한 파일에 걸쳐 템플릿을 재사용할 수 있는 블록 기능을 지원하지 않습니다.

×