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

Obviously, the answer here depends greatly on what you’re building. If you’re really getting into front-end engineering and making single-page web apps, I’d recommend reading Addy Osmani’s blog. Recently, he’s been blogging and giving a lot of talks about javascript MVC/MVP/MVVM systems, as well as scaling javascript apps.

If you want a laundry list, read this article where he gives his ideal stack:

• Backbone.js for lightweight MV*
• Require.js + AMD + RequireJS text add-on (to assist with external template management)
• Backbone.js LayoutManager (if you require some more intelligent layout management)
• jQuery for DOM manip.
• Handlebars.js for templating, unless you’re doing something simple, in which case, opt for Underscore’s Micro-templating
• r.js for handling script optimization
• Jasmine + Jenkins for testing and CI
• Node.js + Express (speaking of Node, Miller Medeiros has an excellent write-up on how to use it as a build script)
• MongoDB as a noSQL data-store

This is surprisingly close to what I use myself and I can attest to the quality of these libraries and this as a whole-stack solution.