Friday, August 17, 2012

Angular

Angular is another Javascript library I've been looking at. It's maintained by Google, which inspires confidence. Here's its premise:
HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.
Other frameworks deal with HTML’s shortcomings by either abstracting away HTML, CSS, and/or JavaScript or by providing an imperative way for manipulating the DOM. Neither of these address the root problem that HTML was not designed for dynamic views.
AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs. 
I definitely agree that HTML isn't an ideal tool for today's web, so I found this an interesting premise—though at first glance I wasn't really sure what it would look like to build a framework that doesn't "abstract away HTML, CSS and/or JavaScript".

It turns out what they do is take HTML by the horns and bend it to their will, adding attributes, basically extending it to be something more like the language it should be in this day and age. A lot of the focus seems to be on automatic data binding, much like what Knockout does.

I ran through their tutorial, and it's pretty impressive. I had no idea people were doing things like dependency injection in Javascript, within a browser. Or that such good, behavior-driven unit testing was possible in Javascript.

Basically, what you do is link to their script and put their attribute in your <html> tag. That sets Angular loose in your page, and once it works its magic you can do things like iterate over collections simply by adding a custom attribute to an <li> tag, or invoke some advanced, route-based templating and partial-page inclusion, and even interpolate expressions like {{"here is" + "my text"}} right into the page text. This is all stuff I'm used to doing with a server-side framework so it's familiar, but it's very compelling to see so much of it pushed to the client. That just makes sense when more and more of the application is happening in the browser.

The dependency injection comes into play in enabling mocks for testing (which runs in-browser, pretty cool) and injecting advanced data handlers that interact with the server (in their example, a RESTful component for effortless CRUD).

Good stuff. Chances are really high that I'll be using Angular for my app.

Friday, August 3, 2012

Knockout

Yesterday I spent a while running through the tutorials offered on the site for the Knockout Javascript library. Knockout's concept is what they call MVVM; I'd never really heard of that particular acronym, and while I initially thought it was a bit awkward, I do understand what they're driving at.

Knockout is purely client-side, so it remains open to work with whatever method you use to provide data from your server. It just wants JSON, which is fine because that's what I was planning on. But while it's a client library, it isn't trying to be a flashy effects library like Prototype or even a utility belt like JQuery. In fact, it seems to play nicely if you also want to use other libraries like that. It focuses on one concept and tries to do that well, which I like.

What Knockout concentrates on is the problem of keeping a UI in sync with data. I appreciate this, because I remember that a lot of time I've spent while writing Ajax-oriented apps has been centered around getting the newly-received server data into the right part of the page. Knockout makes it automatic. You have your model in the server, and when it comes over to the client it becomes the "view model". Then, instead of having to find the right
or whatever and put the data there, Knockout keeps it all synchronized for you. This works because of a few things you did at page startup: you set up an internal representation of the data (view model), marked some of those data as observable, and bound certain elements in your page as to portions of that data by using special html attributes.


And how does the data gets from the server to the client? They seem to want to that leave to other libraries like JQuery.

Their homepage contains some really cool interactive tutorials that show off the functionality. Overall I was impressed, and I could see this library becoming part of the stack I use to build my app.