Introduction

Boyo Core provides the building blocks and a framework for creating declarative and reactive UI elements. It builds on top of standard HTML, CSS and JavaScript and follows their respective specs as close as possible.

Prerequisites

The documentation assumes basic familiarity with HTML, CSS and JavaScript. If you are totally new to frontend development, it might not be the best idea to jump right into a framework as your first step - grasp the basics then come back! Prior experience with other frameworks helps, but is not required.

How does it work?

As a base, Boyo needs three things: a root HTML element to crawl for candidate elements to hook components into, a set of defined components and DOM elements referencing the name of one of the defined components.

Here is a minimal example:

<button o-component="counter">The value of `state.count` is: -</button>

import { createApp, reactive, defineBindings } from '@boyojs/boyo-core';

createApp()
    .component('counter', () => {
        const state = reactive({ count: 0 });

        defineBindings({
            '@click'() {
                state.count++;
            },
            'o-text'() {
                return `The value of \`state.count\` is: ${state.count}`;
            },
        });
    })
    .mount();

Result

Here, in the HTML we start by defining a button with a o-component attribute with a value of counter. The special attribute o-component has a non trivial meaning to Boyo Core, it indicates to the library that the element with the attribute wishes to become a component. The value of the attribute indicates which component it whishes to be; in this particular example, it wishes to be a counter component.

On the JavaScript side, we are first creating a Boyo Core "app" using the createApp function imported from '@boyojs/boyo-core' (more on that later, on it's own page). Then, we define and register on the app a component named "counter". This is the exact same "counter" that is being referenced in the HTML.

After the component definition and registration, we called the .mount() method from the app being created. This has for effect to kick start the DOM crawling process for candidate elements whom whishes to become components (has a o-component attribute). Therefore our <button o-component="counter"> will be discovered, it's o-component value matched with any component in the app's registry, finds our registered counter component, and finally invoke it and start the component's mounting process.

In the component definition itself, we first start by creating our reactive state, bind a "click" event handler on the component's element as well as bind a "text" directive (more on directives later, on their own page) that will react to any changes made to our state's count property. The result being, every click on the button causes state.count to change, it's text to react to that change and reflect the new value to the DOM.