HTML5 and Dart @ Rich Web Experience

Thanks for all the great Dart questions today at Rich Web Experience! Slides are available at www.dartlang.org/slides/. See the Nov 16 Devoxx presentation as that’s the deck I ran today with just title page tweaks and more demos. I completely forgot to demo frog tip, which allows you to write Dart code that interacts with the DOM right in the browser tab. It’s under dart/frog/tip in the Dart source repo if you want to check it out. See the Getting Started wiki page to check out the source and build.

HTML5 and GWT @ Rich Web Experience

Here are the slides from my HTML5+GWT talk at Rich Web Experience:

Building Mobile and Enterprise Apps with HTML5 and GWT

The talk is very similar to the combined GWT and Dart talk I gave at SenchaCon last month, which you can find at www.dartlang.org/slides/.

Google Plugin for Eclipse now open source

This is pretty big news for the GWT community and should make it easier for GWT frameworks to build tooling for Eclipse. Witness JBoss, who was working on GWT integration even before the announcement. Congrats to the GPE team!

Dart-to-JS compilation with Frog

I’ve been playing a bit with frog, the new Dart compiler written in Dart. Although it does not yet have all the capabilities of dartc, I’m seeing very nice improvements in compilation speed and the size of the resulting JS. Here’s some data for the sunflower and spirodraw samples:

Sunflower:

• dartc: 109,612 bytes
• frog: 12,131 bytes

Spirodraw:

• dartc: 121,799 bytes
• frog: 24,320 bytes

The dartc results were obtained by running “dartc –optimize sample.dart”. The unoptimized JS is much larger.

Frog optimizes by default. I had previously built dart on my Mac as per the wiki and installed node.js per the frog README. From there, I ran:

> cd dart
> ./tools/build.py --arch=ia32 -m release
> cd frog
> mkdir bin
> ln -s ~/code/bleeding_edge/dart/xcodebuild/Release_ia32/dart_bin bin/dart_bin
> ./frog.py --js_out=frogsh -- frog.dart
> export PATH=$PATH:$PWD

Then I compiled the sunflower sample with frog:

> cd ../client/samples/sunflower
> frogsh --compile-only --out=sunflower.js Sunflower.dart

Because the samples are designed to be compiled with htmlconverter.py, I also had to modify the script tag in sunflower.html to reference sunflower.js instead of Sunflower.dart (and removed type=”application/dart”).

Frog runs about 10x faster than dartc –optimize on the command line! This is comparable to dartc performance in the editor, which has the advantage of a warm JVM (frog, on the other hand, runs in the Dart VM). The dramatic difference in code size is likely because dartc had not yet implemented dead code elimination. And, unlike dartc, frog does not support incremental compilation so was able to take an entirely different approach. Also, frog is not finished, so there may be gotchas that appears as more corner cases are implemented. But for the moment, it looks very promising.

DART slides from SenchaCon

I thoroughly enjoyed SenchaCon this week in Austin, TX, where I presented Building Modern Web Apps with HTML5 and DART. Overall, I was very impressed with the quality of the developers at SenchaCon. It was a special treat to meet Darrell Meyer and Sven Brunken, lead developers for Ext GWT. In the last year, Ext GWT has undergone a huge refactoring to do things more consistently with vanilla GWT (including Cell widgets and the Appearance pattern), and now makes advanced use of these as well as the new AutoBeans framework. I regret not meeting Darrell, Sven, Colin, and team sooner, as they are clearly sophisticated GWT developers who understand the innards of GWT quite well and have taken pains in the last year to make Ext GWT more interoperable with mainline GWT, including throwing away some of their previous work when GWT rolled out with the same functionality unanticipated. I frequently get asked about GWT consulting and am delighted to learn that Sencha has a growing professional services team knowledgeable about GWT as well as all things browser. This is not an official endorsement, but Sencha certainly appears to be one of the few companies capable of handling large GWT projects.

I had lots of fun watching developers interact with the Chromebooks on display in the Chrome booth. Many folks mentioned getting one for their kids or grandmas this Christmas (“and give yourself the gift of no tech support”). I am personally more attracted to the Chromebook than tablets, but that’s mostly because I’m so keyboard-focused (the trackpad on the Samsung Chrombook, by the way, is one of the better I’ve used apart from a Mac–I haven’t tried the Acer Chromebook yet). One place where a tablet would excel is crammed in the back of an airplane, where there’s not really enough room to open my 15″ MacBook Pro. Speaking of which, flights are much more bearable with a laptop and wi-fi. I think I’m addicted to work.

Back to Dart. I regrettably did not leave any time for questions, but was pleasantly surprised at feedback from JS developers after my talk who expressed frustration with Javascript’s lack of typing and scoping and were cautiously optimistic about Dart as a better way to build large-scale apps in the browser. I also met folks who are currently building large apps in JS by compiling from ActionScript. The fact that people are doing this (along with compiling from Java using GWT) definitely points to the need for better languages in the browser.

 

New article on DART

This InfoQ article covers some of DART’s more interesting features like snapshots and isolates.

First thoughts on Dart from a GWT developer

I consider myself more of a tools & frameworks guy than a language geek so I’m more likely to groan than gush over a new language for the Web.

However, as I dug into Dart a bit working on a couple of the samples, I have to say I caught a bit of the same fire that I felt when I first encountered Google App Engine and GWT. Dart is fun. Coming from a GWT / Java background, I found it easy to get started.

Here are a few of my favorite things about Dart so far:

1. Closures. You can register an event handler as simply as
   element.on.click.add((Event e) { window.alert('You clicked'); });
   Already, I don’t miss the clutter of anonymous inner classes.
2. Functions can be passed by reference. You can define
   myClickHandler(Event e) { ... }
   and then just write
   button.on.click.add(myClickHandler);
3. Function type aliases are a compact way to create your own callback types.
4. Optional typing. At first I thought I wouldn’t like this. However, as the Ruby community has long pointed out, Java is full of redundancy. Why write
   String[] values = new String[] {"a","b","c"};
   when
values = ['a','b','c'];
   will do?
5. Getters and setters. If you define methods using the get or set keywords, Dart will invoke them when you reference a field using dot notation. That is, some.property automatically invokes some.getProperty();.
6. Constructor initializers. If an argument has this. before it in a constructor argument list, the field with that name will automatically be initialized with that argument’s value. So a constructor that simply assigns arguments to fields can be written on one line:
   Point(this.x, this.y);
7. The Dart DOM and HTML libraries provide convenient and mostly transparent access to the DOM. Thus, you can easily use static layout in an HTML file and call document.getElementById(). The Canvas code in the Sunflower and Spirodraw samples is almost identical to the corresponding Javascript.
8. document.query(id_or_class) and .queryAll() work very similar to jQuery. These are part of the Dart HTML library, which offers convenient access to the DOM.

Thanks to all the syntactic sugar, Dart code is quite a bit smaller than the corresponding GWT app. My GWT sunflower app required very little modification to run in Dart, and the Dart code for the app went from 96 lines to 58 lines. Better still, I replaced the GWT SliderBar widget (almost 1000 lines of Java) with just a few lines of static HTML (my apologies to Firefox users: FF doesn’t support <input type=”range”> yet). Spirodraw was reduced from ~500 lines to ~300 lines, and the control panel layout is completely static HTML, which makes it easier to read.

Of course, it’s very, very early for Dart. GWT is a mature toolkit with a solid IDE (Google Plugin for Eclipse, among others), mature frameworks for RPC, MVP, etc., and a large open source community. But based on first looks, Dart is a promising new way to write Web apps. If browser vendors implement the Dart VM natively, it will rock! Chrome seems pretty likely to do this, at least. Until then, you can use dartc to produce JS for any modern browser. Hopefully, the editor (demo’d in the GOTO conf keynote this morning) will ship soon and make it easy for everyone to get started with Dart.

See also

• Official Dart language site
• Dart code samples (including ported GWT samples Sunflower and Spirodraw)
• Idiomatic Dart (great intro to Dart features)

App Engine code download saves the day

While I was working on the sample project for yesterday’s post, I accidentally deleted the src and target folders in my project. I’m not entirely sure how this happened, but my source files were neither in the Trash folder nor Eclipse local history (except for the Maven POM, which I had just been working on). I was just getting ready to check into SVN but hadn’t done it yet, so it was beginning to look like a total loss.

Fortunately, I had just deployed my project to App Engine, which now allows you to download your deployed application. Java sources don’t get deployed so I had only WEB-INF/classes to work with, but a quick trip through JAD recovered the sources also (albeit sans comments–sorry about that, folks). I like this new GAE feature. In the future, I’ll at least create a local git repo before I start mucking with the Eclipse Run configs…

Using the GAE App Identity API and OAuth2

One of the challenges of cloud computing is interoperability: how can an application hosted on one cloud service authenticate and communicate with another cloud app or service? Within the enterprise, IT departments often utilize a central identity store like PingFederate from Ping Identity. How to manage identities in the cloud, however?

Google App Engine recently unveiled one solution: the Application Identity API, which provides your app with public key infrastructure managed by Google. Each App Engine app has a unique identity in the form of an email address and public/private key pairs which are rotated every few hours. The API lets your app discover its own identity, obtain the current public keys, and sign an object using the private key. The beauty of the API is that you the developer don’t have to manage the keys at all. Google handles all the PKI, crypto, rotation, and security.

Recently, at the Cloud Identity Summit sponsored by Ping Identity, I presented an example of using the Application Identity API to connect from App Engine to Google Storage as part of a 3-hr workshop on Integrating with the Google Cloud (see slides 149-153). I’ve now published a sample project showing how a GAE app can authenticate to the Google Storage API using OAuth2 and the App Identity API.

How to call Google Storage API from App Engine Java

Let’s say you’ve created a Google Storage account (free within limits) and want to access it from your Java code in App Engine. First, you need to set up your Google Storage account appropriately:

1. Add your GAE app’s unique ID (aka “robot” email address) to Team in Google APIs Console.
   • to find it, call ApplicationIdentityService.getServiceAccountName() in your GAE app
   • assign write or owner access
   • use in bucket ACLs also
2. Note your Google Storage project ID (click Google Storage in the left nav of the Google APIs Console)

Now in your Java code, you’ll

1. Obtain your app’s unique ID with ApplicationIdentityService.getServiceAccountName()
2. Create a JWT token with issuer ID = your app’s unique ID
3. Sign it with ApplicationIdentityService.signForApp()
4. Exchange it for an OAuth token by calling Google’s OAuth endpoint (which, in turn, calls App Engine infrastructure to verify your app’s identity).
5. Include the OAuth token with each request to Google Storage API

Two different sample projects illustrate how to do this. You might want to start with GoogleStorageImpl.java showing all the low-level calls to create a JWT token and exchange it for an authentication credential.

Once you understand how it works, you can extend AbstractTwoLeggedFlowServlet to handle the token exchange for you. This is the approach I’ve taken in the App Identity Sample with OAuth2 and Google Storage. As an aside, the Maven POM in this project is a good starting point if you’re looking to call Google APIs from Java. There are lots of jars associated with Google APIs Client Library for Java available in Maven Central, and it can be confusing to figure out which ones are really needed.

Note: the sample projects above will only work if you actually deploy the code to App Engine. Google’s OAuth2 endpoint only works with production infrastructure (not your local dev server).

This article is about application identity, but if you’re also interested in user identity, be sure to check out the Google Identity Toolkit, which makes it easy for you to support login to your app from other identity providers (Yahoo, Hotmail, AOL).

Resources

• Google’s Internet Identity Research
• Integrating with the Google Cloud (workshop from Cloud Identity Summit 2011, PDF)
• Google Identity Toolkit (makes it easy for your app to
• Google APIs Console
• Google APIs Client Library for Java
• Google APIs App Identity Samples with OAuth2 (using low-level HTTP calls)
• App Identity Sample with OAuth2 and Google Storage (using AbstractTwoLeggedFlowServlet)

Custom search shortcuts in Chrome

One of my favorite Chrome features is the “one box” which serves as both address bar and search box. Press Ctrl+L and away you go. It’s also the handiest way to access bookmarks. Press Ctrl+L and start typing the name of one of your bookmarks, and you’ll see it appear as one of the starred items. Just arrow down and press Enter to go to the bookmark. Some Chrome extensions contribute shortcuts to the one box, and you can also create your own.

For example, let’s create a shortcut to search dictionary.com. Right-click in the Chrome onebox and click Edit search providers. You’ll see many defined already. Scroll to the bottom and click in the box that says Add a new search engine. Type “Dictionary.com”, then tab to the next box, where you’ll enter a shortcut. Type the letter “d”, then tab to the next box and enter this URL: “http://dictionary.reference.com/browse/%s”. To save the shortcut, click anywhere on the page.

Now try it out: press Ctrl+L and type “d blogger” then press Enter. As soon as you type the space after “d”, you’ll see that you’re searching Dictionary.com, and when you press Enter, your results appear.

Here are some other useful shortcuts:

• Weatherbug.com (“wx”) http://weather.weatherbug.com/Common/SearchResults.html?loc=%s
• Wikipedia (“w”) http://en.wikipedia.org/w/index.php?title=Special:Search&search=%s
• Amazon.com (“a”) http://www.amazon.com/s/ref=nb_sb_noss?url=search-alias%3Daps&field-keywords=%s

In most cases, you can determine the correct URL by doing a search at the target Web site (like weatherbug.com) and observing the URL in the address bar after the search. Simply replace your search words in the URL with “%s” as in the examples above.

Happy shortcutting!