Usability: Front-End Development

Before I begin the usability series, let me quote a tweet from @BenLesh:

If you’re an expert, never forget you once knew absolutely _nothing_ about your field. Respect the beginners, they’re our future experts.

This blog (as the blog title suggests) is first and foremost a beginner-friendly site. I cater to beginners and experts alike but remember, we are all newbies at one point in time in our life.

Second, keep in mind that viewpoints in IT vary from one person to another. I am about to expose software as they are, not from a marketing department. I am not affiliated with any open source company so I can rant or rave about software without fear.

In short, I would like this blog series to be sort of “checks and balances”. I want to separate the wheat from the chaff so you would know the hype from the real thing.

Without further ado, let us start with front-end development.

For front-end development, there is only one language that matters: JavaScript.

Once you master the basics of JavaScript, you can start with jQuery, not Angular, Ember or other framework.

Why jQuery?

It is simple, intuitive and just a library, not a framework.

There are three main models of programming in jQuery:

  1. callback
  2. promises
  3. method chaining

For simple CRUD apps, these models are enough to build a user interface for business apps. However, be forewarned.

Callbacks are fine as long as there are no nested callbacks.

If you have nested callbacks, it is a sign that you have not refactored your code into control plane and data plane.

Control plane refers to code that you fire or trigger events. Data plane refers to event handlers or functions that do not return a value.

Essentially, data plane is about immutable or stateless code. Immutable is about CR (create, read). In JavaScript, the data plane is about callback but without callback hell.

Control plane is about mutable code (state) which in turn, is about CRUD (create, read, update, delete). State is about transactions, control structures like sequence, loop and decision. State is about control flow. State is about coordination. State is about routing. State is about transformation.

The takeaway is: Minimize the control plane. Maximize the data plane.

Now, once you have the reached the limits of jQuery which is basically about imperative programming, you may want to use functional programming.

Why functional programming?

Well, you can read more about it with FP libraries like underscore, lodash, lazy.js, Ramda, etc.

Still, you may reach the limits of functional programming since the above-mentioned libraries are about functional programming for data.

How about functional programming for events or asynchronous data streams? There is a name for it. FRP (functional reactive programming).

Why functional reactive programming?

Andre Staltz has given a brief overview.

You can read more about FRP with

For CSS, I recommend Bootstrap. For more complex and near-real-time UI, well… this post is not for you (it is just a Google search away).

Takeaway:

  • Imperative programming – jQuery
  • Functional programming for data – underscore, lodash, lazy.js, Ramda
  • Functional programming for events – BaconJS, Cycle.js, RxJS
  • User interface framework – Bootstrap
  • Leave complexity (building engines) to the experts
  • Use the appropriate programming paradigm for your needs
  • Usability is not about a thousand APIs. It is about refactoring your code into control plane and data plane
  • Usability is not about reinventing the wheel. It is about how something is easy to use at the API level and end-user interaction level (UI)
Advertisements

Subjectivity aside, leave a reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s