초경량 MVC 자바스크립트 프레임워크 Mithril

Mithril

Mithril은 경량 웹 프론트엔드용 MVC 프레임워크이다. 이 분야에서 가장 인기있는 프레임워크 중 하나인 AngularJS의 경우 JS소스코드의 용량도 만만치 않고, 템플릿을 컴파일하여 렌더링하는 초기 로딩 시간이 상당한데, Mithril의 경우 gzipped로 압축 전송되는 용량이 4kb에 불과하며, HTML마크업상에서 템플릿을 컴파일하지 않고 스크립트 레벨에서 프론트엔드 객체를 생성하거나, 엘레멘트를 그냥 가져오는 방식이라 동작 속도 또한 매우 빠르다.

설치

mithril.js 파일 하나만 웹페이지에 포함시키면 된다.

    <!doctype html>
    <script src='mithril.js'></script>
    <script>
        // app code here
    </script>

사용법

공식 사이트의 가이드를 참고하면 간단한 앱은 금방 작성할 수 있다. 문제는 뷰를 생성하는 구문이 그야말로 괄호 지옥이라는 점에서 바닐라 자바스크립트나 타입스크립트를 쓰는 입장에서는 작성에 애로사항이 꽃피는 정도가 아니라 나같음 진심 빡칠 거 같은데, 불행중 다행은 점은 이러한 뷰 문법이 LiveScript로 작성하기에는 더할 나위없이 깔끔하고 편하다는 점이다.

이에 Mithril 관련한 프레임워크의 주요 구성 요소들을 설명하고, 어떤 식으로 사용하는지를 보여주는 글들을 준비하고자 한다. 사실, 이 글들 이전에 조각글 형식으로 발행했던 것들은 다시 수정/재작성하고 하나의 타래로 묶은 것이다.

mithril 관련 글

  1. mithril 앱의 기본 구성 및 m()
  2. m.render – 가상 DOM 렌더링하기
  3. m.mountmithril을 이용한 양방향 바인딩 & 템플릿 렌더링
  4. m.prop 양방향 바인딩을 위한 데이터 래퍼
  5. m.withAttr 양방향 바인딩을 위한 이벤트 매퍼
  6. m.componentmithril 앱을 컴포넌트화하기
  7. Todo
  8. m.route – 단일페이지 애플리케이션 및 라우팅 규칙
  9. m.request – 서버 API와 통신하기