1. Introduction
Many, many, many years ago, in my local bookstore, I had my first experiences with computers. I typed in my first program and always thought what it did was cool:
<SPAN class="number token">10</SPAN> <SPAN class="keyword token">PRINT</SPAN> <SPAN class="string token">"HELLO"</SPAN>
<SPAN class="number token">20</SPAN> <SPAN class="keyword token">GOTO</SPAN> <SPAN class="number token">10</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN></SPAN>
Today, I'm going to look into iterators and generators, and, yes, make a connection to how these latest features in ECMAScript 7 update of AppStudio 3.3 and Qt 5.12.1 aren't too dissimilar from old school concepts.
2. For Of Iterators
In my previous blog, I talked about "For Of" and showed that it works with Javascript iterators and Javascript generators.
<SPAN class="keyword token">function</SPAN> <SPAN class="operator token">*</SPAN><SPAN class="token function">cities</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">yield</SPAN> <SPAN class="punctuation token">{</SPAN> name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Hawaii"</SPAN><SPAN class="punctuation token">,</SPAN> distance<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">4221.73</SPAN> <SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">yield</SPAN> <SPAN class="punctuation token">{</SPAN> name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Los Angeles"</SPAN><SPAN class="punctuation token">,</SPAN> distance<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">96.65</SPAN> <SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">yield</SPAN> <SPAN class="punctuation token">{</SPAN> name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"New York City"</SPAN><SPAN class="punctuation token">,</SPAN> distance<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">3853.10</SPAN> <SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">yield</SPAN> <SPAN class="punctuation token">{</SPAN> name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Redlands"</SPAN><SPAN class="punctuation token">,</SPAN> distance<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">1.12</SPAN> <SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">yield</SPAN> <SPAN class="punctuation token">{</SPAN> name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Seattle"</SPAN><SPAN class="punctuation token">,</SPAN> distance<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">1566.70</SPAN> <SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN> <SPAN class="keyword token">let</SPAN> city <SPAN class="keyword token">of</SPAN> <SPAN class="token function">cities</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">)</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN> JSON<SPAN class="punctuation token">.</SPAN><SPAN class="token function">stringify</SPAN><SPAN class="punctuation token">(</SPAN> city <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">)</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>View the full ForIter.qml on GitHub. Try it now on AppStudioBlogIterators | WebAssembly.
In the above example, we declare a Javascript generator which produces cities with their name and their distance from ESRI. We turn that Javascript generator into a Javascript iterator when we "call" it, i.e. cities(). As a Javascript iterator, we use a "for of" loop to process the results.
So far, nothing special. You can glean this sort of thing from any blog about Javascript iterators.
If we replace the "for of" syntax with a somewhat traditional looking "while" loop, we get to see some inner workings of the Javascript iterator:
<SPAN class="keyword token">function</SPAN> <SPAN class="operator token">*</SPAN><SPAN class="token function">cities</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">yield</SPAN> <SPAN class="punctuation token">{</SPAN> name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Hawaii"</SPAN><SPAN class="punctuation token">,</SPAN> distance<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">4221.73</SPAN> <SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">yield</SPAN> <SPAN class="punctuation token">{</SPAN> name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Los Angeles"</SPAN><SPAN class="punctuation token">,</SPAN> distance<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">96.65</SPAN> <SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">yield</SPAN> <SPAN class="punctuation token">{</SPAN> name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"New York City"</SPAN><SPAN class="punctuation token">,</SPAN> distance<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">3853.10</SPAN> <SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">yield</SPAN> <SPAN class="punctuation token">{</SPAN> name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Redlands"</SPAN><SPAN class="punctuation token">,</SPAN> distance<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">1.12</SPAN> <SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">yield</SPAN> <SPAN class="punctuation token">{</SPAN> name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Seattle"</SPAN><SPAN class="punctuation token">,</SPAN> distance<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">1566.70</SPAN> <SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">const</SPAN> iter <SPAN class="operator token">=</SPAN> <SPAN class="token function">cities</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="keyword token">let</SPAN> city <SPAN class="operator token">=</SPAN> iter<SPAN class="punctuation token">.</SPAN><SPAN class="token function">next</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="keyword token">while</SPAN> <SPAN class="punctuation token">(</SPAN> <SPAN class="operator token">!</SPAN>city<SPAN class="punctuation token">.</SPAN>done <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN> JSON<SPAN class="punctuation token">.</SPAN><SPAN class="token function">stringify</SPAN><SPAN class="punctuation token">(</SPAN> city<SPAN class="punctuation token">.</SPAN>value <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">)</SPAN>
city <SPAN class="operator token">=</SPAN> iter<SPAN class="punctuation token">.</SPAN><SPAN class="token function">next</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>View the full WhileIter.qml on GitHub. Try it now on AppStudioBlogIterators | WebAssembly.
The first impression is this "while" version looks a bit hard to swallow. The "for of" shorten version looks cleaner. When you think about it, this version actually gives you more insight into the "yield" keyword. When "yield" is used, a value is returned from the Javascript generator, and the Javascript generator pauses execution until the next time we call "iter.next()".
At first, this may seem like an alien concept, but, if you look harder, you'll see this pattern in a lot of places, some quite old.
3. Unix head and tails
On Unix, we learn that in shell programming, we can join Unix commands together using Unix pipes. A pipe is a form of redirection that is used in Unix to send output from one program to another for further processing. The first process is not completed before the second is started. They are executed concurrently.
$ cat cities<SPAN class="punctuation token">.</SPAN>txt<SPAN class="line-numbers-rows"><SPAN></SPAN></SPAN>
$ cat cities<SPAN class="punctuation token">.</SPAN>txt <SPAN class="operator token">|</SPAN> head <SPAN class="operator token">-</SPAN><SPAN class="number token">3</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN></SPAN>
$ cat cities<SPAN class="punctuation token">.</SPAN>txt <SPAN class="operator token">|</SPAN> head <SPAN class="operator token">-</SPAN><SPAN class="number token">3</SPAN> <SPAN class="operator token">|</SPAN> tail <SPAN class="operator token">-</SPAN><SPAN class="number token">2</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN></SPAN>
Whilst cat can produce 5 lines of text, in the above pipeline, it doesn't. The 3 Unix commands, cat, head and tail are executing concurrently. The cat command only needs to generate output, if the subsequent head and tail commands require it. In this example, we only require cat to generate 3 lines of text to fullfill the requirements of the subsequent head command.
We can mirror the above Unix statement in QML.
Button <SPAN class="punctuation token">{</SPAN>
text<SPAN class="punctuation token">:</SPAN> <SPAN class="token function">qsTr</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"LA and NYC cities"</SPAN><SPAN class="punctuation token">)</SPAN>
onClicked<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">function</SPAN> <SPAN class="operator token">*</SPAN><SPAN class="token function">cities</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">yield</SPAN> <SPAN class="punctuation token">{</SPAN> name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Hawaii"</SPAN><SPAN class="punctuation token">,</SPAN> distance<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">4221.73</SPAN> <SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">yield</SPAN> <SPAN class="punctuation token">{</SPAN> name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Los Angeles"</SPAN><SPAN class="punctuation token">,</SPAN> distance<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">96.65</SPAN> <SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">yield</SPAN> <SPAN class="punctuation token">{</SPAN> name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"New York City"</SPAN><SPAN class="punctuation token">,</SPAN> distance<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">3853.10</SPAN> <SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">yield</SPAN> <SPAN class="punctuation token">{</SPAN> name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Redlands"</SPAN><SPAN class="punctuation token">,</SPAN> distance<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">1.12</SPAN> <SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">yield</SPAN> <SPAN class="punctuation token">{</SPAN> name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Seattle"</SPAN><SPAN class="punctuation token">,</SPAN> distance<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">1566.70</SPAN> <SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">function</SPAN><SPAN class="operator token">*</SPAN> <SPAN class="token function">cat</SPAN><SPAN class="punctuation token">(</SPAN> iter <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">yield</SPAN><SPAN class="operator token">*</SPAN> iter
<SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">function</SPAN><SPAN class="operator token">*</SPAN> <SPAN class="token function">head</SPAN><SPAN class="punctuation token">(</SPAN> iter<SPAN class="punctuation token">,</SPAN> n <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>n <SPAN class="operator token"><=</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="keyword token">return</SPAN>
<SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">let</SPAN> item <SPAN class="keyword token">of</SPAN> iter<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">yield</SPAN> item
<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="operator token">--</SPAN>n <SPAN class="operator token"><=</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="keyword token">break</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">function</SPAN><SPAN class="operator token">*</SPAN> <SPAN class="token function">tail</SPAN><SPAN class="punctuation token">(</SPAN> iter<SPAN class="punctuation token">,</SPAN> n <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">let</SPAN> arr <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN> <SPAN class="punctuation token">]</SPAN>
<SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN> <SPAN class="keyword token">let</SPAN> item <SPAN class="keyword token">of</SPAN> iter <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
arr<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN>item<SPAN class="punctuation token">)</SPAN>
<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>arr<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">></SPAN> n<SPAN class="punctuation token">)</SPAN> arr<SPAN class="punctuation token">.</SPAN><SPAN class="token function">shift</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">yield</SPAN><SPAN class="operator token">*</SPAN> arr
<SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN> <SPAN class="keyword token">let</SPAN> city <SPAN class="keyword token">of</SPAN> <SPAN class="token function">tail</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="token function">head</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="token function">cat</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="token function">cities</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">3</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">2</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">)</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN> JSON<SPAN class="punctuation token">.</SPAN><SPAN class="token function">stringify</SPAN><SPAN class="punctuation token">(</SPAN> city <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>View the full HeadAndTails.qml on GitHub. Try it now on AppStudioBlogIterators | WebAssembly.
Similar to the Unix head, tail, cat commands, the above head, tail, cat Javascript generator functions start executing concurrently. The data pipeline occurs when callers consume data and the Javascript generator functions yield data.
Because of the requirements of the head generator call, we only require the cat generator and the cities generator to generate 3 lines of output.
4. Infinite loops no longer taboo
Traditionally, we consider CPU intensive and/or infinite loops to be taboo in Javascript.
<SPAN class="keyword token">function</SPAN> <SPAN class="token function">helloWorldTaboo</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">while</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">)</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="string token">"Hello World"</SPAN> <SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>They block the UI, they make the program unresponsive, they may eventually lead to a crash. We consider such code taboo and we have been trained to not write in that style. We require the developer to rewrite their applications to use signals and slots or callback functions that help unblock the UI.
Rules changes when it comes to Javascript generators and Javascript iterators. Apparent infinite loops are no longer taboo:
<SPAN class="keyword token">function</SPAN><SPAN class="operator token">*</SPAN> <SPAN class="token function">helloWorldGenerator</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">while</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="keyword token">yield</SPAN> <SPAN class="string token">"Hello World"</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>The following demonstrates the Javascript generator working with a Timer object. The program is not CPU intensive and not quite an infinite loop in that one can stop the invoking the Javascript generator by stopping the Timer.
Button <SPAN class="punctuation token">{</SPAN>
text<SPAN class="punctuation token">:</SPAN> <SPAN class="token function">qsTr</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"Run!"</SPAN><SPAN class="punctuation token">)</SPAN>
onClicked<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">function</SPAN><SPAN class="operator token">*</SPAN> <SPAN class="token function">helloWorldGenerator</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">while</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="keyword token">yield</SPAN> <SPAN class="string token">"Hello World"</SPAN>
<SPAN class="punctuation token">}</SPAN>
helloWorldTimer<SPAN class="punctuation token">.</SPAN>iter <SPAN class="operator token">=</SPAN> <SPAN class="token function">helloWorldGenerator</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN>
helloWorldTimer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">start</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN>
Timer <SPAN class="punctuation token">{</SPAN>
id<SPAN class="punctuation token">:</SPAN> helloWorldTimer
property <SPAN class="keyword token">var</SPAN> iter
running<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN>
repeat<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN>
interval<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN>
onTriggered<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">let</SPAN> item <SPAN class="operator token">=</SPAN> iter<SPAN class="punctuation token">.</SPAN><SPAN class="token function">next</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>item<SPAN class="punctuation token">.</SPAN>done<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="token function">stop</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="keyword token">return</SPAN>
<SPAN class="punctuation token">}</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN> item<SPAN class="punctuation token">.</SPAN>value <SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>View the full InfiniteHello.qml on GitHub. Try it now on AppStudioBlogIterators | WebAssembly.
5. Generators are bidirectional
In Unix, the data flows in Unix pipes in one direction. With Javascript generators, the data flow can be bidirectional. We can take a value from the Javascript generator modify and send the result back to the Javascript generator.
The following shows the generator yielding 1, 2 and 3 respectively. For each value, we square the result and send the square back to the generator.
<SPAN class="keyword token">function</SPAN><SPAN class="operator token">*</SPAN> <SPAN class="token function">gen</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="keyword token">yield</SPAN> <SPAN class="number token">1</SPAN> <SPAN class="punctuation token">)</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="keyword token">yield</SPAN> <SPAN class="number token">2</SPAN> <SPAN class="punctuation token">)</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="keyword token">yield</SPAN> <SPAN class="number token">3</SPAN> <SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">let</SPAN> iter <SPAN class="operator token">=</SPAN> <SPAN class="token function">gen</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="keyword token">let</SPAN> v <SPAN class="operator token">=</SPAN> iter<SPAN class="punctuation token">.</SPAN><SPAN class="token function">next</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN> JSON<SPAN class="punctuation token">.</SPAN><SPAN class="token function">stringify</SPAN><SPAN class="punctuation token">(</SPAN>v<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">)</SPAN>
v <SPAN class="operator token">=</SPAN> iter<SPAN class="punctuation token">.</SPAN><SPAN class="token function">next</SPAN><SPAN class="punctuation token">(</SPAN> v<SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">*</SPAN> v<SPAN class="punctuation token">.</SPAN>value <SPAN class="punctuation token">)</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN> JSON<SPAN class="punctuation token">.</SPAN><SPAN class="token function">stringify</SPAN><SPAN class="punctuation token">(</SPAN>v<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">)</SPAN>
v <SPAN class="operator token">=</SPAN> iter<SPAN class="punctuation token">.</SPAN><SPAN class="token function">next</SPAN><SPAN class="punctuation token">(</SPAN> v<SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">*</SPAN> v<SPAN class="punctuation token">.</SPAN>value <SPAN class="punctuation token">)</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN> JSON<SPAN class="punctuation token">.</SPAN><SPAN class="token function">stringify</SPAN><SPAN class="punctuation token">(</SPAN>v<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">)</SPAN>
v <SPAN class="operator token">=</SPAN> iter<SPAN class="punctuation token">.</SPAN><SPAN class="token function">next</SPAN><SPAN class="punctuation token">(</SPAN> v<SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">*</SPAN> v<SPAN class="punctuation token">.</SPAN>value <SPAN class="punctuation token">)</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN> JSON<SPAN class="punctuation token">.</SPAN><SPAN class="token function">stringify</SPAN><SPAN class="punctuation token">(</SPAN>v<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">)</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>View the full Bidirectional.qml on GitHub. Try it now on AppStudioBlogIterators | WebAssembly.
6. Mixing Javascript generators with Promises
In a previous blog on Promises, I talked about async / await missing in AppStudio 3.3 and Qt 5.12.1 and that you can vote to have it included it https://bugreports.qt.io/browse/QTBUG-58620.
I've read in other blogs that async / await is considered by some as syntactic sugar on Javascript generators yielding Promises.
I gave the following example demonstrating what this looks like with _asyncToGenerator() a function that works with Promises inside Javascript generators:
Button <SPAN class="punctuation token">{</SPAN>
text<SPAN class="punctuation token">:</SPAN> <SPAN class="token function">qsTr</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="string token">"Test Promise async/await (Babel)"</SPAN> <SPAN class="punctuation token">)</SPAN>
onClicked<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="token function">_asyncToGenerator</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="operator token">*</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">try</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="token function">showTitle</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="keyword token">yield</SPAN> <SPAN class="token function">download</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="string token">"GET"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"https://appstudio.arcgis.com"</SPAN> <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">)</SPAN>
<SPAN class="token function">showTitle</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="keyword token">yield</SPAN> <SPAN class="token function">download</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="string token">"GET"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"https://community.esri.com/groups/appstudio"</SPAN> <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">)</SPAN>
<SPAN class="token function">showTitle</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="keyword token">yield</SPAN> <SPAN class="token function">download</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="string token">"GET"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"https://community.esri.com/groups/survey123"</SPAN> <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">catch</SPAN> <SPAN class="punctuation token">(</SPAN> err <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="string token">"Caught Error: "</SPAN><SPAN class="punctuation token">,</SPAN> err<SPAN class="punctuation token">.</SPAN>message <SPAN class="punctuation token">)</SPAN>
<SPAN class="keyword token">throw</SPAN> err
<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>View the full PromiseBabel.qml on GitHub. Try it now on AppStudioBlogIterators | WebAssembly.
6. Using ArcGIS Online Search API
The following uses Promises to invoke the ArcGIS Online Search API iteratively to retrieve titles of over 200+ AppStudio samples:
Button <SPAN class="punctuation token">{</SPAN>
text<SPAN class="punctuation token">:</SPAN> <SPAN class="token function">qsTr</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"Search"</SPAN><SPAN class="punctuation token">)</SPAN>
onClicked<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="token function">_asyncToGenerator</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="operator token">*</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
networkRequest<SPAN class="punctuation token">.</SPAN>url <SPAN class="operator token">=</SPAN> <SPAN class="string token">"https://www.arcgis.com/sharing/rest/search"</SPAN>
networkRequest<SPAN class="punctuation token">.</SPAN>responseType <SPAN class="operator token">=</SPAN> <SPAN class="string token">"json"</SPAN>
<SPAN class="keyword token">try</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">let</SPAN> f <SPAN class="operator token">=</SPAN> <SPAN class="string token">"pjson"</SPAN>
<SPAN class="keyword token">let</SPAN> q <SPAN class="operator token">=</SPAN> <SPAN class="string token">"type:Native Application owner:appstudio_samples"</SPAN>
<SPAN class="keyword token">let</SPAN> start <SPAN class="operator token">=</SPAN> <SPAN class="number token">1</SPAN>
<SPAN class="keyword token">let</SPAN> num <SPAN class="operator token">=</SPAN> <SPAN class="number token">10</SPAN>
<SPAN class="keyword token">while</SPAN> <SPAN class="punctuation token">(</SPAN>start <SPAN class="operator token">!==</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">1</SPAN> <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">let</SPAN> resp <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">yield</SPAN> networkRequest<SPAN class="punctuation token">.</SPAN><SPAN class="token function">sendWithPromise</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="punctuation token">{</SPAN> f<SPAN class="punctuation token">,</SPAN> q<SPAN class="punctuation token">,</SPAN> start<SPAN class="punctuation token">,</SPAN> num <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">)</SPAN>
<SPAN class="keyword token">let</SPAN> <SPAN class="punctuation token">{</SPAN> nextStart<SPAN class="punctuation token">,</SPAN> total<SPAN class="punctuation token">,</SPAN> results <SPAN class="punctuation token">}</SPAN> <SPAN class="operator token">=</SPAN> resp<SPAN class="punctuation token">.</SPAN>response
<SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN> <SPAN class="keyword token">let</SPAN> result <SPAN class="keyword token">of</SPAN> results <SPAN class="punctuation token">)</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN> result<SPAN class="punctuation token">.</SPAN>title <SPAN class="punctuation token">)</SPAN>
start <SPAN class="operator token">=</SPAN> nextStart
<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">catch</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="token class-name">err</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"Caught exception: "</SPAN><SPAN class="punctuation token">,</SPAN> err<SPAN class="punctuation token">.</SPAN>message<SPAN class="punctuation token">)</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>err<SPAN class="punctuation token">.</SPAN>stack<SPAN class="punctuation token">)</SPAN>
<SPAN class="keyword token">throw</SPAN> err
<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>View the full ArcGISOnlineSearch.qml on GitHub. Try it now on AppStudioBlogIterators | WebAssembly.
7. Maze Solving Algorithm
The following demonstrates how you can use Promises in a recursive manner to solve a maze:
Button <SPAN class="punctuation token">{</SPAN>
text<SPAN class="punctuation token">:</SPAN> <SPAN class="token function">qsTr</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"Solve Maze"</SPAN><SPAN class="punctuation token">)</SPAN>
onClicked<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="token function">_asyncToGenerator</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="operator token">*</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">function</SPAN> <SPAN class="token function">solve</SPAN><SPAN class="punctuation token">(</SPAN>x<SPAN class="punctuation token">,</SPAN> y<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">return</SPAN> <SPAN class="token function">_asyncToGenerator</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="operator token">*</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
maze<SPAN class="punctuation token">[</SPAN>y<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">[</SPAN>x<SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">=</SPAN> someDude
<SPAN class="token function">printDaMaze</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="keyword token">yield</SPAN> <SPAN class="token function">sleep</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">100</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>x <SPAN class="operator token">===</SPAN> endingPoint<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">&&</SPAN> y <SPAN class="operator token">===</SPAN> endingPoint<SPAN class="punctuation token">[</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">true</SPAN>
<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>x <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN> <SPAN class="operator token">&&</SPAN> maze<SPAN class="punctuation token">[</SPAN>y<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">[</SPAN>x <SPAN class="operator token">-</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">===</SPAN> free <SPAN class="operator token">&&</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">yield</SPAN> <SPAN class="token function">solve</SPAN><SPAN class="punctuation token">(</SPAN>x <SPAN class="operator token">-</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">,</SPAN> y<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">true</SPAN>
<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>x <SPAN class="operator token"><</SPAN> mazeWidth <SPAN class="operator token">&&</SPAN> maze<SPAN class="punctuation token">[</SPAN>y<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">[</SPAN>x <SPAN class="operator token">+</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">===</SPAN> free <SPAN class="operator token">&&</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">yield</SPAN> <SPAN class="token function">solve</SPAN><SPAN class="punctuation token">(</SPAN>x <SPAN class="operator token">+</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">,</SPAN> y<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">true</SPAN>
<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>y <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN> <SPAN class="operator token">&&</SPAN> maze<SPAN class="punctuation token">[</SPAN>y <SPAN class="operator token">-</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">[</SPAN>x<SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">===</SPAN> free <SPAN class="operator token">&&</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">yield</SPAN> <SPAN class="token function">solve</SPAN><SPAN class="punctuation token">(</SPAN>x<SPAN class="punctuation token">,</SPAN> y <SPAN class="operator token">-</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">true</SPAN>
<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>y <SPAN class="operator token"><</SPAN> mazeHeight <SPAN class="operator token">&&</SPAN> maze<SPAN class="punctuation token">[</SPAN>y <SPAN class="operator token">+</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">[</SPAN>x<SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">===</SPAN> free <SPAN class="operator token">&&</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">yield</SPAN> <SPAN class="token function">solve</SPAN><SPAN class="punctuation token">(</SPAN>x<SPAN class="punctuation token">,</SPAN> y <SPAN class="operator token">+</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">true</SPAN>
maze<SPAN class="punctuation token">[</SPAN>y<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">[</SPAN>x<SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">=</SPAN> free
<SPAN class="token function">printDaMaze</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="keyword token">yield</SPAN> <SPAN class="token function">sleep</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">100</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">false</SPAN>
<SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">yield</SPAN> <SPAN class="token function">solve</SPAN><SPAN class="punctuation token">(</SPAN> startingPoint<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> startingPoint<SPAN class="punctuation token">[</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="string token">"Solved!"</SPAN> <SPAN class="punctuation token">)</SPAN>
<SPAN class="token function">printDaMaze</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="string token">"Cannot solve. :-("</SPAN> <SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>View the full MazeSolver.qml on GitHub. Try it now on AppStudioBlogIterators | WebAssembly.
8. Experimental WebAssembly
Qt now offers a WebAssembly target.
This means it is possible to deploy QML applications in a web browser. WebAssembly is an experimental technology meaning it's an evolving platform. Expect a lot of things to not work. With the disclaimer out of the way, you can test all of the code snippets in this blog in a Web Assembly application here: https://stephenquan.github.io/AppStudio/Apps/AppStudioBlogIterators/
Send us your feedback to appstudiofeedback@esri.com
Become an AppStudio for ArcGIS developer! Watch this video on how to sign up for a free trial.
Follow us on Twitter @AppStudioArcGIS to keep up-to-date on the latest information and let us know about your creations built using AppStudio to be featured in the AppStudio Showcase.
The AppStudio team periodically hosts workshops and webinars; please click on this link to leave your email if you are interested in information regarding AppStudio events.
