Kevin R theklr

Demo: Coordinating async React with non-React views

tl;dr I built a demo illustrating what it might look like to add async rendering to Facebook's commenting interface, while ensuring it appears on the screen simultaneous to the server-rendered story.

A key benefit of async rendering is that large updates don't block the main thread; instead, the work is spread out and performed during idle periods using cooperative scheduling.

But once you make something async, you introduce the possibility that things may appear on the screen at separate times. Especially when you're dealing with multiple UI frameworks, as is often the case at Facebook.

How do we solve this with React?

Helper function

This function create a saga that runs the sagas in the startingSagas array and takes the actions with type indicated by changeActionType to replace the running sagas. The replacing actions must have a field sagas cointaining the array with the new sagas.

function createDynamicSaga (changeActionType, startingSagas) {
  function* _start (sagas) {
    try {
      yield sagas

Open in Atom

Open Automator
Create a new Service
Set “Service receives selected” to files or folders in any application
Add a Run Shell Script action
Set the script action to /usr/local/bin/atom -n "$@"
Set “Pass input” to as arguments
Save as Open in Atom

[12:03 AM] acemarke: "controlled" and "uncontrolled" inputs
[12:04 AM] acemarke: if I have a plain, normal HTML page, and I put <input id="myTextbox" type="text" /> in my page(edited)
[12:04 AM] acemarke: and I start typing into that textbox
[12:04 AM] acemarke: it remembers what I've typed. The browser stores the current value for that input
[12:05 AM] acemarke: and then sometime later, I can get the actual element, say, const input = document.getElementById("myTextbox"), and I can ask it for its value: const currentText = input.value;
[12:05 AM] acemarke: good so far?
[12:08 AM] acemarke: I'll keep going, and let me know if you have questions
[12:08 AM] lozio: ok, actually I'm reading
[12:09 AM] lozio: good
[12:09 AM] acemarke: so, a normal HTML input field effectively stores its own value at all times, and you can get the element and ask for its value

Strictly Frameworks

Mobiledoc - github.com/bustle/mobiledoc-kit - framework to build editors with a standardized JSON structure
ShareDB - github.com/share/sharedb - framework to sync any JSON document using operational transforms, add real-time collaborative editing to anything else
Bangle.dev - github.com/bangle-io/bangle.dev - toolkit built for building editors, based on prosemirror

Abstracted Editors

These use separate document structures instead of HTML, some are more modular libraries than full editors

	const obj = { a: 1, c: 3, b: 2 }

	// Map from object.
	const myMap = new Map(Object.entries(obj))

	// Map to Object.
	// NOTE: Keys will be cast to strings by `.toString`, so any "complex" key like for example `[1, 2]` will become `1,2`
	const newObj = [...myMap.entries()]
	.reduce((acc, [key, value]) => (Object.assign(acc, { [key]: value })), {})

	const wait = (
	time,
	cancel = Promise.reject()
	) => new Promise((resolve, reject) => {
	const timer = setTimeout(resolve, time);
	const noop = () => {};

	cancel.then(() => {
	clearTimeout(timer);
	reject(new Error('Cancelled'));

	/*
	This is a minimal working example
	*/

	import React, { Component } from 'react';
	import Filters from './Filters';
	import InputFilter from './InputFilter';
	import allMovies from './movies';

	class App extends Component {

	import { take, put, call, fork, cancel, cancelled } from 'redux-saga/effects'

	import {EVENT_POLLING_START, EVENT_POLLING_STOP} from "constants/eventPolls";
	import {ClientEventType} from "constants/serverEvents";



	function* handleEventA(serverEvent) {
	yield put({type : serverEvent.type, payload : {name : serverEvent.eventAData}});
	}

	- Open Automator
	- File -> New -> Service
	- Change "Service Receives" to "files or folders" in "Finder"
	- Add a "Run Shell Script" action
	- Change "Pass input" to "as arguments"
	- Paste the following in the shell script box: open -n -b "com.microsoft.VSCode" --args "$*"
	- Save it as something like "Open in Visual Studio Code"