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.

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

13. Why Clojurescript?

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!

31. MailinG LisT
www.davidykay.com/i-love-clojurescript

32. ReagenT AnD FigwheeL
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))

59. Part 3: Intermediate

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/

64. MailinG LisT
www.davidykay.com/i-love-clojurescript

65. ExtrA ImageS