Requirements

This document requires you to:

• know Javascript language and be able to read and understand simple algorithms;
• understand the basic about asynchronous nature of Javascript;
• be able to read English with bad grammar.

When developing with Synk, the target browser must support:

• document.querySelector function;
• generator functions of the ECMA6 specification;
• classes of the ECMA6 specification.

Golden times

Remember the golden times...

You are a bit nostalgic with those black screens with one command at time, heh?

Javascript is too asynchronous and does not fit on your good manners?

Welcome to your dreams!

Remember old Pascal?

program SchoolGrades;

var n1,n2,n3,total: Integer;

begin
    WriteLn('Write the 1st school grade:');
    ReadLn(n1);
    WriteLn('Write the 2nd school grade:');
    ReadLn(n2);
    WriteLn('Write the 3rd school grade:');
    ReadLn(n3);
    total = (n1 + n2 + n3) div total;
    WriteLn('The total is ', total);
    if (total >= 7)
        WriteLn('Student passed!');
    else
        WriteLn('Student failed!');
end.

Very good! But how would you do it in Javascript getting the values in only one input?

Spliting the text with comma? A maze of callbacks?

Or maybe the 6th version of ECMA is more retro-compatible than expected?

“I can not” or “I should not”? Nevermind, it's done!

In my mother language, we call it gambiarra — a bunch of quick fixes.

Let's see the philosophy: Javascript do asynchronous calls for many processes and the answer come with that maze of callbacks. It is so with DOM events, Ajax and others...

GeneratorFunctions, in other hand, will stop the execution when a value is yielded, and resume when called again.

Blocking the Function

MacGyver still live in our hearts...

In theory a GeneratorFunction can wait until a value is given and wake up when called by an external observer.

Is it valid in real world?

First we include our wonderful and amazing and... *sigh* First we include our tiny library Synk and its Snippets (we'll see later).

Now we create the generator function yielding asynchronous tasks:

function* SchoolGrades(){
    // Declare the variables
    var n1, n2, n3, t;

    // WriteLn (set the text)
    sample1_nth.innerText = 'first';

    // ReadLn (wait for input)
    yield new Snippet.DomEvent('submit', '#sample1_form');
    n1 = Number(sample1_n.value);
    sample1_n.value = '';
    sample1_vn1.innerText = n1;

    sample1_nth.innerText = 'second';
    yield new Snippet.DomEvent('submit', '#sample1_form');
    n2 = Number(sample1_n.value);
    sample1_n.value = '';
    sample1_vn2.innerText = n2;

    sample1_nth.innerText = 'third';
    yield new Snippet.DomEvent('submit', '#sample1_form');
    n3 = Number(sample1_n.value);
    sample1_n.value = '';
    sample1_vn3.innerText = n3;

    // Calc the average grade
    t = Math.round(((n1+n2+n3) / 3)*10)/10;
    sample1_vt.innerText = t;

    // Dramatic delay
    yield new Snippet.Delay(2000);

    // Show status
    if (t >= 7)
        sample1_vstatus.innerText = 'student passed';
    else
        sample1_vstatus.innerText = 'student failed';
}

Now we should call our function and handle those "yields" statements.

We can do it creating a Synk instance and giving our function to it:

var synk = new Synk(SchoolGrades);

Below we have this code working!

Live example

What is next?

Now that you trust us, you can see the documentation.