Ilya ilyavf

Essential JavaScript Links

A curated list by Eric Elliott and friends. Suggest links in the comments below.

This is a very exclusive collection of only must-have JavaScript links. I'm only listing my favorite links. Nothing else makes the cut. Feel free to suggest links if you think they're good enough to make this list. The really curious should feel free to browse the comments to find other links. I can't guarantee the quality of links in the comments.

Full Disclosure

Some of these links are affiliate links, meaning that if you make a purchase, I might earn a little money. This has absolutely no bearing on whether or not links make the list. None, whatsoever. However, it does allow me more resources to fight poverty with code. Every little bit counts.

Caching and Minimal Data Requests

http://donejs.com/Features.html#section=section_Cachingandminimaldatarequests

Description:

DoneJS applications are able to do variety of performance improvements by intelligently managing the data layer.

One of the slowest actions for a web page is a network request. SPA tend to do a lot of AJAX calls asking server for necessary data. Latency is more noticeable during initial load of the application, but also if a lot of user actions on the page are accompanied by AJAX calls, user might soon get bored with loading spinners. Also, consider browsing from a mobile device where network connection could be unstable or slow, it might be very difficult to create a responsive user experience.

There are the following five strategies available to help reduce the amount and size of data requests:

Right Notes

Coding Conventions

Whitespace

Always spaces, never tabs
2 spaces indents

The ./ is used to refer to current scope without parent lookup. The ../ is used to look up values in parent scope. A scope is defined:

either for a helper like: {{#each items}} here current scope {{./}} will refer to the current element of items {{/each}}
or for a component: <bit-tabs> here {{./}} will refer to bit-tabs' viewModel </bit-tabs>.

The lookup is done automatically, but if one and the same property is defined (or even undefined but still intended to be) for both the current scope and the parent scope, then you may want to specify which one you want to refer to by using {{../}} to climb up to parent or by {{./}} to stay on current scope.

The rough-demo.html just shows whats needed to make the demo working.

The rest is the better structurized example:

demo.html - demo with less boilerplate.
contribution-months.js - exports mockContributionMonthsService that expects mockServer and mocks Feathers service for contributionMonths;
contribution-months.json - json data for can-fixture.store to be used for mocking Feathers service.

Socket.io, can-fixture-socket and mocked services need to be evaluated before importing app models.

Async tests have to wait till dynamic import completes.

TL;DR

To test a module that uses socket.io we need to intercept a socket.io connection and mock a server responses. If a module tries to establish a socket.io connection immediately on a module evaluation then it won't reach the mocked socket.io.

To overcome the problem we either have to delay the evaluation of the modules we test, or delay establishing the socket.io connection.

The steal-socket package addresses the problem using the second option.

Overview

Goal

Show how to test RESTful front-end models that use socket.io as its transport.

Plan

Warm up: build a small app with realtime communication using socket.io (maybe a chat).
Refactor: rebuild model layer to be RESTful via sockets.
Ask how should we test this, and talk about options.
Show what can-socket-fixture is for, and try to test with it.

Install project

$ git clone https://github.com/donejs/bitcentive && cd bitcentive
$ git checkout fail-loading
$ npm install
$ npm start

Note: the app is served from /public with its own /public/node_modules.

	...
	grunt.initConfig({
	'steal-build': {
	main: {
	options: {
	system: {
	config: __dirname + '/package.json!npm',
	main: 'index'
	},
	buildOptions: {