CodeNewbie Community 🌱

artydev
artydev

Posted on

MVU is a very tiny library (only 5 functions) to facilitate Frontend Dev in pure JS

MVU is a very tiny library and started as a fork of DML.

I have created a github repo. to post all examples on MVU.

The first ones are listed here : MVU examples

MVU is a NoRAV library : No React, Angular, Vue :-)

Here is the first example :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Counter</title>
    <script src="https://cdn.jsdelivr.net/gh/artydev/mvu@1.1.2/dist/mvu.umd.min.js"></script>
</head>

<body>
    <div id="app">

    </div>
    <script>

        const {
            dom,
            udom,
            m,
            html,
            render,
        } = MVU;

        let state = {
            counter: 0
        }

        function Counter(state) {
            let inc = () => { state.counter += 1; render(app, App(state)) };
            let counter = html(`
                <div>
                    <h1>Counter : ${state.counter}</h1>
                    <button>INC</button>
                </div>
            `);
            return counter
                .querySelector("button")
                .onclick = inc;
        }

        function App(state) {
            let view = dom();
                Counter(state)
            udom();
            return view
        }


        render(app, App(state))
    </script>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

You can test it here : Simple Counter

Latest comments (0)