Non-blocking JavaScript Code

Non-blocking JavaScript Code

whoami

• 5 years of moving buttons 3px to the left
• FrontEnd Dev @ DataRobot
• Making some Open Source
• Functional Programming Monk

λ

There is no
silver bullet, right?

Function is your minigun full of
silver bullets!

Are your writing non-blocking code?

Are your writing asyncronous code?

Or you force the user to wait?

Winter ES2016
is coming!

Stage 3

Stage 3

What is it? The proposal is mostly finished and now needs feedback from implementations and users to progress further.

Dr. Axel Rauschmayer: What’s in ECMAScript 2016 (ES7)?

async/await

Interactive & Reactive

Interactive & Reactive

			// interactive
			const data = getData(param);
			process(data);
		

			// reactive
			getData(param)
			  .then(data => process(data));
		

Interactive (pull)

			function getCompanyByUser(userId) {
			  const user = getUser(userId);
			  const company = getCompany(user.companyId);
			 
			  return company;
			}
		

Reactive (push)

			function getCompanyByUser(userId) {
			  return getUser(userId)
			    .then(user => getCompany(user.companyId));
			}
		

Interactive > Reactive

• Async (non-blocking) actions require reactive (push-based) pattern
• Reactive pattern increases nesting if data is coupled or context should be saved

What if?

Async code with interactive syntax!

Coroutines

Coroutines are computer program components with multiple entry points for suspending and resuming execution at certain locations. Coroutines are well-suited for implementing more familiar program components such as cooperative tasks, exceptions, event loop, iterators, infinite lists and pipes.

Generator

In computer science, a generator is a special routine that can be used to control the iteration behaviour of a loop. In fact, all generators are iterators.

Generator

			function* fib() {

			

				  let [a, b] = [1, 1];
				 
			

			

				  while (true) {
				    yield a;
				    [a, b] = [b, a + b];
				  }
				}
			
		

Generators are cool!

			function* fib(a = 1, b = 1) {
			    yield a;
			    yield* fib(b, a + b);
			}
		

How to use it?

			const iter = fib();
			iter.next(); // { value: 1, done: false }
			iter.next(); // { value: 1, done: false }
			iter.next(); // { value: 2, done: false }
			iter.next(); // { value: 3, done: false }
			iter.next(); // { value: 5, done: false }
			iter.next(); // { value: 8, done: false }
		

npm i co

Interactive, sync

			function getCompanyByUser(userId) {
			  const user = getUser(userId);
			  const company = getCompany(user.companyId);
			 
			  return company;
			}
		

Interactive, async

			const getCompanyByUser = co.wrap(function* (userId) {
			  const user = yield getUser(userId);
			  const company = yield getCompany(user.companyId);
			 
			  return company;
			});
		

This code works in the newest browsers without any compilation steps.

Say no to callbacks!

Don't event speak with callbacks!

npm i regenerator

npm i babel
babel-runtime

Be careful with
Babel 6

v5.8.x is stable

Interactive, sync

			function getCompanyByUser(userId) {
			  const user = getUser(userId);
			  const company = getCompany(user.companyId);
			 
			  return company;
			}
		

Interactive, async

			async function getCompanyByUser(userId) {
			  const user = await getUser(userId);
			  const company = await getCompany(user.companyId);
			 
			  return company;
			}
		

a => f(g(a))

async a =>
f(await g(a))

Projects

• Co
• Regenerator, Babel

Articles

• Callbacks vs Coroutines
• ES7 async functions
• Dr. Axel Rauschmayer: What’s in ECMAScript 2016 (ES7)?

Thank you!

• twitter.com/alexeyraspopov
• github.com/alexeyraspopov

Link to these slides —
alexeyraspopov.github.io/async-await