jacob-ebey

Remix Deferred

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.

SSR + Hydration

It isn't rocket science, but a quick recap of how frameworks such as react do SSR:

1. Load data
2. Render the app

mattiaerre

How to test it in an Express app

app.get('/playground', handler);

200

http://localhost:9000/playground

troch

Choosing a CSS in JS library

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:

• Christopher Chedeaux, 2015, "CSS in JS" https://speakerdeck.com/vjeux/react-css-in-js
• Mark Dagleish, 2015, "The case for CSS modules" https://www.youtube.com/watch?v=zR1lOuyQEt8

kitten

With styled-components into the future

Preprocessing is dead, long live preprocessing!

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

jevakallio

TL;DR: If you want to see me perform a spoken word poem about JavaScript in front of 1000 people (and on video), please ⭐ star this gist. If you're on mobile, you'll need to request desktop site.

JavaScript Slam Poetry

wclr

A way to handle state in cycle.js

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

klaftertief

• Star this gist to see the talk at ReactiveConf 2016.
• Retweet to spread the word.
• Have a look at this blog post to see other proposals.
• Try elm-search to see what this is all about.

---

An API search engine in Elm for Elm

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.

garybernhardt

This document has moved!

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.

geovanisouza92

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

Cmdv

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')