CODEWITHSUNDEEP
javascriptdevelopment-environment
giorgian
giorgian

Reputation: 3825

Workflow/tools for frontend javascript development/test and production?

A Web frontend javascript application, in production, will have little to nothing "exposed", that is, declared as a global var or attached to window.

During development, though, life is easier if the code is readable, split in several files, and also if prototypes and relevant instances are accessible from console.

To be more clear (leaving aside minimization, which is easy obtained with a number of different tools), in production I'll have something like:

(function() {
  var Greeter = function() {
  };

  Greeter.prototype.msg = function() {
    return 'Hello, world!';
  };

  Greeter.prototype.greet = function() {
    console.log(this.msg());
  };

  new Greeter().greet();
}());

This way, my code will do its stuff without exposing anything: neither the Greeter object nor its instances are accessible to other code.

(Of course this is just one of many ways to accomplish this, but that's not the point of the question).

Debugging this code, though, is hard, and unit testing is impossible.

In order to allow both debugging and testing, I would usually attach both Greeter and its instance to the window object, or to some other object.

So, during development, I'll use something like:

(function() {
  var Greeter = function() {
  };

  Greeter.prototype.msg = function() {
    return 'Hello, world!';
  };

  Greeter.prototype.greet = function() {
    console.log(this.msg());
  };

  window.Greeter = Greeter;
  window.greeter = new Greeter();

  window.greeter.greet();
}());

This way I'll be able to unit test Greeter, and also to interrogate it from the browser's console to check its status.

Is there a tool, or a set of tools, or some different way to organize my code, so that it's possible to pass from the development version to the production one (which will also be minimized)?

Upvotes: 1

Views: 1172

Answers (1)

Scott Puleo
Scott Puleo

Reputation: 3684

There is no single package or executable you can install that will get you 100% of the way there. You will need to combine an editor, command line tools and your browser to create an effective web application / javascript development environment.

3.18.13: Added a link for Sublime Web Inspector. Debug Javascript inside of Sublime Text! http://sokolovstas.github.com/SublimeWebInspector/

Editor

Things to look for: Plugin system, system highlighting, linting, autocomplete. If you are using an editor today that supports plugins your best bet is to stick with it and setup linting and syntax highlighting. If you are looking for some recommendations all of the following are solid choices.

  • Sublime Text 2 (free trial)
  • Textmate (commercial, 30 day trial)
  • VIM (free)
  • Webstorm (commercial, 30 day trial)

Workflow Tools:

I recommend starting with a high level toolset like Yeoman or lineman. They are somewhat opinionated but provide a complete workflow and will allow you to get stuff done quickly. Once you are comfortable with using it you can peek under the covers and pick and customize it to your needs.

  • Yeoman : Provides scaffolding, package management, dev server, concatenate & minify and will run specs

  • Lineman: Dev server, concatenate & minify, run specs

  • Grunt: More low level (used by both Yeoman and Lineman). Similar to ruby's rake

  • VCS: Not to be overlooked, a good command line based VCS is essential. I recommend Git, again use what you are comfortable with to start.

Browser:

The development tools in the browser will provide you with a console, and debugging tool. Spend some time researching and really getting to know how to use the development tools provided in the browser. They are extremely powerful.

  • Webkit browser (Chrome or Safari): Built in Developer Tools (Command option J).

  • Firefox + firebug

  • Browser testing: Highly recommend browserstack for cross browser testing.

Upvotes: 1

Related Questions