Synopsis: Angular web apps can have a lot less code that JQuery ones, and be easier to follow.

I took the source of an e-zine article from 2007 using an older version of JQuery, checked it into to GitHub and incrementally converted it to Angular. I’ve squashed that series of commits into on to make it easier on the eye (and hide all the mistakes I made en route), and you can see that here. It is worth perusing that commit for a few moments to see the comparison, and the sheer weight of code deleted.

The original version (JQuery 1.2)

Digital Web’s article supporting the JQuery version

A live version of that JQuery demo

Please ignore the fact that nobody in real life would actually commission a seat plan app with this functionality.

After Refactoring to Angular 0.9.19

Play with a live version of that Angular_Air demo

What did I change?

I replaced JQuery with Angular of course. The HTML file was huge before, but is now 95% smaller because I’m using the ng:repeat to repeat the rows/seats through the airplane map, and also the passengers table below. The JQuery using JavaScript (global.js) has been entirely deleted (as has JQuery), I have new JavaScript in the HTML page for the model setup, and a couple of functions I’m calling to support the view. That’s about an 80% JavaScript reduction.

I changed the design of the passenger table. It used to be a tabbed dialog, with which row you were viewing changing in its entirety each time you clicked a row in the airplane. Now, it shows all the individual seats you have selected, in an expanding table. Perhaps that should be constrained in terms of height and have a scroll bar. In the older version, the passenger details for selected seats were highlighted in yellow, and editable, whereas the unselected passengers were not yellow, and not editable. In my version, the unselected passengers are not shown (see use of ng:show in the HTML source)

The Angular version is much easier to understand. Perhaps even easy enough for relative novices. That would not be true for a Backbone redux of the same app. The JavaScript models for Backbone I’m beginning to think are MORE VERBOSE than the Java equivalent for GSON / Jackson serialization. A Knockout version of the same would be roughly the same implementation and lines of code to the Angular one.

I’ve also appended a debug panel, that shows the two pertinent model objects in the app. You can see that live updating as you click around in the airplane image, and the passenger details.

What’s less than perfect?

The model is less than perfect to me. What I’d like to have :

seats[
  row : 
  {
    num: 1,
    a : {
      passenger_name : "Fred"
    },
    b : {
      passenger_name : "Wilma"
    }
    // etc    
  }
]

Or

seats[
  row : {
    num: 1,
    positions : [
      { 
        posn : "a",
        passenger_name : "Fred" 
      },
      { 
        posn : "b",
        passenger_name : "Wilma"
      }
      // etc    
    ]
  }
]

But what I have instead is something less hierarchical:

seats[
  {
    row: 1,
	posn: "a"
    passenger_name : "Fred" 
  },
  {
    row: 1,
	posn: "b"
    passenger_name : "Wilma" 
  }
  // etc
]

The reason I’ve had to compromise that the seats are rendered from a <li> tag within the HTML, and the are no grouping expressed within that list of 25 × 6 seat permutations. Un-orderd lists don’t have the ability to support groupings in a way that would be legal for HTML. The model in Angular has to support the view, and if it does not, then it has to change. Thus I flattened it. I would refactor my backend logic to be able to serve that up. If the app were to send the whole seat plan back to the server to persist it, I’d change that handling of that too, to support a receiving flatter seat list.

Final thoughts

JQuery has moved on quite a bit since 2007. The core library itself has improved, but there has also been a slew of controls in the “JQuery UI” space. Lastly both Handlebars and JavaScriptMVC are technologies that independently pushed the capabilities of JQuery in the directions I’m talking about here. With a mix of these, code reductions towards that I’ve achieved above, are possible.



blog comments powered by Disqus

Published

March 3rd, 2012

Tags

Categories