Rethink async!

Level up with Reactive Programming in ES2018

by Sebastian Wennemers
(@S7nW7s)
Architect SAPUI5 Flexibility

Back in 2017 @ UI5con Frankfurt

Reactive?

Don't call us, we call you (Inversion of Control)

Event driven

Compose declarative Event streams
(instead of callback hell)

NOW we have ES2018

iterators & generators

for of loops

async - await

async iterators & generators

async for of loops

Iterators (ES2015)

				
var someIterableObject = {
	[Symbol.iterator]: function(){
		var i = 1;
		return {
			next: function() {
				if (i <= 42) {
					return {done: false, value: "Chunk " + i++ };
				} else {
					return {done: true};
				}
			}
		}
	}
}

next(): Chunk 1 Chunk 2 Chunk 3 ... Chunk 42 DONE

Generators (ES2015)

				
var someIterableObject = {
	getChunksGeneratorFunction: function* (){ 	//returns an iterator
		for (var i=1; i <= 42; i++) {
			yield "Chunk " + i;		//next value
		}
		/* can be implicit */return; 		//done
	}
}

Yielding: Chunk 1 Chunk 2 Chunk 3 ... Chunk 42 DONE

Working with iterators 

				
var iterator = someIterableObject[Symbol.iterator]();
for (var result = iterator.next(); !result.done; result = iterator.next()) {
	console.log(result.value);
}

for-of loop (ES2015)

				
for (var value of someIterableObject.getChunksGeneratorFunction()){
	console.log(value)
}

Async / await (ES2017)

				
function doSomethingAsync(){
	//make some backend call, etc.
	//return a promise
	return Promise.resolve(5)
}

async function doAsyncStuff(url) {
	try {
		var iResolvedValue = await doSomethingAsync();
		return iResolvedValue + 1; //will be wrapped into promise as it is an async function
	}
	catch (error) {
		console.log("ERROR: " + error.stack);
	}
}

Let's combine iteration + async/await

Async Iterators (ES2018)

				
var someIterableObject = {
	[Symbol.asyncIterator]: function(){
		var i = 1;
		return {
			next: function() {
				if (i <= 42) {
					return Promise.resolve({done: false, value: "Chunk " + i++ });
				} else {
					return Promise.resolve({done: true});
				}
			}
		}
	}
}

Async Generators (ES2018)

				
function someAsyncOperation() {
	/* something async */
	Promise.resolve(1);
}

var someIterableObject = {
	getAsyncChunksGeneratorFunction: async function* (){ 	//returns an async iterator
		for (var i=1; i <= 42; i++) {
			var value = await someAsyncOperation();	//next() return now with a promise
			yield "Chunk " + i + value;	//resolves next value after someAsyncOperation
		}
		/* can be implicit */return; 			//done
	}
}

Working with async iterators 

				
var iterator = someIterableObject[Symbol.asyncIterator]();
iterator.next().then(function(result){
	if (!result.done){
		console.log(result.value);
	}
});

Async for-of loop (ES2018)

				
for async (var value of someIterableObject.getAsyncChunksGeneratorFunction()){
	console.log(value)
}

Why so much theory?

Let's build the reactive sample with ES2018

Thank you.
Contact information:

Sebastian Wennemers
@S7nW7s
Architect SAPUI5 Flexibility

Credits