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
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
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) => (
<Modal
visible={!!state.modalText}
text={state.modalText}
onClose={actions.cancel}
onSubmit={actions.confirm}
/>
)
const Modal = ({ visible, text, onClose, onSubmit }) => {
@faceyspacey
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: {
LIST: {
path: '/list/:category',
@faceyspacey
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',
HOME: {
path: '/',
next: {
LOGIN: request => !!request.getState().cookies.existingUser,
@faceyspacey
faceyspacey / respond-framework-walkthrough.md
Last active Apr 25, 2019
Respond Framework Walkthrough
View respond-framework-walkthrough.md

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.

Installation

@faceyspacey
faceyspacey / route-splitting-manifest.md
Last active Mar 23, 2019
Example of our automatically code-split manifest
View route-splitting-manifest.md

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
faceyspacey / remixx-modules-splitting-planning.md
Last active Mar 15, 2019
BRAINSTORM: Remixx Modules is also all about automatic splitting across routes + modules -- our own special manifest is the key
View remixx-modules-splitting-planning.md

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
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) || {}
View rudy-prefetch-and-code-split-strategy.md

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

CODE SPLIT EVERYTHING (NOT JUST COMPONENTS) -- AND DO IT BEFORE YOU NEED IT

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.