[JavaScript] Jaml: JavaScript를 위한 아름다운 HTML 생성

 

 

---

개요

• 아키텍처 기술 조사 중 JAML webSite 라는 단어를 보았다.
• May 20, 2021 자료 중 일부 였는데 JAML를 구글에 검색했을때 정리된 자료가 별로 없었다.
• 그래서 간단하게 정리해보려고 하는 포스팅이다.

 

 

정의

• Jaml은 Ruby의 Haml 라이브러리를 에뮬레이트하여 JavaScript 프로젝트에서 HTML 렌더링을 간소화하도록 설계된 JavaScript HTML 템플릿 엔진, JavaScript 템플릿 프레임워크이라고도 함.
• 2021년에 인기가 있었다고 한다.

 

JavaScript 템플릿 프레임워크 (2021년 기준)

• EJS(임베디드 자바스크립트)
  • 장점 : EJS는 자바스크립트를 사용하여 HTML 마크업을 생성할 수 있는 간단한 템플릿 언어입니다. 사용하기 쉽고 Node.js 및 Express.js와 잘 통합됩니다
  • 인기 있는 이유 : EJS는 자바스크립트 구문에 익숙한 개발자에게 단순성과 친숙함으로 인기가 있습니다. 자바스크립트 코드를 HTML 마크업에 직접 임베드할 수 있습니다.
• jQuery.Tmpl
  • 장점 : jQuery.Tmpl은 jQuery용 템플릿 플러그인으로, JavaScript 표현식이 포함된 HTML 마크업을 사용하여 템플릿을 정의할 수 있습니다.
  • 인기 있는 이유 : jQuery.Tmpl은 jQuery와 통합되어 DOM 요소와 데이터 바인딩 작업을 쉽게 만들어 주는 것으로 인기가 있었습니다.
• JAML
  
  • 장점 : JAML은 가독성과 사용 편의성에 초점을 맞춘 간결하고 우아한 템플릿 언어입니다.
  • 인기 있는 이유 : JAML은 깔끔한 구문과 읽고 이해하기 쉬운 방식으로 템플릿을 작성할 수 있는 기능으로 인기를 얻었습니다.
• 마이크로
  
  • 장점 : 마이크로는 성능과 효율성에 초점을 맞춘 가볍고 빠른 JavaScript 템플릿 엔진입니다.
  • 인기 있는 이유 : 마이크로는 속도와 작은 크기로 인기를 얻었으며, 성능이 중요한 요소인 프로젝트에 적합합니다.
• Handlebars, Mustache, Pug(이전 명칭 Jade), Nunjucks

 

특징

• Jaml을 사용하는 방법은  템플릿을 등록하고 렌더링하는 것 2단계이다.
• 템플릿을 등록하고 바로 렌더링할 수 있으므로 문자열 보간에 의존하지 않고도 JavaScript에서 HTML 구조를 정의하기가 더 쉽다.
• 태그를 어떻게 렌더링하고 어떤 순서로 렌더링하고, 어떤 태그가 스스로 닫히는지 등을 알고 있다.

 

주요 기능

• HTML 템플릿을 간단한 DSL과 유사한 구문을 사용하여 템플릿을 작성
• 템플릿 등록 및 렌더링 지원
• 파셜(Partials) 및 컬렉션(Collections)을 통한 재사용 가능 템플릿 작성

 

코드로 알아보기

Jaml.js

/**
 * @class Jaml
 * @author Ed Spencer (http://edspencer.net)
 * Jaml is a simple JavaScript library which makes HTML generation easy and pleasurable.
 * Examples: http://edspencer.github.com/jaml
 * Introduction: http://edspencer.net/2009/11/jaml-beautiful-html-generation-for-javascript.html
 */
Jaml = function() {
  return {
    templates: {},
        
    /**
     * Registers a template by name
     * @param {String} name The name of the template
     * @param {Function} template The template function
     */
    register: function(name, template) {
      this.templates[name] = template;
    },
    
    /**
     * Renders the given template name with an optional data object
     * @param {String} name The name of the template to render
     * @param {Object} thisObj Optional data object
     * @param {Object} data Optional data object
     */
    render: function(name, thisObj, data) {
      var template = this.templates[name],
          renderer = new Jaml.Template(template);
      return renderer.render.apply(renderer, Array.prototype.slice.call(arguments, 1));
    }
  };
}();

 

등록, 렌더링 예

var Jaml = require("jaml").Jaml;

Jaml.register('simple', function() {
  p("this is a test");
});

Jaml.register('nested', function() {
  h1("some title");
  div(
    p("some stuff"),
    ul(
      li('list'),
      li('of'),
      li('items')
    )
  );
});

Jaml.register('product', function(data) {
  h2(data.title);
  div(
    img({src: data.thumbnail}),
    p(data.description),
    form()
  );
});

Jaml.register('category', function(category) {
  h1(category.title);
  div({cls: 'products'},
    Jaml.render('product', category.products)
  );
});

var product = {
  title: 'My Product',
  thumbnail: 'some.jpg',
  description: 'It is great!'
};

var category = {
  title: "DVDs",
  products: [product, product]
};

print(Jaml.render('category', category));

Jaml.render('simple');

 

 

출처 : https://github.com/edspencer/jaml/blob/master/examples/example.js

 

JAML 커뮤니티

https://edspencer.github.io/jaml/

Jaml - JavaScript HTML templating engine

- github : https://github.com/edspencer/jaml

 

 

출처

https://www.quora.com/What-is-the-best-JavaScript-templating-framework-and-why-Examples-include-JAML-EJS-Embedded-JavaScript-Micro-and-jQuery-Tmpl