Front-end God Mode with Reagent and Figwheel
1 like793 views
The document discusses the development of a chat application using ClojureScript, Reagent, and Figwheel, emphasizing the interactive nature of coding with instant code changes and maintained application state. It highlights the advantages of ClojureScript over JavaScript, the simplicity of Reagent, and provides a roadmap for constructing the app. The content includes code examples, explanations of data structures, components, and how to handle state and HTTP calls.
![(defn square [x]
(* x x))
function square(x){
return x*x;
}](https://image.slidesharecdn.com/reagentfigwheel-160125204436/85/Front-end-God-Mode-with-Reagent-and-Figwheel-15-320.jpg)
![Atoms
(defonce app-state
(r/atom {:chat-input ""
:messages []
:username
"Anon"}))
(swap! app-state assoc :username
"David")
(reset! app-state new-state)](https://image.slidesharecdn.com/reagentfigwheel-160125204436/85/Front-end-God-Mode-with-Reagent-and-Figwheel-24-320.jpg)
![(defn square [x]
(* x x))](https://image.slidesharecdn.com/reagentfigwheel-160125204436/85/Front-end-God-Mode-with-Reagent-and-Figwheel-44-320.jpg)
![Data Structures
List - ( )
Vector - [ ]
Map - { }
Set - #{ }](https://image.slidesharecdn.com/reagentfigwheel-160125204436/85/Front-end-God-Mode-with-Reagent-and-Figwheel-45-320.jpg)
![(fn [n]
(clojure.string/join
" "
"tabs-title"
(if (= n (:active-tab @app-state))
"is-active"
nil)]))](https://image.slidesharecdn.com/reagentfigwheel-160125204436/85/Front-end-God-Mode-with-Reagent-and-Figwheel-48-320.jpg)
![Hiccup Syntax
[:div.top-bar-right
[:ul.menu
[:li [:a {:href "#"} "History"]]
[:li [:a {:href "#"} "Log Out"]]]]](https://image.slidesharecdn.com/reagentfigwheel-160125204436/85/Front-end-God-Mode-with-Reagent-and-Figwheel-51-320.jpg)
![Button Handler
[:button {:class "button"
:on-click
#(do
(refresh-messages)
(.preventDefault %))}
"Refresh"]](https://image.slidesharecdn.com/reagentfigwheel-160125204436/85/Front-end-God-Mode-with-Reagent-and-Figwheel-52-320.jpg)
![Button Handler
[:button {:class "button"
:on-click
(fn [ev]
(refresh-messages)
(.preventDefault ev))}
"Refresh"]](https://image.slidesharecdn.com/reagentfigwheel-160125204436/85/Front-end-God-Mode-with-Reagent-and-Figwheel-53-320.jpg)
![Button Handler
(defn handle-click [ev]
(refresh-messages)
(.preventDefault ev))
[:button {:class "button"
:on-click handle-click}
"Refresh"]](https://image.slidesharecdn.com/reagentfigwheel-160125204436/85/Front-end-God-Mode-with-Reagent-and-Figwheel-54-320.jpg)
![Atoms
(defonce app-state
(r/atom {:chat-input ""
:messages []
:username
"Anon"}))
(swap! app-state assoc :username
"David")
(reset! app-state new-state)](https://image.slidesharecdn.com/reagentfigwheel-160125204436/85/Front-end-God-Mode-with-Reagent-and-Figwheel-55-320.jpg)
![Atoms
(swap! app-state assoc :username
“David")
(swap! app-state (fn [old]
(assoc old :username “david”))
(reset! app-state new-state)](https://image.slidesharecdn.com/reagentfigwheel-160125204436/85/Front-end-God-Mode-with-Reagent-and-Figwheel-56-320.jpg)
![Text Input
[:input
{:placeholder "Neo",
:type "text"
:value (:username @app-state)
:on-change
(fn [ev]
(swap! app-state
assoc
:username
(-> ev .-target .-value)))}]](https://image.slidesharecdn.com/reagentfigwheel-160125204436/85/Front-end-God-Mode-with-Reagent-and-Figwheel-57-320.jpg)
![HTTP Calls
(GET "/" {:handler (fn [response]
(println response))
:error-handler error-handler})
(defn error-handler
[{:keys [status status-text]}]
(println "error code: " status
" " status-text))](https://image.slidesharecdn.com/reagentfigwheel-160125204436/85/Front-end-God-Mode-with-Reagent-and-Figwheel-60-320.jpg)
![Reagent Component
(defn component [medication]
[:div
[:h2 "Pre-Interview Notes"]
[:p (:general-notes @app-state)]
[:form
...]])](https://image.slidesharecdn.com/reagentfigwheel-160125204436/85/Front-end-God-Mode-with-Reagent-and-Figwheel-61-320.jpg)
Front-end God Mode with Reagent and Figwheel
- 1. Front-enD God-modE w / ReagenT AnD FigwheeL DaviD Y. KaY
- 2. State of Front-end Dev
- 4. State of the Art • Write Code • Reload Browser • Lose Application State • Manipulate Application State • Test/verify behavior • Repeat
- 10. Goal for this Talk • How to develop code interactively • Minimal incidental complexity • Be the coolest kid on the block
- 11. Demo • Show what Pharmasoft / Chat App Looks Like • Show a one-line change • Show the recursive nature of components
- 12. The Armory Clojurescript Figwheel Reagent
- 14. Clojurescript • More sane than JS • Functional • S-expressions • Code is data
- 15. (defn square [x] (* x x)) function square(x){ return x*x; }
- 16. Why Figwheel?
- 17. Figwheel 3 Steps: • Edit • Save • Watch in Awe
- 18. Bret Victor - Inventing on Principle
- 19. Figwheel • Pro: • Code changes occur instantly • App state is maintained • Con: • Have to write code so that it’s reloadable
- 21. Code Changes Figwheel Server (Lein figwheel) CLJS App Figwheel Client
- 22. Why Reagent?
- 23. Reagent • a minimal, sleek React.js • SIMPLE • Dataflow! • Likened more to Elm than React.js
- 24. Atoms (defonce app-state (r/atom {:chat-input "" :messages [] :username "Anon"})) (swap! app-state assoc :username "David") (reset! app-state new-state)
- 25. Adjust with Feedback • Show some mis-steps, correct them
- 26. Review • Clojurescript • Figwheel • Reagent
- 28. Come for the workshop!
- 33. Installing the Tools brew install leiningen
- 34. Running the Code Terminal 1: lein ring server Terminal 2: lein figwheel
- 35. Part 0: Prologue
- 36. Set the Goal • By the end of this workshop, you should be able to create a chat client using CLJS, Foundation, Reagent, and Figwheel • Here’s what it looks like…
- 37. Demo • Show what Chat App Looks Like
- 39. Roadmap • Clojurescript • Data structures • Functions • Figwheel • Reagent • Atoms • Components • Putting it all together - Chat App
- 40. Part 1: Intro
- 41. Figwheel • Pro: • Code changes occur instantly • App state is maintained • Con: • Have to write code so that it’s reloadable
- 42. Hello World lein new figwheel chat cd chat lein figwheel view localhost:3449
- 43. Clojurescript
- 44. (defn square [x] (* x x))
- 45. Data Structures List - ( ) Vector - [ ] Map - { } Set - #{ }
- 46. (def app-db {:greeting "Hello Van FP!" :email “david@vanfp.com" :password "" :screen :login})
- 47. (if (= id (:current-condition @app- state)) "current" "")
- 48. (fn [n] (clojure.string/join " " "tabs-title" (if (= n (:active-tab @app-state)) "is-active" nil)]))
- 49. Part 2: Basics
- 50. Reagent
- 51. Hiccup Syntax [:div.top-bar-right [:ul.menu [:li [:a {:href "#"} "History"]] [:li [:a {:href "#"} "Log Out"]]]]
- 52. Button Handler [:button {:class "button" :on-click #(do (refresh-messages) (.preventDefault %))} "Refresh"]
- 53. Button Handler [:button {:class "button" :on-click (fn [ev] (refresh-messages) (.preventDefault ev))} "Refresh"]
- 54. Button Handler (defn handle-click [ev] (refresh-messages) (.preventDefault ev)) [:button {:class "button" :on-click handle-click} "Refresh"]
- 55. Atoms (defonce app-state (r/atom {:chat-input "" :messages [] :username "Anon"})) (swap! app-state assoc :username "David") (reset! app-state new-state)
- 56. Atoms (swap! app-state assoc :username “David") (swap! app-state (fn [old] (assoc old :username “david”)) (reset! app-state new-state)
- 57. Text Input [:input {:placeholder "Neo", :type "text" :value (:username @app-state) :on-change (fn [ev] (swap! app-state assoc :username (-> ev .-target .-value)))}]
- 58. Text Input (-> ev .-target .-value) (:value (:target ev)) (.-value (.-target ev))
- 60. HTTP Calls (GET "/" {:handler (fn [response] (println response)) :error-handler error-handler}) (defn error-handler [{:keys [status status-text]}] (println "error code: " status " " status-text))
- 61. Reagent Component (defn component [medication] [:div [:h2 "Pre-Interview Notes"] [:p (:general-notes @app-state)] [:form ...]])
- 62. Review • Figwheel • Reloadable code • Clojurescript • Reagent • Ratoms • Components
- 63. Resources • Figwheel Talk at Clojure/West 2015 • Reagent Docs - holmsand.github.io/reagent/
- 65. ExtrA ImageS