Javascript for Startups: The Basics

Javascript is a technology that, until recently, has been reserved for simple browser tricks and catching mouse or browser events. It recently has been adopted, through the use of frameworks such as Prototype, jQuery, and others, as a valid language for creating rich browser applications. Whether you are a founder, architect, or developer for a startup, there is something to learn and consider when it comes to using Javascript for your startup.

Startup Advantages using a Javascript Framework

While I prefer Prototype for its simplicity and improved documentation, there are several popular Javascript frameworks. No matter what you prefer, it is a good decision for your startup to standardize on a Javascript framework and stick to it. As a startup, you need a single approach to managing Javascript code to ensure it is cross-browser friendly, easy for developers to understand, and uses a consistent approach across all of your Javascript code. Here are some things to look for in a framework:

1. Does the framework have good documentation and plenty of blog and article support for helping you get started? If you can’t compose a simple one-page example using the documentation and example code provided, you may want to select a more mature framework. The only exception to this is when the framework solves a critical problem that would otherwise occupy one or more developers for a longer period of time to create. Just be certain it is easy to understand and customize if required.
2. Are there third-party developers building extensions using the framework? Do a simple Google search to see what is available – if developers are willing to extend it, often it will come with better support and opportunity to reuse other toolsets for faster time-to-market.
3. Does it allow your developers to code how they want, or does it require changing the way they think to fit the framework? Some frameworks require using their approach, their tools, their way of thinking. This can be a real advantage if your developers share this same way of thinking, but terrible for your startup if they don’t.

Startup Flexibility through better Javascript

I have written my share of terrible Javascript – the kind of code that you’d rather pay someone to fix than have to fix it yourself. What I’ve learned is that many of the same principles from writing the server-side code are now available in Javascript. One of those is the separation of what happens from what is displayed (“separation of concerns”).

Unobtrusive Javascript is an approach to keep the code outside of the HTML, thereby encouraging reuse and reducing errors. Wikipedia has a nice example on what this might look like (for you developers reading this article). The traditional way allows mixing code for validating a date with the form field markup. The better approach is to attach the event listener using Javascript instead.

While this may seem like a trivial difference (and more work overall for the developer), imagine yourself in a beta period with your customers. You find out that the way you constructed the flow of the pages requires that you split your form fields differently. Using the old approach, you have to crawl through potentially hundreds of lines of HTML, find all of the appropriate Javascript code, and make it work with the new page flow. Using the new approach, the code is all in one place, easy to understand, and easy to break up or adjust based on the new requirements. I’ve lived this example – it pays off greatly to use the newer approach.

Startup Reuse through maintainable Javascript

In the past, I used to assume that all Javascript I wrote wasn’t reusable. Perhaps this was my fault since scripting on the browser was typically for specific needs, so reuse wasn’t common. Since adopting the Unobtrusive Javascript approach (above), I have been able to reuse Javascript code such as pagination, dynamic tabbing, sorting, and other code. Here are some tips for getting the most from your Javascript throughout your application:

1. Package common functionality into a single Javascript file and reference it as needed. This both speeds up your site by only downloading what you need, but also packages code into reusable components or libraries.
2. Treat your Javascript as you would your Ruby, PHP, or Java code: constantly refactor it to ensure that you don’t repeat code or functionality. The more lines of code you have as a startup, the more work it takes to keep it bug-free.
3. Write Javascript-based controllers that operate on a set of element types, rather than on specific elements (more on this in a future post).

I hope these best practices will help you use Javascript to improve the flexibility and usefulness of your next startup application.