A tiny reactive user interface library.
Features
- Async — evolui magically understands
Observables
andPromises
. Just put them where they need to be displayed and, when they update, your UI will be refreshed for you. - Virtual DOM — evolui has a fast virtual DOM diffing algorithm and do the less work possible by only updating the closest node from the values that changed.
- Components — You can build large applications by splitting its complexity inside encapsulated and predictable components.
- Tiny — The API surface is very small and the whole library is only
4kB
gziped.
Install
npm install evolui rxjs
Examples
- All examples Demo — see code
- Simple Animation Demo — see code
- Complex Animation Demo — see code
- Animated Pinterest Like Grid Demo — see code
To jump to the code, visite the example
folder.
Getting Started
Promises
const delay =
Observables
Simple App
const Counter = { const state = return html` count: state.count.set(c => c - 1)}>- state.count.set(c => c + 1)}>+ `}
Concept
The main goal of evolui is to make dealing with observables as easy as dealing with regular values.
Observables are a great way to represent values that change over time. The hard part though is combining them. This is where evolui comes in handy. It understands any combination of Array
s, Promise
s and Observable
s, so you never have to worry about the way you should combine them before putting them inside your template.
const getCharacterName = html` `
Components
Evolui lets you organize your code in components.
Components are defined as a simple function of Observable Props -> Observable VirtualDOM
:
const Button = props$ const App = { const state = return html` < text="-" onClick= /> count: < text="+" onClick= /> `}
children
Components can have children 👍
const CrazyLayout =
Extra
Animations
evolui/extra
exports a spring animation helper called ease
.
ease:Observable<number> Observable<number>
You just have to pipe any of your observables to ease(<stiffness>, <damping>)
to make it animated.
If you are interested in using this feature separately, check out rx-ease
const stiffness = 120const damping = 20 const style$ =
For single values, you can pass the stiffness
and damping
directly
API
text :: TemplateLiteral -> Observable String
const style$ = text` position: absolute; transform: translate(px, px);`
html :: TemplateLiteral -> Observable VirtualDOM
const App = html` `
render :: Observable VirtualDOM -> DOMNode -> ()
ease :: (Number, Number) -> Observable Number -> Observable Number
createState :: Object -> State
Create an object of mutable reactive values.
Each key on your initial state will be transformed into a stream, with a special set
method on it.
set
can take either a value or a mapper function.
const state = console// => Observable.of(0) const reset = statecountconst add1 = statecount
all :: [Observable a] -> Observable [a]
const z$ =
Lifecycle
- mount — after the element as been rendered
- update — after the dom element as been update
- unmount — before the dom element is removed from the dom
html` `
Contributing
If you find this interesting and you want to contribute, don't hesitate to open an issue or to reach me out on twitter @GabrielVergnaud!