构建异步用户界面JS库：Yolk
Yolk是一个构建异步用户界面JS库。
-
Familiar: Yolk is a small library built on top of Virtual DOM and RxJS. It exposes a very limited API so that you don't have to spend weeks getting up to speed. Yolk components are just plain functions that return JSX.
-
Everything is an observable: Yolk components consume RxJS observable streams as if they were plain values. From a websocket connection to a generator function to an event handler. If it can be represented as an observable, then it can be rendered directly into your markup.
-
Stateless: Being able to describe user interactions, control flow and plain values as observable streams means that application design becomes entirely declarative. There is no need to manually subscribe to observables in order to mutate or set component state.
import Yolk from `yolk` function Counter () { // map all plus button click events to 1 const handlePlus = this.createEventHandler() const plusOne = handlePlus.map(() => 1) // map all minus button click events to -1 const handleMinus = this.createEventHandler() const minusOne = handleMinus.map(() => -1) // merge both event streams together and keep a running count of the result const count = plusOne.merge(minusOne).scan((x, y) => x + y, 0).startWith(0) return ( <div> <div> <button id="plus" onClick={handlePlus}>+</button> <button id="minus" onClick={handleMinus}>-</button> </div> <div> <span>Count: {count}</span> </div> </div> ) } Yolk.render(<Counter />, document.getElementById('container'))