buoyancy
front-end framework. based yo-yo and simple observer.
features
- data flows one-way. "data down, actions up".
- functional and observer effect.
example
var yo = var buoyancy = var app = app app app documentbody
data flow
+<---------------------------------------------------------------------------------+
| ^
data copied data copied data |
| | | |
v v v |
Components -action-> emitter -action-> (API -action"-> emitter -action"->) Reducer --+
- data for rendering. within the application,
data
that you can access is only for reference. It can not be changed directly. (ex "data.count + = 1" can not be done). to change, you only have to use "update function" passed to Reducer - action
type
andvalue
. (ex "countup", +1) - emitter event emitter (observer). it's a glue that connects Components and API and Reducer. pass
action
anddata
through emitter, or receive them. - Components ref. yo-yo
- Reducer Reducer takes 2 arguments -
data
andactions value
. it createpartial data to be updated
fromdata
andactions value
. and thenpartial data
is merged withoriginal data
and reflected in Components - API primarily we use
Reducer
to update data, butReducer
is difficult to work with asynchronous processing. to do asynchronous processing, you need to write an API with an interface that can talk to emitter. as a process, API receivesaction
fromComponents
viaemitter
, and passesnew action
- generated through processed inside API - toReducer
viaemitter
.
api
var app = buoyancy(defaultData[, opts)]
- opts.location - whether to manage the
window.location
. ifwindow.history.pushState
is available it will use that otherwise it will use `window.location.hash.- set to
false
to disable hash
to force using hasheshistory
to force using pushState.
- set to
app.reduce({Reducers})
registers Reducer
.
app
comppose reducers
var compose = app
app.use(function(emitter, getData))
when using emitter
-primarily asynchronous processing and external API -, will pass the emitter as a function argument. 2nd argument getData
function returns copied data
.
app app
app.route(routePattern, renderFunction(data, params, route, actionsUp))
register render function
- routePattern see routington
- renderFunction returns
HTML Element
. takes 4 arguments -data
,params
,route
,actionsUp
. - actionsUp
function
. take 2 arguments -type
andvalue
. passvalue
toemitter
orReducer
(via emitter).type
is "event name" receivedemitter.on
.
app
HTMLElement = app(routePath)
app
is function. returns a HTML Element
. take an argument - routePath
- routePath
urlObject.path
documentbody