Beta v0.4.1

Alier

クリーンで一貫性のある、
スケーラブルなアプリ開発を。

フロントエンドからバックエンドまで──マルチプラットフォーム対応の JavaScript フレームワーク

Get Started arrow_forward References

Why Alier?

シンプルさを追求した設計思想で、開発体験を向上させます。

devices

マルチプラットフォーム

Android・iOS・Webで一貫したアーキテクチャ。プラットフォームごとの差異を吸収し、共通のコードベースで開発。
architecture

簡潔なアーキテクチャ

Model-View パターンをベースに、複雑さを排除。アプリケーションの構造を明確に保つ。
extension

ライブラリとして導入

既存プロジェクトに段階的に導入可能。フレームワークのロックインを避け、必要な機能だけを利用。
school

学習コストが低い

少ないAPIと直感的な設計で、素早く習得。既存のJavaScript知識をそのまま活かせる。

直感的なアーキテクチャ

Model で状態を管理し、View でイベントを受け取る。
ボタンをクリックして、Alier のリアクティブなデータフローを体験できます。

counter_app.js
1// 1. Model: 状態を管理 (Singleton)
2class CounterModel extends AlierModel {
3#count = 0;
4onChange = new MessagePorter();
5
6countUp() {
7this.#count++;
8this.onChange.post(Alier.message("onChange", "", { count: this.#count }));
9}
10
11countDown() {
12this.#count--;
13this.onChange.post(Alier.message("onChange", "", { count: this.#count }));
14}
15}
16
17// 2. View: イベントをメッセージとして処理
18class CounterView extends ViewLogic {
19async messageHandler(msg) {
20return await msg.deliver({
21plusBtn: () => Alier.Model.countUp(),
22minusBtn: () => Alier.Model.countDown(),
23onChange: (m) => this.display.value = m.param.count,
24});
25}
26}
27
28// 3. Setup: アプリケーション起動
29AlierView.setStyleSheets(true, "ColorTheme_Nihonkai.css", "AlierGlassy.css");
30Alier.View.attach(new CounterView());
Preview
Model CounterModel { #count: 0 }
onChange.post(...)
0
Console ● LIVE
[ready] Alier.View.attach(new CounterView())
Learn Alier チュートリアルを見る arrow_forward

Download

Latest Release: v0.4.1 (beta)

android

Android

WebView ベースのネイティブアプリ開発

 phone_iphone

iOS

WKWebView を利用した iOS アプリ

 desktop_windows

Web

モダンブラウザ対応の Web アプリ
View on GitHub