Прячем асинхронность в Narrative JavaScript

Narrative JavaScript - расширение Javascript (прекомпилируемое в обычный Javascript), которое делает асинхронные вызовы блокирующимися. При помощи Narrative JavaScript можно реализовать функцию sleep() и описывать сложные асинхронные последовательности запросов обычным, линейным кодом без каллбэков.

Narrative JavaScript реализован через компилятор, который переводит специфичные "фишки" расширения в обычный, понимаемый браузерами JS-код.

Зачем?

В JavaScript - код не может блокироваться и ждать наступления события. Событие должно обрабатываться отдельным, асинхронным обработчиком. Иногда это удобно, но часто заставляет разбивать с виду простую последовательность действий на множество по сути ненужных функций.

Narrative JavaScript добавляет "yielding operator" для функций, который блокирует выполнение до наступления события. Функция приостанавливается, пока не наступит событие, а затем продолжает выполнение в точке, где произошла остановка.

Это позволяет вместо сложной последовательности асинхронных обработчиков - писать простой, линейный, читабельный код.

Библиотека появилась как результат долгой работы по написанию и отладке сложных AJAX-приложений.

Как это работает?

Narrative JavaScript состоит из компилятора и runtime библиотеки. Вы пишете код как линейный Narrative JavaScript, используя yielding operator, и компилятор распарсивает и переводит этот код в обычный (асинхронный) JavaScript. Затем Вы размещаете откомпилированный код на сервере вместе с runtime-библиотекой.

Пример

Эта функция sleep приостанавливает выполнение на millis секунд БЕЗ поедания CPU и блокирования остальных процессов.

function sleep(millis) {
	var notifier = new EventNotifier();
	setTimeout(notifier, millis);
	notifier.wait->();
}

С ее помощью можно реализовать анимацию с паузами между кадрами:

function animate(element, property, endValue, duration, frequency) {    
	// calculate animation variables
	var frameCount = Math.ceil(duration/frequency);
	var startValue = parseInt(element.style[property], 10);
	var distance = endValue - startValue;
	var jumpSize = Math.ceil(distance/frameCount);
	
	// do the animation
	for (var i = 0; i < frameCount - 1; i++) {
		var nextValue = startValue + (jumpSize * i);
		element.style[property] = nextValue + "px";
		// note the yielding operation
		sleep->(frequency);
	}
	
	element.style[property] = endValue + "px";
}

Cайт

Если Вас заинтересовало это краткое описание - сайт библиотеки находится на http://www.neilmix.com/narrativejs/doc/

Там ее можно скачать, а также почитать более подробные примеры и документацию.