Overview

Introduction

BitsmistJS is a Web Components-based javascript framework.

Independent plain HTML files: No JSX. Web designer-friendly.
Component: Component-based. Every component is a custom element.
Autoloading: Files are loaded automatically when needed.
Event-driven: Easy to find where the handling codes are.

How index.html looks like

When working with BitsmistJS framework, you create components (custom elements) to build your sites. You can create a component that has interfaces (HTML) and actions (event handlers), a component that has interfaces without any actions, or a component that has actions without any interfaces.

HTML only component

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 and Javascript component

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