Justin du Coeur (jducoeur) wrote,
Justin du Coeur
jducoeur

AngularJS

[This one's for the programmers, and specifically for anybody doing front-end Web development.]

I have to say, one of the very worst things about being so very buried under critical projects (packing and selling the house; settling Jane's estate; finishing the OP Compiler; helping Kate with the wedding; and oh, yes, starting Querki) is that I've had no time at all to keep up with my technical reading. So it is that I entirely missed the release and growth of AngularJS last year.

For those who haven't dug into it, though: do so.

Summary: AngularJS is a new HTML framework, promulgated by Google. It is so clearly correct that I'm fairly sure that it or a derivative is going to become common pretty quickly.

The key word here is "framework", which they very deliberately use instead of "library". Angular isn't a replacement for jQuery (although it can obviate many uses of jQuery), it's a different way of thinking about things. The heart of their point is that, whereas in a library like jQuery you typically have your code and events calling functions in the library, a framework like Angular is a serious rethink of how you architect your code in the first place.

Basically, Angular is an MVC framework for your web page. It recognizes that a modern web page isn't just HTML, it's a client-side program, and requires MVCish thinking as much as any other program. So essentially, you declare your data Model; you build the View in HTML as usual; and you build little bits of Controller glue to hook them together. It's not exactly radical (indeed, it's exactly the model that Flash has used for many years now), but it's the first time I've seen a really principled implementation in pure HTML/Javascript.

But -- and this is the important part -- the system is mostly declarative instead of imperative. They've sunk a lot of very deep hooks into Javascript and HTML, to provide very normal, modern data-binding capabilities between the Model and the View, so that your Controller code can be very minimal indeed. You wind up taking a data-centric view of your client instead of a code-centric one, and that tends to wind up much clearer and more concise. (And I suspect, much more reliable.)

In other words, say you have a list of To Do items. (Taken from one of their examples.) Instead of building up a list of nodes in HTML by hand, or even writing code to do so, you just say:
<li ng-repeat="todo in todos">
  <input type="checkbox" ng-model="todo.done">
  <span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
That's pretty much it. The list "todos" automatically unrolls into a bunch of list items, with no code required. Moreover, the list is data-bound: if you add and remove items from the model, the HTML list grows and shrinks to match. And as shown, you can use the fields of the model pretty much anywhere you want. The result is similar to a typical templating system, but works client-side.

Very pretty stuff. I need to read into it more to understand the pitfalls better, but odds are good that I'm going to want to incorporate this into Querki -- it suits my needs rather well, I suspect. (And probably would have made the edit page that I spent a week on *much* easier to write...)
Tags: programming, querki
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 4 comments