How we tried to create a frontend framework which can be learned in 5 minutes and which is the result

Hi!

I will tell you about my experience of creating a front-end framework. The goal was to create a framework that can be learned in 5 minutes by a front-end developer who has experience with React, Vue, or Angular.

How to create a component

In React, a component is a function; in Vue, it is a file; and in Angular, a component consists of several files. Personally, I prefer the possibility to create a helper component in a component file. Because of this, I decided that a component will be a function declared in the following way:

export const MyComponent = component(() => {

    // component logic here

});

Reactive states

To save states, there are variables in Javascript, so we will it.

The rules are simple:

1. If the variable name starts with $ than it will be reactive.


2. If the variable name does not start with $ than it will be just a variable.

If a derived/computed state is needed, then a constant is declared and initialized with the required value. When let is used, the linter can switch automatically to const, so constant is canonical.

Example of code:

export const MyComponent = component(() => {

    let $a = 2;

    let $b = 3;

    const $sum = $a + $b;

    const $sum2 = sum($a, $b);

});

Side effects

The component function is executed once, so the following side effects are present in the next functions:

• 
  watch executes a function each time when a reactive value from the body is updated.


• 
  beforeMount executes a function after data initialization and before DOM nodes mount.


• 
  afterMount executes a function after the DOM nodes mount.


• 
  beforeDestroy executes a function before the DOM nodes removing.

The next code

export const MyComponent = component(() => {

    let $state = 'init';

    watch(() => { console.log($state) });

    beforeMount(() => { $state = "before" });

    afterMount(() => { $state = "after" });

});

Will print in console:

init

before

after

DOM

To declare DOM nodes, HTML code is used; it is written directly to the component function body, and it works via JSX. The event handlers like onclick/onpress accept functions as value.

Nodes declarations

Example of button with counter:

export const MyComponent = component(() => {

    let $count = 'init';

    function inc() {

        $count++;

    }

    <button class="btn" onclick={inc}>

        You clicked {$count} times

    </button>;

});

The class attribute accepts a string array as a value; the style one accepts objects as a value.

Callbacks

To connect third-party libraries or to access DOM nodes directly, the callbacks are used. A callback is a function that is called when the element and all its children are mounted in DOM.

Example of callback usage:

export const MyComponent = component(() => {

    function sideEffect(input: HTMLInputElement) {

        input.showPicker();

    }

    <input type="date" callback={sideEffect}/>;

});

Share data between compoents

The data can be shared between components in the next ways:

• from parent to children via properties;


• from children to parent via callbacks;


• from children to parent and from parent to children via slots;

Sharing data via properties

Properties are an object; the field names can match the same rules as variable names, so if the field name starts with $ then the field is reactive; otherwise, it is not reactive.

Example of sharing data via properties:

interface Props {

    userId: string;

    $userName: string;

}

const Child = component(({userId, $userName}: Props) => {

    <div>{userId} is named {$userName}</div>;

});

const Parent = component(() => {

    const id = 1;

    let $name = "First";



    // When the name is updated here

    // it will be automatically updated in the child component

   <Child userId={id} $userName={$name}/>;

});

Sharing data via callbacks

The component function can return data; the returned data can be accessed in the parent component via callback.

Example of using callbacks as an alternative for forwardRef from React:

const Child = component(() => {

    let input: HTMLInputElement|null = null;

    <input callback={element => input = element}/>;

    return input;

});

const Parent = component(() => {

   <Child callback={input => { console.log(input) }}/>;

});

Sharing data via slots

The slots are sending data to the parent component data via properties, and the parent is sharing a DOM description with the child component:

interface Props {

    $title: string;

    slot?(props: { $name: string }): void;

}

const Child = component(({$title, slot}: Props) => {

    <div>

        <Slot model={slot} $name={`${$title} is amazing`}/>

    </div>;

});

const Parent = component(() => {

    let $title = "MyApp";

    <Child $title={$title} slot=(($name) => {

        <span>{$name}</span>;

    })/>;

});

When the child is not sharing data with the parent, the DOM description can be included in the child tag: <Child><span>Text</span></Child>.

Also, inside the Slot tag can be present a DOM description, which will be used if the parent does not fill the slot.

The slot is not just a function; it is a component. The reactive states, derived/computed value, and watch, beforeMount, afterMount and beforeDestroy can be used in a slot.

Logic and loops

There are building components that operate the logic and loops: If, Else ElseIf and For.

Example of conditional text:

const MyComponent = component(() => {

    let $count = 0;

    <If $codition={$count > 2}>

        Count is too big!

    </If>;

});

Example of loop;

const MyComponent = component(() => {

    const arr = [1, 2, 3];

    <For model={arr} slot={number => {

        <div>Number is {number}</div>

    }}/>;

});

The property name rules are applied to built-in components. The If will react to updates of $condition, but For will not react to updates of the model; the model must be updated via push, pull and similar methods.

Conclusions

There is a minimal set of functions to create an SPA. All this is already working; the component styling library is already ready, and scripts for building component libraries and applications are ready. The last updates added the SSG compiling option and a React-like condition for conditional tags as an alternative to If/Else; it fixes some TypeScript errors.

The project is open-source. For volunteers who want to help, we have a Google Form for Customer Development Interview: https://docs.google.com/forms/d/e/1FAIpQLScvoUvCRlbONheW1lu_ZnerXLz1pcGxhKV_q3EKs3d40csXTw/viewform?usp=header

Thanks for your attention!