Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Enjoyable Front-end Development with Reagent

1,023 views

Published on

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.

Published in: Software, Technology
  • Login to see the comments

Enjoyable Front-end Development with Reagent

  1. 1. ENJOYABLEFRONT-END DEVELOPMENT WITH REAGENT @TH1AGOFM
  2. 2. @TH1AGOFM
  3. 3. @TH1AGOFM
  4. 4. A tale of excitement in Clojure
  5. 5. @TH1AGOFM ~2010 1.2
  6. 6. 1 (defn factorial 2 ([n] 3 (factorial n 1)) 4 ([n acc] 5 (if (= n 0) acc 6 (recur (dec n) (* acc n))))) got inspired by the beauty of a factorial implementation.
  7. 7. ( ) @TH1AGOFM
  8. 8. Hped @TH1AGOFM got hyped by node.js and completely forgot about clojure for a while
  9. 9. @TH1AGOFM 2013 (datomic: an awesome database)
  10. 10. Hped @TH1AGOFM hyped by elixir
  11. 11. @TH1AGOFM 2014 CLJS FINALLY! hyped by david nolen's talk about cljs and Om, but felt it was too hard, so tried reagent and enjoyed it!
  12. 12. @TH1AGOFM KILLER APP FOR CLOJURE WHAT I WAS LOOKING FOR?
  13. 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.
  14. 14. @TH1AGOFM
  15. 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. 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. 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.
  18. 18. @TH1AGOFM WHY REACT? REACT SOLVES THIS PROBLEM BY USING SOMETHING CALLED VIRTUAL DOM.
  19. 19. @TH1AGOFM THE ANATOMY OF A REACT COMPONENT 1 React.createClass({ 2 getInitialState: function() { 3 return {secondsElapsed: 0}; 4 }, 5 tick: function() { 6 this.setState({secondsElapsed: this.state. 7 secondsElapsed + 1}); 8 }, 9 componentDidMount: function() { 10 this.interval = setInterval(this.tick, 1000) 11 ; 12 }, 13 componentWillUnmount: function() { 14 clearInterval(this.interval); 15 }, 16 render: function() { 17 return ( 18 <div>Seconds Elapsed: {this.state. 19 secondsElapsed}< 20 /div> 21 ); 22 } 23 }); 24 25 React.render(<Timer />, mountNode); DECLARATIVE, BUT TONS OF BOILERPLATE.
  20. 20. @TH1AGOFM REACT ONLY TAKES CARE ABOUT THE V OF THE MVC. IT’S JUST A LIBRARY.
  21. 21. @TH1AGOFM SO, IT MAKES SENSE TO USE IT WITH SOMETHING ELSE…
  22. 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
  23. 23. @TH1AGOFM IF YOU KNOW CLOJURE, YOU KNOW REAGENT. (AND CLOJURESCRIPT)
  24. 24. @TH1AGOFM IF YOU DON’T, IT’S A GOOD PLAYGROUND TO BEGIN.
  25. 25. Here I show a demo of a project I wrote specially for this talk, the demo link is in the last slides, you can see for yourself.
  26. 26. FIGWHEEL, THE CLJS BROWSER REPL. figwheel does: cljs -> js gives you a browser REPL
  27. 27. Here there’s a video where you see that you can interact with the frontend you build through this REPL
  28. 28. @TH1AGOFM THE 2048 GAME WAS MADE USING THE REAGENT-TEMPLATE. (VERY EASY TO SET UP!)
  29. 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. 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
  31. 31. @TH1AGOFM TILES COMPONENT 
 
 
 
 
 
 
 215 (defn tile-component [] 216 [:div {:class "tile-container"} 217 (remove nil? (map-indexed 218 (fn[y row-of-tiles] 219 (map-indexed 220 (fn[x tile] 221 (when (> tile 0) 222 [:div {:class (str 223 "tile tile-" tile " tile-position- 224 " (inc x) "-" (inc y))} tile])) 225 row-of-tiles)) 226 @tiles))])
 
 
 
 
 
 
 
 
 15 (def empty-tiles 16 [[0 0 0 0] 17 [0 0 0 0] 18 [0 0 0 0] 19 [0 0 0 0]]) how does the game display the tiles
  32. 32. @TH1AGOFM ROUTING 263 (footer-component)]) 264 265 ;; ------------------------- 266 ;; Pages 267 268 (defn start-game-page [] 269 (application-layout 270 [:div 271 (grid-component) 272 (tile-component)])) 273 274 (defn current-page [] 275 [:div [(session/get :current-page)]]) 276 277 ;; ------------------------- 278 ;; Routes 279 (secretary/set-config! :prefix "#") 280 (secretary/defroute "/" [] 281 (session/put! :current-page #'start-game-page) 282 ) 283 284 ;; ------------------------- 285 ;; History 286 ;; must be called after routes have been 287 defined 288 (defn hook-browser-navigation! [] 289 (doto (History.) 290 (events/listen whenever you access /, it calls start- game-page function. game uses only this page, so this is straightforward.
  33. 33. @TH1AGOFM OK, THIS LOOKS PRETTY STATIC. HOW DO I CHANGE A COMPONENT STATE?
  34. 34. @TH1AGOFM (SOMETHING THAT HOLDS STATE)
  35. 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.
  36. 36. @TH1AGOFM (R)ATOMS 11 12 ;; ------------------------- 13 ;; Definitions 14 15 (def empty-tiles 16 [[0 0 0 0] 17 [0 0 0 0] 18 [0 0 0 0] 19 [0 0 0 0]]) 20 (def no-score-addition 21 0) 31 32 ;; ------------------------- 33 ;; Atoms 34 35 (defonce score (atom 0)) 36 (defonce score-addition (atom 0)) 37 (defonce tiles (atom empty-tiles)) 38 (defonce game-over (atom false)) 39 
 
 
 
 
 

  37. 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. 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.
  39. 39. @TH1AGOFM 1 React.createClass({ 2 getInitialState: function() { 3 return {secondsElapsed: 0}; 4 }, 5 tick: function() { 6 this.setState({secondsElapsed: this.state. 7 secondsElapsed + 1}); 8 }, 9 componentDidMount: function() { 10 this.interval = setInterval(this.tick, 1000) 11 ; 12 }, 13 componentWillUnmount: function() { 14 clearInterval(this.interval); 15 }, 16 render: function() { 17 return ( 18 <div>Seconds Elapsed: {this.state. 19 secondsElapsed}< 20 /div> 21 ); 22 } 23 }); 24 25 React.render(<Timer />, mountNode); we don’t need that boilerplate, just use reagent :)
  40. 40. @TH1AGOFM IS MAGIC
  41. 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!

×