poor-man-ui-framework

1.1.0 • Public • Published

PoormanUiFramework

World's tiniest UI framework

Npm version MIT License

POC for demo only!

Features

  • 3Kb unzipped
  • Old browsers support
  • Pure JS template
  • Only 2 APIs to avoid cognitive overload
  • Support batch upload
  • No virtual DOM
  • 31 LOCs

Install

npm install poor-man-ui-framework

Usage

Init and create view

import { viewCreatorFactory } from "poor-man-ui-framework";
 
const render = state => `<h1>${state.name}</h1>
<p>${state.count}</p>
<ul>${state.array.map(value => `<li>${value}</li>`).join("")}</ul>`;
 
const element = document.getElementById("app");
 
const createView = viewCreatorFactory(element, render);
let view = createView({
  state: {
    name: "hello",
    count: 0,
    array: []
  }
});

Update View

view = view.update(current => {
  current.count++;
});

Implement a counter

import { viewCreatorFactory } from "poor-man-ui-framework";
 
const render = state => `<p>${state.count}</p>
<button onClick="state.commands.add()">My button</button>`;
 
const element = document.getElementById("app");
const createView = viewCreatorFactory(element, render);
 
let view = createView({
  state: {
    count: 0,
  },
  commands: {
    add() {
      view = view.update(state => {
        state.count++;
      });
    }
  }
});

Index.hml

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Package Sidebar

Install

npm i poor-man-ui-framework

Weekly Downloads

1

Version

1.1.0

License

MIT

Unpacked Size

14.4 kB

Total Files

19

Last publish

Collaborators

  • davidesmaisons