matthewmueller/28kb-react-redux-routing

Stars
245
Rank 165,304 (Top 4 %)
Language
JavaScript
Created almost 9 years ago
Updated almost 9 years ago

matthewmueller/28kb-react-redux-routing

matthewmueller

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

React + Redux + Routing Stack for just 28kb

React + Redux + Routing Stack for 28kb

Just because your stack is awesome, doesn't mean it has to be fat.

This repo serves as a minimally viable example of how to combine the great ideas of React + Redux without compromising on your build size.

Kilobytes as currency

My goal for this project is to treat kilobytes as a sort of currency.

I'll give you React, Redux and a Routing Stack for just 28kb. What can you offer me?

Heavy frameworks aren't just slow for end users to download, they slow down our transpilers, they are harder to understand internally when the framework inevitably breaks, and they're typically more difficult to extend and make our own.

Behind the Curtain

React (via Preact)
Redux (via Socrates)
Action Logging (via Redux Logger)
Functional Routing (via enroute + simple history middleware)

See for yourself

git clone https://github.com/matthewmueller/28kb-react-redux-routing
npm install
npm start

Kudos

All the hard work here was done by @developit for his work on Preact and @gaearon for his work on redux. The "custom" modules you see above are just a small amount of UX grease on top of great implementations.

x-ray

The next web scraper. See through the <html> noise.

date

Date() for humans

joy

A delightful Go to Javascript compiler (ON HOLD)

array

A better array for the browser and node.js. Supports events & many functional goodies.

graph.ql

Faster and simpler way to create GraphQL servers

socrates

Small (8kb), batteries-included redux store to reduce boilerplate and promote good habits.

dots

WIP bootstrapping library for osx & ubuntu (and maybe others!)

next-cookies

Tiny little function for getting cookies on both client & server with next.js.

coderunner

Run server-side code quickly and securely in the browser.

vo

Minimalist, yet complete control flow library.

roo

Jump-start your front-end server

component-test

Minimal configuration component test runner supporting browser testing, phantomjs, and saucelabs.

mini-html-parser

Mini HTML parser for webworkers / node. Intended for well-formed HTML.

node-nom

Dead simple site scrapper for Node.js

outliers

Find outliers in a dataset.

next-redirect

Redirect for next.js. Works on both the client and server

try-again

Generic, simple retry module with exponential backoff.

PHPUnit-Test-Report

Browser testing with PHPUnit

x-ray-crawler

Friendly web crawler for x-ray

pg-bridge

Simple service connecting PostgreSQL notifications to Amazon SNS.

go-datadog

Easily send structured logs to Datadog over TCP.

svg

low-level svg helper

preact-head

Standalone, declarative <Head /> for Preact.

adjust

Position elements next to each other. A light-weight version of HubSpot/tether.

wrap-fn

Low-level wrapper to easily support sync, async, and generator functions.

dom-iterator

Feature-rich, well-tested Iterator for traversing DOM nodes.

normalize-contenteditable

All text in a content-editable block should be wrapped in <p> tag.

ppi

Find the PPI (pixels per inch) of an image.

next-route

Simplified custom routing for next.js.

tipp

Tool tips that just work.

combine-errors

Simple way to combine multiple errors into one.

poss

Slightly better-looking error handling for async/await & generators

autocomplete

Flexible autocomplete component

envobj

Tiny environment variable helper, that I'll use in all my apps.

qr-code

Create QR codes

vcom

Everything you need to create virtual Preact Components with CSS, HTML, and JS.

tiny-store

Tiny immutable store for any value

blocktree

Back to the basics, Hickey-inspired, generic text parser

unmatrix

Parse and normalize the individual values of a css transform

enqueue

seamlessly queue up asynchronous function calls. supports concurrency and timeouts.

string-scanner

scan through strings. supports forwards and backwards scanning.

step.js

My kind of step library. no dependencies. 120 lines of code. 383 lines of tests.

every

human-friendly intervals using http://github.com/matthewmueller/date

json-to-dom

Fill in DOM nodes with JSON. Supports arrays and attributes.

pretty-html

HTML logging that's easy on the eyes.

preact-socrates

preact plugin for socrates.

time-series

simple streaming time series graphs. automatic rescaling as data streams in.

event-debugger

step through events! must be initialized at the top of your scripts.

sun

Simple little virtual DOM node builder for Preact.

x-ray-parse

x-ray's selector parser.

file-pipe

Use gulp plugins on individual files

title-capitalization

Properly capitalize English titles.

atom-standard

An on-save linter and formatter for atom using standard. Supports all the options that standard supports.

express-graph.ql

Express middleware for querying our graphql server built with graph.ql

murmur.js

Small murmur hash implementation.

mergin

Merges files together using a best-effort merge

next-flash

Flash messages for next.js. Works on both the client and the server.

image-search

Pluggable image search

redux-routes

Simple redux history middleware.

io

higher-level engine.io client.

stripe-checkout

Open Stripe Checkout programmatically

remember

Use localstorage to remember input values. Supports textareas and inputs including radio buttons and checkboxes.

internal-old

Internal queue for your public libraries and APIs

preact-rc

Remote control your Preact components

subs

tiny string substitution

lambda-serve

Use koa or express on lambda!

grow

Grow textareas without using a clone or ghost element.

better-error

easier, more colorful, sprintf-style errors

spreadsheet

NOTE: this project is quite old. I won't be maintaining it anymore, but it should still work :-)

debounce

Underscore's debounce method as a component.

typewriter

Animated typing

async-script-promise

Asynchronously load scripts

reverse-regex

flip a regular expression. allows you to efficiently search backwards.

gist

Fluent gist API for node.js.

unyield

allow generators functions to accept callbacks

cheerio-select

Tiny wrapper around FB55's excellent CSSselect library.

terraform-provider-url

Simple little Terraform data source for parsing URLs.

mdb

In-memory key/value store designed for concurrent use

cursors

Collection of Mac's native cursor elements

increment

increment strings. good for keeping slugs unique.

wrapped

Low-level wrapper to provide a consistent interface for sync, async, promises, and generator functions.

yieldly

Conditionally make functions yieldable

events

Stand-alone event bindings as a component based on how Backbone's views handle events.

color

Extremely basic color tinting component

vscode-proofie

Proofie is an experimental proof-reader for VSCode that helps you write better.

plumbing

Pluggable plumbing for your Javascript libraries.

clock

Create a swiss railway inspired clock.

routematch

simple, functional route matcher for node.js and the browser.

character-iterator

Iterate through text characters in the DOM tree. Handles parent & sibling relationships.

sns.js

Simple publish and parse module for AWS SNS

hex-to-color-name

Tiny module to map hex colors to color names of your choice.

hackernews

css-to-js-object

Experimental: convert css to a JS object.

number-to-letter

Simple utility to convert an arbitrary number to a letter

rework-count

Rework plugin to style elements based on the sibling count.

arg-deps

Statically inspect a function to get the properties of its arguments. Works with minified code.

extend.js

extend objects. extend(obj, obj2, ...)

invisibles

make spaces visible

email

fluent email using sendmail

coderunner-api

API for coderunner