What would you do with a blank canvas?

by

An artist starts with a blank canvas, a writer stares at one endlessly. As a developer, there are rare occasions when we are given a blank canvas, a beginning where no decisions have been made, no frameworks have been set and there are endless opportunities and decisions. For some, this may seem like a daunting experience, for me it is an utopian situation.

Most of the times when I start a project, the framework has been previously set and my job has been to inject some best practices where opportunity allows. On personal projects, I do get the opportunity to build from scratch, usually it is to satisfy my curiosity in a certain technology so I haven’t had the liberty (or the forethought) to include all the tools.

However, in recent projects where I have been able to include all the tools available to me and as a result have done most of my projects as such.

So what would you do with such a blank canvas? What tools and frameworks would you use? As a front end developer, this is my list (this list is an approach that considers enterprise development):

NodeJS (as a Web server)

Why use NodeJS and not Apache Tomcat? If you are not familiar with NodeJS, this is a quick description (from their home page):

Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

Back to question of “Why NodeJS?”. The answer is why not. As a developer whose choice of language is JavaScript, this is ideal where as a developer I can modify the web server and can manage the session, cache, memory, etc… This is on top the evented server side JavaScript which is very light weight and has a good handling on lots of I/O by making the majority of I/O calls asynchronous.

Reference:

NodeJS (as a package manager)

If you chose not to use NodeJS as a web server, it is still a great tool to install on your machine. Installing NodeJS will give you access to Node Packaged Modules (npm) which opens the door to a wealth of packaged modules that can easily be installed on a local machine, enabling the developer to start developing quickly. The other advantage of npm is also that it will allow developers to package up their modules easily to be shared with other developer. As you will see, most of the tools that I am using can be installed through npm.

Reference:

GruntJS

GruntJS is a tack runner which will allow for automation on tasks that as developer we run (or should be running) repeatedly. Tasks like minification, compilation, unit testing, and linting are examples of tasks that can be run every time the developer makes a change. GruntJS is very easy to install and has a large community of developers creating plugins for it.

Reference:

Jasmine

I have been a huge fan of Test Driven Development or Behavior Driven Development. This style of development has several advantages:

  1. Capturing the requirements in human readable form
  2. Unit test is built from the beginning
  3. Test output can be treated as a report
  4. Failures are captured early and often

In order to develop in this approach, Jasmine has been one of the tools that I have used. There are other tools like QUnit and Cucumber (I am exploring Cucumber further and may blog about my experience in the near future). Nevertheless, this approach allows me to think of every requirement in the following manner:

Given a context

When an event happens

Then an outcome should occur

 Reference:

Asynchronous Module Definition (AMD)

Asynchronous Module Definition allows for an approach where the developer thinks of their code as a modular functional area which can be used repeatedly in different areas if needed. Addy Osmani describes this best:

The AMD module format itself is a proposal for defining modules where both the module and dependencies can be asynchronously loaded. It has a number of distinct advantages including being both asynchronous and highly flexible by nature which removes the tight coupling one might commonly find between code and module identity. Many developers enjoy using it and one could consider it a reliable stepping stone towards the module system proposed for ES Harmony.

This approach coupled with a powerful script loader like RequireJS can help in building a highly modular systems or web applications.

Reference:

MV* Framework

MV* frameworks have several advantages like defined framework and pattern but one of the best advantages, in my humble opinion, is organization. These frameworks allow us to tame the beast that is spaghetti code. For the purposes of enterprise development, there are several options out there. I have had personal experience with a few but a list of top 4 frameworks (once again in my humble opinion), would be something like this:

  • BackboneJS (for large applications, one should consider backbone layout manager)
  • KnockoutJS
  • AngularJS
  • EmberJS

With these frameworks, a selection of a templating tool is necessary. With BackboneJS and its hard dependency on underscoreJS, Underscore’s templating can be used. For more advanced templating, HandleBar and Mustache should be considered.

Reference:

Pre-processors

There are several pre-processors available for different aspects of front end development.

CSS

For this aspect, on the top of the list are two main pre-processors, LESS and Sass CSS. A lot of people select LESS because of the adoption of Twitter bootstrap. I am bigger fan of Sass CSS, because it is being maintained more often. Sass CSS also is adding more necessary features.

JavaScript

CoffeeScript being the most popular in this area has a huge following. In the development community, the use of CoffeeScript is divisive, some people really love it and some really hate it.I have used CoffeeScript and see the advantages of using it but I do not have any strong feeling for or against it. Let’s not forget TypeScript for those fans of .NET.

HTML

In this area, HAML and Jade are in the forefront. These tools although help with easy HTML writing.

Reference:

No matter the size of the project, a well structured and well written application along with its success may result in a  demand for expansion which is why every code should be written with scalability in mind. These technologies were considered with a scalable, maintainable and well-documented enterprise level architecture in mind.

As a result of this article, I have created a github repository with all these technologies (well most of them) incorporated. Please refer to https://github.com/kianoshp/node-boilerplate for more installation.

Category : Backbone, CSS, Front End Development, HTML, JavaScript, MV*, MVC, NodeJS, Technology
Tags : , , , , , , , ,