react.dev/content/blog/2014-02-05-community-roundu...

---
title: "Community Round-up #15"
author: [jgebhardt]
---

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"](https://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/).

In this React Community Round-up, we are taking a closer look at React from a functional programming perspective.

## "React: Another Level of Indirection" {#react-another-level-of-indirection}
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".

> 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.
>
> [Read the full post...](http://www.lispcast.com/react-another-level-of-indirection)

## Reagent: Minimalistic React for ClojureScript {#reagent-minimalistic-react-for-clojurescript}
Dan Holmsand ([@holmsand](https://twitter.com/holmsand)) created [Reagent](https://holmsand.github.io/reagent/), a simplistic ClojureScript API to React.

> 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.
>
> 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.
>
> [Check it out on GitHub...](https://holmsand.github.io/reagent/)


## Functional DOM programming {#functional-dom-programming}

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:

> 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.
>
> [Read the full post...](https://medium.com/p/67d81637d43)

Pete also explains this in detail at his #MeteorDevShop talk (about 30 Minutes):

<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/Lqcs6hPOcFw?start=2963" frameborder="0" allowfullscreen></iframe>


## Kioo: Separating markup and logic {#kioo-separating-markup-and-logic}
[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.

A basic example from github:

```html
<!DOCTYPE html>
<html lang="en">
  <body>
    <header>
      <h1>Header placeholder</h1>
      <ul id="navigation">
        <li class="nav-item"><a href="#">Placeholder</a></li>
      </ul>
    </header>
    <div class="content">place holder</div>
  </body>
</html>
```

```clojure
...

(defn my-nav-item [[caption func]]
  (kioo/component "main.html" [:.nav-item]
    {[:a] (do-> (content caption)
                (set-attr :onClick func))}))

(defn my-header [heading nav-elms]
  (kioo/component "main.html" [:header]
    {[:h1] (content heading)
     [:ul] (content (map my-nav-item nav-elms))}))

(defn my-page [data]
  (kioo/component "main.html"
    {[:header] (substitute (my-header (:heading data)
                                      (:navigation data)))
     [:.content] (content (:content data))}))

(def app-state (atom {:heading    "main"
                      :content    "Hello World"
                      :navigation [["home" #(js/alert %)]
                                   ["next" #(js/alert %)]]}))

(om/root app-state my-page (.-body js/document))
```

## Om {#om}

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)").

> 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.
>
> [Read the full interview...](http://www.infoq.com/news/2014/01/om-react)

### A slice of React, ClojureScript and Om {#a-slice-of-react-clojurescript-and-om}

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.

> 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.
>
> [Read the full post...](http://www.lexicallyscoped.com/2013/12/25/slice-of-reactjs-and-cljs.html)

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.

[[Demo](http://www.lexicallyscoped.com/demo/binclock/)] [[Code](https://github.com/fredyr/binclock/blob/master/src/binclock/core.cljs)]

### Time Travel: Implementing undo in Om {#time-travel-implementing-undo-in-om}
David Nolen shows how to leverage immutable data structures to [add global undo](https://swannodette.github.io/2013/12/31/time-travel/) functionality to an app – using just 13 lines of ClojureScript.

### A Step-by-Step Om Walkthrough {#a-step-by-step-om-walkthrough}

[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).

### Omkara {#omkara}

[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.

### Om Experience Report {#om-experience-report}
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.

## Not-so-random Tweet {#not-so-random-tweet}


<div><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>&mdash; Adam Solove (@asolove) <a href="https://twitter.com/asolove/status/420294067637858304">January 6, 2014</a></blockquote></div>
Community Round-Up #15; center embedded tweets 11 years ago			`---`
			`title: "Community Round-up #15"`
Add new docs website (#10896) Adds a new docs website, built with Gatsby JS, to replace the old Jekyll site. Source code for the new site lives in /www (although markdown and YML data still comes from the legacy /docs folder). Changes to either markdown or website source code can be previewed on Netlify. The react-js bot should automatically add comments to each PR with preview links. (This preview is generated by running the newly-added yarn build:docs command in the root package.json.) The majority of the changes in this PR are contained within the new /www directory. However some minor modifications have been made to existing content in the /docs directory: * Modified frontmatter author block to always be an array * Small markdown formatting tweaks 7 years ago			`author: [jgebhardt]`
Community Round-Up #15; center embedded tweets 11 years ago			`---`

Rename Javascript to JavaScript (#9796) 8 years ago			`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"](https://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/).`
Community Round-Up #15; center embedded tweets 11 years ago
			`In this React Community Round-up, we are taking a closer look at React from a functional programming perspective.`

reapply, correctly generating links 6 years ago			`## "React: Another Level of Indirection" {#react-another-level-of-indirection}`
Community Round-Up #15; center embedded tweets 11 years ago			`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".`

			`> 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.`
			`>`
			`> [Read the full post...](http://www.lispcast.com/react-another-level-of-indirection)`

reapply, correctly generating links 6 years ago			`## Reagent: Minimalistic React for ClojureScript {#reagent-minimalistic-react-for-clojurescript}`
SSL/TLSize all the things! (convert http:// to https:// where appropriate) Update links to use https:// where it is supported. There's probably a lot more that could be fixed, but these are the core ones I found (especially the download links in order to prevent MITM attacks). Note that there are some fb.me links that will redirect to http:// even while accessed over https://, but this seemed like the best way to fix those for now. NOTE: Only non-third-party files were modified. There are references to http:// URLs in vendored/third-party files, but seems appropriate to fix upstream for those rather than editing the files. Also, copy one image locally to the blog, as it was hotlinking to a site that did not support https://. Last, use youtube-nocookie.com instead of youtube.com for video embeds, as the former doesn't try to set a cookie on load (privacy enhancement). 10 years ago			`Dan Holmsand ([@holmsand](https://twitter.com/holmsand)) created [Reagent](https://holmsand.github.io/reagent/), a simplistic ClojureScript API to React.`
Community Round-Up #15; center embedded tweets 11 years ago
			`> 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.`
			`>`
			`> 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.`
			`>`
Rename Github to GitHub (#9797) 8 years ago			`> [Check it out on GitHub...](https://holmsand.github.io/reagent/)`
Community Round-Up #15; center embedded tweets 11 years ago

reapply, correctly generating links 6 years ago			`## Functional DOM programming {#functional-dom-programming}`
Community Round-Up #15; center embedded tweets 11 years ago
			`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:`

			`> 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.`
			`>`
			`> [Read the full post...](https://medium.com/p/67d81637d43)`

			`Pete also explains this in detail at his #MeteorDevShop talk (about 30 Minutes):`

Add new docs website (#10896) Adds a new docs website, built with Gatsby JS, to replace the old Jekyll site. Source code for the new site lives in /www (although markdown and YML data still comes from the legacy /docs folder). Changes to either markdown or website source code can be previewed on Netlify. The react-js bot should automatically add comments to each PR with preview links. (This preview is generated by running the newly-added yarn build:docs command in the root package.json.) The majority of the changes in this PR are contained within the new /www directory. However some minor modifications have been made to existing content in the /docs directory: * Modified frontmatter author block to always be an array * Small markdown formatting tweaks 7 years ago			`<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/Lqcs6hPOcFw?start=2963" frameborder="0" allowfullscreen></iframe>`
Community Round-Up #15; center embedded tweets 11 years ago


reapply, correctly generating links 6 years ago			`## Kioo: Separating markup and logic {#kioo-separating-markup-and-logic}`
Community Round-Up #15; center embedded tweets 11 years ago			`[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.`

			`A basic example from github:`

			```html
			`<!DOCTYPE html>`
			`<html lang="en">`
			`<body>`
			`<header>`
			`<h1>Header placeholder</h1>`
			`<ul id="navigation">`
			`<li class="nav-item"><a href="#">Placeholder</a></li>`
			`</ul>`
			`</header>`
			`<div class="content">place holder</div>`
			`</body>`
			`</html>`
			```

			```clojure
			`...`

			`(defn my-nav-item [[caption func]]`
			`(kioo/component "main.html" [:.nav-item]`
			`{[:a] (do-> (content caption)`
			`(set-attr :onClick func))}))`

			`(defn my-header [heading nav-elms]`
			`(kioo/component "main.html" [:header]`
			`{[:h1] (content heading)`
			`[:ul] (content (map my-nav-item nav-elms))}))`

			`(defn my-page [data]`
			`(kioo/component "main.html"`
			`{[:header] (substitute (my-header (:heading data)`
			`(:navigation data)))`
			`[:.content] (content (:content data))}))`

			`(def app-state (atom {:heading "main"`
			`:content "Hello World"`
			`:navigation [["home" #(js/alert %)]`
			`["next" #(js/alert %)]]}))`

			`(om/root app-state my-page (.-body js/document))`
			```

reapply, correctly generating links 6 years ago			`## Om {#om}`
Community Round-Up #15; center embedded tweets 11 years ago
			`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)").`

			`> 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.`
			`>`
			`> [Read the full interview...](http://www.infoq.com/news/2014/01/om-react)`

reapply, correctly generating links 6 years ago			`### A slice of React, ClojureScript and Om {#a-slice-of-react-clojurescript-and-om}`
Community Round-Up #15; center embedded tweets 11 years ago
			`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.`

			`> 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.`
			`>`
			`> [Read the full post...](http://www.lexicallyscoped.com/2013/12/25/slice-of-reactjs-and-cljs.html)`

			`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.`

Fix "master" to "main" renaming mistakes (#3770) 4 years ago			`[[Demo](http://www.lexicallyscoped.com/demo/binclock/)] [[Code](https://github.com/fredyr/binclock/blob/master/src/binclock/core.cljs)]`
Community Round-Up #15; center embedded tweets 11 years ago
reapply, correctly generating links 6 years ago			`### Time Travel: Implementing undo in Om {#time-travel-implementing-undo-in-om}`
SSL/TLSize all the things! (convert http:// to https:// where appropriate) Update links to use https:// where it is supported. There's probably a lot more that could be fixed, but these are the core ones I found (especially the download links in order to prevent MITM attacks). Note that there are some fb.me links that will redirect to http:// even while accessed over https://, but this seemed like the best way to fix those for now. NOTE: Only non-third-party files were modified. There are references to http:// URLs in vendored/third-party files, but seems appropriate to fix upstream for those rather than editing the files. Also, copy one image locally to the blog, as it was hotlinking to a site that did not support https://. Last, use youtube-nocookie.com instead of youtube.com for video embeds, as the former doesn't try to set a cookie on load (privacy enhancement). 10 years ago			`David Nolen shows how to leverage immutable data structures to [add global undo](https://swannodette.github.io/2013/12/31/time-travel/) functionality to an app – using just 13 lines of ClojureScript.`
Community Round-Up #15; center embedded tweets 11 years ago
reapply, correctly generating links 6 years ago			`### A Step-by-Step Om Walkthrough {#a-step-by-step-om-walkthrough}`
Community Round-Up #15; center embedded tweets 11 years ago
			`[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).`

reapply, correctly generating links 6 years ago			`### Omkara {#omkara}`
Community Round-Up #15; center embedded tweets 11 years ago
			`[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.`

reapply, correctly generating links 6 years ago			`### Om Experience Report {#om-experience-report}`
Community Round-Up #15; center embedded tweets 11 years ago			`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.`

reapply, correctly generating links 6 years ago			`## Not-so-random Tweet {#not-so-random-tweet}`
Community Round-Up #15; center embedded tweets 11 years ago

Don't use <center> for twitter embeds 11 years ago			`<div><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></div>`