GWT Blog

New insights into web application performance

Wednesday, November 04, 2009

I've sometimes thought that optimizing web applications is as much a science as dowsing. (No offense intended, dowsers of the world — but you have to admit it's a hard thing to explain even when it does work out.) Even when you are completely willing to invest time and energy into optimizing an application, how do you actually go about it? Our team, along with everyone else in the world who cares about web application performance, has had to essentially guess at where time goes inside the browser. We've spent countless hours debating each others' wild-eyed speculations as to the true sources of latency afflicting a wide variety of applications. Indeed, web apps can be slow for all sorts of opaque and unintuitive reasons. Don't be fooled into thinking that bloated, slow JavaScript is the only culprit. We've seen pathological situations in which a few seemingly insignificant CSS tweaks can improve performance by a factor of 5 or more. Another dark gem: rearranging a mere few lines of JavaScript that were inadvertently calling DOM-related methods in an unfortunate sequence (which caused multiple redundant layouts) turned a life-negating 5 second operation into a sprightly 50 millisecond blink of an eye. That one took 5 days to find the offending 4 lines of JavaScript and then about 3 seconds to actually make the code change. #nowiamwaybehindingooglereader We couldn't take it anymore. We decided we had to find a way to transform the witchcraft of optimizing web apps into a legitimate engineering task, once and for all. My team began working on a series of changes to WebKit and Chrome to collect precise metrics on where time is, in fact, going within the browser. When, exactly, does layout occur? How long does each layout take? Can layout happen synchronously while my JavaScript is executing, or is it deferred? How much time is spent on CSS selector matching? How long does parsing (versus executing) JavaScript take? Does the process of actually painting pixels on the screen take much time? We instrumented the browser way deep down inside to produce a stream of such metrics, being very careful to keep observer effects to a minimum. Happily, we've managed to land these changes into both WebKit and Chrome over the last several weeks. Soon you'll see the first examples of tools that make these metrics available to web developers using WebKit-based browsers. Of course, we have a lot more instrumentation planned, but the ball is really rolling now thanks to lots of help from the friendly folks on the WebKit and Chrome teams (especially Pavel Feldman and Timothy Hatcher). We've gained many new insights, some of which I mentioned in my Measure in Milliseconds talk at Google I/O earlier this year. When you see these metrics yourself for your own web apps, you'll likely be surprised — and you'll almost certainly wonder how anyone tried to write high-performance code without this sort of insight. Be sure to keep an eye on the Chrome Dev Channel and the WebKit nightly builds for new Inspector features based on our work.

The enterprise (apps) in your pocket

Monday, October 19, 2009

send me an emailSocialwokhttp://socialwok.com/

http://app.socialwok.com/

1. Think about the devices you want to support.user.agent.gwt.xml<set-property name="user.agent" value="safari">
Of course, during development we enjoy GWT's quick edit-refresh-test model thanks to Development Mode (formerly Hosted Mode) which lets us test our code in a real browser while executing and debugging in Java..menuPanel { width: 100%; \-webkit-transition: opacity 500ms ease-out 100ms;}here2. Optimize for the screen that your users are using.VerticalPanelFlowPanel

3. Share as much code as possible between versions.JavaScriptObjectThis pageGWT profile on Socialwok on YouTubeImmutableResourceBundleClientBundledata:CssBundleFlowPanel tags. Layouts also seem to be more predictable with these tags than the others on the mobile phone.

GWTQuery - Ray Cromwell's excellent port of JQuery to GWT provides most of the JQuery functionality to allow you to modify CSS, and perform other actions with ease. In the case of the mobile web interface, there are times when it is definitely necessary to modify CSS dynamically, and this library will make that process much easier on you as a developer.

GWT Google APIs (Gears) - Google Gears is a browser plugin installed in the Android Web Browser used to provide extra functionality, particularly offline support which is very import for mobile browsers which don't always have a permanent connection. Google provides a GWT library that can be used to access the Gears plugin.

-- Navin Kumar, CTO, Socialwok

Building Enterprise web apps in the cloud

Thursday, October 08, 2009

An important decision to make when building a web application is how to coordinate state between client and server. This includes how to create appropriate representations of your data to send over the wire.

There are many possible approaches. I'd like to present a straightforward one from Jerome Breche, CEO of TimZon, who was kind enough to share it with us today.

When we started our first GWT project (TimZon.com), we found out that one of the major benefits of using GWT is its ability to transfer complex object data structure between client and server through the RPC mechanism. So when we initiated our second project (SnapABug.com) combining GWT and Google App Engine, we were very excited by the prospect of passing datastore objects directly though RPC.
We quickly realized that this is not very practical. First one of our JDO objects includes images binary representation that we wouldn’t want to communicate through RPC. And then while making the JDO class serializable for GWT RPC may seem like a simple task, it created all kind of new problems since the JDO class will have to be configured as transient (using detachable = "false") and we would still need to copy the object when passing it through the RPC. Instead we decided to simply create intermediary classes for the data objects used only for RPC communication. This way we can exactly control and optimize the data payload used by the RPC both for size and speed. On the JDO side, we simply created a getter and setter function to translate the JDO data into an RPC data format.

Here is an example of how this works in client side code.

1. Employee class: contains JDO objects definition and getter and setter to translate them to GWT RPC serializable format
@PersistenceCapable(identityType = IdentityType.APPLICATION) public class Employee {
@PrimaryKey @Persistent(valueStrategy = IdGeneratorStrategy.IDENTITY) private Long id; @Persistent private String name; @Persistent private String email; @Persistent private Blob image; /**
* Constructor * @param name * @param email */ public Employee(String name, String email) { this.name = name; this.email = email; } /** * Set Employee from RPCDataEmployee */ public void setRPCDataEmployee(RPCDataEmployee employee) { name = employee.name; email = employee.email; } /** * @return Employee data in RPC format */ public RPCDataEmployee getRPCDataEmployee() { RPCDataEmployee employee = new RPCDataEmployee(); employee.name = name; employee.email = email; return employee; } }

2. RPCDataEmployee class used by GWT RPC calls

public class RPCDataEmployee implements IsSerializable {
public String name; public String email; // Note: image Blob not included in RPC payload }

Here is an example of how this works in the server

3. RPCDataEmployee server service implementation
public RPCDataEmployee getEmployee(String email){ RPCDataEmployee employee = new RPCDataEmployee(); // create data store connection PersistenceManager pm = PMF.get().getPersistenceManager(); // query datastore to get emmployee data String query = "select from "
+ Employee.class.getName()
+ " where email == "
+ email;
List employees =
(List) pm.newQuery(query).execute();
if (employees.size() == 1) { // record found employee = employees.get(0).getRPCDataEmployee(); } else { // do something else... }
pm.close();
return employee; }

While I am sure there are many other ways to achieve a similar result, maybe even avoiding duplicating the data classes, this solution was the easiest for us to get going quickly, keep our code very maintainable and control the amount of data exchanged between client and server.
There is also a very interesting discussion about this subject on the GWT Google Group.

-- Jerome Breche, CEO & Founder of TIMZON, LLC

If you would like to share your experiences with GWT and Google App Engine, either privately or on this blog, I'd like to hear from you.

Making AJAX Crawlable

Thursday, October 08, 2009

Search Marketing and Expo East ConferenceGoogle Webmaster Central Bloglet us know your thoughts

GWT helps developers innovate in the enterprise

Monday, October 05, 2009

TechCrunch50 Demopit winnersSocialwokGoogle AppsGoogle App EngineGoogle Web Toolkithere

Riding the Google Wave

Wednesday, September 30, 2009

began inviting the first 100,000 users to preview Google Wavemake Google Wave a realityGoogle Wave Backstage - Q&A with Dhanji Prasannamission statementdeveloper productivity and user performancemuch to dodeveloper previewsamplesGoogle Wave API Documentation

GWT Community Updates

Friday, September 25, 2009

Community announcementsGWT on the go with gwt-mobile-webkit: A new project is underway started by a developer in the GWT community that provides GWT API bindings to HTML 5 features supported by Mobile WebKit. While the project more closely follows the WebKit implementation for HTML 5 features and other WebKit libraries, other browsers are also supported for various HTML 5 APIs. Check out the project homepage for more details.GWT Gadgets riding the Wave: The Google Wave Gadget API is an awesome way to leverage the power of Wave in your gadgets. Thanks to the efforts of yet another great GWT community member, you can now more easily use the Google Wave Gadget API in your GWT developed Gadgets using the cobogwave project. This library builds on the existing GWT Gadgets support available in the Google API Libraries for GWT project.GWT-GData v 1.10.1 released: Developed through the guidance of the GWT team, GWT community contributors and the main project lead, Bobby Soares, the gwt-gdata project recently had its 1.10.1 release. This is a nice library to access many of the GData APIs from Google Analytics to Google Maps Data. The full list of supported GData APIs can be found on the project page.GWT-MVC 0.3 released: The MVC pattern has proven its usefulness in the domain of web application development time and time again. If this pattern is a good fit for the project you're planning or currently working on, you may want to check out the gwt-mvc project, which provides a layer of abstraction to make MVC modeled development easier in GWT.GWT-Connectors 1.7 released: The gwt-connectors project is a really cool tool for developers who need to connect boxed components with connectors, and now includes connectors with arrow tips. You can check out the demo here, and if you like what you see and need it for your application, check out the project page for more information.

Web Toolkit Blog