Wednesday, May 1, 2013

The Destro Slacker learns AngularJS pt. 1

(I swear that gif should be my mascot)
Ok, yes I have slacked on my blog. Considering I only had one post, that is a pretty low bar that I managed to miss, but anyway. Today I will start describing my journey with AngularJS.

So, in the interest of full disclosure, I am a front end n00b. My programming background is primarily steeped in the nasty sections of data processing/operations and reporting(humans suck, and so does Microsoft Word). My Javascript and HTML experience at my current gig has been mercifully confined to constructing small widgets and minor template changes. That has changed on my curent project.

Project Setup
Obviously can't get into too much detail but basically the project is an internal tool that will accept a properly formatted CSV file and import it into the Database. The frontend has the responsibility of providing the current database state, displaying available custom pieces of data to paste into said CSV like image locations, and abilities to download the current state of the database into CSV form. The division of labor on this project is not necessarily optimal. The developer working on the background is much better, and much more comfortable, working on the frontend JS than I. She is perfectly capable of doing outstanding work on the backend, but normally that becomes my role because I am so comfortable, however you gotta grow! Now, you may say to yourself(in full Emeril Lagasse voice, though I maybe the only one who remembers him doing this), "Self! Why the f are you making a big production over such a simple app!?" Well, my primary reason is to learn as much as possible. Plus, I am a little "coo coo for cocoa puffs" over Angular. Thankfully my boss is giving me a bit of a leash.

For The Love of the Yeoman
I'll detail my crazy process that seems to occur when evaluating and learning new things later(more really for my own cathartic benefit) but let me just say first that I love Yeoman and Bower and the fun, yet weirdly named, Grunt. Since I am such a n00b these tools have made discoverability and use of web frameworks much nicer and close to backend dev. The only prereqs are Node and its package manager, NPM. One HUGE thing to be aware of, at least on OS X, is that there is a wee permissions issue. After you install Yeoman, check the .npm directory in your home dir. Mine was set to root as the owner and made the rest of the angular uses not work. Other than that Yeoman has provided a very sensible default layout, great support(via Bower) to add other js items easily, and great testing and running of code support via Grunt.

The Zen of Angular
My initial impression of Angular after reading the docs, the tutorial and the great book was that this finally fit my brain. Javascript has always seemed weird and somewhat ugly compared to the happy land of Python. This framework made everything make a lot more sense. However, I was still not prepared for the brain melt that can be Angular. It is a very powerful framework that relies heavily on Dependency Injection and custom HTML attributes and was very orthogonal to any examples that I could find in our codebase. Not to say that is easy to grok either. Our existing structure is, on a spectrum from horrid to nice, based on jQuery and all that entails. Callbacks, custom templates, and heavy heavy DOM manipulation, you get the drift. All on top of, what I feel, is an awkward straddling of server side and client side templates.

Angular on the other hand is a full MVC(or MVVM) framework that even separates itself from others, like EmberJS. It's primary focus seems to be on extending HTML through custom directives and the lovely secret sauce of data binding. The Zen of Angular is all about stopping yourself from pure jQuery style programming and really forcing you to separate DOM modifications(Directives) from view building and population(Controllers) and your base DATA(Models).


More Meat
I promise, seriously, to post more on my journey through Angular Land. Today was officially day 2 of being immersed in a real project for it so my impressions are all rather raw. On a side note, I would like to thank irc user michealw for talking me through some of the issues I was having fitting Angular into my brain. Not only does it seem like it is a great framework, but it has a good community behind it too.