Remix Deferred is currently implemented on top of React's Suspense model but is not limited to React. This will be a quick dive into how "promise over the wire" is accomplished.
It isn't rocket science, but a quick recap of how frameworks such as react do SSR:
Check comments below, this is only my opinion and a choice specific to my use case
We've architected a SPA to be universal-ready. It grew a lot, when we introduced code splitting we realised converting to CSS in JS was unavoidable in order to have pre-rendering and not load all our CSS up front. We've procrastinated on looking at CSS in JS properly, prioritasing immediate business needs, but kept an eye on industry evolutions.
Our CSS solution for components was a CSS companion file per component, imported with style / postCSS loader (with webpack) but no CSS modules: we were missing a tighter coupling between component rendering and styles. We were at the bottom of the CSS and componentization ladder, the following links have influenced us in choosing the right solution for us:
This is a CFP for ReactiveConf 2017's open call for Lightning talks. If you'd like to see this talk become a reality, please ⭐ star this gist. #ReactiveConf
Simple state management with xstream and ramda, in more transparent fashion than onionify
import * as R from 'ramda'
// first we create factory for making special state stream
// that will hold our stream value and will be modified with supplied streams of reducers
type StateReducer<T> = (state: T) => T
Elm is a statically typed functional language that compiles to JavaScript. It's well-known for its developer experience: the compiler provides nice error messages, the package system enforces semantic versioning for all published packages and makes sure every exposed value or type has some documentation and type annotations.
It's now here, in The Programmer's Compendium. The content is the same as before, but being part of the compendium means that it's actively maintained.
| import {run} from '@cycle/xstream-run' | |
| import {makeDOMDriver, div, button} from '@cycle/dom' | |
| import xs from 'xstream' | |
| function main (sources) { | |
| // Intent | |
| const incAction$ = sources.DOM | |
| .select('.inc').events('click') | |
| .mapTo({type: 'INC'}) | |
| const decAction$ = sources.DOM |
| import Cycle from '@cycle/core'; // the core Cycle | |
| import {h, makeDOMDriver} from '@cycle/dom'; // this is a side effect driver | |
| import Rx from 'rx'; // RxJS | |
| function main({DOM}) { // our Cycle app, it's simple a function | |
| const DEFAULT_VALUE = 50; // a default config | |
| // we select and watch our slider input from the DOM which is comes in via our function definition | |
| // these avents are turned into Rx streams | |
| let changeValue$ = DOM.select('#slider').events('input') |