The JavaScript blog.


search optimisation productivity angularjs

Grasp, Optimizing AngularJS

Posted on .


George Zahariev sent in his latest project, Grasp (GitHub: gkz / grasp, License: MIT, npm: grasp). Grasp allows you to search and replace JavaScript code based on its abstract syntax tree.

Unlike programs such as "grep" or "sed", it searches the structure behind your code, rather than simply the text you've written - this allows for much more powerful searches.

It uses a language inspired by CSS selectors for creating intuitive search expressions. For example, given this code:

var obj = {  
  toEven: function(x) {
    if (isEven(x)) {
      return x;
    } else {
      return x + 1;

assert.equal(false, isEven(7));  

Searching for obj.props func! #isEven would match the call to isEven inside the property toEven on the object obj. References outside, like the assertion at the bottom, will not be matched.

My preferred solution for searching code is The Silver Searcher, but I like the idea of combining an AST with search and replace -- it seems like a potentially fertile ground for experimentation.

Optimizing AngularJS: 1200ms to 35ms

In Optimizing AngularJS: 1200ms to 35ms, optimisations for AngularJS are discussed. It's actually a lot deeper than you might expect: it goes from caching DOM elements to bypassing watchers for hidden elements, and deferring element creation:

A straightforward AngularJS implementation of the log view took 1.2 seconds to advance to the next page, but with some careful optimizations we were able to reduce that to 35 milliseconds. These optimizations proved to be useful in other parts of the application, and fit in well with the AngularJS philosophy, though we had to break few rules to implement them. In this article, we'll discuss the techniques we used.

The conventional wisdom for AngularJS says that you should keep the number of data-bound elements below 200. With an element per word, we were far above that level.

Using Chrome's JavaScript profiler, we quickly identified two sources of lag. First, each update spent a lot of time creating and destroying DOM elements. Second, each word had its own change watcher, which AngularJS would invoke on every mouse click. This was causing the lag on unrelated actions like the navigation dropdown.

The post got a huge amount of interest, so the authors are working on open sourcing their AngularJS directives.


jquery apps pagination productivity

jQuery Roundup: jQuery-Paging, Pomodoro Timer App, SAP HTML5 Toolkit

Posted on .


We've seen a lot of pagination plugins on DailyJS recently, but diversity is good so I'll keep collecting them until somebody convinces me not to! jQuery-Paging (License: MIT/GPL, GitHub: infusion / jQuery-Paging) by Robert Eisele is another take on client-side pagination. Usage centres around the number of items to paginate:

$(selector).paging(itemCount, options);

The plugin will generate a list of links, and clicking a link will cause the onSelect method to fire, which is one of the plugin's many options. Formatting is handled in a relatively unique way -- a format string and formatting callback are used:

$('#pagination').paging(itemCount, {
  format: '[< ncnnn >]',

  onFormat: function(type) {
    switch (type) {
      case 'block': // n and c
        return '<a>' + this.value + '</a>';
      case 'next': // >
        return '<a>&gt;</a>';
      case 'prev': // <
        return '<a>&lt;</a>';
      case 'first': // [
        return '<a>first</a>';
      case 'last': // ]
        return '<a>last</a>';

This is an interesting solution to handling formatting in pagination plugins.

Robert has lots of other jQuery and HTML5 projects listed on his site, here: xarg.org/projects/.

 Pomodoro Timer App

Pomodoro Timer screenshot

Pomodoro Timer (GitHub: oivoodoo / pomodoro-app) by Alexander Korsak is designed to manage time using the Pomodoro Technique. It's implemented using Backbone.js and jQuery Mobile. It comes with a little wrapper that allows it to run on Heroku.

The Backbone.js code is carefully organised into collections, models, routers, and views. It serves as a good example of a self-contained Backbone.js application, particularly in terms of code organisation.

SAP's HTML5 UI Toolkit

That's right, you're seeing something made by SAP on DailyJS. I was initially sceptical when I saw their new HTML5 UI toolkit, and the tutorials are PDFs, which didn't help. However, when I saw the jQuery-style API I started to read more:

$(document).ready(function() {
  $('#uiArea').sapui('Button', 'btn', {
     text: 'Hello World!',
     press: function() { $('#btn').fadeOut(); }

DailyJS reader Stefan sent this in, and he had a few comments about it that I thought I'd share:

Interesting side note: Their primary target for this is first tablets, then mobile then PCs and they will only support HTML5 (no fallbacks for older IEs).

From what I can gather, SAPUI5 uses jQuery, so it seems like the sapui method in the example is a plugin they've implemented for convenience. Unfortunately, downloading the beta requires an account, and even with a hastily created free account I couldn't get it to download. Regardless, I expect jQuery can now include SAP in their "who's using jQuery" list.