The Isomorphic Blog


Best practices: loading DataSources dynamically

Just came across this great blog post from SmartClient user David Johnson about a technique for loading required DataSources dynamically as part of a view.

“So how do we provide DataSources customized for the user? Well, we could easily pull the metadata from the database, merge in the user’s security and then write the DataSources into the web page (we are using ASP.Net).

As there will ultimately be around 200 DataSources in the application the time to build every one of them at login time was considered too long.”

The post goes on to describe a custom class, similar to ViewLoader, that handles automatic DataSource loading as part of a transition to a new set of application views.  Usage ultimately look like this, where the viewClass provides a list of DataSources that it requires in order to function:

_rightPane.addTab({
     ID: tabId,
     title: name,
     canClose: true,
     pane: ViewDependencyLoader.create({
         autoDraw: false,
         viewClass: className
     })
});

Great stuff, and David shares the complete source to his solution.

This is also an area where SmartClient will be expanding in the future, with APIs designed to help you more easily load a view along with the data it will need to initially operate, as well as manage a pool of views, for very large applications where LRU (least recently used) or similar view management approaches become important.

Come see us at the Ajax Experience in Boston

We’ll be exhibiting at the Ajax Experience in Boston September 29th – October 1st.   Come out and meet the team at our booth outside the general session hall.   If you’ve been looking forward to seeing SmartClient 7.0 in action,  we’ll be giving sneak preview demos of the new Calendar functionality, Advanced Criteria/FilterBuilder, TileList, and much more.  In addition, we’ll also be demoing the much awaited SmartGWT.    Please come by and see us, and get the first look at these new exciting features!

Browser JavaScript performance leapfrogged again

The race for the JavaScript performance crown is heating up to an almost absurd extent.

Back In June, Apple’s Safari browser was updated with their “SquirrelFish” JavaScript interpreter, providing a huge boost to JavaScript performance that actually put Safari ahead of Tamarin, the JavaScript engine used in Adobe Flex. 

Then, just weeks ago Google released Chrome, including a JavaScript engine, dubbed “V8″, that delivers near-native execution speed for JavaScript code, jumping ahead of SquirrelFish.

Not to be outdone, Brendan Eich of the Mozilla Foundation announced shortly thereafter that pre-release versions of Firefox 3.1 are yet faster than Chrome.

Finally, today Apple has announced further improvements to the SquirrelFish JavaScript interpreter in Safari, more than doubling speed, and blowing by Chrome by almost 1/3.

Of course the million dollar question is, will Internet Explorer keep up?  Apparently, yes.  An in-depth analysis by John Resig of JQuery fame shows that beta versions of IE8 are at least in the ballpark, that is, within 3x of Chrome.  That may sound slow until you realize that still puts IE8 3x ahead of IE7, because the overall speed gains indicated by these announcements are over 10x.  And this is just a beta, released before the performance bar was so drastically and so visibly raised, which should provide motivation to keep up.

Microsoft has also been blogging about IE8 performance work, reportedly looking both at JavaScript performance improvements and improvements in other areas, such as IE’s rendering engine.  From personal experience tuning SmartClient, substantial rendering performance improvements will provide at least as much of a boost as JavaScript performance improvements.

But, bigger picture: the attention being paid to JavaScript performance very, very strongly indicates that all of the major browser vendors are focused on making their browsers the best Ajax platform available, including, for once, the vendors that also have a proprietary platform (Microsoft’s Windows and Apple’s MacOS).  This should be the first of many highly publicized feature, performance and tooling wars which will benefit all applications running on the open web platform. 

The next battle?  Possibly tools.  One of the most encouraging pieces of recent news is that Microsoft is adding a near-clone of Firebug to IE8, including a JavaScript profiler.  At long last, we can all move beyond “‘undefined’ is null or not an object” with an incorrect file and line number.  And it only took – what – 12 years? :)

Catching dangling commas in Aptana

Aptana can be configured to catch one of the most common Javascript programming errors: the dreaded “dangling comma”, an extra comma left trailing after the last property in an object literal. This problem can be fiendishly difficult to spot, particularly if you have a complex, nested arrangement of object literals.

Aptana can point you at these bugs right there in your source editor. To set this up, go to the Window menu and select Preferences, then navigate to Aptana -> Editors -> Javascript -> Validation. Your screen now looks like this:

Ensure that the “JSLint Javascript Validator” box is checked. And that’s it – dangling commas will now be reported as you type, like this:

Announcing SmartGWT

Yes, it’s true! A project has been underway for some time to create a GWT (Google Web Toolkit) wrapper for SmartClient.

The project, dubbed SmartGWT, will be made available under the same LPGLv3 license as SmartClient LGPL, with commercial licensing available as well. It will be hosted on Google Code with public SVN access, and external committers will be welcome to participate as with SmartClient LGPL.

We are happy to say that Sanjiv Jivan, the creator of another popular GWT wrapper, is involved in the development of SmartGWT. Sanjiv brings expertise in precisely the right areas, and with his help we’ve been able to make much more rapid progress with SmartGWT than would otherwise be possible. We expect a preview release sometime in late October to early November.

Our Approach

(if you’re asking ‘what is GWT?’ read “Why GWT?” below)

Anyone who has looked deeply knows that SmartClient is a vast, very complete system – a recent count is that SmartClient supports more than 4000 documented, supported APIs. Translated to Java, this number will be far larger.

For this reason, we’ve taken an approach of generating GWT code from SmartClient’s documentation, combined with hand-coding portions that can’t feasibly be generated. By tweaking our documentation set to contain additional metadata (some of it GWT-specific), we’ve been able to generate code you might not otherwise expect, including things like enumerated constants and convenience constructors.

What this means is that the first release of SmartGWT will provide the complete SmartClient API, fully documented. Out of the gate, SmartGWT will be the most complete GWT platform in existence. And of course, all future versions of SmartGWT will match the API set of the latest SmartClient release.

Why GWT?

GWT allows you to write Java code which is translated to JavaScript by a special compiler, so that it can be run in the browser. This is best explained by example:

You write Java like:

import org.smartgwt.client.*;
import org.smartgwt.client.widgets.Button;
...
Button button = new Button("myButton", "Click me");
button.addClickListener(new ClickListener() {
    public void onClick(ClickEvent event) {
        ISC.say("Hello World!");
    }
});

This means the same thing as:

isc.Button.create({
    ID:"myButton",
    title:"Click me",
    click:"isc.say('hello world!')"
})

There are many approaches for “hiding” JavaScript behind a server-side Java abstraction (such as JSF, JMaki, etc). All these approaches have a common flaw that any code you write in Java requires a trip to the server to execute. The more customization, the more trips to the server, throwing away the primary benefits of Ajax (scalability and responsiveness). In these frameworks, something like a custom drag and drop interaction is essentially impossible – it’s not realistic to contact the server every onmousemove().

GWT differs fundamentally from these server-oriented Ajax approaches. In GWT, the Java code you write actually executes as JavaScript in the browser. So you can write event handlers, drag and drop logic, even custom subclasses of SmartClient widgets, and all of this code executes in-browser, exactly as though you were using SmartClient directly via JavaScript.

In a nutshell, with GWT you get the robust toolset of Java and the performance and scalability of a true “smart client” architecture.

It’s also important to understand that, although you are using Java instead of JavaScript to build your UI, you aren’t tied to a Java server. You can use SmartGWT with any server technology supported by SmartClient itself, including XML or JSON services built in PHP, or WSDL web services. And that combination is still an entirely free, open source offering.

Get Involved

If you are interested in getting the absolute first available sneak peak of SmartGWT, or if you are interested in getting involved in the project, send email to smartgwt at isomorphic.com.

In the meantime, it’s important that anyone choosing platforms right now knows about this very compelling option.  Please help us spread the word – to your colleagues, and to the Ajax blogs and sites you read most!

Thanks,

              Charles

We’ve made it onto Ajax Alltop

We’re happy to say that our blog has now been included on the Alltop Ajax.

If you’re not familiar with it, Alltop groups RSS feeds for sites by category and then lists the five latest postings for each site.  They have many different categories for topics from Ajax to food to iPhones.  You can roll over headlines to get more text of the news item.  You can visit the Ajax Alltop here.   A helpful tip, if you think there are too many feeds, you can click on the “x” to hide some.

Alltop. We're kind of a big deal.

SmartClient plugin for Aptana

We’re pleased to announce a beta release of the SmartClient plugin for Aptana Studio. Among other features, this plugin provides code auto-completion for SmartClient APIs, boosting your efficiency and making it easier to learn and discover SmartClient’s rather vast functionality.

Eclipse fans, take note: Aptana can be installed as an Eclipse plugin, so this will slot right into your existing environment.

Update

If you’re having any trouble getting this working, a couple of tips:

  • If you’re not seeing the “SmartClient 6.5.1″ entries in either Global References or in the New Project wizard, try running “Clean Configuration” on the Help | Aptana Troubleshooting menu
  • If you’re trying to make it work with Eclipse 3.4, you must use the 1.1.7 beta version of Aptana – instructions here

The Aptana IDE is already a pretty good place to do Javascript development, with syntax coloring, error checking and code assist for core Javascript functionality. The SmartClient plugin provides these extra features specifically for SmartClient developers:

  • The option to create a SmartClient project in the Aptana New Project wizard
  • The ability to load the SmartClient documentation browser and Feature Explorer inside Aptana, alongside your code (though you’ll need a tall screen if you want to arrange things like I have here!). The SmartClient docs also appear inside Aptana’s help system.

  • Code Assist on the complete SmartClient API. This feature is similar to the Code Assist / Code Completion / Intellisense features found in most modern IDEs for static languages.

The Code Assist support for SmartClient isn’t yet everything we’d like it to be. For example, there is no code assist for the object literal we commonly pass to the create() function. Passing an object literal with properties is a common pattern in a number of frameworks, however, supporting Code Assist for this will require some Aptana enhancements.  We’re reaching out to the Aptana team to see if we can get this working – stay tuned.

The beta version of the plugin is available right now, for those who can’t wait for shiny new tools.  Follow these steps:

  1. Grab the Community Edition of Aptana Studio here
  2. Download the SmartClient plugin beta here
  3. Unzip the plugin file into your Aptana “plugins” folder.  The “plugins” folder should now contain a subfolder called “com.smartclient.6.5.1″
  4. Start up Aptana and in the “References” view open up “Global References”.  Check the entry for SmartClient 6.5.1
  5. Enjoy…

Finally, just a couple of screenshots showing the Code Assist in action

Showing the list of available classes in the isc namespace:

Showing the class-level methods and attributes of a SmartClient class:

Showing Aptana recognizing “myVar” as a ListGrid instance, and offering code assist accordingly. Note that we are able to do this, even though we created the reference in the standard SmartClient way (using the create() method), rather than using “new”:

Showing Aptana’s code assist support for name, type and descriptions of function parameters:

Showing code assist for known return types. Here, listGrid.getCellRecord() returns an isc.ListGridRecord (as indeed, the last screenshot shows), so Aptana provides code assist for that class appropriately (you can see the full ListGridRecord API in the SmartClient doc window underneath the code window):

The Ajax Renaissance

In his blog “The Clever Monkey“, Curl’s VP of Developer Relations, Richard Monson-Haefel, writes about a new feature coming in IE8, stunningly, citing new Ajax features in IE as signs of the “End of Ajax”.

Richard does not seem to be aware that the XMLHttpRequest API – sometimes called the “X” in Ajax – was a Microsoft proprietary extension first.

It is now an international standard present in all major browsers.

Proprietary innovations that have value get copied and become standards.   It is precisely this kind of innovation – innovation by multiple vendors trying to leapfrog each other – that moves standards forward quickly.

You only need to look as far as, for example, the Surfin Safari blog to understand how this works.  In the past months, major new features for Ajax – including CSS-based image transformations, CSS-based animations, and CSS-based reflections - have been added to Safari and simultaneously put forward as drafts for future international CSS standards.  At the same time, even though Firefox 3.0 provided gigantic performance improvements for JavaScript and Ajax in general, Safari 3.1.1 shipped with a yet faster JavaScript engine, with more improvements on the horizon.

So of course the IE team starts announcing IE8 features to build buzz.  Look at what’s at stake – the Mozilla Foundation had revenues of $56.8 million in 2006 attributed to search royalties alone(source: Wikipedia).  Based on market share hovering around 15% throughout the year, that makes every percentage point of market share worth around $3.8 million per year to the Mozilla Foundation.  It could be argued that the same market share is worth even more to Apple or to Microsoft.

All of these browser vendors understand that the best way to gain market share is to provide features that are compelling to developers and which provide a path to future standardization.  Before Microsoft dominated the browser market, that was exactly what was happening, and that’s where JavaScript (you know – the “J” in Ajax), HTML, CSS and the DOM API came from.  Now that there is renewed competition for browser market share, the innovation is accelerating again.

This is the exact opposite of the “End of Ajax”. This is the Ajax Renaissance. 

SmartClient 7.0

This is a sneak peak at some of the features planned for SmartClient 7.0.

FilterBuilder / AdvancedCriteria

The FilterBuilder is a form that allows the user to input advanced search criteria, including operators on field values such as “less than”, and sub-clauses using “AND” and “OR” operators.  See screenshot below:

Filter Builder Component

As you can guess, the green plus icons allow the user to add new expressions and the button with a “+()” allows sub-clauses to be created, grouped by a logical operator.  As shown, the user has set up criteria that will find South American countries with some kind of federal government, above a certain threshold of either population or gdp.

Part of what’s cool here is how neatly this component fits into the existing DataSource system.  This is the actual code to create a FilterBuilder:

isc.FilterBuilder.create({ dataSource:”countryDS” });

The DataSource tells us what all the fields are, what all the field types are, and can optionally define what operators are allowed on which fields.  The FilterBuilder is type-sensitive, so for example, for a field of type:”date”, the FilterBuilder will show a date picker automatically.

All of this is highly customizable and extensible – you can even define new operators, and define custom FormItems allowing users to pick values to compare against – eg, if you define a “zipCode” type, maybe the picker opens a Google map.

The DataSource subsystem provides the ability to actually execute the search, client-side or server-side as necessary, similar to existing simple criteria searches.

This is another core ListGrid feature that, like grouping, frozen columns, inline filtering, charting, etc, can be enabled for any grid by just setting a flag.  The overall thrust here is to give end users the level of control over the data that ordinarily only the developers have access to.  That way the developers take more vacations :)

TileList

This is a component that renders objects in a grid of tiles, frequently found in online stores, photo sharing apps, directory sites and the like.  It has a rich set of UI interactions: rollover, selection (including shift- and ctrl-select), hoop selection, etc.  Animations and drag and drop are planned as well.

TileList Component

But again what really shines is the databinding system – TileLists are a DataBoundComponent, so they use a DataSource and ResultSet just like a ListGrid.  As with a ListGrid, you get a reasonable, type-sensitive default view by just binding to a DataSource, for example, fields of type “image” will actually show the image, as in the view above.  Likewise, because the TileList uses a ResultSet, it supports the full set of sorting, filtering, data paging, and other data-related features supported by a ListGrid, with the same APIs.

The TileList also has incremental rendering support, so it’s safe for use with very very large datasets.

The upshot is, because of the uniformity in how a TileList is configured and accesses data, a menu item on a ListGrid for “Show as tiles” makes sense, and we’ll have a ListGrid flag that enables this with no further configuration.

.. these are quite substantial features, but they are just a part of what’s planned in 7.0.  Stay tuned for more – we plan to make beta versions available via this blog for those who like to live on the edge.

Cheers


Welcome

So we’ve started a blog.

The idea is communicate more with our customers, people evaluating or otherwise investigating SmartClient, and basically, anyone with insight and intelligent opinions to share :)

In this blog you will find:

  • roadmap info about the future of SmartClient and what to expect in the next few versions
  • stories and anecdotes about the use of SmartClient and Ajax in general
  • tips and tricks for working with SmartClient
  • commentary from Isomorphicants on industry trends and technology
  • occasional early access releases or live demos

Feedback is welcome.

Enjoy

Page 6 of 6« First...«23456