Bitsmist Frameworks
Docs ยป Overview

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);
Previous Next

© 2019-2023 Masaki Yasutake

Bitsmist Frameworks

Table of Contents

Table of Contents

  • Overview
    • Introduction
    • How index.html looks like
      • HTML only component
      • HTML and Javascript component

GENERAL

  • Overview
  • Installation
  • Create a sample component

COMPONENT

  • Loading
  • Settings
  • Events
  • Extending with organizers

REFERENCE - COMPONENT

  • Component

REFERENCE - ORGANIZER

  • EventOrganizer
  • LoaderOrganizer
  • OrganizerOrganizer
  • SettingOrganizer
  • StateOrganizer
  • TemplateOrganizer

REFERENCE - STORE

  • Store
  • ChainableStore

REFERENCE - UTILITY

  • AjaxUtil
  • ClassUtil
  • Util