https://github.com/bitsmist/bitsmist-js_v1
Javascript Web Components based Framework
https://github.com/bitsmist/bitsmist-js_v1
framework-javascript javascript javascript-framework webcomponents
Last synced: 4 months ago
JSON representation
Javascript Web Components based Framework
- Host: GitHub
- URL: https://github.com/bitsmist/bitsmist-js_v1
- Owner: bitsmist
- License: mit
- Created: 2019-09-24T11:57:44.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-10-19T05:35:58.000Z (8 months ago)
- Last Synced: 2025-01-30T19:07:12.143Z (5 months ago)
- Topics: framework-javascript, javascript, javascript-framework, webcomponents
- Language: JavaScript
- Homepage:
- Size: 1.71 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# BitsmistJS
## Introduction
BitsmistJS is a JavaScript framework built upon Web Components. It operates on a component-based architecture with the main objective of facilitating the creation of components. While each component functions independently, it also interacts with other components to form a cohesive website.
The primary aim is to minimize the amount of code required. By configuring the settings, you can easily harness various functions.
### Standard Javascript
We use standard Javascript technologies such as Web Components, Structured CSS, ShadowDOM, and asynchronous processing.
### Components
You create distinct components and integrate them to form a website. Each component's role is well-defined, simplifying site modifications. Additionally, you can seamlessly incorporate a component into a part of the site.
### Independent Plain HTML File
We simply use the original HTML as-is. Since JavaScript is written in a separate file, it's also easy for web designers to handle.
### Autoloading
The necessary files are loaded when needed. All processing is asynchronous, so files can be loaded efficiently.
### Event driven
Javascript codes for each event is written in a file that is separated from the HTML file. It's clear at a glance which processing is written where.
### Extensibility
Components can be extended using a mechanism called “Perks. By simply preparing a perk and describing it in the configuration, new functions can be added to the component.
## Installation
### CDN
Load the BitsmistJS library from CDN in your HTML files.
```html
```
### Download
Download the BitsmistJS library and put bitsmist-js_v1.min.js in the dist folder to somewhere under your websites and load it in your HTML files.
```html
```
## Sample Unit
In BitmistJS, you create components (called units in this framework) and combine them to build a site. You can create HTML-only units that require no action and only an interface, HTML+Javascript units that require an interface and action, or Javascript-only units that require no interface and only action.
### HTML Only Unit
**`index.html`**
``` html
```
**`pad-hello.html`**
``` html
Hello, World!
```
**`pad-hello.css`**
```css
pad-hello {
color: blue;
display: block;
text-align: center;
}
```
### HTML and Javascript Unit
**`index.html`**
``` html
```
**`pad-hello.html`**
``` html
Hello, World!
Greet
```
**`pad-hello.css`**
```css
pad-hello {
color: blue;
display: block;
text-align: center;
}
```
**`pad-hello.js`**
``` js
class PadHello extends BITSMIST.v1.Unit
{
_getSettings()
{
return {
"event": {
"events": {
"btn-greet": {
"handlers": {
"click": "onBtnGreet_Click"
}
}
}
}
};
}
onBtnGreet_Click(sender, e, ex)
{
alert("Hello, World!");
}
}
```
## Documentation
- [English](https://bitsmist.com/en/bitsmist-js-core/)
- [Japanese（日本語）](https://bitsmist.com/ja/bitsmist-js-core/)
## Contribution
Contributions are welcome. Currently, there are no rules on how to contribute yet.
- **Coding:** Bug report, improvement, advice, etc.
- **Translation:** Since I'm not a native English speaker, I appreciate someone translates into nicer English. Of course, other languages are welcome.