Tuesday, December 9, 2008

GWT, JavaScript, and the Correct Level of Abstraction

John Resig seems to have stirred up a bit of a hornet's nest with a recent post on JavaScript language abstractions. I don't want to wade into the details of the argument; I think Francisco over at cappuccino.org does a great job cappuccino of explaining the value of language abstractions that I largely agree with.

However, I've noticed a number of misunderstandings about GWT in this and other articles, and I feel some clarification is in order.

Why Java?

First and foremost, let me clarify yet again the reasons behind the decision to use Java as a source language. Allow me to quote from the "Making GWT Better" document:
Why does GWT support the Java programming language instead of language X? In a word, tools. There are lots of good Java tools. That's the entire explanation. It isn't that we don't like language X or that we think the Java programming language is somehow superior. We just like the tools.

This point has perhaps been beaten to death, but there are a lot of good tools for Java, whether you love the language itself or not. Code completion, automated refactoring, static error detection, code coverage, testing, and so forth, are pretty hard to give up once you're used to them.

But wait, there's more. Let's talk about compiler optimizations a bit. I'll quote Ray Cromwell, from the comments on Resig's article:
... Aggressive compiler optimizations, that happen before code is sent down the wire. This is a problem that no amount of trace-jitting will solve. Far from being bloated, as I demonstrated in my GWT Query presentation at Google I/O, GWT can produce code an order of magnitude smaller than most selector libraries in specific circumstances. GWT can prune dead code far better than any JS optimizer, and can obfuscate code to reduce size in a way that helps maximum GZIP/DEFLATE algorithms.
What Ray's referring to here is the fact that a statically-typed language like Java allows you to perform absolutely correct optimizations far in excess of what is achievable without type information (There's a lot more to say on this topic, which I'll save for a future post).

Why is this so important for JavaScript output? In a word (or two), code size. Code that grows without bound is a serious problem for Javascript applications, and static analysis gives us a lot of leverage over the problem. The GWT compiler can determine precisely which classes, methods, and fields are actually used and aggressively prune everything else. And this
pruning feeds back into the iterative compilation process, allowing still more optimizations (e.g., type-tightening, devirtualization, and so forth) to be performed.

Indeed, you can take this even further, with a concept we refer to as runAsync(). With static whole-program analysis, it is possible to automatically break a program into optimal fragments at user-defined cut points. This is still experimental, but the preliminary results look pretty good.

To put all this in concrete terms, check out this great example on Ray's blog showing the following transformation:

  public class MyArray implements Iterable {
private String[] items = {"foo", "bar", "baz"};

public Iterator<string> iterator() {
return new StringArrayIterator(items);
}

private class StringArrayIterator implements Iterator {
private String[] items;
private int index;

public StringArrayIterator(String[] items) {
this.items = items;
this.index = 0;
}

public boolean hasNext() {
return index < items.length;
}

public String next() {
return items[index++];
}

public void remove() {
throw new UnsupportedOperaionException();
}
}
}

void iterate() {
MyArray m = new MyArray();
for (String s : m) {
Window.alert(s);
}
}
iterate() becomes
  function $iterate(m){
var s, s$iterator;
for (s$iterator = $MyArray$StringArrayIterator(
new MyArray$StringArrayIterator(), m.items);
s$iterator.index < s$iterator.items.length;) {
s = s$iterator.items[s$iterator.index++];
$wnd.alert(s);
}
}
which becomes something like
  function x(a){var b,c;for(c=y(new z(),a.a);c.b<c.a.length;){b=c.a[c.b++];$wnd.alert(b);}}
The point of going into all this detail about tools and optimization is that choosing Java as a source language gives GWT leverage that would have been provably impossible in JavaScript. It's most emphatically not about loving or hating any given language, or providing Java programmers with a way to avoid JavaScript -- it's a pragmatic decision based upon specific, measurable benefits.

I've seen lots of assertions that various languages are either "higher level" or "lower level" than others, without any clear definition of what metric is being used to justify these statements. For example, "JavaScript is the assembly language of the web" or "Java is a low-level language because it doesn't have closures and dynamic typing". These sorts of arguments are pointless at best, and at times simply disingenuous. What matters is not some ill-defined notion of a language's "level of abstraction", but rather what you can actually achieve with it.


JavaScript Interop

So what if I need to write or use existing Javascript code? Most everyone seems to finally be aware that it's possible to write JavaScript directly in your Java source using JavaScript Native Interface methods, like so:
  // Java method declaration...
native String flipName(String name) /*-{
// ...implemented with JavaScript
var re = /(\w+)\s(\w+)/;
return name.replace(re, '$2, $1');
}-*/;
What doesn't seem to be clear is just how fundamental a feature this is. I've seen various people suggest that this is somehow "circumventing" the "normal" way of doing things -- and while it's true that you lose some of the benefits of Java type-checking, optimization, and debugging in these methods, they're also the foundation upon which all the GWT libraries are built. And there's no particular reason they have to be short snippets, either. They can be complex methods and classes that reach back into Java code, pass exceptions around, and so forth.

What about calling into existing JavaScript libraries, or exposing GWT classes to JavaScript code? For the former, check out Sanjay Jivan's SmartGWT library, which wraps the massive Isomorphic SmartClient library. For the latter, have a look at Ray Cromwell's GWT-Exporter gwtexporter library.

It's also worth noting that this functionality, combined with Overlay Types makes it really easy to efficiently parse and operate on JSON structures. Once again, you get a side-benefit: once you've written the overlay type for a particular JSON type, everyone using it gets code completion and documentation for free. For example:

  var customerJsonData = [
{ "FirstName" : "Jimmy", "LastName" : "Webber" },
{ "FirstName" : "Alan", "LastName" : "Dayal" },
{ "FirstName" : "Keanu", "LastName" : "Spoon" },
{ "FirstName" : "Emily", "LastName" : "Rudnick" }
];

class Customer extends JavaScriptObject {
protected Customer() { }

public final native String getFirstName() /*-{ return this.FirstName; }-*/;
public final native String getLastName() /*-{ return this.LastName; }-*/;
}
which means, as a user of this class, if I get a Customer type from somewhere, I don't have to ask what fields and methods are available. The IDE can simply tell me.

HTML DOM Integration

But don't GWT's abstractions keep you from just working with DOM elements? Again, no. It has always been possible to work with the DOM from GWT (how else do you think all those widgets get implemented?), but as of 1.5, it's gotten a lot easier. See this Google IO presentation for details. Here's a taste, though:
  TableElement table = ...;
String s = table.getRows().getItem(0).getCells().getItem(0).getInnerText();
Which of course translates to:
  var s = table.rows[0].cells[0].innerText;
With the important addition that as you type "table.[ctrl-space]", the IDE can actually tell you that "getRows()" is an option. Given that TextAreaElement alone has nearly 100 methods, that starts to be pretty useful.

The statement "You are likely to never see a DOM object or pieces of the native JavaScript language" is actually only as true as you want it to be. Most JavaScript frameworks provide some sort of higher-level abstraction than simple DOM elements, and GWT is no exception, but you should pick the right level of abstraction for the task at hand.

Independently Useful Parts

Finally, we have the question of whether (GWT === GWT's libraries). This is another common misconception -- GWT looks interesting, but I don't like the way their widget library works. That's like saying you like JavaScript, but not the way Prototype (or whatever) works.

GWT "eats its own dogfood" almost all the way down. That is to say, there's practically no module you can't replace (including the JRE). Like the DOM and JRE modules, but not all the widgetry? Write your own widgets. Don't like any of the modules? Replace the whole bloody thing! The many problems of building browser-based UIs are not yet well-solved in the state of the art, so it's highly unlikely that GWT's widget library represents a "perfect" solution. For a completely different take on how a widget library should work, have a look at the Ext-GWT library.


To Sum Up

I hope I've managed to convey the pragmatic goals that underlie GWT's design decisions, and the methods we've used to achieve them. There are still a million things we'd like to build and/or change, but I feel like it's off to a pretty good start. Nothing would make me happier than if we could stop arguing about abstract notions of what language is "right" and focus on practical goals and metrics.

29 comments:

Ray Cromwell said...

Nice write up! If I ever getting around to making GwtQuery more production ready, people might get a better idea that GWT can be used in very JS-idiomatic ways (progressive enhancement, functional-style) without using widgets. That's one of the biggest misconception. Half the people seem to think GWT has something to do with applets, the other have seem to think it has to do with servlets (e.g. a JSF/Wicket/Echo-like framework) In between are people who think it's just about UI widgets.

Ross Boucher said...

Great post. I wonder if there would be a way to integrate Cappuccino with some of the GWT tools, but without having to port it to Java. As it is, we're slowly building our own toolchain to do many of the same tasks (like dead code stripping, image spriting, etc.), but its a slow process and we're a tiny team at this point.

Ray Cromwell said...

I think there is much promise in the future of using GWT much like GCC, in that various language frontends and backends could be written and leverage the same optimizations. Moving GWT's internal IR representation to something more abstract like SSA'ed three-address-code is probably in the cards.

Of course, the biggest beneficiaries would be languages like Scala, and other statically typed languages, but there's no a priori reason why GWT couldn't deal with dynamic or optionally typed languages, it's just that code lacking types of inferrable types would have to be treated much more conservatively by the optimizer.

Joel Webber said...

@Ross: I'm sure everyone on the GWT team would love to discuss ways we can learn from each others' experiences. I'm not entirely certain how much Cappuccino could take advantage of our compiler infrastructure, because most of what it does depends upon strict static types (correct me if I'm wrong, but Objective-J is still dynamically typed throughout, right), but at the very least you might be able to take some useful lessons from it.

@Ray: It's pretty hard to avoid pushing on Lex to write a Scala frontend, because it would be so incredibly cool. I'm hoping that when things settle down a bit and we're not pushing quite so furiously on so many fronts, we can talk him into it :)

Dobes said...

This is exactly why I think these projects to compile from python, ruby, or objective-C to javascript are kind of a waste of time - why not just program in javascript directly?

The only thing you gain, in theory, is that you don't have to learn javascript.

However even with GWT you end up learning Javascript anyway - it's inevitable when targetting a browser that you have to learn how it works.

Dave said...

@Dobes
Did you even read the article? Your comment might have been of some merit but for the fact that it seems to be written in total ignorance of the arguments presented.

Joel said...

very cool stuff. keep up the good work.

javieth said...

JavaScript is a good program and very easy to use. I don´t like a complex program. I prefer javascript because i consider it like a device very eficient and it have a good quality.
I always looking for the quality that is why i prefer to buy viagra because i always have a great result in my sexual life.

brinkka said...

Erectile Dysfunction FAQ's

Impotence, or penile erectile dysfunction, in men is not as rare as one would think it is.
In fact, one out of ten men around the world is affected by this condition. It is not exclusive to old men either. Impotence is caused not just by physical factors,
but mental factors as well.
Exercising on a regular basis and eating healthy food will increase your ability to sustain prolonged physical effort and we all know that sex is effort.
Smoking, frequently drinking large quantities of alcohol, taking recreational drugs and lack of exercising will sap your stamina and also slow down the flow of blood.
Penis exercises can be used for maintaining fitness, preventing or controlling premature ejaculation and increasing the length and girth of the penis.
by penis enlargement pills you can overcome these problems and not only that you can also enlarge, extend also to strengthen your penis and premature ejaculation will not exist anymore for you.
visit http://www.factspenisenlargement.com for more info.

male said...

For men who want bigger, harder, longer-lasting erections, there's now VigRX Plus™, a fresh twist on the already popular VigRX™, but designed to further enhance men's sexual functioning with the addition of three exciting new ingredients: Damiana, Tribulus, and Bioperin. Doctor endorsed and rated #1 for results by clients of penis enlargement consumers. rated two penis pills is vimax. if you find about male enhancement this products is the best and proven to work, there products have money-back guarantee in effectiveness and result.

sre94 said...

JavaScript has always confused me

RegCure

kiara said...

Costa Rica Tours
Tours Costa Rica

JagadOOT said...

I find the articles you provided here are interesting and worth to read.
cheap fax machines|mobil keluarga ideal terbaik indonesia|stationary bike

Ak Sağlık said...

I am happy to find this very useful for me, as it contains lot of information. I always prefer to read the quality content
TüpBebek

pedro velasquez said...

This point has perhaps been beaten to death,dominical costa rica tours but there are a lot of good tools for Java, whether you love the language itself or not. Code completion, automated refactoring, static error detection, code coverage, testing, and so forth, are pretty hard to give up once you're used to them.
http://www.dominicalcostaricatours.com

vivek said...

World class support; I ll undoubtedly return to your site for extra know-how.
Locksmith Kendall
Nashville Locksmith
Locksmith Oakland CA
Locksmith Sunnyvale CA
Locksmith Sunnyvale
Sunnyvale locksmith
Sunnyvale locksmith
Locksmith Sunnyvale CA
Locksmith Hanover Park
Locksmith Hanover Park IL
Locksmith Hanover Park
Locksmith Hanover Park
Locksmith Hanover Park IL
Locksmith Hanover Park
Locksmith Hanover Park
Locksmith Hanover Park
Hanover Park Locksmith
Hanover Park Locksmith
Locksmith Hanover Park
Locksmith Hanover Park IL
Hanover Park Locksmith
Locksmith Hanover Park
Aventura FL locksmith
locksmith fort worth texas
miami beach locksmiths
locksmith hialeah
miami beach locksmiths
Aventura FL locksmith
miami beach locksmiths

vivek said...

locksmith hialeah
miami beach locksmiths
locksmith fort worth texas
fort worth locksmiths
pembroke pines locksmith
fort worth locksmiths
pembroke pines locksmith
miami beach locksmiths
miami fl locksmith
fort worth locksmiths
fort worth locksmiths
pembroke pines locksmith
miami beach locksmiths
miami locksmiths
pembroke pines locksmith
pembroke pines locksmith
miami beach locksmiths
locksmith aventura
locksmith aventura fl
locksmith aventura
aventura fl locksmith

DorHam said...

I'm still learning from you, but I'm making my way to the top as well. I definitely love reading everything that is posted on your blog. Keep the information coming. I loved it!


DorHam,
Property Investment

Leonardo said...

It is appropriate time to make some plans for the future and it is time to be happy. How To Cure Candida have read this post and if I could I want to suggest you few interesting things or advice. Perhaps you could write next articles referring to this article. I want to read more things about it!

jelish said...

The Louboutin Shoes Sale is planned using the ladies. offered the fact that pumps was born, the ladies lifestyle turn into colorful. The christian Louboutin 2011 Pumps
will be the god's masterwork. Who invited the Christian Louboutin Wedges ? Seldom people knew, but I think each and every and every lady will be grateful for him. between the countless pumps,the Christian Louboutin Shoes
could be probably the most exceptional ones. The stylish pattern, the delicate design all mold the ladies perfect leg profile. Flowers inside the spring of 2011 creeping, up from frizzy hair to outfits hold on to footwear, have experienced a brilliant up. on this type of the glamor, spring and summer time flowers now here. Romance is really a woman's mood, exquisite flowers just appropriate of expression within our gestures, the woman, how can we not adore the romantic temperament to make certain which they distributed the flowers do? 2011 flowers bloom will get satisfaction from numerous poses! The Christian Louboutin New Sandalsalso can adds the hright in the ladies, it hold shock toward short lady. especially the red-colored lone in the louboutin heels, beauty and sexy, different ladies are crazy. The red-colored sole, andChristian Louboutin Mensis a very distinctive design, its design reflects its style. You put on it, that means you have its style.the earliest attribute in the Sale Louboutin stroe.

jelish said...

The Christian Louboutin Heels can help you become sexy and elegant. christian louboutin 2011 sandals are regarded since the symbolic representation of attractive and elegant.christian louboutin wedgesIt is especially suitable for the women who wear the christian louboutin evening shoes at the first time. These christian louboutin pumps combine top quality, reasonable price and fashional design, which is your best choice Artist who promoted his collection of luxury women's footwear in earlier 90s. No 1 can disregard the existence in the style world, World-famous red-colored soles and christian louboutin peep toe are shaped features. However, you can by no means overlook the beautiful. You do not even need to go inside environment, as well as your slim, gorgeous and graceful legs may be effortlessly discovered in people's eyes.!Welcome to our christian louboutin store.

luck said...

Nike Air Max Shoes unique style and pattern gain very popuplarity from people. This may be the most memorable Air Max generations to see, the weight of the color of the predecessor of the loan, the Nike Air Griffey Max 1 Classic weight.All of the characteristics decide thatNike Air Max 1 are durable , smooth , very good to use for the sports events.Nike Shoes Us are identified as the plan colors , just like white , black , and so on. The populalr of Nike Air Max Shoes is mainly due to the black color is perfect and rounded material layer.

Fashionable life said...

We are dedicated to delivering the most recent and greatest high quality Christian Louboutin Heels along with other artist at Christian louboutin outlet. stroe. With this broad variety of Christian louboutin thong sandals and Christian louboutin pumps sale we are positive that you simply will possibly be in a location to come across some attractive substantial
Christian Louboutin Peep Toes for all individuals unique occasions. Christian Louboutin Heels 2011 now gets the ladies' favorite. unique design, elegant and noble style,this Christian louboutin discount shoes will possibly be your 1st choice.

sping.chen said...

Glad to see all the speakers, really wonderful content. Do not know if you like Nike mercurial soccer cleats or Nike soccer cleats and Nike Football Cleats,Nike Mercurial Vapor Superfly with New nike soccer shoes.

Ak Sağlık said...

Site's character and a great color match .. I will recommend your site to the other platforms.
Göğüs küçültme Ameliyatı

Ak Sağlık said...

I enjoyed this site. Çene Cerrahisi I will recommend your site to other places. Saç Ekim Everyone does not show care. Estetik But you were preparing a site so rich in content. Estetik Burun Ameliyatı Everyone who helped, thank you.

Sabra Allsbrook said...

Very informative and helpful. I have read many articles about this topic and everytime i learn something new i don't think it will ever stop always new info. Thanks for sharing, much appreciated and useful post, keep on track!

downtown Cleveland hotel

Hair Transplant in turkey said...

JavaScript has always confused me
ağrı kesiciler

Op Dr Ali Mezdeği said...

Site's character and a great color match .. I will recommend your site to the other platforms.Saç Ekimi