Skip to content

Instantly share code, notes, and snippets.

James Gillmore faceyspacey

Block or report user

Report or block faceyspacey

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
faceyspacey / simple-functional-hypothetical-react-example.js
Last active Apr 24, 2019
Simple Functional Hypothetical React Example
View simple-functional-hypothetical-react-example.js
import { Box } from 'respond'
export function Items(props) {
return Box({
style: { margin: 20, padding: 10 },
children: [
Item({ name: 'svelte' }),
Item({ name: 'react' }),
Item({ name: 'vue' }),
faceyspacey / respond-plus-hooks-modal.js
Last active Apr 8, 2019
Respond Plus Hooks Modal
View respond-plus-hooks-modal.js
const MyRespondModal = (props, state, actions) => (
const Modal = ({ visible, text, onClose, onSubmit }) => {
faceyspacey / respond-modular-components.js
Last active Apr 8, 2019
Respond Modular Components
View respond-modular-components.js
export default createApp({
components: {
App: (props, { location }) => {
const Component = location.components.list.ComponentWithHoistedDataDeps
return Component ? <Component /> : <Spinner />
routes: {
path: '/list/:category',
faceyspacey / respond-framework-statecharts.js
Last active Mar 28, 2019
Respond Framework support for Statecharts
View respond-framework-statecharts.js
import { testGenerator } from 'respond-framework/test'
const routes = {
LOGIN: '/login',
SIGNUP: '/signup',
POST: '/post/:slug',
path: '/',
next: {
LOGIN: request => !!request.getState().cookies.existingUser,
faceyspacey /
Last active Apr 25, 2019
Respond Framework Walkthrough

Respond Framework Walkthrough

Respond Framework is what happens if you build Redux & first-class concerns for routing into React, plus take a page from the traditional server-side MVC playbook when it comes to side-effects.

Here's a quick overview of the features and usage in Respond Framework.


faceyspacey /
Last active Mar 23, 2019
Example of our automatically code-split manifest

Our Manifest

Below is our manifest which has the information of every route the app has. It's statically generated by our babel-plugin at compile time.

It has the absolute minimal amount of information necessary so that it's possible for any route to dispatch actions to any other route.

Since createScene() generates action creators from simply our routesMap types/keys, that's all we need to generate ALL ACTIONS. Well, there is a few small edge cases, but you got the idea.

faceyspacey /
Last active Mar 15, 2019
BRAINSTORM: Remixx Modules is also all about automatic splitting across routes + modules -- our own special manifest is the key

How we assign components to modules

This insures each component only can access the state from the module its part of.

  1. here's the intermediary data structure we generate in a single babel pass:
faceyspacey / code-splitting.js
Last active Mar 13, 2019
Rudy custom code-splitting middleware (split reducers, components, routes, libs)
View code-splitting.js
// implementation 1
const load = (api) => async (req, next) => {
const { route, action } = req
const hasLoad = route && route.load
if (!hasLoad) return next()
const { components, reducers, chunks, ...res } = await route.load(req) || {}

Rudy Prefetching + Code-Splitting Strategy

We're gonna start by looking at how code splitting works, and build our understanding of the task from there

The Big Picture problem we solve


The big hidden idea here is that with RUC it's challenging, not perfectly performant, and non-obvious how to code split non-component things like reducers, thunks, etc.

View easy-universal-ssr.js
import express from 'express'
import routes from './routes';
import { render, build } from 'react-universal-starter';
const app = express();
const handler = build(async (req, res, stats) => {
try {
const html = await render(routes, stats);
You can’t perform that action at this time.