Simple Front-End Development with Pedestal

These are the slides for the presentation I gave to the HuntFunc user group in December 2013.

Transcript

1. Simple Front-End Development with Pedestal Chad Taylor, @tessellator
2. What is Pedestal? (http://pedestal.io)
3. A collection of libraries for web development in Clojure and ClojureScript A collection of tools to help ease the development by keeping concerns separated
4. Two pieces: pedestal-service & pedestal-app (inc ring) front-end framework
5. Today, we discuss pedestal-app
6. pedestal-app tutorial is... available at https://github.com/pedestal/app-tutorial/ dense complete sometimes hard-to-follow due to the number of concepts presented
7. My goals are two-fold: Prepare you for the tutorial if you haven’t tried it Clarify some of the fuzzier details if you have
8. How is Pedestal different from X.js?
9. These are mostly view-concerned. Pedestal provides more infrastructure for building large applications, supporting separation of concerns throughout the development cycle. Pedestal decouples the concept of rendering from the DOM and even decouples event registration.
10. This results in more flexibility - ranging from automatic rendering to building tools that record and playback application events. Since the application model is decoupled from the DOM, the application is also more testable.
11. These break an application down into the familiar MVC model. Mutation is handled locally within services and controllers. Complexity begins to ramp when dealing with dynamic data (e.g., from web sockets). Pedestal breaks the problem down differently. It constrains mutation to be localized within the Pedestal library and keeps complexity low, even with highly interactive applications.
12. Another way to say this is that X.js makes development easy, while Pedestal makes it simple. Complexity with X.js can ramp quickly - especially when building highly interactive applications. Complexity with Pedestal stays relatively flat.
13. Just remember: Simple ain’t easy.
14. (Whew.)
15. Okay, I’m convinced. Now what?
17. That’s it!
18. Whelp...my job here is done.
19. Okay, okay. I kid.
20. Before we get started, a quick Clojure syntax tutorial:
21. :keyword “string” [“a” “vector”] #{:a :set} {:a :map :key :value} (op args)
22. Let’s follow some data through the app
24. Collects messages to be processed by the application
25. Messages can theoretically come from anywhere, such as an AJAX call resolving or an event in the UI occurring
26. Messages are just data
27. Messages have a type and a topic type - The type of the message topic - The data with which the message is concerned path in data model
29. root node :my :counter
30. Messages can also have additional data elements. Add whatever you need - it’s just data!
31. When a message is being handled, we want to transform the data element in the data model based on the message. To do this, we write a pure function and let Pedestal handle the data model mutation for us.
33. current value in data model the transform logic protect against nil behavior.clj A Transform Function the message from the input queue
34. First Run
35. Second Run
36. I don’t actually care about the message! indicates “don’t care” HINT
37. But...how do I tie the message to use that transform? You configure the application Dataflow
38. Dataflow is... described implicitly in the tutorial the app wiring, connecting functions & data sometimes used as a proper noun, sometimes not (I will strive to use it as a proper noun) defined with a map
39. I think of the Dataflow as the arrows... HINT
40. Dataflow definition Since the definitions are in a vector, order matters. A message is handled by the first matching transform. behavior.clj
41. the message type to match against the topic the transform function
45. That was a lot of work. Let’s see our progress!
46. ...but I {{ mustache }}, what about templates? No worries, we don’t need any right now. Why the HTML not?! Pedestal provides some pretty cool tools that help keep application logic and rendering separated.
47. To show the aspects, move the cursor to the page’s lower-right. http://localhost:3000
49. Cool tooling, bro.
50. Hmm, I’m not sure what happened there...
51. Wait, I’ve got it! If the input queue started out empty, then the data model must be empty!
52. Let’s add a message to the queue during application startup...
53. start.cljs the input queue the message to enqueue
55. Okay, so we’ve set up a data model. Now what?
56. Well, now we need to define an application model. • distinct model for rendering concerns • derived from data model
57. The application model is defined by emitted deltas generated from functions that observe changes to the data model. The deltas are passed to the renderer.
59. Most of the time, this is just a pass-through. Pedestal provides a default emitter for this case.
60. Dataflow Emitter Configuration behavior.clj
61. a set of paths in the data model to watch for changes a function to generate application model deltas from the data model changes
62. a higher-order function that creates an emitter function a prefix to attach to changed nodes (e.g., [:my :counter] in the data model becomes [:main :my :counter] in the application model)
63. HINT The term Data UI is somewhat misleading. It renders the application model, not the data model. It took me awhile to pick up on this little detail... Now, an aside:
65. If you look at your browser’s developer tools, you can see the rendering deltas in the console.
66. Can you guess what each step is doing?
68. Okay, this is cool and all, but I’m bored. When can make it do something?
69. To do this, we need to tell the renderer that it can initiate a transform to the application model by sending messages to the input queue. We achieve this by sending a delta to the renderer informing it about the transform.
70. behavior.clj
72. indicates that the delta should be sent at application startup the function that will provide the deltas
73. (Technically, the deltas will be sent when Focus changes, but that’s a topic for later...)
74. Meanwhile, in the Data UI renderer...
75. this is what causes the button to appear in the Data UI
76. It’s a button...Push it! What’s the worst that could happen?
79. Now we’re getting somewhere! Now, if only we could make it so that my designer won’t puke when she sees it...
80. tutorial-client.html Okay, let’s start with some HTML:
81. Now, let’s look at the design without the app
82. Click “Design” to view the template
83. http://localhost:3000/design.html
84. http://localhost:3000/design/tutorial-client.html
85. Okay, so the markup appears fine...but how can I make sure that everything is wired up correctly?
86. Well, let’s record the application model deltas and play them back to a renderer.
87. In the Data UI, press Alt-Shift-R. (Yes, even on OS X.) Press the button a few times, then press Alt-Shift-R again. When prompted, provide a :keyword and a description of what you did during the recording session.
88. This creates a file with all the deltas saved into it. The deltas can be replayed later.
89. Now go to the “Render” aspect. runs all deltas immediately runs one transaction at a time (press -> to advance) runs one delta at a time (use <- and -> to update)
90. How in the world is this useful?
91. Let me start by showing you the generated file:
93. It’s just data!
94. Now, imagine a really hard-to-duplicate sequence of events that you want to ensure are rendered properly. This tool lets you write that sequence, and then step through it!
95. No more wasting time attempting to generate the situation in the browser. No more succumbing to non-repeatability. No more crying yourself to sleep while wondering how to duplicate that bug deep down in the dark asynchronous abyss in your project.
97. (I am skipping Template Slicing here to save time. Check it out in the tutorial!)
98. Configuring the renderer rendering.cljs
99. the delta operation to handle the application model path to watch the handling function
100. (This pattern should be feeling familiar now.)
101. Send the messages from the previously defined :transform-enable to be sent to the input queue when “#inc-button” is clicked.
102. Now we’re nearing the end of the presentation. What have we covered?
104. So...Pedestal is a big subject. ...and I ramble.
105. Please check out the tutorial. It is super awesome. But keep this presentation handy, too! It will help with some of the tricky bits.
106. Special thanks to Eric Pritchett for guiding me through some edge cases...
107. Questions? @tessellator