?

Log in

No account? Create an account
Previous Entry Share Next Entry
AngularJS
device
jducoeur
[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...)

  • 1
OK, that is way cool. I just forwarded the link to my GUI-development students from last semester.

Be sure to watch the "Watch as we build this app" videos: they sometimes do things differently from the source code you see on the front page. For example, I notice that the second example on the front page, "Add Some Control", has an archive() function that backs up the list, empties the list, loops over the backup, and for each element, if it's not done, adds it back into the original list. The version in the video, named clearCompleted(), uses filter instead, and is of course shorter and simpler.

Interesting. That suggests, unsurprisingly, that the framework is still evolving, and that they're still enhancing it to make it less imperative and more functional.

Thanks for the pointer -- it'll probably be a few weeks before I dig into this seriously, and I'll likely read the docs in fair detail when I do, but good to know that the videos are worth watching...

Have you looked at Dart (http://dartlang.org)? I haven't looked at either that or Angular very deeply but what I have seen of both is neat. I have the feeling I am doing more than I should be in Django (hobby stuff) and Sitecore (work stuff) and I am wondering where I should be expanding my client side dev skills. A friend also mentioned CoffeeScript but it seems like Angular or Dart would give all the benefits of that plus a lot more.

I'm vaguely familiar with Dart, although it's a somewhat different beast -- Dart is an alternative language, but AFAIK still the same general programming structure, where Angular is the same language with a serious rethink of how you work with it.

CoffeeScript is somewhat more like Dart, but a bit more mature and conservative -- it's basically an enhanced dialect of Javascript that sands off the rough edges. I suspect I will be using CoffeeScript for Querki, simply because there's little reason not to: support is built directly into Play, and CS is a pretty safe alternative to raw Javascript with little downside...

  • 1