Permalink
Browse files

Finalized vue.js posting.

  • Loading branch information...
mirkosertic committed Dec 21, 2018
1 parent e1dce13 commit 0cb77226cedb5e1c92c9295b0a4b8dc15762871e
Showing with 18 additions and 12 deletions.
  1. +1 −1 content/post/object-oriented-webassembly.adoc
  2. +17 −11 content/post/webassembly-and-vuejs.adoc
@@ -1,7 +1,7 @@
+++
date = "2018-01-01T12:00:00+01:00"
title = "Object-Oriented WebAssembly"
tags = ["Compiler", "Interesting", "Performance", "JavaScript", "HTML5", "Web"]
tags = ["Compiler", "Interesting", "Performance", "JavaScript", "HTML5", "Web", "WebAssembly"]
draft = false
description = "Today, I want to write a little bit about object orientation and WebAssembly. For starters, what is WebAssembly? WebAssembly is a new portable, size and load-time efficient format suitable for compilation to the web. It is an open standard by a W3C community group and is currently integrated into all major browsers such as Firefox, Chrome, Edge and WebKit. WebAssembly aims to keep download speed and parsing time of program code low and execute at native speed by taking advance of common hardware capabilities available on a wide range of platforms. WebAssembly is basically bytecode for the Web."
+++
@@ -1,9 +1,9 @@
+++
date = "2018-12-20T00:00:00+02:00"
title = "WebAssembly and vue.js"
tags = ["JavaScript", "WebAssembly", "Compiler", "Performance"]
draft = true
description = "TODO"
title = "WebAssembly with vue.js"
tags = ["Compiler", "Interesting", "Performance", "JavaScript", "HTML5", "Web", "WebAssembly"]
draft = false
description = "This posts shows how to integrate modern web technologies like WebAssembly and vue.js by using cross-compiler technologies."
+++
include::globals.adoc[]

@@ -33,16 +33,16 @@ user interaction can be implemented by WebAssembly based on a modern framework:

== Bytecoder

Bytecoder is a Rich Domain Model for Java Bytecode and Framework to interpret and transpile it to other
Bytecoder is a rich domain model for Java(JVM) bytecode and framework to interpret and transpile it to other
languages such as JavaScript, OpenCL or WebAssembly. Its high level goals are:

* Ability to cross-compile JVM Bytecode to JavaScript, WebAssembly, OpenCL and other languages
* Ability to cross-compile JVM bytecode to JavaScript, WebAssembly, OpenCL and other languages
* Primary compile targets are JavaScript and WebAssembly
* Allow integration with other UI-Frameworks such as vue.js
* Use other tool chains such as Google Closure Compiler to further optimize generated code
* Backed by OpenJDK 11 as JRE Classlib

The JVM Bytecode is parsed and transformed into an intermediate representation. This intermediate
The JVM bytecode is parsed and transformed into an intermediate representation. This intermediate
representation is passed thru optimizer stages and sent to a backend implementation for target code generation.

The JavaScript backend transforms the intermediate representation into JavaScript.
@@ -57,7 +57,7 @@ my favorite UI framework for this? Yes, you can! For this demo, I will use https

== Vue.js Bytecoder integration

Bytecoder comes with a OpenJDK11 classlib. Unfortunately there are two parts for successful vue.js and
Bytecoder comes with a https://openjdk.java.net/[OpenJDK] 11 classlib. Unfortunately there are two parts for successful vue.js and
WebAssembly integration missing. We do not have a vue.js Java API, and we do now have a way to instruct
the compiler to generate the required WebAssembly runtime linkage code to make vue.js available to the
WebAssembly sandbox.
@@ -108,7 +108,7 @@ public class VueDemo {
<5> We can also do callbacks from the vue.js API to WebAssembly. The binding code is generated by the compiler.
<6> This will summon the full vue.js magic

This program also needs a HTML template. Here it is:
This program also needs a HTML template:

[source,html]
----
@@ -169,7 +169,13 @@ bytecoder.imports.vue = {
----

This import is an example of the WebAssembly module system. WebAssembly allows us to
import functionality from outside of its sandbox and call it at runtime. Here we see
the mentioned JavaScript implementation for the "VueBuilder" interface.
import functionality from outside of its sandbox and call it at runtime.

== Conclusion

Bytecoder makes it easy to use a wide spread high level language and compile it to
high efficiency runtime environments like WebAssembly. The OpaqueReferenceType API
combined with modern frameworks like vue.js allows us to fill the missing parts of
the WebAssembly core specification. The Bytecoder transpiler is a great tool to keep
developer productivity high by using high level languages and also keep runtime costs
low. WebAssembly rocks!

0 comments on commit 0cb7722

Please sign in to comment.