32

HyperOOP: OOP-style SPA micro-framework

 5 years ago
source link: https://www.tuicool.com/articles/Yju6nmU
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

zQ3a6rn.png!web

hyperoop

Hyperoop is OOP-style SPA micro-framework.

Quick start

git clone https://github.com/HyperOOP/starter myapp
cd myapp
npm i
npm start

Install

npm i --save hyperoop

Examples

See examples .

More advanced example is source code of our site hyperoop.github.io .

Run example

To run todo-hist example: 

git clone https://github.com/HyperOOP/hyperoop-examples
cd hyperoop-examples/todo-hist
npm i && npm run serve

Then open localhost:10001 in browser. Or simply try it online

Example counter

TypeScript code ( try online ): 

import * as ui from 'hyperoop';

class Counter extends ui.Actions<{count: number}> {}

const counter = new Counter({ count: 0 });

const view = () => (
<div>
    <h1>{counter.State.count}</h1>
    <button onclick={() => counter.State.count--}>-</button>
    <button onclick={() => counter.State.count++}>+</button>
</div>
);

ui.init(document.body, view, counter);

Router

Use our official router


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK