Volt Showcase - Planning Poker

The talk showcases a reactive planning poker web application with the volt framework.
The application illustrates how reactive synchronization between the UI and the database works and how we can write everything in ruby to build a full fledged modern, javascript based web application.

Sourcecode: https://github.com/koffeinfrei/planning-poker/

Transcript

1. Volt Showcase Online Planning Poker
2. Complexity in Web development
15. Volt?
16. Opal Ruby to Javascript
17. Sharing code between client and server
18. Same code runs on the client and the server
19. Reactive Bindings for the DOM
20. Automatic Data Syncing
21. Server Backend Application with JSON REST API and Frontend MVC
22. Debugging?
23. Source Maps Opal IRB
24. View
25. Event Bindings
26. <form e-submit="enter session" _ role="form">
27. Attribute Bindings Tags
28. : < fields:text value=" page. session " {{ _ }} label="Existing session optional :" ( ) /> : < fields:text value=" page. user " {{ _ }} label="Your name:" />
29. Each Bindings
30. {{ estimates.each do |estimate| }} <div class="card-wrapper flip if round finished? " {{ ' ' _ }} > <div class="card-front"> <div class="user-name">{{ estimate. user _ }}</div> <img src=" card image url estimate. point " {{ _ _ ( _ }} class="card" /> </div> <div class="card-back"> <div class="user-name">{{ estimate. user _ }}</div> <img src=" asset url app main assets images back.png " {{ _ (' / / / / ' }} class="card" /> </div> </div> {{ end }}
31. If Bindings
32. {{ if !guest session? _ }} <div class="card-container"> </div> {{ end }}
33. Controller
34. def enter session _ session = page. session _ .to s _ .empty? ? generate random string : _ _ page. session _ user = page. user _ .to s _ .empty? ? "user- generate random string #{ _ _ }" : page. user _ card deck _ = page. card deck _ _ redirect to _ " estimate / / session #{ }/ card deck #{ _ }/ user #{ }" end
35. def round finished? _ estimates array _ = estimates.array estimates array _ .size > 1 && estimates array _ .all?(&: point _ ) end
36. def show page. session url _ _ = url.url with _ (user: nil, card deck _ : nil)
37. Data Store
38. page store params ...
39. Automatically synced
40. Promises
41. store. estimates _ .find(user: user, session: session . ) then do estimates | | estimate = estimates.array[0] if estimate estimate.tap { e e | | . point _ = false } else store. estimates _ << { user: user, session: session } end end.then do estimate | | self.model = estimate end
42. Model
43. class Estimate Volt < ::Model end
44. Demo
45. www.voltframework.com volt-poker.herokuapp.com github.com koffeinfrei planning-poker / /