Stephen Smyth kaheglar

You'll find the talks here

Morgan Williams @mrgnw

The Zen of Svelte

Approaching frontend as a backend developer, Svelte feels surprisingly pythonic. Let's take a quick look at what's familiar, what's foreign, and how to explore the gap.

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

Rollup 0.48 introduces a few changes to the options object, because the current options are confusingly different between the CLI and the options exported by your config file.

Changes to the config file

entry is now input
sourceMap and sourceMapFile are now sourcemap and sourcemapFile (note casing)
moduleName is now name
useStrict is now strict

The dest and format options are now grouped together as a single output: { file, format, ... } object. output can also be an array of { file, format, ... } objects, in which case it behaves similarly to the current targets. Other output options — exports, paths and so on — can be added to the output object (though they will fall back to their top-level namesakes, if unspecified).

HTTP Streaming (or Chunked vs Store & Forward)

The standard way of understanding the HTTP protocol is via the request reply pattern. Each HTTP transaction consists of a finitely bounded HTTP request and a finitely bounded HTTP response.

However it's also possible for both parts of an HTTP 1.1 transaction to stream their possibly infinitely bounded data. The advantages is that the sender can send data that is beyond the sender's memory limit, and the receiver can act on

Using RequireJS and loading UMD scripts normally

Mixing an AMD script loading solution with a traditional script loading solution with UMD modules causes a conflict.

Two approches to loading scripts

The traditional way to load a script is to manually add a script tag on the page like this:

	import ReactDOM from "react-dom";
	import { RemixBrowser } from "remix";

	// hydrate a fake Document with the patch:
	ReactDOM.hydrate(<RemixBrowser />, {
	childNodes: [document.documentElement],
	firstChild: document.documentElement,
	appendChild(n) { document.replaceChild(n, document.documentElement); },
	insertBefore(n) { this.appendChild(n); }
	});

	var preact = require('preact');
	var createRenderer = require('./preact-dom-renderer');

	// set up a rendering target
	var renderer = createRenderer();

	// render some stuff into the internal DOM
	renderer.render(preact.h(PreactApp, pageConfig));

	// get a snapshot of the current HTML

	var str = 'class ಠ_ಠ extends Array {constructor(j = "a", ...c) {const q = (({u: e}) => {return { [`s${c}`]: Symbol(j) };})({});super(j, q, ...c);}}' +
	'new Promise((f) => {const a = function* (){return "\u{20BB7}".match(/./u)[0].length === 2 \|\| true;};for (let vre of a()) {' +
	'const [uw, as, he, re] = [new Set(), new WeakSet(), new Map(), new WeakMap()];break;}f(new Proxy({}, {get: (han, h) => h in han ? han[h] ' +
	': "42".repeat(0o10)}));}).then(bi => new ಠ_ಠ(bi.rd));';

	try {
	eval(str);
	} catch(e) {
	alert('Your browser does not support ES6!')
	}

	var systemJsLoader = {
	loadComponent: function (name, templateConfig, callback) {
	if (templateConfig.systemjs) {
	SystemJS.import(templateConfig.systemjs)
	.then(function (viewModelCtor) {
	callback({
	createViewModel: function (params, componentInfo) {
	return viewModelCtor.viewModel(params, componentInfo);
	},
	template: ko.utils.parseHtmlFragment(viewModelCtor.template)