OLD | NEW |
1 Effen (fn) | 1 Effen (fn) |
2 === | 2 === |
3 | 3 |
4 Effen is a prototype of a functional-reactive framework for sky which takes insp
iration from [React](http://facebook.github.io/react/). The code as you see it h
ere is a first-draft, is unreviewed, untested and will probably catch your house
on fire. It is a proof of concept. | 4 Effen is a prototype of a functional-reactive framework for sky which takes insp
iration from [React](http://facebook.github.io/react/). The code as you see it h
ere is a first-draft, is unreviewed, untested and will probably catch your house
on fire. It is a proof of concept. |
5 | 5 |
6 Effen is comprised of three main parts: a virtual-dom and diffing engine, a comp
onent mechanism and a very early set of widgets for use in creating applications
. | 6 Effen is comprised of three main parts: a virtual-dom and diffing engine, a comp
onent mechanism and a very early set of widgets for use in creating applications
. |
7 | 7 |
8 The central idea is that you build your UI out of components. Components describ
e what their view should look like given their current configuration & state. Th
e diffing engine ensures that the DOM looks how the component describes. | 8 The central idea is that you build your UI out of components. Components describ
e what their view should look like given their current configuration & state. Th
e diffing engine ensures that the DOM looks how the component describes. |
9 | 9 |
10 If you just want to dive into code, see the `sky/examples/stocks-fn`. | 10 If you just want to dive into code, see the `sky/examples/stocks-fn`. |
(...skipping 115 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
126 | 126 |
127 The answer that many people don't get is that there are really two logical types
of builds: (1) When underlying model data changes: This generally requires hand
ing in new data to the root component (in Effen, this means the `App` calling `s
etState` on itself). (2) When user interaction updates a control or an animation
takes place. (1) is generally more expensive because it requires a full buildin
g & diff, but tends to happen infrequently. (2) tends to happen frequently, but
at nodes which are near the leafs of the tree, so the number of nodes which must
be reconsiled is generally small. | 127 The answer that many people don't get is that there are really two logical types
of builds: (1) When underlying model data changes: This generally requires hand
ing in new data to the root component (in Effen, this means the `App` calling `s
etState` on itself). (2) When user interaction updates a control or an animation
takes place. (1) is generally more expensive because it requires a full buildin
g & diff, but tends to happen infrequently. (2) tends to happen frequently, but
at nodes which are near the leafs of the tree, so the number of nodes which must
be reconsiled is generally small. |
128 | 128 |
129 React provides a way to manually insist that a componet not rebuild based on its
old and new state (and they encourage the use of immutable data structures beca
use discovering the data is the same can be accomplished with a reference compar
ison). A similar mechanism is in the works for Effen. | 129 React provides a way to manually insist that a componet not rebuild based on its
old and new state (and they encourage the use of immutable data structures beca
use discovering the data is the same can be accomplished with a reference compar
ison). A similar mechanism is in the works for Effen. |
130 | 130 |
131 Lastly, Effen does something unique: Because its diffing is component-wise, it c
an be smart about not forcing the rebuild of components which are handed in as *
arguments* when only the component itself is dirty. For example, the `drawer.dar
t` component knows how to animate out & back and expose a content pane -- but it
takes its content pane as an argument. When the animation mutates the inlineSty
le of the `Drawer`'s `Container`, it must schedule itself for rebuild -- but --
because the content was handed in to its constructor, its configuration can't ha
ve changed and Effen doesn't require it to rebuild. | 131 Lastly, Effen does something unique: Because its diffing is component-wise, it c
an be smart about not forcing the rebuild of components which are handed in as *
arguments* when only the component itself is dirty. For example, the `drawer.dar
t` component knows how to animate out & back and expose a content pane -- but it
takes its content pane as an argument. When the animation mutates the inlineSty
le of the `Drawer`'s `Container`, it must schedule itself for rebuild -- but --
because the content was handed in to its constructor, its configuration can't ha
ve changed and Effen doesn't require it to rebuild. |
132 | 132 |
133 It is a design goal that it should be *possible* to arrange that all "build" cyc
les which happen during animations can complete in less than one milliesecond on
a Nexus 5. | 133 It is a design goal that it should be *possible* to arrange that all "build" cyc
les which happen during animations can complete in less than one milliesecond on
a Nexus 5. |
134 | 134 |
135 | 135 |
OLD | NEW |