threepointone

[based on a true story]

So. Your friend's about to teach you how to make a website. Great!

You make a file, and you save it as 'index.html'. Why it's called 'index' isn't really explained to you, but whatever.

You type the following.

hello world

threepointone

// the big idea is to have a generator that runs 
// for the existence of the component's life.  

// so to answer the question "how many", assume a generator per component.
// this could be 10s, worst case 100s? 

// assume I'm using the super redux-saga library + some helpers (run, start, stop), 
// but this pattern would hold for js-csp, or any other generator type thing 

threepointone

architectures and whatnot

1. plain ol' React

let state = initial
render(view(state), element)

• view is pure!

threepointone

// murmurhash2 via https://gist.github.com/raycmorgan/588423

export default function doHash(str, seed) {
  var m = 0x5bd1e995;
  var r = 24;
  var h = seed ^ str.length;
  var length = str.length;
  var currentIndex = 0;

  while (length >= 4) {

threepointone

// like https://github.com/meadow/redux-ensure-fsa, but allows `optimist` as a key

import isPlainObject from 'lodash.isplainobject';

const validKeys = [
  'type',
  'payload',
  'error',
  'meta',
  'optimist'

threepointone

import React, {Component} from 'react';
import {render} from 'react-dom';
import {take, put, fork, join, cps, call, cancel, race, runSaga, SagaCancellationException} from 'redux-saga';

const styles = {
  app: {
    position: 'absolute',
    width: 200,
    height: 200,
    backgroundColor: 'red',

threepointone

better caches with rethinkdb

TL;DR - smelly software engineer discusses using rethinkdb changefeeds for building caches, breaks hearts, shaves the cheerleader, shaves the world.

Let's talk about caches.

Imagine that you build UIs for an ecommerce company, possibly in a fancy office with free coffee and whatnot. You've just been asked to build a way for the marketing / sales folks to change landing pages whenever they're running campaigns. After a number of angry discussions involving the ux team about what they can and cannot change, you settle on a 'document' format for these pages. It could be json describing a tree of widgets of banners and carousels, or html, or yaml, or whatever. Maybe you also invent a dsl that marks out parts of the document as dynamic, based on request parameters or something. I dunno, I'm not your boss. You build a little ui over the weekend (with react? maybe!) that lets these folks login, drag and drop their banners, maybe upload an image or two, and save to database.

Yo

threepointone

import React from 'react';

export class Sto extends React.Component{
  static defaultProps = {
    store: x => x
  }
  state = {
    value: this.props.store()
  }
  dispatch = action => this.setState({

threepointone

/* global fetch*/
import {Dis, act} from 'disto';
let {dispatch, register} = new Dis();


function timeout(t){
  return new Promise(resolve =>
    setTimeout(()=> resolve(true), t));
}

threepointone

import {Dis} from 'disto';
import {photo} from 'disto/record';

let {register, dispatch, lock, unlock} = new Dis();

let store = photo(register({x: 0}, o => ({x: o.x+1}))); // simple increments

store.subscribe(o => console.log(o.x)); // 0
let t1 = store.snapshot();
dispatch('xyz');  // 1