Welcome Waxy.org and Slashdot readers. I blog about JavaScript, like it’s my job, feel free to subscribe for a ton more posts like this.
Related Posts:
When I was in Tokyo this past fall speaking at the Shibuya.JS user group I had the opportunity to see a number of interesting JavaScript projects that have yet to make it outside of Japan.
One project, in particular, really caught my eye. It’s called Orto [PDF, Japanese] and is an implementation of the Java Virtual Machine (JVM) in JavaScript. This means that you can take an existing Java application, compile it to bytecode, run it through Orto (which produces the JavaScript, and embed it in a web page. While it doesn’t provide the full capabilities of most Java code it does provide enough to make for some interesting demos.
The one demo that was presented was that of a real-time, interactive, Tetris game:
If you take a peak at the generated source code you can see some interesting tidbits (obviously all of the code is meant to be ‘machine readable’ – being just converted bytecode):
"java/lang/Thread 1316742099":function(){var orto333=orto245[0]; var orto336=orto350(orto333); if(orto336.orto340!=orto310){orto223("java/lang/IllegalThreadStateException",null); return ; }
case 117:orto246[orto247-2]={high:(~orto246[orto247-2].high) &0xffffffff,low:(~orto246[orto247-2].low+1)&0xffffffff}; if(orto246[orto247-2].low==0){orto246[orto247-2].high++; orto246[orto247-2].high&=0xffffffff; orto246[orto247-2].low=0; }break;
case "CHECKBOX":orto171=orto188["orto/ui/CheckBox"]; break; case "IMAGE":orto171=orto188["orto/ui/ImageButton"]; break; case "RADIO":orto171=orto188["orto/ui/RadioButton"]; break;
Unfortunately, the information on the subject is a little scarce (considering that both orto.accelart.jp and orto.jp seem to be missing any relevant information). There are a couple of things that are apparent, however:
- The result is able to handle threaded application code (translating the threads into a series of yields with setTimeout (mentioned in the presentation and demonstrated in the Tetris example).
- The application can use regular Java conventions for designing and constructing the UI (as shown here, as well). User Interface components are translated to, similar, HTML ones. It’s not apparent to what extent functionality is implemented, but it is to a certain degree.
- Keyboard interactions are able to be handled and translated to normal Java callbacks.
I was especially pleased with the resulting performance of the demo application. I wasn’t expecting a game (translated multiple layers deep) to still be as playable as it is. Obviously the culmination of JavaScript optimization and increases in browser performance have served these types of endeavors well.
Chris Anderson (April 28, 2008 at 12:22 am)
works on my iPhone. Wicked.
henrah (April 28, 2008 at 1:23 am)
The fact that this is an implementation of the VM, rather than just a source-to-source translation, has fantastic implications for the likelihood of getting other languages into the browser via their VM-based implementations. I’m thinking ruby and python, the ones everybody seems to be pining for at the moment.
Next: compiling C++ to object code and then converting the instructions into javascript. At the expense of molasses speed and outrageous memory consumption we could achieve true client-side language agnosticism.
Blair McBride (April 28, 2008 at 2:16 am)
A Ruby VM has already been done in Javascript, called HotRuby. See http://ejohn.org/blog/ruby-vm-in-javascript/
Impressive stuff.
Jesse Ruderman (April 28, 2008 at 4:04 am)
I wonder why it keeps ANDing 0xffffffff.
Michael Speer (April 28, 2008 at 8:57 am)
Jesse Ruderman : All numbers in javacsript are represented as IEEE floating point numbers. The `&= 0xFFFFFFFF’ segments are probably being used to mask the numbers into plain integers to avoid rounding errors.
Chris Moyer (April 28, 2008 at 9:15 am)
Wow. That’s pretty slick. If anyone with the requisite skills is able to translate the presentation PDF to english, I’d love to see it.
It’s really impressive to me that the result isn’t “barely” playable, at least if FF3. It’s quite decent. And the load time was darn quick. For kicks, I opened up safari 3, on windows… and then counted 6 seconds from hitting enter on the URL to playing the game.
TIGGR (April 28, 2008 at 11:06 am)
G’day John…
i’m a long-time fan/troll of your work from “Down Under”, you have inspired me to produce better Javascript myself so; first up: thankyou for all of your hard work evangelising Javascript and thankyou DOUBLY for putting your work “out there” in the public domain for us g33x to draw inspiration from. As a fellow developer, i really know the hard work and pain that goes into some of the cool stuff that we do…only never to get anything in return so KUDOS to you! I feel it is even more important than ever to give this kind of affirmation out esp. in light of recent events with ExtJS [Jack slocum et. al] which i see as a slap-in the face to open-source to developers everywhere; Jack – if you are reading; chin-up, and KUDOS to you and team too!…
Back on topic… WOW! this has really “got me moist” – i wish there was more in the way of documentation or even a download too but as for translation… for those who have been living under a rock ;) let Google translate the page for you..
From the Google “Japlish” translation it seems that it is up to the developer to recreate most of the “Java” UI componentry in HTML .. basically equating an HTMLElement in the DOM to a Swing Component/Container Bean (Actually, it seems that the abstraction occurs at the JPanel level).
A kind of “document.getElementById()” metaphor seems to have been adopted at the Java UI end too and the UI Class utilizes the ComponentListener model to handle events… (from the doc):
public class MonkeyTiger implements ComponentListener {
private Panel mainPanel, monkeyParent, tigerParent;
...
mainPanel = Browser.getMainWindow().getBody().getPanel.("mainPanel");
....
public boolean componentAction(Component source, int type, int param) {
if (source == calcButton){
....
so, basically although it DOES do bytecode conversion of plain Java code, the UI stuff seems to be implemented in a HTML + Java Codebehind manner rather than a strict “Write a SWING UI Once and have it Rendered As HTML” one. (I see no hint that the HTML was generated rather than hand-coded in either the Tetris or HelloWorld examples but i could be wrong, they may do swingByteCode-HTML conversion too!?) …. Not that this is a BadThing! ..it lends itself nicely (maybe :S) to utilizing frameworks like ExtJS, Dojo, Mootools as the UI wrapper (use the Javascript logic + styles that is) and let Orto hook onto the events (as it seems to do!).. Niiiice! BUT i am pretty sure that the UI code written in Java will be COMPILABLE but not necessarily RUNNABLE (meaning that it isn’t show whether the Browser.XXXX calls will return an object from the SWING Component Heirarchy when RUN in the JVM instead of its’ bytecode-coverted version in JavaScript… so you are still left writing the UI twice :( – i think?
*PHEW*
Well, thats my $0.02 worth
All-in-All an excellent piece of work, i’d love to see more!
Cheers
TIGGR
Matt M (April 28, 2008 at 11:15 am)
The ANDing 0xffffffff bit looks like a long emulation bit, possibly a unary negation.
TIGGR (April 28, 2008 at 11:28 am)
….On second thoughts…. ;)
It would seem that:
a.) it is actually abstracted at the AWT level not SWING (oops) …this is kinda apparent from the use of Panel, Button, Component and getButton() but i could be pleasantly surprised….because:
b.) the top of the “HelloWorld” documentation java class shows:
import orto.ui.*;
and no other imports …. so the entire UI seems to be THIER propriatory wrapper around either awt (likely! and easier to implement) or swing …this is also most-likely how they then resolve components easily in the bytecode translation as they only have to worry about “coverting” objects from their namespace….
So, it would seem on closer inspection that it is pretty much identical to GWT or Java2Script No?
What IS impressive is the speed; well done on the optimizations..i think some of the UI responsiveness is “smoke and mirrors” in the sense that only bare-wire hookups to existing HTML elements (styled with css) are needed to be emitted and managed, also – like i said before; leaving them open to extension with other UI toolkits..
I think that is the only real difference that sets them apart from GWT/Java2Script? (GWT and J2S wrap Java UI coponents more “heavily” with converted Javascript; locking in the UI to that wrapped by the framework)…here the abstraction seems HtmlElement=AWT.Component ..wrap the most common events and properties and let the UI be controlled by a professional HTML/Flex toolkit.This is strongly characterised by the “Non- Windowed” demo – Tetris :D ..i bet that the UI class behind this is just a set of awt panels (cloned on the client as DIVS – seen in the HTML!) “moved” (setLocation(x,y)) in java ..or maybe i have it all wrong!…..thoughts !?
Cheers
TIGGR
John Resig (April 28, 2008 at 11:29 am)
@TIGGR: The HTML appears to be fully generated. Looking at the First Run (English) instructions (found on the main tutorial page) it appears to generate both the HTML page and the JavaScript file. Of course, this is pretty much just speculation at this point since there’s no actual jar file that we can download.
TIGGR (April 28, 2008 at 11:38 am)
Hrmmm… i think i disagree, john:
the lines:
javac -bootclasspath ..\..\..\lib\ortoClasses.jar jp\orto\sample\monkeytiger\*.java
java -jar ..\..\..\bin\ortoar.jar -main jp.orto.sample.monkeytiger.MonkeyTiger -mainHTML ..\design.html jp\orto\sample\monkeytiger\MonkeyTiger.class
seem to imply (to me):
1.) Compile my “Codebehind” to a Jar – do it to all of my java files
2.) Combine (or maybe run) the aforementioned jar, with the specified Main Class and use the html in .\design.html as the mainHtml
I bet Step 2 makes the page with the included js and any MODIFICATIONS to the Html needed.
again though, just pure speculation at this point; i’d be happy to be wrong because that would mean that their “HTML Compiler” makes plain HTML with little JS/CSS wrapping :D
thanks for the pointer to the tutorial page ;)
Cheers
TIGGR.
Andrés Testi (April 28, 2008 at 12:06 pm)
I think these guys should join the GWT Team to adapt the GWT Compiler to compile Bytecode to JavaScript.
– Andrés
HFR EnForce (April 28, 2008 at 2:33 pm)
The real question is : does it run rhino ?
HFR EnForce (April 28, 2008 at 3:35 pm)
Bitwise boolean operators are the only natives operations implying casting Number to signed 32 bits integer, the two other beeing parseint (which takes a string as main input, thus is much less efficient), and bitwise shift operators which is theoretically slightly less efficient as it involves one more masking operation.
ANDing 0xffffffff is thus quite a good choice for this conversion. (if you’re also optimizing for code size, you could instead use |0, which is as much efficient but slightly shorter )
pichulines (April 28, 2008 at 3:44 pm)
it’s really impressive :-o
yg (April 28, 2008 at 4:20 pm)
Hi !
This is truly impressive, right !
where will the use of JavaScript end ?
For my part : have a look at http://yasep.org
It is the start of a full CPU development environment.
I mean : I develop the CPU with JS, along with the code-generating SW :-D
Comments welcome,
yg
Eric Blue (April 28, 2008 at 4:26 pm)
Definitely impressive! I think this has some serious potential. It’s nice to see Javascript getting some well deserved attention and respect. Certainly a far cry from 10 years ago…..
Laurian Gridinoc (April 28, 2008 at 5:11 pm)
Did anyone found the link to the SDK. I’m eager to test if I can port some RDF utilities to js via it.
grmpf (April 28, 2008 at 5:38 pm)
Hi,
I would not trust this japanese site (not because of this nice project), it looks like it was compromised. / contains a javascript that inserts a iframe from hxxp://www.googleanalitics.net, a known exploit host.
ryan (April 28, 2008 at 6:45 pm)
Anyone seen haXe? Not java but compiles to javascript. Just thought I would throw that in there. As things like javascript get involved in the server as well more frameworks like this and rhino will appear.
Hector Santos (April 28, 2008 at 8:37 pm)
Interesting stuff. It kind of give me a happy face to see this and might even help us focus with to do with our Java Virtual communications framework.
You see for our application framework, there are 4-5 basic client modules. In the old DOS console world, this was:
FILES
MAIL
CHAT/IM
WHO (Who is ONLINE)
PERSONAL (Properties).
In 1996 when we migrated to the Windows world, the same clients was provided from a device independent standpoint.
– console devices
– Native Gui devices
– Web/HTML devices
So you can connect either way and the same consistent framework of Files, Mail, Chat, Who and Personal client applications was provided.
Console interacting can be done with telnet, dialup, mobile devices, native gui with our free WCNAVIGATOR and web with any browser.
However, there was a major SHIFT in interactive designs from the persistent connection DOS and native GUI world to the non-persistent WEB connection world. We lost true interactive capabilities for lack of a better term in the WEB 1.0 world. With XHR and Javascript, web 2.0 has brought back the idea of interactive UI, but this time for the web browser.
Originally our plan 12 years ago in order to offer interactive sessions under the WEB, we developed our Java virtual com API to offer the same framework with a persistent web connection.
However, of the five framework clients, the JAVA API was only used for the CHAT client because we were not sure of the direction. So if you were at at web site and click the CHAT link, it will start a persistent connection with a JAVA window.
We used special file associations extension to drive a WEB client or NATIVE GUI client.
Since we all seem to be coming back in full circle with centralization and persistent connectivity again, my recent entry into JQuery was one of the reasons for depending more on JavaScript.
But Javascript has a major archilles heel. A business can not depend on it solely without a fallback to WEB 1.0 since users can easily turn it off.
So it all seems the industry really has not gotten it straight or there are so many competiting methods. Too many companies on depending on Javascript with 100% focus on the layman user and forcing others to turn on Javascript. I wouldn’t call that a strong plan for an established company.
Will JavaScript be good enought?
Will the browsers offer a persistent connection framework? if so how?
Will hybrids ideas emerge, like AIR? SilverLight, FLEX?
What we really need is for the industry players to get together and develop a new common standard for all platforms that targets remote persistent connectivity technology and multi-threads applications.
The alternative may not be what people want in the long term and that is powerful entities giving you this however VIA their centralize servers only. This has a role in the future, but it can’t be the only way the direction will be offered.
There is alot here that one post serves no justice. But if there is one concept that continues to be a major concern to me is the idea of dual way communications – unsolicited feedbacks to the user’s machine.
This has to be part of the persistent connectivity standard technology because its no longer about just a client/server, but server events into the user’s environment. IPv6 has a major role here.
If this isn’t worked out and its becomes a multi-vendor/methods solutions, then we will lost control of the security and privacy aspects here and I don’t know about you guys, but one thing, someone is going to proposed for government involvement to put a stop this high risk problem in the consumer market place.
Users’s should still have control of whats coming into their machines.
Bertrand Le Roy (April 28, 2008 at 8:42 pm)
And of course, on the .NET side, there’s Volta:
http://labs.live.com/volta/
Trevor Turton (April 29, 2008 at 1:40 am)
This is amazing. What’s the rotate key on the Tetris demo?
TIGGR (April 29, 2008 at 2:06 am)
@BertrandLR:
Also on the .NET side of things is Script#(ScriptSharp) –
http://projects.nikhilk.net/ScriptSharp/
i have played with it since it’s initial release [BEFORE VOLTA!](and have played with Volta a little bit)….KICKS over the M$ Clone ;-) but then again “The original” always does ;)…why eat “HomeBrand” cookies when there are real “Oreos” floating around :) *flamebait*
@Trevor:
press the Up arrow key – the keys i used were the cursor keys ;) …what i want to know is what is the “DROP” key ?? pressing down arrow just moves it down faster not “Drop” it.
Cheers
TIGGR
jansegers (April 29, 2008 at 1:22 pm)
Anyone who knows about a BASIC interpretor in Javascript ? I’m sure it could exist. The same thing for Logo would be fine as well…