Charlie Martin cmmartin

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?

ESM modules in node: npm edition

The proposal you’re about to read is not just a proposal. We have a working implementation of almost everything we discussed here. We encourage you to checkout and build our branch: our fork, with the relevant branch selected. Building and using the implementation will give you a better understanding of what using it as a developer is like.

Our implementation ended up differing from the proposal on some minor points. As our last action item before making a PR, we’re writing documentation on what we did. While I loathe pointing to tests in lieu of documentation, they will be helpful until we complete writing docs: the unit tests.

This repo also contains a bundled version of npm that has a new command, asset. You can read the documentation for and goals of that comma

https://twitter.com/snookca/status/1073299331262889984?s=21

‪“‬In what way is JS any more maintainable than CSS? How does writing CSS in JS make it any more maintainable?”

‪Happy to chat about this. There’s an obvious disclaimer that there’s a cost to css-in-js solutions, but that cost is paid specifically for the benefits it brings; as such it’s useful for some usecases, and not meant as a replacement for all workflows. ‬

‪(These conversations always get heated on twitter, so please believe that I’m here to converse, not to convince. In return, I promise to listen to you too and change my opinions; I’ve had mad respect for you for years and would consider your feedback a gift. Also, some of the stuff I’m writing might seem obvious to you; I’m not trying to tell you if all people of some of the details, but it might be useful to someone else who bumps into this who doesn’t have context)‬

So the big deal about css-in-js (cij) is selectors.

	var OFF = 0, WARN = 1, ERROR = 2;

	module.exports = exports = {
	"env": {
	"es6": true
	},

	"ecmaFeatures": {
	// env=es6 doesn't include modules, which we are using
	"modules": true

	exports.knex = require('knex')({
	client: 'pg',
	connection: {
	host : '127.0.0.1',
	user : 'your_database_user',
	password : 'your_database_password',
	database : 'myapp_test'
	}
	});

	# Assumes the database container is named 'db'

	DOCKER_DB_NAME="$(docker-compose ps -q db)"
	DB_HOSTNAME=db
	DB_USER=postgres
	LOCAL_DUMP_PATH="path/to/local.dump"

	docker-compose up -d db
	docker exec -i "${DOCKER_DB_NAME}" pg_restore -C --clean --no-acl --no-owner -U "${DB_USER}" -d "${DB_HOSTNAME}" < "${LOCAL_DUMP_PATH}"
	docker-compose stop db

	(function() {
	var monthInputs = document.querySelectorAll('input[type="month"]'),
	checkDateInput = document.createElement('input'),
	dateSupported = false,
	months = [],
	lang = document.documentElement.lang \|\| navigator.language,
	DEFAULT_SPAN = 5;

	if (monthInputs[0].type === 'month') {
	// browser supports month input; no need for polyfill

	// Adds a lovely fade in of the modal
	// and a gentle slide-down of the modal content
	class Demo extends React.Component {
	state = { showDialog: false };
	render() {
	return (
	<div>
	<button onClick={() => this.setState({ showDialog: true })}>
	Show Dialog
	</button>

	// load variables
	require('dotenv').config();

	// load dependencies
	const crypto = require('crypto');

	'use strict';

	const APP_KEY = process.env.APP_KEY;

	int doubler(int x) {
	return 2 * x;
	}