https://github.com/robleroni/puerro
Keeping the Web as Lean as a Leek
https://github.com/robleroni/puerro
components frontend javascript mvc virtual-dom web
Last synced: 8 days ago
JSON representation
Keeping the Web as Lean as a Leek
- Host: GitHub
- URL: https://github.com/robleroni/puerro
- Owner: robleroni
- Created: 2019-02-19T10:19:38.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-08-11T00:04:14.000Z (almost 5 years ago)
- Last Synced: 2026-03-12T13:41:07.348Z (3 months ago)
- Topics: components, frontend, javascript, mvc, virtual-dom, web
- Language: HTML
- Homepage: https://robleroni.github.io/Puerro/
- Size: 2.78 MB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](docs) ([GitBook](https://robin-christen.gitbook.io/puerro/)) or in combination with the provided [abstractions](src).
Also checkout our [examples](examples) or the [research showcase project](huerto).
### Install
Directly copy the desired [abstractions](src) in your project or use NPM to install Puerro fully:
```bash
npm install puerro
```
### Example Usage
```js
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:
```bash
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](https://robleroni.github.io/Puerro/test/AllTests.html)!
To run and display the tests locally:
```bash
npm test
```