Reframing Single Page Apps for the Future

Building a rich single page app is really hard. re-frame, a ClojureScript wrapper over react, together with a beautifully simple flow of immutable derived data, makes this an absolute joy. It also sports a toolchain that is the envy of any developer who’s seen it, but can’t use it.

Facebook did something beautiful when they built react. The combination of reactive programming, functional programming and immutable data has truly taken the web by storm.

What does it look like when you’re using a simple programming language, and powerful toolchain, that enshrines these values to build your next react app? What if you don’t need to have these conflicting ideals in one code base?

re-frame is a wrapper (over a wrapper) over react and gives developers a simple deterministic way to deliver rich single page applications. Being impressively buzzword compliant, it brings together the best of react, redux, Elm and other ideas that have taken the SPA world by storm. re-frame delivers a data oriented approach to designing and building your next application.

The demo is available at https://youtu.be/uz9IWwFIhrw

Transcript

1. (re-frame ‘single-page-app) Future proofing Single Page App development with ClojureScript and re-frame
2. Kenneth Kalmer Chief Rocket Scientist @ ValuationUP.com Host on the ZADevChat Podcast @kennethkalmer about.me/kennethkalmer opensourcery.co.za kennethkalmer
3. The future of SPA’s Immutable data structures Functional programming ideas Reactive interfaces & data sources Tree shaking & dead code elimination Modules aka code splitting
4. Reframing it ever so slightly Less mutable state Less synchronization Smallest possible payloads Fastest possible delivery Inoculate against the effects of time
5. Day8/re-frame
6. ClojureScript.org
7. Clojure.org
8. Modern Lisp*
9. re-frame Functional programming framework around Reagent Reagent wraps Facebook's react & reactive-native* Data-first approach Perpetual loop
11. Ohai Components (defn main-panel [] (let [name (re-frame/subscribe [:name])] (fn [] [:div.ui.container [:h1 "Hello from " @name] [counter]])))
12. Event Dispatch (defn counter [] (let [on-click #(re-frame/dispatch [:inc-count])] (fn [] [:div.ui.icon.button {:on-click on-click} [:i.icon.plus]])))
13. Event Handling (def interceptors [(when ^Boolean goog.DEBUG) re-frame/debug]) (re-frame/reg-event-db :inc-count interceptors (fn [db] (update db :counter inc))) ;; db.counter = db.counter + 1
14. Effect handling Take all the effects generated previously, and materialize them, i.e. change the world This moves the app forward to the next state Completely debuggable, auditable, mockable & pluggable
15. Queries react (re-frame/reg-sub :counter (fn [db] (:counter db))) ;; db.counter
16. Views update (defn counter [] (let [count (re-frame/subscribe [:counter])] (fn [] [:div.ui.left.labeled.button [:a.ui.basic.label @count]])))
17. Finally the DOM Handled for us by reagent & react
18. Complete counter (defn counter [] (let [count (re-frame/subscribe [:counter]) on-click #(re-frame/dispatch [:inc-count])] (fn [] [:div.ui.left.labeled.button [:a.ui.basic.label @count] [:div.ui.icon.button {:on-click on-click} [:i.icon.plus]]])))
20. Out the box Browser-based REPL Hot code reloading that works! Source maps with syntax highlighting Compatible with react devtools Great JS interoperability
21. Demo time
22. –Augustus De Morgan, circa June 1866 “The first experiment already illustrates a truth of the theory, well confirmed by practice, what-ever can happen will happen if we make trials enough.”
23. https://youtu.be/uz9IWwFIhrw
26. Source maps & debugger
27. React devtools
28. Editor & IDE Support
30. YES! Clojure’s namespaces keep things isolated Add as many namespaces as you need Event & subscription ID's can be namespaced too Figwheel can run for days (even weeks) at a time Everything is just data
31. YES! Interops with existing JS libraries, no reinventing the wheel Leverage existing React components NPM integration*
32. YES! Advanced code compilation and dead code elimination means more dev friendly code interspersed in code Split up large build artifacts into smaller modules to optimize client experience
34. Get started github.com/Day8/re-frame Developing ClojureScript With Figwheel (Youtube) Parens of the Dead Clojure for the Brave and True #clojure in zatech.co.za zadevchat.io/27 The JVM is not that heavy - Open Sourcery
35. (thank “you”)
36. About me @kennethkalmer about.me/kennethkalmer opensourcery.co.za ZADevChat Podcast Celebrating 20 years of web development in 2017