|
| 1 | +--- |
| 2 | +title: "Community Round-up #15" |
| 3 | +layout: post |
| 4 | +author: Jonas Gebhardt |
| 5 | +--- |
| 6 | + |
| 7 | +Interest in React seems to have surged ever since David Nolen ([@swannodette](https://twitter.com/swannodette))'s introduction of [Om](https://github.com/swannodette/om) in his post ["The Future of Javascript MVC Frameworks"](http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/). |
| 8 | + |
| 9 | +In this React Community Round-up, we are taking a closer look at React from a functional programming perspective. |
| 10 | + |
| 11 | +## "React: Another Level of Indirection" |
| 12 | +To start things off, Eric Normand ([@ericnormand](https://twitter.com/ericnormand)) of [LispCast](http://lispcast.com) makes the case for [React from a general functional programming standpoint](http://www.lispcast.com/react-another-level-of-indirection) and explains how React's "Virtual DOM provides the last piece of the Web Frontend Puzzle for ClojureScript". |
| 13 | + |
| 14 | +> The Virtual DOM is an indirection mechanism that solves the difficult problem of DOM programming: how to deal with incremental changes to a stateful tree structure. By abstracting away the statefulness, the Virtual DOM turns the real DOM into an immediate mode GUI, which is perfect for functional programming. |
| 15 | +> |
| 16 | +> [Read the full post...](http://www.lispcast.com/react-another-level-of-indirection) |
| 17 | +
|
| 18 | +## Reagent: Minimalistic React for ClojureScript |
| 19 | +Dan Holmsand ([@holmsand](https://twitter.com/holmsand)) created [Reagent](http://holmsand.github.io/reagent/), a simplistic ClojureScript API to React. |
| 20 | + |
| 21 | +> It allows you to define efficient React components using nothing but plain ClojureScript functions and data, that describe your UI using a Hiccup-like syntax. |
| 22 | +> |
| 23 | +> The goal of Reagent is to make it possible to define arbitrarily complex UIs using just a couple of basic concepts, and to be fast enough by default that you rarely have to care about performance. |
| 24 | +> |
| 25 | +> [Check it out on Github...](http://holmsand.github.io/reagent/) |
| 26 | +
|
| 27 | + |
| 28 | +## Functional DOM programming |
| 29 | + |
| 30 | +React's one-way data-binding naturally lends itself to a functional programming approach. Facebook's Pete Hunt ([@floydophone](https://twitter.com/floydophone)) explores how one would go about [writing web apps in a functional manner](https://medium.com/p/67d81637d43). Spoiler alert: |
| 31 | + |
| 32 | +> This is React. It’s not about templates, or data binding, or DOM manipulation. It’s about using functional programming with a virtual DOM representation to build ambitious, high-performance apps with JavaScript. |
| 33 | +> |
| 34 | +> [Read the full post...](https://medium.com/p/67d81637d43) |
| 35 | +
|
| 36 | +Pete also explains this in detail at his #MeteorDevShop talk (about 30 Minutes): |
| 37 | + |
| 38 | +<iframe width="560" height="315" src="//www.youtube.com/embed/Lqcs6hPOcFw?start=2963" frameborder="0" allowfullscreen></iframe> |
| 39 | + |
| 40 | + |
| 41 | + |
| 42 | +## Kioo: Separating markup and logic |
| 43 | +[Creighton Kirkendall](https://github.com/ckirkendall) created [Kioo](https://github.com/ckirkendall/kioo), which adds Enlive-style templating to React. HTML templates are separated from the application logic. Kioo comes with separate examples for both Om and Reagent. |
| 44 | + |
| 45 | +A basic example from github: |
| 46 | + |
| 47 | +```html |
| 48 | +<!DOCTYPE html> |
| 49 | +<html lang="en"> |
| 50 | + <body> |
| 51 | + <header> |
| 52 | + <h1>Header placeholder</h1> |
| 53 | + <ul id="navigation"> |
| 54 | + <li class="nav-item"><a href="#">Placeholder</a></li> |
| 55 | + </ul> |
| 56 | + </header> |
| 57 | + <div class="content">place holder</div> |
| 58 | + </body> |
| 59 | +</html> |
| 60 | +``` |
| 61 | + |
| 62 | +```clojure |
| 63 | +... |
| 64 | + |
| 65 | +(defn my-nav-item [[caption func]] |
| 66 | + (kioo/component "main.html" [:.nav-item] |
| 67 | + {[:a] (do-> (content caption) |
| 68 | + (set-attr :onClick func))})) |
| 69 | + |
| 70 | +(defn my-header [heading nav-elms] |
| 71 | + (kioo/component "main.html" [:header] |
| 72 | + {[:h1] (content heading) |
| 73 | + [:ul] (content (map my-nav-item nav-elms))})) |
| 74 | + |
| 75 | +(defn my-page [data] |
| 76 | + (kioo/component "main.html" |
| 77 | + {[:header] (substitute (my-header (:heading data) |
| 78 | + (:navigation data))) |
| 79 | + [:.content] (content (:content data))})) |
| 80 | + |
| 81 | +(def app-state (atom {:heading "main" |
| 82 | + :content "Hello World" |
| 83 | + :navigation [["home" #(js/alert %)] |
| 84 | + ["next" #(js/alert %)]]})) |
| 85 | + |
| 86 | +(om/root app-state my-page (.-body js/document)) |
| 87 | +``` |
| 88 | + |
| 89 | +## Om |
| 90 | + |
| 91 | +In an interview with David Nolen, Tom Coupland ([@tcoupland](https://twitter.com/tcoupland)) of InfoQ provides a nice summary of recent developments around Om ("[Om: Enhancing Facebook's React with Immutability](http://www.infoq.com/news/2014/01/om-react)"). |
| 92 | + |
| 93 | +> David [Nolen]: I think people are starting to see the limitations of just JavaScript and jQuery and even more structured solutions like Backbone, Angular, Ember, etc. React is a fresh approach to the DOM problem that seems obvious in hindsight. |
| 94 | +> |
| 95 | +> [Read the full interview...](http://www.infoq.com/news/2014/01/om-react) |
| 96 | +
|
| 97 | +### A slice of React, ClojureScript and Om |
| 98 | + |
| 99 | +Fredrik Dyrkell ([@lexicallyscoped](https://twitter.com/lexicallyscoped)) rewrote part of the [React tutorial in both ClojureScript and Om](http://www.lexicallyscoped.com/2013/12/25/slice-of-reactjs-and-cljs.html), along with short, helpful explanations. |
| 100 | + |
| 101 | +> React has sparked a lot of interest in the Clojure community lately [...]. At the very core, React lets you build up your DOM representation in a functional fashion by composing pure functions and you have a simple building block for everything: React components. |
| 102 | +> |
| 103 | +> [Read the full post...](http://www.lexicallyscoped.com/2013/12/25/slice-of-reactjs-and-cljs.html) |
| 104 | +
|
| 105 | +In a separate post, Dyrkell breaks down [how to build a binary clock component](http://www.lexicallyscoped.com/2014/01/23/ClojureScript-react-om-binary-clock.html) in Om. |
| 106 | + |
| 107 | +[[Demo](http://www.lexicallyscoped.com/demo/binclock/)] [[Code](https://github.com/fredyr/binclock/blob/master/src/binclock/core.cljs)] |
| 108 | + |
| 109 | +### Time Travel: Implementing undo in Om |
| 110 | +David Nolen shows how to leverage immutable data structures to [add global undo](http://swannodette.github.io/2013/12/31/time-travel/) functionality to an app – using just 13 lines of ClojureScript. |
| 111 | + |
| 112 | +### A Step-by-Step Om Walkthrough |
| 113 | + |
| 114 | +[Josh Lehman](http://www.joshlehman.me) took the time to create an extensive [step-by-step walkthrough](http://www.joshlehman.me/rewriting-the-react-tutorial-in-om/) of the React tutorial in Om. The well-documented source is on [github](https://github.com/jalehman/omtut-starter). |
| 115 | + |
| 116 | +### Omkara |
| 117 | + |
| 118 | +[brendanyounger](https://github.com/brendanyounger) created [omkara](https://github.com/brendanyounger/omkara), a starting point for ClojureScript web apps based on Om/React. It aims to take advantage of server-side rendering and comes with a few tips on getting started with Om/React projects. |
| 119 | + |
| 120 | +### Om Experience Report |
| 121 | +Adam Solove ([@asolove](https://twitter.com/asolove/)) [dives a little deeper into Om, React and ClojureScript](http://adamsolove.com/js/clojure/2014/01/06/om-experience-report.html). He shares some helpful tips he gathered while building his [CartoCrayon](https://github.com/asolove/carto-crayon) prototype. |
| 122 | + |
| 123 | +## Not-so-random Tweet |
| 124 | + |
| 125 | + |
| 126 | +<center><blockquote class="twitter-tweet" lang="en"><p>[@swannodette](https://twitter.com/swannodette) No thank you! It's honestly a bit weird because Om is exactly what I didn't know I wanted for doing functional UI work.</p>— Adam Solove (@asolove) <a href="https://twitter.com/asolove/status/420294067637858304">January 6, 2014</a></blockquote></center> |
0 commit comments