Tuesday, June 25, 2013

Picking up AngularJS (or, NOT picking up Angular-UI)

I've been trying to get up to speed and moving fast with AngularJS recently, with only limited success.

The main problem at this moment in time: Angular is unstable. It caused my browsers to crash or lock up erratically about one out of ten reloads. We're not talking about logical flaws causing infinite loops mind you. The browser's memory gets so demented that that it has to be force-quit and restarted.

Well, that's on Chrome. Safari is worse, if for no other reason than that the developer tools suck more. Firefox was more stable but still suffered the occasional seizure.

The concept is great though. The management of state between controllers, scoped models, and directives with your own Javascript objects and methods, presents advantages of clarity and modular cohesion over 100% imperative coding, and page-flipping apps with one-off ajax user interface features. It is enough to make me keep looking.

OTOH, the broader a scope of Angular tech I look into, the more I get bogged down in pieces that just don't work.  Angular-UI is one such adjunct project. The ui-utils-validation module is either completely broken, incorrectly documented, or both. The demos don't do anything.

After poking through the repo for a while, and incredulous that tests are actually passing, I fork Angular UI. Apparently, the project is in the midst of some reorganization, because the build info in the README.md is incomplete. Grunt complains there's no gruntfile.js; perhaps it is grunt.js instead? A rename and... Grunt complains of tasks not being found.  Anyway, it isn't working.

I figure maybe I'll just run the tests. Karma won't start because Firefox and Chrome aren't in the executable path. I've seen that before and somewhere I've got the workaround to fix it,  but I'm not going to bother. I've just realized I'm shaving yaks, and it is time to put the clippers away.


Well, I went back to poking around with the validate module. The nearest I can determine is that the current Angular-UI validate isn't working at all with the latest Angular. This I already knew, but one note to make is that debugging third party Angular code when it goes wrong, seems like it would be a seriously painful exercise. This is really still just Javascript after all, and despite Angular's best intentions there seems to be quite a lot of "action at a distance" going on. At least, enough for a simple module to clobber a whole page.

[Update Again]

So I tried a few things. Chrome was croaking like a toad in heat every time I opened the ui-utils demo page at http://angular-ui.github.io/ui-utils/  Aw Snap!  I shut off ALL of my Chrome extensions, every last one, and restarted Chrome. That, at least, let it sort of load properly. The demos didn't exactly work right, but it seemed more of a logic error than the songs of mating frogs.

Finally able to read the code behind the screwy demos, it appeared that the "utils.js" file I had been including was completely and utterly insufficient: the demo includes a file "ui-utils.js", which appears to be the concatenation of all of the modules' js files, with utils.js up front. So what to do? Build!

The first real hint that something was wrong was when Bower complained I was using an outdated file, "components.json," instead of the "correct" name, "bower.json."  The Yeoman generator was apparently written while the Bower team was playing musical chairs with the file naming conventions. So, I'm not sure at all if something else is out dated or I have the wrong versions of Yeoman, Bower, Grunt, or whatever fubar component... the software is a moving target and package management, while there, lacks closure and consistency over the required artifacts.

Pressing on -- who knows what will work at this point -- I run "grunt build". Ermagherd, it tells me, grnt.jrs isrnt thr! More musical chairs with croaking toads, so I ln -s Gruntfile.js grunt.js  and rerun the build. Now it tells me "Warning: You need to have Ruby and Compass installed and in your system PATH for this task to work. More info: https://github.com/gruntjs/grunt-contrib-compass Use --force to continue." Urk. I have Ruby, let me RVM that: rvm use ruby-1.9.3-p0@sandbox and gem update compass. Building works, but doesn't do anything interesting.  It is looking like the Yeoman scaffolding has to be mucked around with to integrate in another grunt-file built component.... stay tuned.

[Final Update]

I thought, well, I'll go back to the sources. So I cloned angular-ui, and ui-utils, and found that the build process experience was a train wreck out of the box. Lots of tools aren't specified, and the ones that are obvious are misconfigured from apparent version drifting and file name conventions shifting.  Attempting to update npm/yeoman/bower/grunt resulted in tripping over holes in their respective configurations, particularly npm and grunt. So I'm giving up on Angular-UI - it isn't even ready for alpha, let alone beta, let alone prime time. Maybe in a year or two...

Incidentally, the pothole with grunt was that they stopped distributing the command line tool with the main package "grunt," so one must now also install the "grunt-cli" package.

No comments: