지난달 "Imba라는 언어가 대단합니다. Memoized DOM이 오겠습니다"라는 기사를 읽은 뒤 분위기가 고조되는 모습은 별로 보이지 않았지만, 개인적으로는 여전히 신경이 쓰이고 일본어 메시지가 전혀 없으니 정리해보겠습니다.

이른바 Imba

루비풍 문법의 AltJS입니다.
공식 사이트도 루비와 파이톤의 영향을 받았다.
다른 AltJS와 마찬가지로 JavaScript로 컴파일되어 웹 전면에서 이동한다고 가정한 언어입니다.
이 보도에 따라 React 및 Vue가 사용됩니다.js보다 20배 이상 고속으로 운행합니다.

특징.

묘사량이 적은 간결한 기법

Memoized DOM을 통한 고속 그리기

간결한 기법

다음은 공식 사이트의 샘플 코드로 상당히 간결하게 썼다.
문장의 구조는 React, JSX와 비슷하다.
sample.imba

import {Todo} from './store'

tag App
    prop todos

    def addTodo
        @todos.push Todo.new(@newTodoTitle)

    def render
        <self>
            <form.header :submit.prevent.addTodo>
                <input[@newTodoTitle] placeholder="Add...">
                <button type='submit'> 'Add item'
            <ul> for todo in @todos
                <li> todo.title

Imba.mount <App.vbox todos=[]>

라벨을 닫지 않고 들여쓰기로 구분해 학급명class="header"이 아닌 .header로 쓰는 등 HTML 대비 적은 기술로도 쓸 수 있다.
DOM은 첫 번째 레벨 객체이자 피쳐입니다.
위 코드의 마지막 한마디를 보면 라벨은 그렇게 함수의 매개 변수로 교부되어 있다.
아마 리액트의 JSX가 언어로 구비한 느낌일 거예요.
신경 쓰이는 건 변수야.
React는 state에 직접 대입할 수 없으며 setState () 를 사용하여 값을 업데이트했지만 Imba는 값을 직접 고쳤다.
변수 대입부터 DOM을 업데이트하는 메커니즘은 후술Memoized DOM에서 얻어진 것으로 알려졌지만 설치에 신경을 많이 썼다.
또한 임바에서는 바닐라 JS로 컴파일되었기 때문에 기존의 JS 라이브러리공식 문서를 사용할 수 있다.

Memoized DOM

Imba가 빠질 수 없거나 빠질 수 없는 것은 Memoized DOM입니다.
최근 들어 웹 프런트엔드 프레임에서 Virtual DOM을 사용하는 경우가 많지만, Imba에서는 Memoized DOM으로 불리는 구조를 사용하고 있다.
Memoized DOM이 무엇을 설명하느냐보다 실제 퍼포먼스가 달라서 직접 보여드리는 게 더 빠를 것 같아요.
Imba、React、Vue.Imba 작성자는 간단한 TODO 앱으로 js 성능을 비교할 수 있는 사이트를 준비한 것 같다.
https://somebee.github.io/dom-reconciler-bench/index.html

이미지에서 알 수 있듯이 Imba와 그 외의 처리 속도는 20배 이상 차이가 납니다.
소개 기사만 읽으면 메모리즈 덤이 직접 덤을 업데이트할 것 같다.
(자세한 내용은 소스 코드를 읽은 후 요약하십시오)

Imba 도입 사례

Scrimba

https://scrimba.com/
임바의 저자가 만든 앱으로, 프로그램이 디자인한 동영상 학습 사이트다.
애니메이션이라고는 하지만 유튜브처럼 애니메이션이 삽입된 것이 아니라 문자 편집기의 글이 소리에 따라 변하는 세련된 것이다.
복잡한 설치든 페이지는 빠르게 작동할 수 있다.
임바도 복잡한 앱을 만들 수 있는 좋은 사례라고 할 수 밖에 없다.

끝말

요즘은 리액션이야.메모 등의 등장, 리액트의 퍼포먼스가 조화를 이룬 사례https://qiita.com/teradonburi/items/5b8f79d26e1b319ac44f 등)도 늘었고, 프런트의 속도에도 주의해야 할 일이 늘었다고 생각한다.
이 가운데 소박하면서도 빠른 임바도 선택지로 활용해보자.

정보 출처

이 글은 아래 페이지를 참고하여 인용한다.원래 보도는 열광적이기 때문에 시간이 있는 사람은 추천해 읽는다.
- The Virtual DOM is slow. Meet the Memoized DOM.
- An Intro to Imba: the JavaScript-compatible language for lightning fast DOM updates
- imba.io(Imba의 공식 문서)
- Github