sebald

How we incorporate next and cloudfront (2018-04-21)

Feel free to contact me at [email protected] or tweet at me @statisticsftw

This is a rough outline of how we utilize next.js and S3/Cloudfront. Hope it helps!

It assumes some knowledge of AWS.

Goals

sebald

// WARNING: Completely untested code. it might not work and/or it might have
// things that don't work well. Just made for illustrational purposes

// redux-observable shines the most with complex async stuff, like WebSockets
// but many of us will still use it for more modest things like AJAX requests.
// In these cases, there can be a ton of repetitive boilerplate. So this is a
// simple example of applying some abstractions and conventions to make it easier.
// THAT SAID, since abstractions cause indirection it can make it harder for
// someone to come along later and know how something works. Weigh the costs
// and remember, this example isn't a suggestion of the actual code you should

sebald

import React from 'react';
import { css as EmotionCSS } from 'react-emotion';

import { jsxstyleFactory } from './jsxstyleFactory';

const cx = (css, styles, className) =>
  EmotionCSS([{ ...css, ...styles }, className]);

const jsxstyle = jsxstyleFactory(cx);
export const Box = jsxstyle.Box;

sebald

state-machine-component

A tiny (265 byte) utility to create state machine components using two pure functions.

🔥 JSFiddle Demo

Usage

The API is a single function that accepts 2 pure functions as arguments:

sebald

Say we have a prop.users of the shape:

const users = [
    {username: 'bob', age: 30, tags: [{name: 'work', id: 1}, {name: 'boring', id: 2}]},
    {username: 'jim', age: 25, tags: [{name: 'home', id: 3}, {name: 'fun', id: 4}]},
    {username: 'jane', age: 30, tags: [{name: 'vacation', id: 5}, {name: 'fun', id: 4}]}
];

sebald

Content =
  all:(Element / Text)* {
  return all.join("").replace(/\n$/, '');
}
 
Element =
  startTag:StartTag content:Content endTag:EndTag {
    if (startTag != endTag) {
      throw new Error(
        "Expected </" + startTag + "> but </" + endTag + "> found."