Saturday, June 29, 2013

Building Angular-UI Utils

I tried again, doing a clean install of homebrew, node, and npm.

git clone https://github.com/angular-ui/ui-utils.git

cd ui-utils

bower install

grunt build      # Fails with errors about stuff not being installed locally.

npm install grunt-contrib     # Fails because of crap in npm's cache...

That the local npm install failed was strange because I just cleaned it before reinstalling yeoman, bower, and grunt. But whatever -- cache clean is your freind.

npm cache clean

npm install grunt-contrib-watch
npm install grunt-contrib-uglify
npm install grunt-contrib-concat
npm install grunt-contrib-clean
npm install grunt-contrib-jshint
npm install grunt-contrib-copy
npm install grunt-karma

grunt build

Running "concat:tmp" (concat) task
File "tmp/dep.js" created.

Running "concat:modules" (concat) task
File "components/angular-ui-docs/build/ui-utils.js" created.
File "components/angular-ui-docs/build/ui-utils-ieshiv.js" created.

Running "clean:rm_tmp" (clean) task
Cleaning "tmp"...OK

Running "uglify:build" (uglify) task
File "components/angular-ui-docs/build/ui-utils.min.js" created.
File "components/angular-ui-docs/build/ui-utils-ieshiv.min.js" created.

Done, without errors.

Finally, no errors, but... where are the build files?

Whut?

components/angular-ui-docs/build/

Seriously? Maybe someone punted.
At least the grunt build worked.

Aside from making a clean install of node, npm and several other node modules globally like yeoman, bower, grunt, coffeescript and coffeelint, this is what it took to build the ui-utils module.




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.

[Update]

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.