概要

特徴

BitsmistJSはWeb ComponentsをベースとしたJavascriptのフレームワークです。

独立した素のHTMLファイル: JSXは使いません。ウェブデザイナーにとっても扱いやすいです。
コンポーネント: コンポーネントベース。全てのコンポーネントはカスタムエレメントとして実装されます。
オートローディング: 必要な時に必要なファイルがロードされます。
イベントドリヴン: イベントハンドラがどこにあるのか一目瞭然です。

index.htmlのサンプル

BitmistJSではコンポーネント（カスタムエレメント）を作り、それらを組み合わせることでサイトを構築していきます。動作が必要なくインターフェースだけのHTMLのみのコンポーネント、インターフェースと動作が必要なHTML+Javascriptのコンポーネント、またインターフェースがなく動作だけのJavascriptのみのコンポーネントを作ることができます。

HTMLのみのコンポーネント

index.html

<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/bitsmist/bitsmist-js_v1@0.9.19/dist/bitsmist-js_v1.min.js"></script>
</head>
<body>
<pad-hello bm-autoload="/pad-hello.html"></pad-hello>
</body>
</html>

pad-hello.html

<h1>Hello, World!</h1>

HTMLとJavascriptから成るコンポーネント

index.html

<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/bitsmist/bitsmist-js_v1@0.9.19/dist/bitsmist-js_v1.min.js"></script>
<title>BitsmisJS Sample</title>
</head>
<body>
<pad-hello bm-autoload="/pad-hello.js"></pad-hello>
</body>
</html>

pad-hello.html

<h1>Hello Component</h1>
<button id="btn-greet">Greet</button>

pad-hello.js

class PadHello extends BITSMIST.v1.Component
{
    _getSettings()
    {
        return {
            "settings": {
                "name": "PadHello"
            },
            "events": {
                "btn-greet": {
                    "handlers": {
                        "click": "onBtnGreet_Click"
                    }
                }
            }
        };
    }
 
    onBtnGreet_Click(sender, e, ex)
    {
        alert("Hello, world!");
    }
}
 
customElements.define("pad-hello", PadHello);