# 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](docs) or in combination with the provided [abstractions](src).
## Folder Structure
| Folder | Description |
| ---------------------- | ----------------------------- |
| [docs/](docs/) | Documentation / Toolbox |
| [src/](src/) | Abstractions / Utilities |
| [examples/](examples/) | Examples for the Abstractions |
| [huerto/](huerto/) | Research / Showcase Project |
| [test/](test/) | Test Results |
## Getting Started
```bash
npm install puerro
```
### Example
```js
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:
```bash
git clone git@github.com:robin-fhnw/IP5-Puerro.git Puerro
cd Puerro
npm install # install the dev dependency 'rollup'
npm start # bundle the scripts and watch for changes
```