Tag Archives: code

Maintainable Client JavaScript

I’ve been reading Maintainable JavaScript by Nicholas C. Zakas lately. It has been very insightful into best practices across larger teams. When you have a large team and adopt a consistent coding style, it makes working across your codebase easier.

In Chapter 5 of the book, Zakas covers the UI as a mix of HTML, CSS, and Javascript. He mentions that tightly coupling these three layers makes it “impossible to make small changes without changing one or two other layers.

Also, I’ve been working with AngularJS recently. I understand the benefits of a front end framework to keep data in sync throughout your client. Angular fans tout the benefits of a SPA (single page application) framework.

As someone who strives to separate the structure (HTML) from the scripting (JS), Angular feels too tightly coupled to me. Angular works by tagging everything with [cci]ng-[/cci] and letting the magic work behind the scenes. The application dependencies are hardcoded everywhere in your HTML, and there is no way to swap your framework without changing your HTML drastically.

I’ve worked with Backbone in the past, and now I’m trying out Angular. At some point, I’ll probably try out Ember. I’d like a front end framework that plays well with Rails, so perhaps Ember will be fun.

iOS Redeem App Code Mockup

New rule: if I have to google “how to [do something],” your UI needs improvement.

While redeeming an iOS app, I couldn’t figure out where to enter in the app code. I instinctively went to the Search section, as I know that has a text input section at the top:

iPhone App Store Search screen

No dice.

So as with everything in modern life, I went to Google for help. It turns out it’s at the bottom of the Featured screen.

iPhone App Store Featured screen top

Scrolling down…

iPhone App Store Featured screen bottom

I find the Redeem button, and the rest is cake.

Without googling, I wouldn’t have stumbled upon Featured > New > page bottom to find the Redeem button.

I recognize that for most people, redeeming an app code is not a typical, common use case. That said, it should be somewhere logical. I’ve mocked up the Search screen with a Redeem button:

iPhone App Store Search screen mockup

This way, the user is able to associate entering in names of apps, keywords, or app codes in one convenient field.

The upside is an extremely easy to find Redeem button. A possible downside is that users will get led astray while searching for paid apps (by hunting for app codes instead of proceeding to checkout).