Puerro Project

Knowledge acquisition about how to build modern frontend web applications as simple as possible by researching different approaches. It can be used as a knowledge base or in combination with the provided abstractions.

Folder Structure

| Folder | Description | | ---------------------- | ----------------------------- | | docs/ | Documentation / Toolbox | | src/ | Abstractions / Utilities | | examples/ | Examples for the Abstractions | | huerto/ | Research / Showcase Project | | test/ | Test Results |

Getting Started

npm install puerro

Example

import { Observable } from 'puerro';

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')
);

Development

To install and work on Puerro locally:

git clone [email protected]:robin-fhnw/IP5-Puerro.git Puerro
cd Puerro
npm install     # install the dev dependency 'rollup'
npm start       # bundle the scripts and watch for changes