From 2758b08f12dfa776bf47c0ef99706efb57254ed5 Mon Sep 17 00:00:00 2001 From: Jonas Gebhardt Date: Wed, 5 Feb 2014 15:19:53 -0800 Subject: [PATCH] Community Round-Up #15; center embedded tweets --- _posts/2014-01-06-community-roundup-14.md | 2 +- _posts/2014-02-05-community-roundup-15.md | 126 ++++++++++++++++++++++ 2 files changed, 127 insertions(+), 1 deletion(-) create mode 100644 _posts/2014-02-05-community-roundup-15.md diff --git a/_posts/2014-01-06-community-roundup-14.md b/_posts/2014-01-06-community-roundup-14.md index 41b6426b..cd0df07b 100644 --- a/_posts/2014-01-06-community-roundup-14.md +++ b/_posts/2014-01-06-community-roundup-14.md @@ -89,4 +89,4 @@ React is often compared with Angular. [Pete Hunt](http://skulbuny.com/2013/10/31 ## Random Tweet -
+
diff --git a/_posts/2014-02-05-community-roundup-15.md b/_posts/2014-02-05-community-roundup-15.md new file mode 100644 index 00000000..e2a7371d --- /dev/null +++ b/_posts/2014-02-05-community-roundup-15.md @@ -0,0 +1,126 @@ +--- +title: "Community Round-up #15" +layout: post +author: Jonas Gebhardt +--- + +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/). + +In this React Community Round-up, we are taking a closer look at React from a functional programming perspective. + +## "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 +Dan Holmsand ([@holmsand](https://twitter.com/holmsand)) created [Reagent](http://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...](http://holmsand.github.io/reagent/) + + +## 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): + + + + + +## 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 + + + +
+

Header placeholder

+ +
+
place holder
+ + +``` + +```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 + +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 + +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 +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. + +### 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 + +[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 +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 + + +
\ No newline at end of file