Imba：DOMを高速で使用するためのJavaScript互換言語

Imbaは、Webアプリケーションの開発専用にScrimbaによって作成されたオープンソースのプログラミング言語です。 JavaScriptでコンパイルされ、既存のJSエコシステム内で動作できます。 たとえば、Node.js、npm、Webpackについて話します。

Imbaの主な強みは、この言語を使用すると、ReactやVueなどの仮想DOMテクノロジーを使用するライブラリーに基づくアプリケーションよりもはるかに高速なアプリケーションを作成できることです。 ImbaがDOM更新と連携することにより、アプリケーションのパフォーマンスが向上します。 詳細については、 こちらをご覧ください 。



Scrimbaプロジェクトの共同創設者であるこの資料の著者は、彼がImbaを数年間使用していると言います。 彼によると、この言語での記述は、JavaScriptと比較して、より簡潔な構文を持ち、コードの可読性を向上させるため、非常に楽しいものです。

この資料は、簡単なアプリケーションの作成を開始するのに役立つImba初心者向けガイドです。 最初に、言語の基本をここで明らかにし、次に、その助けを借りたユーザーインターフェイスの開発を検討します。 Imbaでプログラミングするための開発環境のセットアップがすぐに表示されます。

Imbaを使用するプロジェクトについて

コードに入る前に、ImbaはJSでコンパイルされ、アマチュアプロジェクト専用に使用される別の奇妙な言語のようなものではないという事実に注目したいと思います。 また、大企業の深刻なアプリケーションでも使用されています。

その応用の一例は、アイスランドでの魚のオークションをサポートするプラットフォームです。 この国では、魚の貿易がGDPの約1.6％を占めており、これは約3億9000万ドルです。


アイスランドの魚のオークション

もう1つの例は、トレーニングプラットフォームScrimba.comで、プロジェクトのクライアントおよびサーバー部分でImbaが使用されています。 複雑なアプリケーションに基づくこのプラットフォームの使いやすさは、DOMの変更を迅速に同期するImbaの能力に大きく依存しています。


Scrimba.comプラットフォーム

その結果、今日会う言語は、さまざまな規模のプロジェクトの開発に適していると言えます。

構文

Imba構文はJavaScriptに非常に似ていますが、RubyやPythonなどの他の言語もJavaScriptに影響を与えています。 おそらく、Imbaの構文機能は例として便利に考えられます。 以下は、渡された2つの数値の最大値を返す単純なJS関数です。これらの数値が等しい場合はfalseです。

 function findGreatest(num1, num2) { if (num1 > num2) {   return num1 } else if (num2 > num1){   return num2 } else {   return false } } 

Imbaで同じことを書いてください。

 def findGreatest num1, num2   if num1 > num2       num1   elif num2 > num1       num2   else       false 

これら2つの例を比較すると、ImbaとJavaScriptの違いがすぐにわかります。 つまり、次のとおりです。

1. functionはdefます。 キーワードfunctionキーワードdef置き換えられます。
2. ブラケットの欠如。 関数パラメーターは括弧で囲まれていません。 Imbaでは、実際、括弧はほとんど必要ありませんが、必要に応じて使用できます。
3. インデント。 インバではインデントが非常に重要な役割を果たします。 つまり、ここでは中括弧は不要です。
4. returnキーワードがありません。 Imbaでは、関数から値を返すことは暗黙的に実行されます。つまり、 returnキーワードは必要ありません。 Imbaは最後の関数式を自動的に返します。

これは、上記の構文機能がImbaの最も重要な側面であることを意味するものではありませんが、JavaScriptで記述された同様のコードよりもコードを簡潔にします。 この利点は、資料を進めるにつれて顕著になります。

ユーザーインターフェース設計

Imbaを使用してユーザーインターフェイスを作成することについて話しましょう。 実際、この言語はこのためだけに作成されました。 特に、これは、DOMノードがいわゆる「ファーストクラスオブジェクト」の形式で言語に埋め込まれていることを意味します。

React開発の経験がある場合は、Imbaに言語に組み込まれたJSXの独自のバージョンがあるかのようにImbaのこの機能を検討できます。

Reactライブラリを使用してボタンをレンダリングし、このボタンをクリックするとコンソールにメッセージを表示する次のコードを検討してください。

 class App extends React.Component { logOut() {   console.log('button clicked!') } render() {   return (     <div className="container">       <button onClick={this.logOut}>click me!</button>     </div>   ) } } 

Imbaでこれを書き換えると、次のようになります。

 tag App   def logOut e       log 'button clicked!'   def render       <self.container>           <button :tap.logOut> 'Click me!' Imba.mount <App> 

これら2つのコードスニペットを比較してみましょう。 つまり、次の3つの機能に注意を払っています。

1. インラインタグ。 class App extends React.Component設計class App extends React.Componentすることに注意してください。これは、より単純な形式のtag App変換されclass App extends React.Componentいます。 tagキーワードは言語に組み込まれています。 DOMタグも組み込まれています。
2. 終了タグがありません。 行の配置によってプログラムの構造が決まるため、タグを閉じる必要はありません（たとえば、 </button>を使用する）。 これにより、テキスト入力が高速化され、サイズが小さくなります。
3. 単純なクラス構文。 ImbaはHTMLクラスでの作業を簡素化します。 つまり、 className="container"の面倒な構成の代わりに、 .containerをタグ自体に追加するだけで十分です。

Imbaのイベントハンドラーの機能にも気づいたかもしれません。 つまり、 onClick={this.logOut}代わりに使用される構造:tap.logOutを使用して、対応するハンドラーをボタンに接続します。 これは、ユーザーからのイベントを処理するいくつかの方法の1つにすぎません。 詳細については、 こちらをご覧ください 。

データを操作する

次に、Imbaでのデータの操作について説明します。 次の例は、0に等しいcount変数があるAppコンポーネントの状態のReactアプリケーションを示しています。この変数の値は、対応するボタンをクリックすることで減少または増加します。

 class App extends React.Component { state = {   count: 0 } increase = () => {   this.setState({     count: this.state.count + 1   }) } decrease = () => {   this.setState({     count: this.state.count - 1   }) } render() {   return (     <div className="container">       <button onClick={this.increase}>Increase!</button>       <button onClick={this.decrease}>Decrease!</button>       <p>{this.state.count}</p>     </div>   ) } } 

これがImbaでも同じです。

 tag App   prop count default: 0   def increase       count += 1   def decrease       count -= 1   def render       <self.container>           <button :tap.increase> 'Increase!'           <button :tap.decrease> 'Decrease!'           <p> count Imba.mount <App> 

これらの2つの例を比較するときに最初に目を引くのは、コードの量の違いです。

Imbaの例は、行数とコード量の両方で約2倍短くなっています。

プログラミング言語を比較するときのコードの行数の比較はそれほど重要ではありませんが、それでもコードの読みやすさに影響します。コードの読みやすさは、特定のコードベースの規模ですでに役割を果たしています。 Imbaのコード量が少ないということは、Reactに比べて読みやすいことを意味します。

暗黙的なセルフアクセス

上記の例では、オブジェクトのインスタンス変数に直接アクセスし、名前countのみに言及していることに気づいたかもしれません。 Reactでは、 this.state.countコンストラクトを使用して同じことが行われます。

self.countでは、 self.countという形式の構成体を使用することもできますが、ここでは暗黙的にselfにアクセスするため、 selfオプションです。 Imbaは、 countを参照するときに、そのような変数がスコープ内に存在するか、アプリ自体のインスタンスに存在するかを調べます。

可変性

前述の2つの例のもう1つの大きな違いは、状態変更の実装方法です。 Imbaで書かれた例では、状態は可変であり、 count変数の値を直接変更できます。

Reactは別のアプローチを取り、 this.stateの値は不変でthis.stateと見なされます。そのため、変更する唯一の方法はthis.setStateを使用することthis.setState 。

不変の状態で作業する場合は、適切なライブラリをImbaで使用できます。 この意味でのImba言語は、特定の解決策とは関係ありません。 Scrimbaプロジェクトでは、イミュニティを確保するために必要なシステムリソースの過剰なコストは必要ないと考えているため、可変状態を使用します。

開発環境のセットアップ

Imbaの基本を理解したので、今度は実験してみましょう。 これを行うには、開発環境を構成する必要があります。 これを行うには、次のコマンドを実行するだけです。

 git clone https://github.com/somebee/hello-world-imba.git cd hello-world-imba npm install npm run dev 

その後、ブラウザのアドレスhttp://localhost:8080/にアクセスすると、プロジェクトのメインページが表示されます。 アプリケーションを変更するには、ファイルを編集します。このファイルはsrc/client.imbaます。

Imbaのローカルインストールが適切でない場合は、Scrimbaプロジェクトのインタラクティブなオンラインサンドボックスを使用できます。

Imbaパフォーマンス

Imbaで書かれたアプリケーションのパフォーマンスについて話しましょう。 Imbaで非常に高速なWebアプリケーションを作成できるのは、この言語が仮想DOMコンセプトを使用していないためです。仮想DOMコンセプトは、Reactで非常に普及しています。 ImbaはMemoized DOMテクノロジーを使用しています。 これは、仮想DOMよりも単純であり、使用する中間メカニズムの数が少なくてDOMを操作できます。

このベンチマークでは、ページの[ベンチマークの実行]ボタンをクリックするだけで自宅で起動できます。Imba、React、Vueを使用して、TODOリストの変更中に1秒間に実行できるDOMと操作の数を比較します。

結果を以下に示すテストでは、ImbaはReactおよびVueよりも20〜30倍高速であることがわかりました。 異なるコンピューターでは、テスト結果は異なります。


Imba、React、およびVueのパフォーマンス測定

ご覧のとおり、Imbaを使用すると、DOMを非常に迅速に操作することができます。

まとめ

この記事では、Imbaの基本のみを取り上げました。 この言語に興味がある場合は、そのドキュメントをご覧ください 。 特に、ゲッターとセッターを使用するという彼の概念と、暗黙的な呼び出しのメカニズムを習得することが有用です。 Imbaに関連する有用なリソースのリストを以下に示します。 最初はこの言語は難しいように見えるかもしれませんが、習得するには時間がかかりますが、誰もが知っているように、池から魚を簡単に取り出すことはできません。

親愛なる読者！ プロジェクトでImba言語を使用する予定はありますか？