Beta v0.4.1

Alier

Clean, consistent, and scalable app development.

Across frontend and backend — a multi-platform JavaScript framework for modern development.

Get Started arrow_forward References

Why Alier?

Designed for simplicity, crafted to elevate your development experience.

devices

Multi-Platform

Consistent architecture across Android, iOS, and Web. Abstract away platform differences with a shared codebase.

architecture

Clean Architecture

Model-View pattern based, eliminating unnecessary complexity. Keep your application structure crystal clear.

extension

Library-First

Adopt incrementally into existing projects. Avoid framework lock-in and use only the features you need.

school

Easy to Learn

Minimal API surface and intuitive design for rapid onboarding. Leverage your existing JavaScript expertise directly.

Intuitive Architecture

Manage state in Models, route events in Views.
Click the buttons to see Alier's reactive data flow in action.

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(...)

Console ● LIVE

[ready] Alier.View.attach(new CounterView())

Explore Learn Alier Tutorials arrow_forward

Download

Latest Release: v0.4.1 (beta)

android