Community Round-Up #15; center embedded tweets
Jonas Gebhardt committed
Feb 5, 2014 at 15:19 UTC
2f812b6f9bebce64fd10938a63985be5cf60b56a
2 files changed
+127
-1
docs/_posts/2014-01-06-community-roundup-14.md
+1
-1
@@ -89,4 +89,4 @@ React is often compared with Angular. [Pete Hunt](http://skulbuny.com/2013/10/31
89
90
## Random Tweet
91
92
-<figure><blockquote class="twitter-tweet" lang="en"><p>Really intrigued by React.js. I've looked at all JS frameworks, and excepting <a href="https://twitter.com/serenadejs">@serenadejs</a> this is the first one which makes sense to me.</p>— Jonas Nicklas (@jonicklas) <a href="https://twitter.com/jonicklas/statuses/412640708755869696">December 16, 2013</a></blockquote></figure>
92
+<center><blockquote class="twitter-tweet" lang="en"><p>Really intrigued by React.js. I've looked at all JS frameworks, and excepting <a href="https://twitter.com/serenadejs">@serenadejs</a> this is the first one which makes sense to me.</p>— Jonas Nicklas (@jonicklas) <a href="https://twitter.com/jonicklas/statuses/412640708755869696">December 16, 2013</a></blockquote></center>
docs/_posts/2014-02-05-community-roundup-15.md
new
+126
@@ -0,0 +1,126 @@
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>
\ No newline at end of file