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.
Front-enD God-modE w /
ReagenT AnD FigwheeL
DaviD Y. KaY
State of Front-end Dev
State of the Art
• Write Code
• Reload Browser
• Lose Application State
• Manipulate Application State
• Test/verify behav...
Goal for this Talk
• How to develop code interactively
• Minimal incidental complexity
• Be the coolest kid on the block
Demo
• Show what Pharmasoft / Chat App Looks Like
• Show a one-line change
• Show the recursive nature of components
The Armory
Clojurescript Figwheel Reagent
Why Clojurescript?
Clojurescript
• More sane than JS
• Functional
• S-expressions
• Code is data
(defn square [x]
(* x x))
function square(x){
return x*x;
}
Why Figwheel?
Figwheel
3 Steps:
• Edit
• Save
• Watch in Awe
Bret Victor - Inventing on Principle
Figwheel
• Pro:
• Code changes occur instantly
• App state is maintained
• Con:
• Have to write code so that it’s reloadab...
Code Changes
Figwheel Server
(Lein figwheel)
CLJS App
Figwheel
Client
Why Reagent?
Reagent
• a minimal, sleek React.js
• SIMPLE
• Dataflow!
• Likened more to Elm than React.js
Atoms
(defonce app-state
(r/atom {:chat-input ""
:messages []
:username
"Anon"}))
(swap! app-state assoc :username
"David"...
Adjust with Feedback
• Show some mis-steps, correct them
Review
• Clojurescript
• Figwheel
• Reagent
Come for the workshop!
MailinG LisT
www.davidykay.com/i-love-clojurescript
ReagenT AnD FigwheeL
WorkshoP
Installing the Tools
brew install leiningen
Running the Code
Terminal 1:
lein ring server
Terminal 2:
lein figwheel
Part 0: Prologue
Set the Goal
• By the end of this workshop, you should be able
to create a chat client using CLJS, Foundation,
Reagent, an...
Demo
• Show what Chat App Looks Like
Roadmap
• Clojurescript
• Data structures
• Functions
• Figwheel
• Reagent
• Atoms
• Components
• Putting it all together ...
Part 1: Intro
Figwheel
• Pro:
• Code changes occur instantly
• App state is maintained
• Con:
• Have to write code so that it’s reloadab...
Hello World
lein new figwheel chat
cd chat
lein figwheel
view localhost:3449
Clojurescript
(defn square [x]
(* x x))
Data Structures
List - ( )
Vector - [ ]
Map - { }
Set - #{ }
(def app-db {:greeting "Hello Van FP!"
:email “david@vanfp.com"
:password ""
:screen :login})
(if (= id (:current-condition @app-
state))
"current"
"")
(fn [n]
(clojure.string/join
" "
"tabs-title"
(if (= n (:active-tab @app-state))
"is-active"
nil)]))
Part 2: Basics
Reagent
Hiccup Syntax
[:div.top-bar-right
[:ul.menu
[:li [:a {:href "#"} "History"]]
[:li [:a {:href "#"} "Log Out"]]]]
Button Handler
[:button {:class "button"
:on-click
#(do
(refresh-messages)
(.preventDefault %))}
"Refresh"]
Button Handler
[:button {:class "button"
:on-click
(fn [ev]
(refresh-messages)
(.preventDefault ev))}
"Refresh"]
Button Handler
(defn handle-click [ev]
(refresh-messages)
(.preventDefault ev))
[:button {:class "button"
:on-click handle...
Atoms
(defonce app-state
(r/atom {:chat-input ""
:messages []
:username
"Anon"}))
(swap! app-state assoc :username
"David"...
Atoms
(swap! app-state assoc :username
“David")
(swap! app-state (fn [old]
(assoc old :username “david”))
(reset! app-stat...
Text Input
[:input
{:placeholder "Neo",
:type "text"
:value (:username @app-state)
:on-change
(fn [ev]
(swap! app-state
as...
Text Input
(-> ev
.-target
.-value)
(:value (:target ev))
(.-value (.-target ev))
Part 3: Intermediate
HTTP Calls
(GET "/" {:handler (fn [response]
(println response))
:error-handler error-handler})
(defn error-handler
[{:key...
Reagent Component
(defn component [medication]
[:div
[:h2 "Pre-Interview Notes"]
[:p (:general-notes @app-state)]
[:form
....
Review
• Figwheel
• Reloadable code
• Clojurescript
• Reagent
• Ratoms
• Components
Resources
• Figwheel Talk at Clojure/West 2015
• Reagent Docs - holmsand.github.io/reagent/
MailinG LisT
www.davidykay.com/i-love-clojurescript
ExtrA ImageS
Front-end God Mode with Reagent and Figwheel
Front-end God Mode with Reagent and Figwheel
Front-end God Mode with Reagent and Figwheel
Front-end God Mode with Reagent and Figwheel
Front-end God Mode with Reagent and Figwheel
Front-end God Mode with Reagent and Figwheel
Front-end God Mode with Reagent and Figwheel
Front-end God Mode with Reagent and Figwheel
Front-end God Mode with Reagent and Figwheel
Front-end God Mode with Reagent and Figwheel
Front-end God Mode with Reagent and Figwheel
Front-end God Mode with Reagent and Figwheel
Front-end God Mode with Reagent and Figwheel
Front-end God Mode with Reagent and Figwheel
Upcoming SlideShare
Loading in …5
×

Front-end God Mode with Reagent and Figwheel

514 views

Published on

This talk, given at Vancouver Functional Programmers in January 2016, walks users through all the fundamentals of developing browser applications entirely interactively, with no reloads, using Clojurescript, Figwheel, and Reagent.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Front-end God Mode with Reagent and Figwheel

  1. 1. Front-enD God-modE w / ReagenT AnD FigwheeL DaviD Y. KaY
  2. 2. State of Front-end Dev
  3. 3. State of the Art • Write Code • Reload Browser • Lose Application State • Manipulate Application State • Test/verify behavior • Repeat
  4. 4. Goal for this Talk • How to develop code interactively • Minimal incidental complexity • Be the coolest kid on the block
  5. 5. Demo • Show what Pharmasoft / Chat App Looks Like • Show a one-line change • Show the recursive nature of components
  6. 6. The Armory Clojurescript Figwheel Reagent
  7. 7. Why Clojurescript?
  8. 8. Clojurescript • More sane than JS • Functional • S-expressions • Code is data
  9. 9. (defn square [x] (* x x)) function square(x){ return x*x; }
  10. 10. Why Figwheel?
  11. 11. Figwheel 3 Steps: • Edit • Save • Watch in Awe
  12. 12. Bret Victor - Inventing on Principle
  13. 13. Figwheel • Pro: • Code changes occur instantly • App state is maintained • Con: • Have to write code so that it’s reloadable
  14. 14. Code Changes Figwheel Server (Lein figwheel) CLJS App Figwheel Client
  15. 15. Why Reagent?
  16. 16. Reagent • a minimal, sleek React.js • SIMPLE • Dataflow! • Likened more to Elm than React.js
  17. 17. Atoms (defonce app-state (r/atom {:chat-input "" :messages [] :username "Anon"})) (swap! app-state assoc :username "David") (reset! app-state new-state)
  18. 18. Adjust with Feedback • Show some mis-steps, correct them
  19. 19. Review • Clojurescript • Figwheel • Reagent
  20. 20. Come for the workshop!
  21. 21. MailinG LisT www.davidykay.com/i-love-clojurescript
  22. 22. ReagenT AnD FigwheeL WorkshoP
  23. 23. Installing the Tools brew install leiningen
  24. 24. Running the Code Terminal 1: lein ring server Terminal 2: lein figwheel
  25. 25. Part 0: Prologue
  26. 26. 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…
  27. 27. Demo • Show what Chat App Looks Like
  28. 28. Roadmap • Clojurescript • Data structures • Functions • Figwheel • Reagent • Atoms • Components • Putting it all together - Chat App
  29. 29. Part 1: Intro
  30. 30. Figwheel • Pro: • Code changes occur instantly • App state is maintained • Con: • Have to write code so that it’s reloadable
  31. 31. Hello World lein new figwheel chat cd chat lein figwheel view localhost:3449
  32. 32. Clojurescript
  33. 33. (defn square [x] (* x x))
  34. 34. Data Structures List - ( ) Vector - [ ] Map - { } Set - #{ }
  35. 35. (def app-db {:greeting "Hello Van FP!" :email “david@vanfp.com" :password "" :screen :login})
  36. 36. (if (= id (:current-condition @app- state)) "current" "")
  37. 37. (fn [n] (clojure.string/join " " "tabs-title" (if (= n (:active-tab @app-state)) "is-active" nil)]))
  38. 38. Part 2: Basics
  39. 39. Reagent
  40. 40. Hiccup Syntax [:div.top-bar-right [:ul.menu [:li [:a {:href "#"} "History"]] [:li [:a {:href "#"} "Log Out"]]]]
  41. 41. Button Handler [:button {:class "button" :on-click #(do (refresh-messages) (.preventDefault %))} "Refresh"]
  42. 42. Button Handler [:button {:class "button" :on-click (fn [ev] (refresh-messages) (.preventDefault ev))} "Refresh"]
  43. 43. Button Handler (defn handle-click [ev] (refresh-messages) (.preventDefault ev)) [:button {:class "button" :on-click handle-click} "Refresh"]
  44. 44. Atoms (defonce app-state (r/atom {:chat-input "" :messages [] :username "Anon"})) (swap! app-state assoc :username "David") (reset! app-state new-state)
  45. 45. Atoms (swap! app-state assoc :username “David") (swap! app-state (fn [old] (assoc old :username “david”)) (reset! app-state new-state)
  46. 46. Text Input [:input {:placeholder "Neo", :type "text" :value (:username @app-state) :on-change (fn [ev] (swap! app-state assoc :username (-> ev .-target .-value)))}]
  47. 47. Text Input (-> ev .-target .-value) (:value (:target ev)) (.-value (.-target ev))
  48. 48. Part 3: Intermediate
  49. 49. 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))
  50. 50. Reagent Component (defn component [medication] [:div [:h2 "Pre-Interview Notes"] [:p (:general-notes @app-state)] [:form ...]])
  51. 51. Review • Figwheel • Reloadable code • Clojurescript • Reagent • Ratoms • Components
  52. 52. Resources • Figwheel Talk at Clojure/West 2015 • Reagent Docs - holmsand.github.io/reagent/
  53. 53. MailinG LisT www.davidykay.com/i-love-clojurescript
  54. 54. ExtrA ImageS

×