new Angular app: employee directory

All programming is a learning experience. Case in point: I recently spent about three weeks working independently on updating an insurance client’s web app from PHP to AngularJS, only to be told after that time that the client wasn’t interested in using AngularJS. At all.

Frustrating, to be sure, but it turned out those three weeks of work were excellent practice in using this new-to-me framework. When I saw an opportunity to use it on a different, internal project, I was able to dive right in and get it done in three days.

impact directory mobile app

My speed was in part due to the practice I’d been getting, and in part due to the fact that this internal project — an employee directory that hadn’t been significantly changed since iPhones came in exactly one screen size — was far less complicated. While my previous efforts with AngularJS involved reading and writing data to a server-side database, this one was read-only. I could download the entire directory in one JSON file and cache it locally.

Later, I learned how to cache partials (HTML templates) to speed the app up even further. By using server-side includes and script directives, I could load all my HTML from a single file and still keep separate files on the server. The entire app is now one HTML download, one JSON download, and a bunch of tiny JPGs which are only downloaded as needed.

I’m not proud that I used unclear property names like “n1” instead of “first_name” in my JSON, but doing so everywhere reduced the file size by about 25%, and in a mobile app, every kilobyte counts.

employee directory branch list

My boss, who actually uses the app from time to time and is trained as a graphic designer, suggested other improvements. Employees for a single branch are now grouped by department, and vice versa, while links for desk and mobile phones can be tapped directly from the list view. Headers were shrunk, text was moved, and a new font was added, all to make sure we got as much information on one screen without scrolling as possible.

Everyone’s favorite whiz-bang improvement seems to be the way search results are updated live as you type, which is actually one of the first tricks AngularJS teaches in the tutorial.

Other improvements over the original directory app are largely superficial: Tap targets were made larger. ngTouch was included to remove the infamous 300ms-click delay. I replaced the gradient buttons which the iPhone eliminated last year in iOS 7, switching to a modern flat design which still relied on shades of gray to keep it from looking too different from the original.

All in all, my favorite little app to date.

Leave a Reply

Your email address will not be published. Required fields are marked *