These are the slides for the talk given in the Clojure Meetup user group. There are notes added about each slides, sadly, the videos can't be played but notes cover what is shown.
If you have any questions, send me an e-mail, you can find it in the last slide.
13. @TH1AGOFM
ENJOYMENT.
WHAT I’VE GOT INSTEAD:
Reagent(or Om) have to mature way
more to be a killer app, for this we
need a nice community around it.
But it’s very enjoyable to work with.
15. @TH1AGOFM
“You believe that, by early 2015, ReactJS had won
the JavaScript framework wars and you are curious
about the bigger implications. Is the combination of
reactive programming, functional programming and
immutable data going to completely change
everything? And, if so, what would that look like in
a language that embraces those paradigms?”
— Re-frame (Reagent framework for writing SPAs)
So, in this bold statement by re-frame
you can guess react.js is a great thing.
16. @TH1AGOFM
WHY REACT?
PROBLEM:
DOM WASN’T CREATED TO CREATE UI’S THAT ARE TOO DYNAMIC.
MOVING 1000 DIVS AROUND TAKES A LOT OF TIME.
SOLUTION:
INSTEAD OF MOVING ALL THOSE 1000 DIVS, ONE BY ONE, WE CAN COMPUTE THE NEW
STATE AND REPLACE IT ALL WITH THIS NEW STATE WITH THE SMALLEST AMOUNT OF
PERMUTATIONS.
1 BIG INSERT VS. 1000 SMALL INSERTS.
17. Here I show a project called memcached-
manager in angular.js(very old version) that I
do create trying to render 1000 divs/
memcached keys and completely freezing
the browser for a couple of seconds.
This is the problem that React tries to solve.
22. @TH1AGOFM
clojure(script) has a lot of power to
create powerful dsl’s
react has a declarative way to do
frontend development, is very fast but
have too much boilerplate.
REAGENT
reagent explores this nice spot with
both
29. @TH1AGOFM
247 (defn application-layout [rest]
248 [:div {:class "container"}
249 (heading-component)
250 [:p {:class "game-intro"} "Join the numbers
251 and get to the "
252 [:strong "2048 tile!"]]
253 [:div {:class "game-container"}
254 (when @game-over
255 [:div {:class "game-message game-over"}
256 [:p "Game over!" ]
257 [:div {:class "lower"}
258 [:a {:class "retry-button" :href "/"}
259 "Try again"]]])
260 rest]
261 (game-explanation-component)
262 [:hr]
263 (footer-component)])
272 (tile-component)]))
COMPONENTS
Components looks like HTML with
some clojure. Syntax is hiccup style.
Pretty simple.
30. @TH1AGOFM
COMPONENTS
224
225 (defn game-explanation-component []
226 [:p {:class "game-explanation"}
227 [:strong {:class "important"} "How to play:"]
228 " Use your "
229 [:strong "arrow keys"] " to move the tiles.
230 When two tiles with the same number touch,
231 they "
232 [:strong "merge into one!"]])
233
234 (defn footer-component []
235 [:p "n Created by "
236 [:a {:href "http://gabrielecirulli.com", :
237 target "_blank"} "Gabriele Cirulli."] "
238 Based on "
239 [:a {:href "https://itunes.apple.
240 com/us/app/1024!/id823499224", :target
241 "_blank"} "1024 by Veewo Studio"] " and
242 conceptually similar to "
243 [:a {:href "http://asherv.com/threes/", :
244 target "_blank"} "Threes by Asher
245 Vollmer."]])
246
html, for real
35. @TH1AGOFM
247 (defn application-layout [rest]
248 [:div {:class "container"}
249 (heading-component)
250 [:p {:class "game-intro"} "Join the numbers
251 and get to the "
252 [:strong "2048 tile!"]]
253 [:div {:class "game-container"}
254 (when @game-over
255 [:div {:class "game-message game-over"}
256 [:p "Game over!" ]
257 [:div {:class "lower"}
258 [:a {:class "retry-button" :href "/"}
259 "Try again"]]])
260 rest]
261 (game-explanation-component)
262 [:hr]
263 (footer-component)])
272 (tile-component)]))
ATOMS
game-over is a atom/state, and using
the @ means we are reading it’s
content. This is called derefing in clojure
whenever game-over = true, it would
show what is nested inside it. a view
telling the game is over with the option
to retry.
37. here I play with the atoms of the
game, seeing it update in the
browser(right side).
reagent atoms behave exactly as
clojure atoms so you can call swap!
and reset! on them, for more info
about that, read the docs from the
reagent project provided in the last
slide. (pst: it’s easy)
38. @TH1AGOFM
COMPONENTS + ATOMS = ALL YOU NEED.
not much secret to write the game
beyond that, check the readme of my
version of the game in github how I build
it having subpar clojure skills and
learned some stuff in the way.
41. @TH1AGOFM
THAT’S ALL FOLKS!
READ THE GUIDE:
http://reagent-project.github.io
USE THE TEMPLATE:
https://github.com/reagent-project/reagent-template
CHECK THE COOKBOOKS:
https://github.com/reagent-project/reagent-cookbook
MAKE YOUR OWN 2048:
https://github.com/thiagofm/reagent-2048
&& HAVE FUN!
shoot me an e-mail if you play with it
and have some kind of trouble,
thiagown@gmail.com
thanks!