Developer
Advocate

Javascript Performance Between Popular Browsers

Thu, 7 Oct 2010 21:46:23 +1700

Using the recently updated V8 Benchmark Suite Version 6 ( http://v8.googlecode.com/svn/data/benchmarks/v6/run.html ) javascript test suite, here is the breakdown for scoring by browser version. Higher is better:

Chrome 7.0: 3077

Safari 5.0.1: 1493

Internet Explorer 9.0 Beta: 877

Firefox 4.0 Beta 6: 683

Firefox 3.6.10: 346

Conclusion: Chrome blows away the competition. Not surprising, as Chrome has almost seemed leaps and bounds faster than anything else to me.

Google Web Toolkit (GWT) Wrapper For Twitter @Anywhere Javascript API

Mon, 30 Aug 2010 22:52:16 +1700

I recently created a wrapper using google web toolkit (gwt) for the twitter @anywhere api. I decided to release it as open source under the bsd license.

package org.gwtanywhere.client;

import com.google.gwt.json.client.JSONParser;

import com.google.gwt.json.client.JSONValue;

import com.google.gwt.user.client.rpc.AsyncCallback;

import com.google.gwt.user.client.ui.HTMLPanel;

import com.google.gwt.user.client.ui.Widget;

public class TwitterAnywhere

{

private static AsyncCallback<UserInfo> getUserInfoCallback = null;

public TwitterAnywhere()

{

}

public void LoginWithTwitter()

{

LoginWithTwitterNative();

}

public void Hovercards(Widget widget, boolean linkify, boolean expandedByDefault)

{

HovercardsNative(addUniqueIdToWidgetAndReturnId(widget), linkify, expandedByDefault);

}

public void beginGetCurrentUserInfoObject(AsyncCallback<UserInfo> callback)

{

getUserInfoCallback = callback;

try

{

// kick off the async processing

getUserInfoNative();

}

catch(Exception ex)

{

callback.onFailure(ex);

}

public static native void registerParseUserInfo()

/*-{

$wnd.parseUserInfo = $entry(@org.gwtanywhere.client.TwitterAnywhere::parseUserInfo(Ljava/lang/String;));

}-*/;

public static void parseUserInfo(String json)

{

JSONValue jsonValue = JSONParser.parse(json);

// screen_name, name, profile_image_url, friends_count, followers_count, description, url, id, statuses_count, following

getUserInfoCallback.onSuccess(new UserInfo(getJsonValue(jsonValue, "screen_name"), getJsonValue(jsonValue, "name"), getJsonValue(jsonValue, "profile_image_url"),

getJsonValue(jsonValue, "friends_count"), getJsonValue(jsonValue, "followers_count"), getJsonValue(jsonValue, "description"),

getJsonValue(jsonValue, "url"), getJsonValue(jsonValue, "id"), getJsonValue(jsonValue, "statuses_count")));

}

private static String getJsonValue(JSONValue jsonValue, String propertyName)

{

return jsonValue.isObject().get(propertyName).isString().stringValue();

}

private static native void HovercardsNative(String domElementId, boolean linkify, boolean expandedByDefault)

/*-{

$wnd.twttr.anywhere(function (T)

{

T("#" + domElementId).hovercards({ linkify: linkify, expanded: expandedByDefault });

});

}-*/;

private static native void LoginWithTwitterNative()

/*-{

$wnd.twttr.anywhere(function (T)

{

T.signIn();

});

}-*/;

private static native String getUserInfoNative()

/*-{

$wnd.twttr.anywhere(function(T)

{

$wnd.parseUserInfo("{ " +

"'screen_name': '" + T.currentUser.data('screen_name') + "', " +

"'name': '" + T.currentUser.data('name') + "', " +

"'profile_image_url': '" + T.currentUser.data('profile_image_url') + "', " +

"'friends_count': '" + T.currentUser.data('friends_count') + "', " +

"'followers_count': '" + T.currentUser.data('followers_count') + "', " +

"'description': '" + T.currentUser.data('description') + "', " +

"'url': '" + T.currentUser.data('url') + "', " +

"'id': '" + T.currentUser.data('id') + "', " +

"'statuses_count': '" + T.currentUser.data('statuses_count') + "', " +

"'following': '" + T.currentUser.data('following') + "' " +

"}");

});

}-*/;

private String addUniqueIdToWidgetAndReturnId(Widget widget)

{

widget.getElement().setId(HTMLPanel.createUniqueId());

return widget.getElement().getId();

}

This work is licensed under the apache license, listed below:

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
Neither the name of the Infinite Power Publishing nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

gwt scrollable suggestbox

Mon, 2 Aug 2010 13:55:52 +1700

I modified the gwt suggestbox class a bit to support scrolling up and down using the arrow keys as well as the mouse. Enjoy!

* Licensed under the Apache License, Version 2.0 (the "License"); you may not

* use this file except in compliance with the License. You may obtain a copy of

* the License at

* http://www.apache.org/licenses/LICENSE-2.0

* Unless required by applicable law or agreed to in writing, software

* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT

* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the

* License for the specific language governing permissions and limitations under

* the License.

package com.google.gwt.user.client.ui;

import com.google.gwt.dom.client.Document;

import com.google.gwt.dom.client.Element;

import com.google.gwt.event.dom.client.HandlesAllKeyEvents;

import com.google.gwt.event.dom.client.HasAllKeyHandlers;

import com.google.gwt.event.dom.client.KeyCodes;

import com.google.gwt.event.dom.client.KeyDownEvent;

import com.google.gwt.event.dom.client.KeyDownHandler;

import com.google.gwt.event.dom.client.KeyPressEvent;

import com.google.gwt.event.dom.client.KeyPressHandler;

import com.google.gwt.event.dom.client.KeyUpEvent;

import com.google.gwt.event.dom.client.KeyUpHandler;

import com.google.gwt.event.logical.shared.HasSelectionHandlers;

import com.google.gwt.event.logical.shared.SelectionEvent;

import com.google.gwt.event.logical.shared.SelectionHandler;

import com.google.gwt.event.logical.shared.ValueChangeEvent;

import com.google.gwt.event.logical.shared.ValueChangeHandler;

import com.google.gwt.event.shared.HandlerRegistration;

import com.google.gwt.user.client.Command;

import com.google.gwt.user.client.DOM;

import com.google.gwt.user.client.ui.PopupPanel.AnimationType;

import com.google.gwt.user.client.ui.SuggestOracle.Callback;

import com.google.gwt.user.client.ui.SuggestOracle.Request;

import com.google.gwt.user.client.ui.SuggestOracle.Response;

import com.google.gwt.user.client.ui.SuggestOracle.Suggestion;

import java.util.Collection;

import java.util.List;

/**

* A {@link SuggestBox} is a text box or text area which displays a

* pre-configured set of selections that match the user's input.

* Each {@link SuggestBox} is associated with a single {@link SuggestOracle}.

* The {@link SuggestOracle} is used to provide a set of selections given a

* specific query string.

* <p>

* By default, the {@link SuggestBox} uses a {@link MultiWordSuggestOracle} as

* its oracle. Below we show how a {@link MultiWordSuggestOracle} can be

* configured:

* </p>

* <pre>

* MultiWordSuggestOracle oracle = new MultiWordSuggestOracle();

* oracle.add("Cat");

* oracle.add("Dog");

* oracle.add("Horse");

* oracle.add("Canary");

* SuggestBox box = new SuggestBox(oracle);

* </pre>

* Using the example above, if the user types "C" into the text widget, the

* oracle will configure the suggestions with the "Cat" and "Canary"

* suggestions. Specifically, whenever the user types a key into the text

* widget, the value is submitted to the <code>MultiWordSuggestOracle</code>.

* <p>

* Note that there is no method to retrieve the "currently selected suggestion"

* in a SuggestBox, because there are points in time where the currently

* selected suggestion is not defined. For example, if the user types in some

* text that does not match any of the SuggestBox's suggestions, then the

* SuggestBox will not have a currently selected suggestion. It is more useful

* to know when a suggestion has been chosen from the SuggestBox's list of

* suggestions. A SuggestBox fires {@link SuggestionEvent SuggestionEvents}

* whenever a suggestion is chosen, and handlers for these events can be added

* using the {@link #addValueChangeHandler(ValueChangeHandler)} method.

* </p>

* <p>

* <img class='gallery' src='doc-files/SuggestBox.png'/>

* </p>

* <h3>CSS Style Rules</h3>

* <dl>

* <dt>.gwt-SuggestBox</dt>

* <dd>the suggest box itself</dd>

* <dt>.gwt-SuggestBoxPopup</dt>

* <dd>the suggestion popup</dd>

* <dt>.gwt-SuggestBoxPopup .item</dt>

* <dd>an unselected suggestion</dd>

* <dt>.gwt-SuggestBoxPopup .item-selected</dt>

* <dd>a selected suggestion</dd>

* <dt>.gwt-SuggestBoxPopup .suggestPopupTopLeft</dt>

* <dd>the top left cell</dd>

* <dt>.gwt-SuggestBoxPopup .suggestPopupTopLeftInner</dt>