Compiling Java toJavascript
How to Replace Applets Without the Plugin
Davin McCallMichaelKöllingKing’s College, London
Greenfoot
Challenges of teaching Java programming at school
Greenfootand applets
“Stick it on the fridge”–theGreenfootGallery
Issues in applet deployment
Many security problemsActions taken by browser vendors and OracleApplet signingApplets increasingly unsuitable forGreenfootGalleryRise of HTML 5
Let’s talk about: Java
We all know this…but:Class-basedSeveral primitive typesThreading, concurrency primitivesStandard library; AWT/Swing/JavaFX
Let’s talk about:Javascript
None of the aboveWat (Gary Bernhardt - https://www.destroyallsoftware.com/talks/wat)> Array(10).join(“wat”–1) + “ Batman!”“NaNNaNNaNNaNNaNNaNNaNNaNNaNNaNBatman!”
Let’s talk about:Javascript(2)
“prototype” basedPrimitive numeric type is equivalent to Java’sdouble.No multi-threading (exceptwebworkers), very callback drivenNo GUI as such, but we do have DOM manipulationSlightly different exception modelTranslation not simple, but possible*:TeaVM!
TeaVM
A Java-to-Javascripttranspiler…So not actually a VMhttp://teavm.org/ - Alexey AndreevSupports multi-threadingSupports all language constructs including lambdasImplements some commonly used Java API classes
TeaVM: How does it work?
In some cases can do a straight-forward translation of Java to equivalentJavascript
privatevoidsetLocationDrag(intx,inty)// ingreenfoot.Actor{if(world!= null) {intoldX=this.x;intoldY=this.y;if(world.isBounded()) {this.x=limitValue(x,world.width);this.y=limitValue(y,world.height);}else{this.x= x;this.y=y;}if(this.x!=oldX||this.y!=oldY) {if(boundingRect!= null) {intdx = (this.x-oldX) *world.cellSize;//etc
functiong_Actor_setLocationDrag($this, $x, $y){var$oldX, $oldY, $dx, $dy, $i, var$8;if ($this.$world!== null) {$oldX= $this.$x;$oldY= $this.$y;if (g_World_isBounded($this.$world) == 0) {$this.$x= $x;$this.$y= $y;} else {$this.$x=g_Actor_limitValue($this, $x, $this.$world.$width);$this.$y=g_Actor_limitValue($this, $y, $this.$world.$height);}if (!($this.$x== $oldX&& $this.$y== $oldY)) {if ($this.$boundingRect!== null) {$dx = ($this.$x- $oldX| 0) * $this.$world.$cellSize| 0;//etc
$dx = ($this.$x- $oldX| 0) * $this.$world.$cellSize| 0;
Bitwise OR with 0 coerces value to 32-bit integerlong??!!
$dx = ($this.$x- $oldX| 0) * $this.$world.$cellSize| 0;
From Java:
intdx = (this.x-oldX) *world.cellSize;
TeaVM: thread support
Any method that can suspend is markedasynchronousAn asynchronous method istranspiledto a while loop with a switch statement in the bodyA variable is introduced to act like a program counterTo suspend, the entire function state (variables and PC) is saved to a stack before returning to callerCheck for suspend is performed after each call to an asynchronous methodCheck for resume at beginning of method
static voidinitialise(){try {greenfootImage= newGreenfootImage(GreenfootUtil.getGreenfootLogoPath());}catch (Exception e) {e.printStackTrace();System.err.println("Greenfootinstallation is broken - reinstallingGreenfootmight help.");}}
static voidinitialise(){try {greenfootImage= newGreenfootImage(GreenfootUtil.getGreenfootLogoPath());}catch (Exception e) {e.printStackTrace();System.err.println("Greenfootinstallation is broken - reinstallingGreenfootmight help.");}}
functiong_Actor_initialise() {var$e, var$2, $$je, $ptr, $tmp;$ptr= 0;if($rt_resuming()) {var$thread = $rt_nativeThread();$ptr= $thread.pop();var$2 = $thread.pop();$e = $thread.pop();}main: while (true) { switch ($ptr) {case 0:try{g_Actor_$callClinit();$e = newg_GreenfootImage;var$2 =gu_GreenfootUtil_getGreenfootLogoPath();$ptr= 1;continuemain;} catch ($$e) {$$je = $$e.$javaException;if ($$je && $$jeinstanceofjl_Exception) {$e= $$je;}else{throw $$e;}}jl_Throwable_printStackTrace($e);jl_System_$callClinit();ji_PrintStream_println(jl_System_err, $rt_s(25));return;case 1:a: {b: {try{g_GreenfootImage__init_($e, var$2);if($rt_suspending()) {breakmain;}g_Actor_greenfootImage= $e;}catch($$e) {$$je= $$e.$javaException;if ($$je && $$jeinstanceofjl_Exception) {$e= $$je;breakb;
Java
Javascript
functiong_Actor_initialise() {var$e, var$2, $$je, $ptr, $tmp;$ptr= 0;if ($rt_resuming()) {var$thread = $rt_nativeThread();$ptr= $thread.pop();var$2 = $thread.pop();$e = $thread.pop();}main: while (true) { switch ($ptr) {case 0:try {g_Actor_$callClinit();$e = newg_GreenfootImage;var$2 =gu_GreenfootUtil_getGreenfootLogoPath();$ptr= 1;continue main;} catch ($$e) {// removed for purpose of example}case 1:
$ptr= 0;
while (true) { switch ($ptr) {
GreenfootUtil.getGreenfootLogoPath()
case 1:a: {b: {try {g_GreenfootImage__init_($e, var$2);if ($rt_suspending()) {break main;}// (etc)}return;default: $rt_invalidPointer();}}$rt_nativeThread().push($e,ar$2, $ptr);}
newGreenfootImage()
TeaVM: interaction withJavascript
Possible to implement Java methods withJavascriptDeclare methods as “native” and use an annotation to specify theJavascriptmethod body@JSBody(params= { "array", "mediaType"},script= "varblob = new Blob([array], {type:mediaType}); returnURL.createObjectURL(blob);" )privatestatic native StringtoBlobUrl(Uint8Arrayarray,~StringmediaType);
Integration intoGreenfoot.orgsite
Greenfoot.org: Ruby-on-RailsJRuby!Call directly intoTeaVMto perform translation of scenarios as they are uploadedGreenfootAPI re-implemented using HTML 5 APIs
Demonstration
Conclusion
Davin McCall–[email protected]ö[email protected]: https://greenfoot.org/TeaVM: http://teavm.org/
Have to maintain Applets in the post-plugin era?It is possible withTeaVM!
0
Embed
Upload