Sebastian Sebald sebald

Cheng Lou - On the Spectrum of Abstraction

Cheng Lou, a former member of the React team, gave an incredible talk at React Europe 2016 entitled "On the Spectrum of Abstraction". That talk is available for viewing here: https://www.youtube.com/watch?v=mVVNJKv9esE

It's only a half-hour, but it is mind-blowing. It's worth re-watching two or three times, to let the ideas sink in.

I just rewatched the talk for some research, and wrote down a summary that's semi-transcript-ish. I didn't see any other transcripts for this talk, other than the auto-generated closed captions, so I wanted to share for reference.

Summary

The gist: by having a Promise adopt the state of a forever pending one, you can suspend its then handlers chain.

Promise.pending = Promise.race.bind(Promise, [])

let cancel

new Promise(function(fulfill, reject) {
  cancel = function() {fulfill(Promise.pending())}
  setTimeout(fulfill, 1000, 5)

Redux-Style Selectors.

See here instead https://github.com/vsavkin/ngselectors

Store

Say we have a store defined as follows:

export class Store {

Enable tab completion for JSX with Emmet in Atom

This guide assumes you have the emmet and language-babel packages already installed in Atom

Open the keymap.cson file by clicking on Atom -> Keymap… in the menu bar
Add these lines of code to your keymap:

'atom-text-editor[data-grammar~="jsx"]:not([mini])':

RxJS 5 Operators By Example

⚠️ UPDATE: I have moved the contents of this gist plus more to http://www.learnrxjs.io and https://github.com/btroncone/learn-rxjs. For expanded examples, explanations, and resources, please check out this new location!

A complete list of RxJS 5 operators with easy to understand explanations and runnable examples.

Project Title

One Paragraph of project description goes here

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

	// file: index.js

	var _ = require("lodash");
	var express = require("express");
	var bodyParser = require("body-parser");
	var jwt = require('jsonwebtoken');

	var passport = require("passport");
	var passportJWT = require("passport-jwt");

	// getComponent is a function that returns a promise for a component
	// It will not be called until the first mount
	function asyncComponent(getComponent) {
	return class AsyncComponent extends React.Component {
	static Component = null;
	state = { Component: AsyncComponent.Component };

	componentWillMount() {
	if (!this.state.Component) {
	getComponent().then(Component => {

	const reg = new RegExp("([^?=&]+)(=([^&]*))?", "g")

	function qs (uri) {
	const obj = {}
	uri = uri.replace(/^.*\?/, '')
	uri.replace(reg, map)
	return obj

	function map (a0, a1, a2, a3) {
	obj[decodeURIComponent(a1)] = decodeURIComponent(a3)

	import test from 'ava';
	import Rx from 'rxjs/Rx';
	import {createStore} from 'redux';

	test('should be observable', t => {

	const reducer = (state, action) => {
	if (action.type === 'increment') {
	return {...state, counter: state.counter + 1}
	}