status-im/reagent
2
0
Fork 0
mirror of https://github.com/status-im/reagent.git synced 2025-02-02 23:23:51 +00:00
Code Issues Projects Releases Wiki Activity

Only show summaries on news page

Browse Source
This commit is contained in:
Dan Holmsand 2014-02-03 10:20:05 +01:00
parent 1c702920bd
commit 445f1da424
4 changed files with 115 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
demo/reagentdemo/news.cljs
View File

@ -45,7 +45,7 @@
(reset! undo-list nil) (reset! undo-list nil)
(remove-watch state ::undo-watcher))})) (remove-watch state ::undo-watcher))}))
(defn undo-example [] (defn undo-example [{:keys [summary]}]
(let [head "Cloact becomes Reagent: Undo is trivial"] (let [head "Cloact becomes Reagent: Undo is trivial"]
[:div.reagent-demo [:div.reagent-demo
[:h1 [link {:href undo-example} head]] [:h1 [link {:href undo-example} head]]
@ -64,27 +64,32 @@
[:p "The API is otherwise unchanged, so a simple [:p "The API is otherwise unchanged, so a simple
search-and-replace should suffice."] search-and-replace should suffice."]
(if summary
[link {:href undo-example
:class 'news-read-more} "Read more"]
[:div.demo-text
[:h2 "Undo the easy way"] [:h2 "Undo the easy way"]
[:p "To celebrate the undoing of the apparently disgusting name, [:p "To celebrate the undoing of the apparently disgusting
here is an example of how easy it is to add undo functionality name, here is an example of how easy it is to add undo
to Reagent components."] functionality to Reagent components."]
[:p "It simply saves the old state whenever it changes, and [:p "It simply saves the old state whenever it changes, and
restores it when the button is clicked."] restores it when the button is clicked."]
[:p "The really nice thing about ClojureScript is that not only [:p "The really nice thing about ClojureScript is that not
is this easy and safe to do, courtesy of immutable data only is this easy and safe to do, courtesy of immutable data
structures, it is also efficient. ClojureScript figures out how structures, it is also efficient. ClojureScript figures out
to represent ”changes” to maps and vectors efficiently, so that how to represent ”changes” to maps and vectors efficiently,
you won’t have to."] so that you won’t have to."]
[undo-demo-cleanup]]])) [undo-demo-cleanup]])]]))
(defn main [] (defn main []
[:div [:div
[async/main] [async/main {:summary true}]
[undo-example]]) [undo-example {:summary true}]])
(swap! page-map assoc (swap! page-map assoc
"news/cloact-reagent-undo-demo.html" undo-example) "news/cloact-reagent-undo-demo.html" undo-example)

123
demo/reagentdemo/news/async.cljs
View File

@ -87,7 +87,7 @@
[ncolors-choose] [ncolors-choose]
[timing-wrapper {:component-fn palette}]])) [timing-wrapper {:component-fn palette}]]))
(defn main [] (defn main [{:keys [summary]}]
(let [om-article {:href "http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/"}] (let [om-article {:href "http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/"}]
[:div.reagent-demo [:div.reagent-demo
[title "Reagent: Faster by waiting"] [title "Reagent: Faster by waiting"]
@ -99,90 +99,99 @@
are also separated in time."] are also separated in time."]
[:p "From version 0.3.0, changes in application state (as [:p "From version 0.3.0, changes in application state (as
represented by " [:code "reagent.core/atom"] "s) are no longer represented by Reagent’s " [:code "atom"] "s) are no longer
immediately rendered to the DOM. Instead, Reagent waits until the rendered immediately to the DOM. Instead, Reagent waits until
browser is ready to repaint the window, and then all the changes the browser is ready to repaint the window, and then all the
are rendered in one single go."] changes are rendered in one single go."]
(if summary
[link {:href main
:class 'news-read-more} "Read more"]
[:div.demo-text
[:p "This is good for all sorts of reasons:"] [:p "This is good for all sorts of reasons:"]
[:ul [:ul
[:li "Reagent doesn't have to spend time doing renderings that [:li "Reagent doesn't have to spend time doing renderings
no one would ever see (because changes to application state that no one would ever see (because changes to application
happened faster than the browser could repaint)."] state happened faster than the browser could repaint)."]
[:li "If two or more atoms are changed simultaneously, this now [:li "If two or more atoms are changed simultaneously, this
leads to only one re-rendering, and not two."] now leads to only one re-rendering, and not two."]
[:li "The new code does proper batching of renderings even when [:li "The new code does proper batching of renderings even
changes to atoms are done outside of event handlers (which is when changes to atoms are done outside of event
great for e.g core.async users)."] handlers (which is great for e.g core.async users)."]
[:li "Repaints can be synced by the browser with for example CSS [:li "Repaints can be synced by the browser with for example
transitions, because Reagent uses requestAnimationFrame to do CSS transitions, since Reagent uses requestAnimationFrame
the batching. That makes for example animations smoother."]] to do the batching. That makes for example animations
smoother."]]
[:p "In short, Reagent renders less often, but at the right [:p "In short, Reagent renders less often, but at the right
times. For a much better description of why async rendering is times. For a much better description of why async rendering
good, see David Nolen’s " [:a om-article "excellent explanation is good, see David Nolen’s " [:a om-article "excellent
here."]] explanation here."]]
[:h2 "The bad news"] [:h2 "The bad news"]
[:p "Lunches in general tend to be non-free, and this is no [:p "Lunches in general tend to be non-free, and this is no
exception… The downside to async rendering is that you can no exception… The downside to async rendering is that you can no
longer depend on changes to atoms being immediately available in longer depend on changes to atoms being immediately available
the DOM. (Actually, you couldn’t before either, since React.js in the DOM. (Actually, you couldn’t before either, since
itself does batching inside event handlers.)"] React.js itself does batching inside event handlers.)"]
[:p "This may make testing a bit more verbose: you now have to [:p "This may make testing a bit more verbose: you now have
call " [:code "reagent.core/flush"] " to force Reagent to to call " [:code "reagent.core/flush"] " to force Reagent to
synchronize state with the DOM."] synchronize state with the DOM."]
[:h2 "An example"] [:h2 "An example"]
[:p "Here is an example to (hopefully) demonstrate the virtues of [:p "Here is an example to (hopefully) demonstrate the
async rendering. It consists of a simple color chooser (three virtues of async rendering. It consists of a simple color
sliders to set the red, green and blue components of a base chooser (three sliders to set the red, green and blue
color), and shows the base color + a bunch of divs in random components of a base color), and shows the base color + a
matching colors. As soon as the base color is changed, a new set bunch of divs in random matching colors. As soon as the base
of random colors is shown."] color is changed, a new set of random colors is shown."]
[:p "If you change one of the base color components, the base [:p "If you change one of the base color components, the base
color should change immediately, and smoothly (on my Macbook Air, color should change immediately, and smoothly (on my Macbook
rendering takes around 2ms, with 20 colored divs showing)."] Air, rendering takes around 2ms, with 20 colored divs
showing)."]
[:p "But perhaps more interesting is to see what happens when the [:p "But perhaps more interesting is to see what happens when
updates can’t be made smoothly (because the browser simply cannot the updates can’t be made smoothly (because the browser
re-render the colored divs quickly enough). On my machine, this simply cannot re-render the colored divs quickly enough). On
starts to happen if I change the number of divs shown to above my machine, this starts to happen if I change the number of
150 or so."] divs shown to above 150 or so."]
[:p "As you increase the number of divs, you’ll notice that the [:p "As you increase the number of divs, you’ll notice that
base color no longer changes quite so smoothly when you move the the base color no longer changes quite so smoothly when you
color sliders."] move the color sliders."]
[:p "But the crucial point is that the sliders " [:strong "still [:p "But the crucial point is that the sliders "
work"] ". Without async rendering, you could quickly get into a [:strong "still work"] ". Without async rendering, you could
situation where the browser hangs for a while, doing updates quickly get into a situation where the browser hangs for a
corresponding to an old state. "] while, doing updates corresponding to an old state. "]
[:p "With async rendering, the only thing that happens is that [:p "With async rendering, the only thing that happens is
the frame rate goes down."] that the frame rate goes down."]
[:p "Btw, I find it quite impressive that React manages to change [:p "Btw, I find it quite impressive that React manages to
500 divs (12 full screens worth) in slightly more than 40ms. And change 500 divs (12 full screens worth) in slightly more than
even better: when I change the number of divs shown, it only 40ms. And even better: when I change the number of divs
takes around 5ms to re-render the color palette (because the shown, it only takes around 6ms to re-render the color
individual divs don’t have to be re-rendered, divs are just added palette (because the individual divs don’t have to be
or removed from the DOM as needed)."]] re-rendered, divs are just added or removed from the DOM as
needed)."]
[demo-component {:comp color-demo [demo-component
{:comp color-demo
:src (src-for :src (src-for
[:ns :timing-wrapper :base-color [:ns :timing-wrapper :base-color :ncolors
:ncolors :random-colors :to-rgb :random-colors :to-rgb :tweak-color
:tweak-color :reset-random-colors :color-choose :reset-random-colors :color-choose :ncolors-choose
:ncolors-choose :palette :color-demo])}]])) :palette :color-demo])}]])]]))
(swap! page-map assoc (swap! page-map assoc
"news/reagent-is-async.html" main) "news/reagent-is-async.html" main)

4
demo/reagentdemo/page.cljs
View File

@ -74,7 +74,9 @@
:on-click (if history :on-click (if history
(fn [e] (fn [e]
(.preventDefault e) (.preventDefault e)
(reset! page href)) (reset! page href)
(set! (.-scrollTop (.-body js/document))
0))
identity)) identity))
children))) children)))

7
site/demo.css
View File

@ -75,6 +75,8 @@ ul.nav > li.brand > a {
font-family: 'HelveticaNeue-Light', 'Helvetica Neue', arial; font-family: 'HelveticaNeue-Light', 'Helvetica Neue', arial;
font-weight: normal; font-weight: normal;
line-height: 1.25em; line-height: 1.25em;
margin-top: 0.25em;
margin-bottom: 1em;
} }
.reagent-demo > h1 > a { .reagent-demo > h1 > a {
@ -155,6 +157,11 @@ ul.nav > li.brand > a {
cursor: pointer; cursor: pointer;
} }
.news-read-more {
text-decoration: none;
font-size: 16px;
}
/* Color demo */ /* Color demo */
.color-plate { .color-plate {