WebAssembly - a new technology and its potential for geospatial application
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 295 | |
| Author | ||
| Contributors | ||
| License | CC Attribution 3.0 Germany: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/43420 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
| |
| Keywords |
00:00
8 (number)Electronic mailing list3 (number)Computer virusProcess (computing)Scripting languageSpeicherbereinigungAssembly languageDifferent (Kate Ryan album)Level (video gaming)Overhead (computing)InternetworkingMereologyPortable communications deviceFormal languageMemory managementComputing platformBitWeb browserVirtual machineCompilation albumEndliche ModelltheorieSemiconductor memoryCodeInstance (computer science)CoprocessorForm (programming)Multiplication signCuboidInformation securityCalculationTowerRepetitionCompilerProgrammable logic arrayReplication (computing)InformationStandard deviationSqueeze theoremRevision controlShared memoryParameter (computer programming)Software testingFunction (mathematics)Self-organizationTesselationElectric generatorCartesian coordinate systemElement (mathematics)SubsetComputer programmingEntire functionAngleFunctional (mathematics)Web 2.0Binary codeSource codeEstimatorVector spaceDirection (geometry)BefehlsprozessorSystem callCrash (computing)File formatBinary fileWeb applicationRun time (program lifecycle phase)Programmer (hardware)outputSet (mathematics)Lecture/Conference
08:21
Google EarthSigma-algebraDemo (music)Run time (program lifecycle phase)Virtual machineTransformation (genetics)Cartesian coordinate systemLibrary (computing)Web 2.0Slide ruleFormal languageLatent heatMultiplication signVector potentialRun time (program lifecycle phase)Web browserStructural loadDemo (music)Electronic mailing listResultantCASE <Informatik>Type theoryGame theoryGroup actionAddress spaceCodeServer (computing)Binary codeCompilation albumInterpreter (computing)Different (Kate Ryan album)BlogGoodness of fitWorld Wide Web ConsortiumIntegrated development environmentRevision controlProjective planeStandard deviationSource codeClient (computing)Boss CorporationNumberComa BerenicesRepetitionSoftware testingOrder (biology)Presentation of a groupGraphical user interfaceGraphics libraryLink (knot theory)Right angleDiscrete element methodGoogolDesktop publishingImplementationSystem callScripting languageComputing platformSoftware development kitDoubling the cubeInstance (computer science)Point cloudMereologyUniform resource locatorCopyright infringementComputer animationLecture/Conference
16:35
Run time (program lifecycle phase)Pairwise comparisonIRIS-TEmailFormal languageCartesian coordinate systemFile formatTriangleWeb browserLibrary (computing)MereologyRun time (program lifecycle phase)Integrated development environmentComputing platformServer (computing)Direction (geometry)Letterpress printingLine (geometry)Different (Kate Ryan album)BenchmarkCodeLevel (video gaming)Interactive televisionSemiconductor memoryGraphical user interfaceMultiplication signEmulatorPortable communications deviceInterface (computing)Vector spaceTesselationTouchscreenRaster graphicsComputer file2 (number)Exterior algebraSlide ruleSource codeRoutingMachine codePoint cloudProjective planeBinary codePlug-in (computing)Game theoryOpen sourceInternet der DingeCore dumpThread (computing)WebsiteSystem callVirtual machineClient (computing)Scripting languageAxiom of choiceCloud computingForm (programming)Gastropod shellTelecommunicationRepetitionInstance (computer science)CAN busGeometryCuboidWeb 2.0PiEntire functionForcing (mathematics)Point (geometry)Process (computing)SpacetimeBeat (acoustics)Cellular automatonComputer animation
Transcript: English(auto-generated)
00:07
Hello. It's very nice to see so many people in such a big room. If you're standing in the back, there is still some room in the front here. So, yeah, it's nice to see WebAssembly drawing such a crowd.
00:25
So, Pidmin, please tell us what this is about. Yeah, thank you. It's obviously an important technology and many people already know about it, but the organizers didn't know. So... But this is also a reason for this talk to tell people about it.
00:45
I work for Sourcepol, it's a Swiss company. We are developers, we're doing QGIS desktop and QGIS server. And WebGIS and vector tiles and, yeah, WebGIS. This talk is a part of this WebGIS work we do.
01:05
I have a talk tomorrow about the QGIS web client 2 and on Friday about vector tiles, if you're interested in these parts. So, WebAssembly, what is it? It's, on the one hand, a machine model and it's a binary execution format.
01:25
So, assembly is maybe known to programmers as a low-level language and this is also a low-level language, but it's not targeted to the processor directly, but to a virtual machine or this machine model which is defined here.
01:41
It's designed to be portable, compact and it should be fast. And this portable thing, this is really interesting, so it's portable between different platforms, between different processors and so on. And it is designed with memory safety
02:02
and with a sandbox execution environment, so it's designed for security or to run WebAssembly code, for instance, in a browser where it has to be sandboxed and shouldn't crash the browser.
02:21
The memory model is quite simple. It has no direct access to the browser memory, as you might expect. It is a linear memory which is shared between the WebAssembly part and the JavaScript part, which is essentially a flat array.
02:47
And to have a picture or an idea how it looks like or how it works, there is also a text format defined for WebAssembly. I mean, WebAssembly itself is a binary format, but there is also a standard for the text format
03:01
and that's how it looks like. And what you see is that it is low level, it looks like assembly, but it is a little bit higher level than processor assembly code. It has these lisp-like angles and it has also functions, if-else and so on.
03:21
So it's not absolutely low level, but still low level. But it is possible to program WebAssembly with this text format. Kind of predecessor of WebAssembly is ASM.js. I mentioned that some people mix it up, which was introduced in 5x22, 2013.
03:45
And ASM.js is a subset of JavaScript. So it's still JavaScript, but it is kind of low level instructions made with JavaScript. It can also be generated with Emscripten compiler
04:00
and it can be used as a fallback for browsers which do not have WebAssembly support. But what we talk now is WebAssembly, which is its own binary format. How do I generate WebAssembly?
04:20
A common language I write WebAssembly is C, C++. And then I have this Emscripten compiler which compiles the C code to WebAssembly. And then I include that in an HTML document and write some JavaScript to call it.
04:43
And there are other languages which support compiling to WebAssembly. A very good language is Rust, which has also like a manual memory management, which is an advantage here because we don't have garbage collection in WebAssembly.
05:02
So garbage-collected languages, they need a runtime, but these runtimes exist. So we have also WebAssembly compilation for C sharp and Go and other languages. But they have a little bit of an overhead because they read a bigger runtime for doing garbage collection, for instance.
05:23
And there is also another format, which is AssemblyScript, which is a subset of TypeScript, which is kind of JavaScript. So you can write WebAssembly in a JavaScript-like language as well.
05:43
Or you can write it in this low-level text format directly. Yeah, you laugh, but people do that. And what can be done in WebAssembly? That's an important question. So you can basically do calculations.
06:02
You can do complicated calculations which are run on the CPU, run on the CPU heavy. You can call JavaScript and you can call WebAssembly from JavaScript. And all the supported are futures in JavaScript. And asynchronous elements in WebAssembly.
06:23
But that's a question of the source language and the source runtime. And to transfer data between these two, you can either do that by JavaScript parameters or you can transfer data via this shared linear memory.
06:40
But you can imagine that, for instance, for graphical applications, this is quite a good model. So you write your output into this memory and you copy that into a 2D canvas, for instance, and that's all you have to do.
07:00
So you can do almost everything from WebAssembly. What is not possible or not fully supported yet is multithreading. But it's coming and it's working on certain platforms. And what can't be done yet is accessing the DOM,
07:23
the HTML DOM of a web application. Directly, you have to go through the JavaScript API. And you can't access all these JavaScript... These web APIs, you have to call a JavaScript method which calls the Web API.
07:41
But it's not a big problem and all of this is coming. So in this first version, we have this first set of features and the rest is coming. The browser support looks very good. So basically, all major browsers supported WebAssembly in 2017.
08:04
Also Android, iOS. And the only one which doesn't support WebAssembly is Internet Explorer, which is not a big problem anymore. And we still have this ASM.js fallback.
08:23
There's also polyfill, so you can use the same WebAssembly binary and load it from JavaScript and just execute it very slowly. Yeah, that's true. You can execute it, but I think they do even an on-the-fly transformation to ASM.js. Yeah, it's slow, but it's still working.
08:44
And the specification, the main address is webassembly.org. From there, you can find everything. And there is a W3C community group and a working group, which writes a specification which is currently a release draft.
09:04
But so this will become a standard. Okay, I picked a few examples of applications using WebAssembly. And one I think is really interesting for JS people is AutoCAD,
09:24
which have an online version of their AutoCAD application, which has the same source code as the desktop application. So it's really compiled from C, C++ to WebAssembly. So they had earlier web implementations, which had their own code base,
09:47
and now they have a common code base between the desktop application and the web application, and you can go to that address, and if you have a license, you can start editing. I have a short presentation of that, how it looks like.
10:03
Okay, here it is, very short, but still quite impressive.
10:31
And another example is Google Earth, which is a similar case. They always had problems with supporting different browsers,
10:44
different platforms, and what they did now in the newest beta release, they cross-compiled their C++ application, the Google Earth desktop, to WebAssembly, and now it's running on all browsers.
11:01
I'll show you that as well.
11:20
So this is on Firefox and Linux, which wasn't supported.
11:52
Yeah, it's quite flat here. Yeah, when you know Google Earth, you can imagine how it looks like.
12:03
It's really very similar to the desktop version, but running in the browser in WebAssembly. Does it? Does this flight simulator work? I don't know. I didn't try.
12:23
Okay, there are many libraries compiled to WebAssembly. There is ESRI, ESRI. They have blog posts about their projection engine. They compile to WebAssembly and give you client-side projection support.
12:43
And there are Qt. This is a GUI library, which is, for instance, used for Qt. They have their most examples, and they have quite good support for WebAssembly. Skia is an important graphics library, which is the base of Google Chrome
13:03
and also Firefox and Thunderbird, which is now compiled to WebAssembly as well, so can use it within a JavaScript application, calling WebAssembly. PDFsKit is also an early application, which is for PDF creation,
13:24
which is also a good example of what you can do on client-side. So you can create PDFs directly in the browser. A few more applications. Have I enough time to show them? I think so. We try this demo, which is a nice one.
13:42
Okay. I mean, the slides will have links as well, and you can...
14:17
It's not coming, sorry. But, yeah, you can try them yourself.
14:20
There are many demos around, really nice things. Before I go into the next chapter, I'll show you the list of this collection I had. So there is, like, Doom, a game, there are Game Boy emulators, there is Wiim in the browser,
14:43
there is an Nginx web server running as WebAssembly, there are Python interpreters and Go compilers as WebAssembly. Maybe it's useless, I don't know, or what it is useful for, but it's at least interesting and shows the potential of the technology.
15:04
And so chapter two is about WebAssembly runtimes, because what we saw until now was the browser, so our runtime was the browser, but there are other runtimes as well. There are several runtimes which run WebAssembly as standalone applications.
15:24
And the last one from Intel is targeted to small devices, so that you can run WebAssembly on an embedded device. And there is a standard for that as well, which standardises the environment or the API to the desktop
15:47
or to the machine which is running this WebAssembly application. And the first three, they support this standard. And there are other things as well.
16:00
Wasmer allows you to embed WebAssembly within other languages. So you can write, let's say, a Python application and call a WebAssembly library and get the result back to Python. And this, for many languages, you see the list there.
16:23
And the last type of runtimes for WebAssembly are, for instance, these CloudFlare workers, which are similar to AWS Lambda, which allows you to run code in the cloud on cloud servers.
16:45
But in AWS Lambda, you have, for instance, JavaScript and you have a Python environment and so on. And here you have, with CloudFlare, you have WebAssembly runtimes, so you can use all these languages you want, like Rust C++, and run them within the same runtime.
17:07
And the startup time should be faster than on Lambda, because there is no virtual machine, and it has some advantages.
17:22
So what does that mean? You can have portable binary code between different platforms, which is interesting. It could get an alternative on the desktop for Node.js Electron applications. You can have multilingual applications,
17:42
so applications written in Python and in C, within the same runtime for Edge or serverless applications. And you can have a common runtime format for plugins, so if you call them from Python and you want a sandboxed plugin execution,
18:07
then you can use WebAssembly for that. And you can even use it for embedded IoT devices. So for geospatial applications, what could we use WebAssembly for?
18:25
And the top candidates which come into everybody's mind are Proj, the projection library, which is written in C, so this is the perfect candidate for compiling to WebAssembly, and then you have the same library you can use in a browser
18:43
or from any WebAssembly platform. I think it compiles to WebAssembly, what I heard, but it's not published as a package yet. And the same is for Geos, which is another important library,
19:02
open source library in the Geospace, which could also be very useful on client-side in the browser. And there are many more ideas for client-side map printing. It's interesting. You could write a rendering engine for vector tiles in WebAssembly.
19:24
You could import J files with Google. You could do client-side routing. You could even build a desktop GIS in the browser. So I have two more slides about speed.
19:43
So there are many microbenchmarks and they say different things. Most of them say it's very fast, but it's difficult. So you can't expect that it's extremely fast because even related to JavaScript, which has very good runtimes,
20:00
you can expect that it's maybe 20% to 30% faster. But there are also benchmarks that say it's slower, usually slower. Maybe on some browsers it's faster. And this Game Boy emulator benchmark, which is quite a good benchmark, says it's 30% faster than JavaScript and Chrome
20:22
and faster on Firefox. So 60% on mobile, 90% on Firefox. But slower on Safari. And I also made my own benchmark because I'm also interested in comparing the speed to native code
20:41
because you can have the same code running as a native executable and running it in the browser. So I tested this world map generator, which generates random worlds. And I generated thousands per thousand cells,
21:01
which takes about three seconds on the native executable. And in Firefox it takes 6.4 seconds, so it's clearly slower, but I think that's tolerable. For many applications that's really good speed
21:22
and it should be faster than in JavaScript. So that's about speed and a little outlook. So I say WebAssembly is here, it is supported, we should use it. And FOSFOTG applications will catch up, they have to catch up,
21:43
they don't use it yet, but they will do maybe, I'm not sure, maybe it will need some funding for the core libraries like Broich or GEOS, which are very useful, but nobody uses it directly, so funding is always very difficult.
22:03
And WebAssembly is getting better and better. So these are my conclusions, thank you for your time. Thank you very much. We have time for one question.
22:23
Anybody? So you mentioned that multi-threading was still in the works. Does that mean no GPU or CUDA yet? Or at all, do you know? I know, I saw everything of that, so direct GPU access and multi-threading,
22:46
but it's not supported in all browsers yet, that's my understanding. Okay, and WebGL? You can, many applications use already in WebGL, but part of it is JavaScript, so you prepare all the triangle stuff in WebGL,
23:05
but in the end, WebGL does all the work, so maybe preparation is not that fast, but the execution is WebGL, and it's easy to use, you can do WebGL programming,
23:21
you have a good interface for doing that from WebAssembly. Okay, if the question is quick and the answer is quick, we can have one more question. So you mentioned at the start that WebGL can't interact with the DOM,
23:45
so how do you do rendering in WebGL, or sorry, in WebAssembly if you can't interact directly with the browser APS? You can call, through the JavaScript interface, you can say, copy my linear memory to the canvas buffer,
24:03
and then you have already your visualisation, so that's one line of code for putting your bitmap on the screen. And with WebGL, you also call the usual WebGL API for doing that.
24:23
So, I mean, in the background there are some JavaScript calls, but depending on the source language, it's really, you do programming like you do in JavaScript with the same API calling WebGL or calling canvas code or canvas methods.
24:43
Yes, yeah. Okay, thank you very much, Bürdmann, for your... Thank you.