JavaScript Test First Presentation Patterns Part 1

Why Presentation Patterns?

Presentation patterns can give separation, between display elements and logic performed on the elements, reducing accidental complexity. Mixing display elements with logic leads to a pattern called Big Ball of Mud. This pattern is very common, because as more time goes by you end up adding more and more mud to the code base. Now you may say ‘Oh, but the code I write isn’t complex and the more JavaScript I add the longer it takes to load my pages’. I would argue that the minute you hit CTL-S on your code, it has the potential for complexity in the future. Maintenance is the key ingredient that adds complexity. Code bases can spend more time in maintenance; bug-fixes and new features. As more bug-fixes and features are added to the code-base, more complex the code becomes. By using separation between display elements and logic, accidental complexity is decreased.

The future of web design is to use even more scripting in web pages. The visual presentations that JavaScript offers is too good a thing to pass up. It isn’t the 80s any more. It is the 21st century. Dynamic pages are here to stay.

Load speed can be ameliorated to a certain certain point by compressing the JavaScript file that gets served to the web browser. Compression consists of removing whitespace (spaces and carriage returns), and replacing variable names and functions names with minimal sized tokens.

Why Test First?

I’m an ordinary programmer. I can’t dream up this wonderful and beautiful super kick-ass application. I can’t keep of track of 400,000 states the application is in, when executing. I just can’t. Test First helps me handle all the above deficiencies that I have as a programmer.

There are some advantages for following the TDD way. One, it creates a regression test for your code base. Two, it allows you to refactor your code safely. Three, it drives the code base to a good design.

One thing, I personally think is very important, is it helps you to write in a more functional style. In JavaScript you have first-class functions. These functions (named or anonymous) can be assigned to variables and passed around. This can be a powerful abstraction tool.

The unit testing framework I use is called js_runit. My web development right now is done from Ruby on Rails.

What Are Some of the Presentation Patterns?

Humble Dialog/Passive View

MVC

MVP

Presenter First

 

Please feel free to disagree with some of opinions. Debate is good.

Shiny Penny Scenario

Do you find yourself moving elements and widgets around your presentation? If so then your going down the path of the shiny penny scenario. This scenario is where you have some pennies that you just move around. You’re not doing anything productive. See 37-Signals post.

It is not very productive, because you’re not actively adding business functionality to your application.

If you develop for functionality then presentation will follow. The functionality will constrain the the presentation to what it needs. If you develop from the presentation direction to functionality, you will be constraining the functionality.

Business needs define the functionality. Functionality will define the presentation.

So my recommended process is:

• Define the business need.
• Implement the functionality that satisfies the business need.
• Implement the presentation that utilizes the functionality.