Darryl Hebbes darrylhebbes

Hi Nicholas,

I saw you tweet about JSX yesterday. It seemed like the discussion devolved pretty quickly but I wanted to share our experience over the last year. I understand your concerns. I've made similar remarks about JSX. When we started using it Planning Center, I led the charge to write React without it. I don't imagine I'd have much to say that you haven't considered but, if it's helpful, here's a pattern that changed my opinion:

The idea that "React is the V in MVC" is disingenuous. It's a good pitch but, for many of us, it feels like in invitation to repeat our history of coupled views. In practice, React is the V and the C. Dan Abramov describes the division as Smart and Dumb Components. At our office, we call them stateless and container components (view-controllers if we're Flux). The idea is pretty simple: components can't

Two ideas: Deferreds and Promises.

Part 1: Deferred

A Deferred object is initially pending. It can be either resolved or rejected. You can do so by literally calling .resolve or .reject on the Deferred object. You can check its state (pending, resolved, or rejected) by calling .state on it. Once it leaves pending (to be either resolved or rejected) it is permanently that state and cannot be undone (unless of course with a page refresh).

These states are nice because you can put code in functions that will only run when the Deferred object has been set to one of these states. This is done with the .done and .fail methods on the Deferred object. Two examples: the first to explain states, and the second to explain running code based on states.

Example 1:

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

	// JS array equivalents to C# LINQ methods - by Dan B.

	// First: This version using older JavaScript notation for universal browser support (scroll down for ES6 version):

	// Here's a simple array of "person" objects
	var people = [
	{ name: "John", age: 20 },
	{ name: "Mary", age: 35 },
	{ name: "Arthur", age: 78 },
	{ name: "Mike", age: 27 },

	# Type(<scope>): <subject>

	# <body>

	# <footer>

	# Type should be one of the following:
	# * feat (new feature)
	# * fix (bug fix)
	# * docs (changes to documentation)

	import { Component } from "React";

	export var Enhance = ComposedComponent => class extends Component {
	constructor() {
	this.state = { data: null };
	}
	componentDidMount() {
	this.setState({ data: 'Hello' });
	}
	render() {

	// SET default language
	if(Cookie.get('TAPi18next')) {
	TAPi18n.setLanguage(Cookie.get('TAPi18next'));
	} else {
	var userLang = navigator.language \|\| navigator.userLanguage,
	availLang = TAPi18n.getLanguages();

	// set default language
	if (_.isObject(availLang) && availLang[userLang]) {
	TAPi18n.setLanguage(userLang);

	#!/usr/local/bin/python2.7
	import xmlrpclib
	import os
	import socket
	import wget
	import getpass
	from subprocess import call


	# Set some defaults

	'use strict';

	/***************NATIVE forEACH*******************/

	Array.prototype.myEach = function(callback) {
	for (var i = 0; i < this.length; i++)
	callback(this[i], i, this);
	};

	//tests

	var log = console.log.bind(console);

	var arr = [1, 2, undefined, 3];

	var unary = (v) => v;
	var binary = (first, rest) => [first, rest];

	log('unary', unary.apply(null, arr)); // 1
	log('binary', binary.apply(null, arr)); // [1, 2]