WebReflection

About

Highly Experimental

If you are using this already, consider changes soon due the discussion around current ESX proposal.

Feel free to keep an eye on udomsay as that will be the implementation reference for consumers.

---

justinfagnani

Maximally Minimal Mixins

justinfagnani@google.com

Last Updated: 2018-01-23

Status: Draft

View TC39 Slides

Goals

idibidiart

Building a Maintainable, Agile Architecture for Realtime, Transactional Apps

A maintainable application architecture requires that the UI only contain the rendering logic and execute queries and mutations against the underlying data model on the server. A maintainable architecture must not contain any logic for composing "app state" on the client as that would necessarily embed business logic in the client. App state should be persisted to the database and the client projection of it should be composed in the mid tier, and refreshed as mutations occur on the server (and after network interruption) for a highly interactive, realtime UX.

With GraphQL we are able to define an easy-to-change application-level data schema on the server that captures the types and relationships in our data, and wiring it to data sources via resolvers that leverage our db's own query language (or data-oriented, uniform service APIs) to resolve client-specified "queries" and "mutations" against the schema.

We use GraphQL to dyn

Yaffle

// `Array#sort` implementation using the merge sort
// Notes:
// 1) calls comparator for undefined values, holes, values from the prototype chain;
// 2*) replaces holes with undefined values or values from the prototype chain;
// 3*) does not use `ToObject(this)`, `ToLength(this.length)`;
// 4*) does not throw errors for non-undefined non-function `comparefn`.
// 5*) uses `Math`, `Math.floor`, `String`, `Array`.
// 6*) calls setters of `Array.prototype` during internal buffer initialization.
// * This behaviour is inconsistent across browsers even for built-in `Array#sort`.

lambdahands

Huh?

So basically FlowType doesn't know about CSS Modules, a really handy way of dealing with the plagues of CSS in codebases (global variables and dependency wackiness mainly).

What WebPack allows us to do is "require" CSS files and use their class names:

import styles from "my_styles.css";
import React from "react";

paulirish

Just jotting some notes on delivering webfonts performantly…

still an incomplete draft.

Any critical fonts must be requested asap.

Critical fonts are neccessary for the above-the-fold content to be useful. Identify which of the fonts you NEED for the first render, as they get very different treatment vs the others.

You want the network reqs for your critical fonts to start ASAP. ideally the @font-face req is in a style tag, following CRP guidelines

hzoo

// Flow Type Examples
// https://github.com/babel/babel/blob/65a44a1e131c8bc336b218991bae7548176de283/src/babel/types/alias-keys.json#L79-L110
// https://github.com/babel/babel/blob/088846a3479375a51d71084cb4fd70ef8fa21d29/src/babel/generation/generators/flow.js

/// Primitives

// AnyTypeAnnotation
var x : any;
// BooleanTypeAnnotation
var x : bool;

schempy

var http = require('http');
var router = require('routes')();
var Busboy = require('busboy');
var AWS = require('aws-sdk');
var inspect = require('util').inspect;
var port = 5000;

// Define s3-upload-stream with S3 credentials.
var s3Stream = require('s3-upload-stream')(new AWS.S3({
  accessKeyId: '',

sebmarkbage

var Bar1 = base => class extends base {
  componentWillMount(){
    super.componentWillMount();
    console.log('Bar1');
  }
};

var Bar2 = base => class extends base {
  componentWillMount(){
    super.componentWillMount();

monostere0

(function(window){

	var EVENT_EXISTS = 'GlobalEvents: Event already exists.';

	var eventIsRunning, 
		_eventStack,
		_findByName,
		stackEvent,
		removeEvent,
		eventListener,