no versions found for AboutAlier / introduction / en

イントロダクション

Alierとは

Alier(アリエ) は、モバイルアプリ、Web アプリ、そしてアプリケーションサーバ開発を包括的にサポートする JavaScript フレームワークです。

Alier

Alierで出来ること

Alier を使えば JavaScript のみ、しかも同一のコードで動作させることが出来ます。Web アプリもプラットフォーム依存の機能を使用しなければモバイルと単一コードで管理することが可能です。

また、Alier ではアプリケーションアーキテクチャの枠組みをフレームワークレベルでサポートしています。これに準拠した開発を進めていけば、Model と View を明確に分離出来、おのずと構造を理解していくことが出来ます。

これによって大規模な開発でも開発者間の設計に対する理解度の差や解釈の違いが抑えられ、コード品質が一定に保たれる他、設計の検討に費やしていた時間の削減につながります。

複雑な環境のセットアップもいりません。Alier ライブラリをダウンロードしてリンクするだけで開発を始めることが出来ます。プラットフォーム固有の機能を阻害しないのでデメリットなく導入して頂けます。

サンプルコード

サンプルコードをみてみましょう。以下はボタンを押下すると"Hello, alier!"と表示されるサンプルです。

コードの詳しい解説はLearn Alier: 1. Hello, alier!で行っています。

import * as AlierFramework from "/alier_sys/AlierFramework.js";
Object.assign(globalThis, AlierFramework);
　
async function main() {
    setupAlier();

    Alier.View.attach(new Hello());
}

class Hello extends ViewLogic {
    constructor() {
        super();

        // container
        const container = `
          <alier-container>
            <input type="button" id="button" value="ボタン" data-ui-component data-active-events="click"/>
            <div id="comment" data-ui-component></div>
          </alier-container>
        `;

        // load html
        this.relateElements(
            this.collectElements(
                this.loadContainer({ text: container })
            )
        );
    }

    async messageHandler(msg) {
        return await msg.deliver({
            button: msg => {
                // commentにhello alierを挿入する
                this.comment.innerText = "Hello, alier!"
            }
        });
    }
}

実行結果です。

起動直後

ボタン押下前

ボタン押下後

ボタン押下後

さあ、Alierを使ってみましょう！