ZWkang

Cheng Lou - On the Spectrum of Abstraction

Cheng Lou, a former member of the React team, gave an incredible talk at React Europe 2016 entitled "On the Spectrum of Abstraction". That talk is available for viewing here: https://www.youtube.com/watch?v=mVVNJKv9esE

It's only a half-hour, but it is mind-blowing. It's worth re-watching two or three times, to let the ideas sink in.

I just rewatched the talk for some research, and wrote down a summary that's semi-transcript-ish. I didn't see any other transcripts for this talk, other than the auto-generated closed captions, so I wanted to share for reference.

Summary

ZWkang

Using src/node_modules/ for module development

The issue 👎

Often you'll find that you need utility methods or other functionality that might make sense as an external module that you could :tada: open source 🎉, but the process can be painful:

1. create a directory outside the project
2. initialize a git repo

ZWkang

Shallow

Real unit test (isolation, no children render)

Simple shallow

Calls:

• constructor
• render

ZWkang

const {createJestRunner} = require('create-jest-runner')

module.exports = createJestRunner(require.resolve('./node-runner'))

ZWkang

NOTE I now use the conventions detailed in the SUIT framework

Template Components

Used to provide structural templates.

Pattern

t-template-name

ZWkang

1. Learn in public

this essay has been updated on my personal site, together with a followup on how to get started

If there's a golden rule, it's this one, so I put it first. All the other rules are more or less elaborations of this rule #1.

You already know that you will never be done learning. But most people "learn in private", and lurk. They consume content without creating any themselves. Again, that's fine, but we're here to talk about being in the top quintile. What you do here is to have a habit of creating learning exhaust. Write blogs and tutorials and cheatsheets. Speak at meetups and conferences. Ask and answer things on Stackoverflow or Reddit. (Avoid the walled gardens like Slack and Discourse, they're not public). Make Youtube videos or Twitch streams. Start a newsletter. Draw cartoons (people loooove cartoons!). Whatever your thing is, make the thing you wish you had found when you were learni

ZWkang

/* ex:ts=2:et: */
/*jslint bitwise: true, browser: true, eqeqeq: true, evil: true, immed: true, newcap: true,
    nomen: true, plusplus: true, regexp: true, undef: true, white: true, indent: 2 */
/*globals */

var Haml = {};

// Bind to the exports object if it exists. (CommonJS and NodeJS)
if (exports) {
  Haml = exports;

ZWkang

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
• elem.getClientRects(), elem.getBoundingClientRect()

ZWkang

/**
 * Module dependencies.
 */

var fs = require('fs');

var css = fs.readFileSync('style.css', 'utf8');

function scan(buf) {

ZWkang

function FunctionBind(this_arg) { // Length is 1.
  if (!IS_FUNCTION(this)) {
      throw new $TypeError('Bind must be called on a function');
  }
  // this_arg is not an argument that should be bound.
  var argc_bound = (%_ArgumentsLength() || 1) - 1;
  if (argc_bound > 0) {
    var bound_args = new $Array(argc_bound);
    for(var i = 0; i < argc_bound; i++) {
      bound_args[i] = %_Arguments(i+1);