What combination of Javascript/Css/HTML frameworks and libraries do you recommend?

Question

I'm looking to modernize my web development with some cool libraries, but there are so many tools that do different things, often with overlap, that it is hard to decide.

I'm not interested in one framework but more in a combination of various tools that work well together. I've looked at resets and normalizers, boilerplates, HTML frameworks, and grid framework, CSS authoring frameworks, CSS frameworks, Javascript frameworks, DOM manipulation, AJAX, resource-loading, feature detection and UI libraries, Javascript toolkits, server-side pre-processors and client-side pre-processors, and framework generators; It's beautiful chaos.

Also I'm looking forward to using SASS and Coffeescript or something similar so a combo including those would be nice.

Update: I've decided on JQuery for DOM manipulation and I would also appreciate some kind of kickstarter/bootstrapper.

Answer 1

Depends for what. Use what you know best!

However, here are a few recommendations...

The Feather-Weights

For quick, no frills and no overthinking development, I'd recommend:

• Underscore for general JavaScript Development
• BackBone for client/server communication (using jQuery or Zepto.js for AJAX calls) and designing your models and event buses
• Jasmine for JS testing
• SASS for cooler CSS
• HTML Frameworks, what's that? :)

CoffeeScript is indeed great, if you want to go down that road. If you are interested in CoffeeScript, you may want to look at Google's Dart as well, but it's fairly recent.

The Heavy-Weights (Batteries Included)

If you're building a rather complex web-application (speaking more along the lines of thousands of lines of code here), you need to take it up a notch and in that case I'd recommend you look at:

• The Dojo Toolkit
• Sencha's ExtJS
• The whole Google Closure Tools stack

Dojo and Closure can be integrated in complex build systems and their compilers will allow for a good modularization of your codebase while keeping it easy to produce a strongly optimized deliverable. They also both contain their own module loading system, so you won't need additional libraries like Require.JS, and will only load the parts you explictly tell them too if you use a custom build. But be warned, they're definitely more hands-on and have a steeper learning curve.

The Google Closure Tools are definitely very comprehensive and are as batteries included as it gets, but they do not necessarily make development easy for you: they give you the power, but you need to know what you are doing.

Bootstrappers / Kickstarters

Some solutions offer to "kickstart" your project and to prepackage for you a collection of some of the above tools, sometimes offering you some customization, so you can easily get started and don't need to maintain your own kickstarter up to date with new versions:

• Bootstrap
• Foundation
• HTML5Boilerplate
• Kickstart
• Skeleton

WARNING: I haven't really tried these kickstarters extensively myself.