Puerro

Puerro

Knowledge acquisition about how to build modern frontend web applications as simple as possible by researching different approaches.

Getting Started

It can be used as a knowledge base (GitBook) or in combination with the provided abstractions.

Also checkout our examples or the research showcase project.

Install

Directly copy the desired abstractions in your project or use NPM to install Puerro fully:

npm install puerro

Example Usage

import { Observable } from 'puerro'; // bundler specific, or wherever source is located

const Model = ({ text = '' } = {}) => ({ text: Observable(text) });

const View = (model, controller, $input, $output) => {
  const render = () => ($output.textContent = model.text.get().length);

  // View-Binding
  $input.addEventListener('input', event => controller.setName(event.target.value));

  // Model-Binding
  model.text.onChange(render);
};

const Controller = model => {
  const setName = text => model.text.set(text);
  return { setName };
};

// Usage
const model      = Model();
const controller = Controller(model);
const view       = View(model, controller,
  document.querySelector('input'),
  document.querySelector('output')
);

Developing

To install and work on Puerro locally:

git clone git@github.com:robleroni/Puerro.git Puerro
cd Puerro
npm install     # install the dev dependency 'rollup'
npm start       # bundle the scripts and watch for changes

Testing

The test results can be viewed live!

To run and display the tests locally:

npm test