Jaml: JavaScript 기반 선언형 HTML 생성 도구 | JAML.js

 

 

---

개요

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

 

 

JAML

JAML은 때때로 "JavaScript-based Markup Language"의 약어로 사용되며, XML이나 HTML처럼 구조화된 마크업을 JavaScript 스타일로 작성하려는 시도에서 나온 개념입니다. 예전에는 JAML.js라는 JavaScript 라이브러리가 있었고, 이는 WPF(XAML) 스타일의 UI를 웹에서 구현하려는 프로젝트였습니다.

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