[00:00.000 --> 00:15.120]  Hi everyone, my name is Balazs Vargo and I'm working at Allotropia GMBH and this presentation
[00:15.120 --> 00:21.520]  I would like to talk about WebAssembly, M-scripten technology running the colabora online in
[00:21.520 --> 00:26.920]  WebAssembly and headless conversion stuff in WebAssembly as well.
[00:26.920 --> 00:33.800]  So let's get started with the colabora online in WebAssembly stuff.
[00:33.800 --> 00:41.280]  So it was a common project with the colabora, we were together with Tor and Mihail Stahl.
[00:41.280 --> 00:45.800]  The goal was to approach offline document editing.
[00:45.800 --> 00:51.040]  On this slide there is a sketch design for this.
[00:51.040 --> 00:58.320]  The goal was that when the connection is breaks and in a browser the application is activated
[00:58.320 --> 01:05.640]  and that contains the colabora online server functionality and when the connection is restored
[01:05.640 --> 01:09.480]  the document will be edited in the colabora online server again.
[01:09.480 --> 01:13.800]  I think Tor will talk about it a bit more.
[01:13.800 --> 01:20.440]  But to make it work first we had to build it in WebAssembly.
[01:20.440 --> 01:27.560]  For that we are using the M-scripten compiler toolchain.
[01:27.560 --> 01:29.440]  So let's talk about that.
[01:29.440 --> 01:36.360]  The M-scripten is a complete open source compiler toolchain to WebAssembly.
[01:36.360 --> 01:44.320]  Using M-scripten you can compile C and C++ code or any other languages that uses LLVM
[01:44.320 --> 01:51.280]  into WebAssembly and you can run it on the web or Node.js or any other runtimes.
[01:51.280 --> 01:59.680]  The M-scripten generates small and fast code and the default output format is a WebAssembly
[01:59.680 --> 02:06.480]  and highly optimisable executable format that runs almost as fast as the native code.
[02:06.480 --> 02:12.040]  A little bit about the M-scripten toolchain.
[02:12.040 --> 02:14.960]  The main tool is the M-scripten compiler frontend.
[02:14.960 --> 02:22.040]  This is a drop-in replacement for a standard compiler like QCC or CLANG.
[02:22.040 --> 02:29.080]  The EMCC uses KLANG and LLVM to compile to WebAssembly.
[02:29.080 --> 02:38.720]  EMCC also emits JavaScript that provides API support to the compiled code and the JavaScript
[02:38.720 --> 02:44.720]  can be executed by Node.js or from within HTML in a browser.
[02:44.720 --> 02:56.880]  There are more information there but you can read that about porting code to use M-scripten.
[02:56.880 --> 03:03.880]  Support for portable C and C++ code is fairly comprehensive and supported for the C standard
[03:03.880 --> 03:09.120]  library, the C++ standard library and the exception and etc.
[03:09.120 --> 03:13.200]  It's a very good and also the OpenGL supports.
[03:13.200 --> 03:18.880]  The multistrading is supported but depends on the shad array buffer which is still being
[03:18.880 --> 03:24.240]  standardized and implemented by browsers.
[03:24.240 --> 03:29.960]  Now let's see the porting how it worked in the case of Kolobora online.
[03:29.960 --> 03:37.600]  The building for Wasm with M-scripten is a bit immature and some projects needed patching
[03:37.600 --> 03:38.600]  to make it work.
[03:38.600 --> 03:44.240]  First, we need to build a LibreOffice core with M-scripten earlier.
[03:44.240 --> 03:49.120]  The best was to use the feature branch but now it's working with the upstream.
[03:49.120 --> 03:55.560]  Master without the Qt5 framework and then it needed to build the Kolobora online.
[03:55.560 --> 04:09.200]  This is the ZSTD libraries, the Poco library, it's required to patches to make it work.
[04:09.200 --> 04:15.600]  And then it's necessary to build the Kolobora online code and then linking or the binaries
[04:15.600 --> 04:18.760]  and executables together.
[04:18.760 --> 04:27.480]  Everything was executable, uses a lot of memory, without optimizations or with O1 flags.
[04:27.480 --> 04:34.920]  It should work anywhere but there are different kind of flags like the O2, LDF flags which
[04:34.920 --> 04:42.800]  is the default and some link time optimization happens that uses very much RAM and because
[04:42.800 --> 04:49.200]  of that it causes segmentation error, so we are using the O1 flag in case of online and
[04:49.200 --> 04:53.280]  also in case of the LibreOffice core.
[04:53.280 --> 05:01.760]  A little bit about running but we'll talk about it more, its structure is quite similar
[05:01.760 --> 05:10.680]  to the Kolobora office iOS and Android applications, there are one difference is that in case of
[05:10.680 --> 05:20.560]  mobile app the C++ code is what transfers and then loads the HTML page into WebKit in
[05:20.560 --> 05:27.560]  which the JavaScript trans in the WebAssembly application, the other way around the WebPages
[05:27.560 --> 05:35.440]  naturally the one that is loaded and then the JavaScript code then starts running the
[05:35.440 --> 05:41.440]  C++ code as a WebAssembly.
[05:41.440 --> 05:47.280]  You can see an image about it, it's a documentile in the browser, it's running in WebAssembly,
[05:47.280 --> 05:54.920]  there are some depth tools where you can debug, it's working but still needs some optimization
[05:54.920 --> 06:01.760]  work which is in progress, if we have an image in the document it's quite slow but we are
[06:01.760 --> 06:06.680]  working on that as well.
[06:06.680 --> 06:14.880]  Let's talk about a little bit some another WebAssembly work at Allotropia, we have also
[06:14.880 --> 06:22.000]  worked on a headless conversion, the last time in LibreCom with a little demo about
[06:22.000 --> 06:29.920]  it but it wasn't completely a headless conversion but now I make a video about it and let's
[06:29.920 --> 06:38.320]  see how it works now, we are not using the Qt5 framework anymore and we are also using
[06:38.320 --> 06:47.400]  a unique HTML which is created in the LibreOffice core by M-Scripten, so let's hope the video
[06:47.400 --> 06:57.480]  works, it's working, so this is the very basic HTML page but it can make it any kind of
[06:57.480 --> 07:09.040]  HTML, there is just a button, you can select multiple files and using the convert to arguments
[07:09.040 --> 07:12.560]  convert to the document and you can convert it any kind of format so that the LibreOffice
[07:12.560 --> 07:24.640]  core can do and then you can document it, download it and you can see it in the browser
[07:24.640 --> 07:31.600]  as well and there is a common line in the browser where you can see the results but the
[07:31.600 --> 07:39.480]  HTML page can be edited and that's a future plan to make it much more nicer.
[07:39.480 --> 07:47.680]  Also some future plans at Allotropia we would like to calling Unia API function cause from
[07:47.680 --> 07:56.440]  JavaScript and scripting for that also UI, M-Scripten provides various options for connecting
[07:56.440 --> 08:04.480]  normal JavaScript and CompileCode which range from functions to call CompileC++ from JavaScript
[08:04.480 --> 08:12.480]  and V-Aversa so to access environment variables from CompileCode, these options are the Web
[08:12.480 --> 08:21.440]  Ideal Binder and M-Bind, it's creating binding between C++ and JavaScript and also C++ code
[08:21.440 --> 08:27.320]  entities to be used in a measure manner from JavaScript.
[08:27.320 --> 08:43.360]  This was our future plan, I think that's all, thank you for your attention and thank you
[08:43.360 --> 08:44.360]  for that.
[08:44.360 --> 08:58.040]  We'll see you in the next one, bye for now.