What's in your JavaScript toolchain?

Question

I want to start writing a sophisticated JavaScript application to surf the web. I used to write a few bits of code in JavaScript using the DOM directly and a bit of jQuery. But this is the first time I want to write a fully functional application to run in a browser.

So, I wonder what tools are preferred for serious JavaScript development. In particular, I am interested in the following, as well as some information on why you selected the components you made and how they all fit into your workflow:

• What editors and editors / modes / scripts do you use? I'm actually an Emacs user, and I'm using js2.el now, but I'm interested in learning about other settings.
• Do you use any IDE (Aptana, Dashcode, etc.)?
• What JavaScript libraries or frameworks do you use?
• Do you use any languages ​​that compile for JavaScript (GWT, haxe, Objective-J)?
• What unit test framework are you using? How do you call them? Can they be called from your editor / IDE from the command line from a browser on a web page from your JavaScript debugger?
• What automated user interface testing tools do you use (e.g. Selenium, Watir, Sahi)? Again, how can they be called up? (The ability to run unit tests and interface tests from the command line would be very useful for running buildbots)
• What other code quality tools do you use (JSlint, code coverage tools or something like that)?
• What do you use for your debugging environment (Firebug, WebKit inspector, etc.)? Does it integrate with your editor or IDE?
• What post-processing do you do on your code before deploying it (obfuscators, minifiers, any optimizers)?
• Do you have any tools for managing module dependencies or dynamically loading code as needed? The application that I am writing will work with a lot of code, and I would like to reduce the loading time, so tools to track which modules are needed or download the code on demand would be useful.
• Are there any other necessary tools in your toolchain (which are specific for developing JavaScript for browser-based applications, I already have an excellent version control system, bug tracking, etc.)?

I'm less interested here in the “here are a bunch of things you could use” lists (I know a lot of tools available) and much more on the stack that you actually use in practice and how it all fits together. I hope that this will develop primarily as a client-side application, and the server is simply used for authentication and storage and retrieval of data, so I am not interested in which server-side platform you use if it is not an integral part of the client in some way .

edit . I am particularly interested in the framework for testing modules and the user interface, and how to automate them. I prefer to be able to run one single task "make test" or "rake test" from the command line to run all the tests for projects and return the status depending on the success or failure of the tests. This will greatly simplify integration with buildbots. Also, I wonder if anyone writes unit tests that can run outside of the browser (in Rhino, spidermonkey, v8, etc.) For code that is not browser dependent, for faster turning on a subset of your tests.

Answer 1

Which editor and editor plugins / modes / scripts do you use? I'm usually an Emacs user, and I'm using js2.el at the moment, but I'm interested in learning about other constellations.

I usually use Textmate (with JavaScript , jQuery, and Prototype bundles). When you do heavy initial development, where I quickly navigate between HTML, CSS and JavaScript files, I choose the views of the divided vim panels. In doing so, I either use macvim or Terminal + Visor , depending on my mood. Obviously I'm a Mac user.

Do you use any IDE (Aptana, Dashcode or the like)?

No. I used Coda , but its text editor features are poor. I also played with Espresso , which is interesting ... but meh.

What JavaScript libraries or are you using?

I use jQuery and Prototype , depending on the needs of the project. To illustrate each of the respective strengths of the framework, I like to refer to jQuery as a structure for manipulating the DOM and Prototype on a scripting structure. Accordingly, I usually use jQuery for projects that focus on markup and Prototype for projects with a more complex scenario.

Do you use any languages ​​that compile JavaScript (GWT, haxe, Target-J)?

Absolutely not - I have philosophical fights with such a framework. Unlike server-side code, the front-end code runs in the user's browser in an environment that you cannot control. Thus, I believe that the responsibility of the developer to develop the best code is possible. Suboptimal code can have performance branches, and JavaScript compiled with languages ​​like Objective-J (which is the only one from your list that I used) will never be as tough as the code created by a strong JavaScript developer.

What unit test framework are you using? How do you call them? Can they be called from your editor / IDE, from the command line, from the browser to web pages, from your JavaScript debugger?

I am a big fan of QUnit , a framework for testing jQuery modules. Dojo Testing the DOH Unit is also nice.

Do not miss FireUnit , the excellent Firebug extension for unit testing.

Also see Razor .

What automatic user interface testing tools do you use (e.g. Selenium, Batir, Sahi)? Again, how can this be called? (The ability to invoke unit tests and front-end tests from the command line would be very useful since running collectors)

If necessary, I use Selenium , but this is rare.

What other code quality tools do you use (JSlint, code coverage tools, or something like that)?

I use and love JSLint .

Firebug has a nice extension of code coverage and HRCov is widely regarded as the best of the breed. I don't use much to cover code in most of my daily JavaScript work.

What do you use for debugging environment (Firebug, WebKit inspector, etc.)? Does it have integration with your editor or IDE?

As far as I know, Firebug is a killer JavaScript development application. Some useful debugging features:

• Variable tooltips
• Breakpoints and Conditional Breakpoints
• Performance profiler
• Very great console API
• Watch expressions
• Stack trace
• Useful plugins like Jiffy , FireCookie , and FireQuery .

WebKit Inspector is good as DragonFly and Debug Bar is useful for tracking IE errors ... but FireBug is for me.

What post-processing do you execute your code before its deployment (obfuscators, minifiers, any optimizers)?

I very intentionally do not use any tools for further processing. One of the main aspects of JavaScript is its openness, and I would not want it to become harder for beginner JavaScript developers to learn from my work. Not to mention that it is very easy to recover confusing JavaScript.

There was only one instance where I needed to minimize JavaScript to save bandwidth. In this case, I created an SVN post-commit hook to launch Doug Crockford excellent JSMin .

Are there other important tools in your toolchain (which is specific for JavaScript development for an application browser; I already have a completely good version control system, bug tracker, etc.)?

• alert() function;)
• Also, a good JSON validator is useful.
• A visual event is useful for debugging events.
• jsfuzzer , for fuzzing
• I did not need to use it, but Crosscheck is in my toolbox.

Answer 2

At the time of asking this question , the Googles close compiler was not in conflict.
This is a very good tool that minimizes JavaScript better than many others. You can run its page speed to analyze existing websites. Many other functions are built into it, such as dead code detection, links, etc.

Answer 3

• IntelliJ IDEA / RubyMine for editing.
• jQuery + plugins due to its resemblance to Ruby
• Do you use any languages ​​that compile for JavaScript (GWT, haxe, Objective-J)?
• JSUnit with Blue Ridge (Rails package), but rely more on Selenium tests
• No code quality tools other than programming and pair tests
• Debugging with Firebug is basically
• Rely on gzip compression to reduce space
• Create many small modular JS files
• Use rails to statically merge and automatically include these files as needed. This is custom code, but I wrote about it on the blog. This allows you to maintain modularity as you grow.
• Create some jQuery plugins to manage widgets on your site.

Answer 4

Just started using RubyMine as a JavaScript IDE, exclusively to support JavaScript, which is pretty good. This is the same as IntelliJ IDEA.

For debugging, Firebug is obviously a must, although in my opinion it went down a bit. I usually use logging more than debugging, so I find log4javascript very useful (although I should probably indicate that I wrote this). I also sometimes use the WebKit inspector and IE 8 debugger, as well as the Visual Studio debugger with earlier versions of IE.

For code quality, I use JSLint manually, and sometimes because I disagree with some of its recommendations. RubyMine / IntelliJ also has many JS checks that analyze your code when writing it and generate warnings next to your code that I find useful.

I tend to develop on several development pages that include individual, incomplete scripts, and when I create the assembly, I run the assembly script (my own, written in Ant), which checks my code from version control, combines individual scripts, removes call logging and debugging minimizes / compresses (using JSMin or YUICompressor) code and runs unit tests. My unit testing script is my own and doesn't represent anything en masse.

It works quite well, but not perfect.

Answer 5

I haven't written anything huge in Javascript yet (about 3,000 lines in my last project), but I am making JSLint my code and minimizing / combining it with all the libraries I need in my deploy / build script. My build script also changes the HTML directly to import scripts and libraries to import compressed production code. This way you do not need to run the build script to see the development changes that are needed.

YUI Compressor is rather slow, especially since it starts the JVM to start, but it does its job. Some minification in your deployment of the script is important to get rid of all comments, and if you avoid global variables, you will also get a significant number of compressions of the identifier name length, although you will not get much benefit after gzip. You may need one more step to remove the console.debug lines and other debugging code.

For debugging, FireBug. I'm sure the webkit debugger is good too.

To develop vim with improved indentation js script and ctags with some js modifications. I'm not sure what the benefits of a real IDE are, but I'm sure there are some. Vim does not do HTML syntax highlighting inside javascript strings by default, but apparently it can be set to .

JSLint runs easily in Rhino, but spidermonkey runs about 3 times faster since it does not need to run the JVM. Crockford does not support this arrangement, but I managed to get it to work somehow.

Answer 6

I use a slightly different technology stack (asp.net mvc), but here it goes:

• IDE: Visual Studio 2008 + ReSharper, Asp.Net MVC
• Editor: Notepad ++ (most of my time in VS, but Notepad ++ has better syntax highlighting for JavaScript)
• Dev Browser: FireFox + Firebug + YSlow + PageSpeed ​​+ FireCookie Also add a developer toolbar
• Other browsers: IE8, Chrome 3, Safari, Opera (rarely used) and IE6 and IE7 through virtual machines (free downloadable virtual PC images from Microsoft).
• Post-processing: JLint and YUI compressor. I have a build task for the YUI compressor part.
• JavaScript Framework: jQuery + jQuery UI
• Other stuff: jQuery Validation, JSON2

Answer 7

• Editor: Notepad or any other text editor with syntax highlighting

• IDE: maybe Dreamweaver, Aptana, Netbeans - up to your personal preference.

• Javascript Framework: I use more in jQuery and I still recommend jQuery.
  you can look at adding some "plugins" in jQuery. some of them are really cool. e.g. Facebox ( http://famspam.com/facebox ) is a jQuery Facebook-like popup that is easy to use. or jQuery Cookie plugin

• Debugging: Firebug (FireCookie, Page Speed, YSlow) - there is no integration with the IDE, but this is magic in the browser. If you need to cross-debug your browser, you can go for Firebug Lite.

  You can easily use console.log () for debugging instead of warning (especially when you do javascript with a lot of callbacks, timers, AJAX, etc. You do not want the warning statement to interrupt it should initially be.

• Postprocessing: Packer - http://dean.edwards.name/packer/

Answer 8

The Google Wave is powered by GWT , so it seems to be a good option for large applications.

Answer 9

I use Dashcode to develop Mac Widgets, and for that it’s “good” and has a lot of widget-oriented features, but for everything else TextMate

Answer 10

Web Tech has progressed a bit, so I thought I mentioned some good modern tools and frameworks for those who see this question in 2017.

What editors and editors / modes / scripts do you use?

Atom is my text editor of choice, and since I am in the MS ecosystem, Visual Studio 2013 is the IDE I use, although I avoid VS for developing JavaScript. I have almost all of my JavaScript development exclusively with Atom, wherever I am, though.

I have several plugins that help my work flow.

• atom-beautify , which I use to clean up any design problems that I might introduce, it does this while saving, so it makes things easy for me as I save and register often.
• atom-easy-jsdoc , which allows me to embed jsdoc comments using the Hotkey combination, is great because it allows me to automatically generate documentation for the code, especially useful for developing APIs.
• atom-ternjs is a package that I use to complete JavaScript code, I don’t need it often, but it’s convenient to have it.
• minimap is a plugin that allows me to see a detailed plan of all the code in a specific document, it is easier for me to use it than scrollbars. YMMV.
• pigments is a plugin that displays colors when it detects hexadecimal colors in CSS behind text. Useful if you need to tune and see the result quickly.

Do you use any IDE (Aptana, Dashcode, etc.)?

See above:)

What JavaScript libraries or frameworks do you use?

I try to use RequireJS for home projects and my own module loader at work. I usually don’t use libraries and frameworks in my projects, although when I do this, I pretty much relate to AngularJS (1.x). It all depends on what I'm doing.

Are you using any language that is compiled for JavaScript (GWT, haxe, Target-J)?

Nope.

What unit test framework are you using? How do you call them? Can they be called from your editor / IDE from the command line from a browser on a web page, from your JavaScript debugger?

I use Node.js with a Karma test runner as a test runner (who'da thunk it?), Jasmine as my test platform and sinonJS , since my library is stubbing / mocking for test development.

Karma can be configured to view the file system for changes (or a task runner such as grunt with file view plugins works), and I run all my tests every time the file is saved. This has the added benefit of running tests against multiple browsers at the same time. Thus, he will test JS against IE, Edge, Chrome, Firefox, PhantomJS, etc., which is very useful.

I have my setup of js projects to run grunt tasks. Usually I just run "grunt devmode" from the command line / terminal and that it, my tests run. For continuous integration on commit, I have a separate grunt task that only runs tests once. For my home use, TravisCI launches this task whenever a click occurs.

What other code quality tools do you use (JSlint, code coverage tools, or something like that)?

I use JSHint as it is less picky than JSLint. To cover the code, I use Istanbul, which, by the way, runs whenever my unit tests are executed, which is very useful.

What do you use for your debugging environment (Firebug, WebKit inspector, etc.)? Does it integrate with your editor or IDE?

I use any web browser having problems. If this is the server side, for example. Node, I use node-debugger as I can debug directly from Atom.

What post-processing do you do on your code before deploying it (obfuscators, minifiers, any optimizers)?

I usually do not do this, which for web projects is minifier and uglifier ideal.

- ? , , , , .

! RequireJS AMD. npm , , Visual Studio, nuget.

- ( JavaScript ; , , ..)?

, , Git , TFS, GitHub -, TravisCI Coveralls ( Git).