Ajax

ECMAScript Harmony

Tagged:  

Big news for the future of the Web: JavaScript 2 (ECMAScript 4) is dead, though pieces of it will live on in the new ECMAScript 3.1-based (informally dubbed "Harmony") specification. The members of the ECMA Technical Committee 39 (Adobe, Mozilla, Opera, and Google in favor of ECMAScript 4 and Microsoft, Yahoo in favor of the less ambitious ECMAScript 3.1), which had been at odds over the future direction of the JavaScript language for some time, finally agreed upon the new direction. Brendan Eich, the original creator of JavaScript, broke the news on Wednesday (8/13).

The details of what the new unified specification will look like are far from finalized at this point, but clearly it will be a very scaled back version from the ambitious ECMAScript 4 proposal. Some early results:

  • Packages, namespaces, and early binding from ES 4 are off the table for good.
  • ES 4 classes are being "rephrased": they will now be syntactic sugar for lambda-coding and Object.freeze() (which was proposed in ES 3.1)
  • JavaScript getters and setters are being fast-tracked as part of the new specification.
  • ES 4 let expressions seem to have some general agreement among committee members.

The announcement has sent ripples across the Web. Adobe, which had built ActionScript 3 to closely match anticipated ECMAScript 4 features, has maintained that they will not change AS 3 at all in response to the new direction. Some have speculated that Microsoft's motivation in bucking the ECMAScript 4 standard--and certainly the main factor in why it was abandoned--was political.

Whatever the reasons for abandoning ECMAScript 4, it is certainly clear that JavaScript will now evolve at a much slower pace than some had hoped or anticipated.

YUI 3.0 Preview Release 1

The Yahoo! User Interface development team has released the first preview version of YUI 3.0. According to the team blog, there are 5 goals for the new release: lighter code (in kb), faster code (fewer HTTP requests, more compact code), greater API consistency, more powerful API capability, and more securable code.

What's New?

  • Sandboxing: each YUI instance can now be separated from other instances via YUI.use()
  • Modularity: YUI 3.0 is architected to use smaller, more re-usable modules.
  • Self-completing: With the seed file in place, you can tell YUI what modules you want to use, and it will download them in a single HTTP request.
  • Selectors: Elements can be targeted via CSS selector idioms (much like jQuery)
  • Enhanced Custom Events: Custom Events in YUI 3.0 have been enhanced with support for bubbling, stopping propagation, assigning/preventing default behaviors, among other things.
  • Nodes and NodeLists: You can now reference elements via Node and NodeList facades, allowing a more fluid API.
  • Chaining: YUI is adopting a fluent interface style, using method chaining to achieve greater expressiveness (and compactness)

For those who don't like the jQuery-style fluent interfaces in YUI 3.0, a more explicit/verbose API is still available. YUI 3.0 will not be completely backward compatible with YUI 2.0, but there will be a limited compatibility layer.

You can download the preview release here. A final release is not anticipated until next year.

Continuous scrolling pattern using JavaScript and ASP.NET

Tagged:  

You have probably seen some of the search engines where you can keep scrolling through your search results and they load as you scroll without clicking a next button. Well if you have been looking for a good example the Janko at Warp Speed blog has put together a good example using .Net and JavaScript.

Below is an excerpt from the post.

Implementation

continuous scrollingTypically, user is notified that new content is being loaded by showing indicator in the bottom right angle of a content (as you can see on the screenshot on the left).

Generally, it looks like this: Initial content is loaded on the start. When user scrolls down to the end of the content, JavaScript function calls local WebService and a set of new items is sent back to the client.

Let's make an example. Since I use Google Reader every day, let's make something that looks like it. Ok, I admit, I stole colors for this example :)

This is going to be very simple. I have a list of countries stored in SQL database. Each country has ID, Name and number of Internet users. I would like to show the complete list in a div, and to enable continuous scrolling. Image on the left shows our example.

So, I will define CountryWS that will get the data from the database. This is the first catch and might be tricky. Since new data have to be loaded on request (precisely on scroll) I have to do paging in the database. I do that by sending two parameters to my stored procedure: PageIndex and PageSize. PageIndex will tell my stored procedure which page to query, and PageSize - how many items to retrieve.

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class CountryWS : System.Web.Services.WebService
{
    [WebMethod]
    [ScriptMethod]
    public List<Country> GetMoreCountries(int pageIndex, int pageSize)
    {
        System.Threading.Thread.Sleep(1000);

        SampleDAO sampleDAO = new SampleDAO();
        List<Country> countries = sampleDAO.GetCountriesPaged(pageIndex, pageSize);
        return countries;
    } 
}

That is "the server" part. Let's see what will happen on the client. All items will be rendered in a div that has onscroll handler defined.

<div id="content" runat="server" onscroll="OnDivScroll()">
    <%--Items will be rendered here--%>
</div>

OnDivScroll function will do a simple job - it will determine if the user scrolled down to the near bottom of the content. Then it will call CountryWS and pass the result to HandleRetrievedData function.

function OnDivScroll()

    var content = document.getElementById('<%=content.ClientID %>');
    if(content.scrollTop < content.scrollHeight - 500)
        return;

    CountryWS.GetMoreCountriesObject(pageIndex, pageSize, HandleRetrievedData );
}

This is a second catch. Why near? The answer is simple - if you want your user to read smoothly, you'll have to load a new content BEFORE he/she reaches the end of the content. Ok?

And for the end, HandleRetrievedData function will parse the result and render new content.

function HandleRetrievedData(result)
{
    var content = document.getElementById('<%=content.ClientID %>');

    for (var i = 0; i <= result.length - 1; i++)
    {
        content.innerHTML += "<div class='entry'><b>" +
            result[i].CountryName + "</b> (" + result[i].Symbol + ") - " +
            result[i].InternetUsers + " internet user(s)</div>";
    }
}

You will notice that sample code is more complex than this example, but I will let you sweat a little bit ;)

You can read the full post here.

Web Based Document Viewer

Tagged:  

AJAX Document Viewer www.ajaxdocumentviewer.com
Ajax Document Viewer is a web based online document viewer and can embedded into any web page or linked from any page. It is fast, customizable and FREE.
Are you having problems displaying documents, pdf's, images, word documents? Do your customers have to download a reader to view a file? Do you need a fast pdf reader? Do you need a universal viewer for any kind of documents?

All these problems go away by using Ajax Document Viewer.

For most companies, getting software products to market on time, on budget, and with the right features and functionality is always a challenge. But it doesn't have to be.

Tibco General Interface 3.6.0 Released

Tagged:  

General Interface (GI) 3.6.0 has been released. This new version promises JSON data mapping (a very good thing as JSON is being highly used by Web 2.0 sites) and template custom control among other things.

Below are some of the key features highlighted on the GI website.

Make Richer Ajax Applications. Faster.

TIBCO General Interface™ 3.6.0
Professional Edition

100+ ready made Ajax controls

Unparalleled visual tools

Extensive docs

Open source BSD licensed


General Interface 3.6.0 brings you:

Template custom control

CDF form mapping

JSON data mapping and JSONP protocol support

One of the main issues that I have had with GI in the past is that it is very heavy on the front end load. Tibco has addressed this issue by allowing you to use different deployment types that allow you to fine tune what is loaded. This really helps the performance and makes the possible use of GI on public facing sites closer to a reality (there are still some browser compatibility issues that will keep the tool from major adoption on public facing sites).

You can learn more about GI (including downloading of the application) here.

The new version of GI is a good tool for developing Ajax applications for internal corporation use. While it is getting closer to possibly being useful in public facing applications, there is still some work to be done before I can see this happening.

Ext GWT 1.0 Released

The Ext JS team has released version 1.0 of its SDK for developing GWT applications with the Ext JS library. Despite some controversy around Ext's licensing strategy (namely the switch from LGPL to GPL), Ext GWT is currently one of the better integrations between a Java web application framework and a JavaScript framework.

Ext GWT 1.0 has been compiled and tested against GWT 1.5 RC1. Downloads are located here.

Free Web Based Contraction Timer

Tagged:  

If you are a regular reader of this blog (and I hope that you are or are becoming one) you have probably noticed that I haven't posted anything for about a week. Well, the reason for this is that my wife and I have been blessed with our first child (Thomas Richard Hurth).

In the process of waiting for labor, my job was to time the contractions. In having this important task I found a web application that makes the job much easier called Contraction Master.

Contraction Master is very easy to use, you simply click on Start Timing Contractions and then you hit the space bar at the start and end of each contraction. The application keeps a log for you so you know when to go to the hospital.

You can get to the Contraction Master here.

I hope that anybody that may be expecting a child will find this application useful and I would love to hear your experience with it.

jQuery UI 1.5 - Rethinking UI

Congratulations to the jQuery UI team on their release of jQuery UI 1.5!

jQuery UI provides low to high-level interactions and themeable widgets for your rich internet applications. Since it's built on the jQuery JavaScript Library, you have a solid foundation on which to build your apps. The library revolves around different mouse interactions, including drag/drop, sorting, selecting, and resizing. Also, you can expect to find the jQuery Enchant effects framework along with some reusable widgets [accordions, date picks, dialogs, sliders, and tabs] included in this release.

What's new?

- Refactored API
95% less exposed methods means 95% less methods you have to remember.

- Increased Stability
A dedicated bug tracker, new unit tests, and the addition of jquery.simulate.js - a plugin specifically designed to fire true browser events..

- Effects
As mentioned above, this release includes Enchant as a part of jQuery UI and includes features like advanced easing, class transitions (morphing) and color animations. You also get all the effects that come standard with script.aculo.us (blind,bounce,drop,fold,slide …), but also some new effects like transfer, explode. clip, and scale. Check out the demos.

View the changelog for a full list of features, bug fixes, and other changes in this release

Imagine you've downloaded a new UI library and are ready to integrate it into one of your applications, what's one of your big obstacles? That's right, figuring out how to get it to match your application's color scheme and look and feel. Wouldn't it be nice if you had a tool that could easily do most of the work for you?

Well get ready for ThemeRoller: a new theme creator for the jQuery UI library created by the crew at the Filament Group in Boston.

ThemeRoller gives you the ability to style your jQuery UI components in minutes. You can easily preview your theme as you make adjustments and when you're done, you can download a ZIP package containing the css, image, and demo page files for your theme. If you don't feel like rolling your own, or maybe want some inspiration, check out ThemeRoller's gallery to browse and download a variety of predefined themes.

Special thanks has to be given to the Liferay staff, who invested countless hours into the development of the new UI website, and with whom the team worked closely together to stabilize jQuery UI for all kinds of enterprise situations.

jQuery UI v1.5 Final Release: http://ui.jquery.com/download

Check out Themeroller

goosh.org - The Unofficial Google Shell

Tagged:  

It's interesting that I just finished up a post on keypress navigation, because I've come across a little gem called goosh [goo-sh], an Ajax-based UNIX-like Google search shell that enables you to use the Google search engine with only your keyboard. Sporting a variety of commands listed in its help menu, goosh is just what you need to make your Googling just that much quicker.

Google itself has seen the value in adding keystroke navigation to their search engine as shown in one of the experimental search tools in Google Labs [demo].

Check your mouse at the door and visit goosh.org

jsLex

Tagged:  

Since Ajax applications are so popular we developers are always looking for better JavaScript tools. Well, jsLex is an eclipse plug-in that attempts to make it easier to improve JavaScript/Ajax performance.

Below is an excerpt from the jsLex site.

Why jsLex?

As Ajax is used for an increasing number of projects it is also being used in projects with larger and larger code base. When the code base of a project increases, chances are you will run into performance issues.

Working on the Apache XAP project and Nexaweb's Universal Client Framwework, which has a large code base it became apparent that hand injection of profiling code only worked so well. A new technique was needed to make it possible to capture a complete view of the performance of an Ajax application in a similar way to using jProfile for Java code.

jsLex is that tool!

  • Go to the features page for more information. Click Me!
  • Go to the screen shots page to view screen shots of the application. Click Me!

jsLex gives developers a complete picture of the performance issues with-in thier Ajax application. By auto injecting profiling code using jsLex ant task, developers don't need to modify their code to track down bottlenecks, minimizing coding erros and saving time.

Currently developers need to hand inject profiling code into their applicaiton. Though this can be easily done as in the example below. Such a technique offers limited information and requires the developer to know percisely where the problem is located. Otherwise developers need to modify their code over and over as the try to find the problem area(s).

function doLongTask(){
  var start = new Date(); 

  for (var index = 0; index < infinite; index++){
     //Do something here
  }

  end = new Date(); 
  alert ("doLongTask took " + (end - start) + 
         " milliseconds to complete." );
}

You can read more about jsLex here.



I think that jsLex makes a good attempt of improving performance profiling of Ajax applications. Also, since the tool plugs-in to the extremely popular Eclipse IDE it can be very useful to many developers. If you have used jsLex, I would love to hear your experience with the plug-in.

Syndicate content