先月に「Imbaって言語がすごいよ、Memoized DOMが来るよ」って記事を読んで、それ以降あまり盛り上がってるのを見ていないのですが、個人的にまだ気になってるのと日本語情報がまったくないのでまとめてみます。
Imbaとは
Ruby風なシンタックスのAltJSです。
公式サイトでもRubyやPythonに影響を受けたとあります。
他のAltJSと同様に、JavaScriptにコンパイルされてWebのフロントエンドで動かすことを想定して作られた言語です。
この記事によると、ReactやVue.jsより20倍以上高速に動作するとか。。
特徴
- 記述量の少ない簡潔な記法
- Memoized DOMによる高速描画
簡潔な記法
以下が公式サイトにあるサンプルコードですが、かなり簡潔に書けてます。
構文としては、React, JSXに近いですね。
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が第一級オブジェクトであることも特徴のようです。
上のコードの最後の一文を見ると、タグをそのまま関数の引数として渡しています。
ReactのJSXが言語として備わっているような感じでしょうか。
気になる点としては、変数がMutableなことですかね。
Reactではstateへ直接代入はできず、setState()を用いて値を更新していましたが、Imbaでは値を直接書き換えています。
変数代入からDOMが更新される仕組みは後述する Memoized DOM によって得られているそうですが、、実装が気になります。
また、Imbaでは特別な型を用いておらず、Vanilla JSにコンパイルされるため、既存のJSライブラリを使用できるようです(公式ドキュメントより)。
Memoized DOM
Imbaを語るに欠かせないのがMemoized DOMです。
近年のWebフロントエンドのフレームワークではVirtual DOMを用いているものが多いですが、ImbaではMemoized DOMと呼ばれる仕組みを使っています。
Memoized DOMが何かを説明するより、実際にパフォーマンスの違いを目で見てもらった方が早いと思います。
Imba、React、Vue.jsのパフォーマンス比較を簡単なTODOアプリでできるサイトをImba作者が用意しているようです。
https://somebee.github.io/dom-reconciler-bench/index.html
画像を見てわかる通り、Imbaとそれ以外では処理速度に20倍以上の差があることがわかります。
紹介記事を読む限り、Memorized DOMでは直接DOMを更新するみたいです。
(詳しい仕組みはソースコードを読んでからまたまとめたいです)
Imba導入事例
Scrimba
https://scrimba.com/
Imbaの作者が作ったアプリで、プログラミングの動画学習サイトです。
動画といってもYouTubeのような動画埋め込みではなく、テキストエディタ上の文章が音声に合わせて変化する、という凝ったものになっています。
複雑な実装にも関わらず、ページはサクサク動きます。
Imbaでも複雑なアプリが作れる良い事例と言わざるを得ないです。
おわりに
最近ではReact.memoなどの登場や、Reactのパフォーマンスチューニングの事例( https://qiita.com/teradonburi/items/5b8f79d26e1b319ac44f など)も増えてきてフロントエンドの速度にも気を配ることが増えてるようにに思います。
その中で、素で速いImbaも選択肢として取り入れてみてはいかがでしょうか。
情報源
本記事は以下のページを参考、引用してます。元記事の方が熱狂感を感じられるので、時間がある方は読むのをおすすめします。