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 bination 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 bo including those would be nice.

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

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 bination 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 bo including those would be nice.

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

• javascript
• html
• css
• frameworks

4 Answers 4

Depends for what. Use what you know best!

However, here are a few remendations...

The Feather-Weights

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

• Underscore for general JavaScript Development
• BackBone for client/server munication (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 plex 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 remend you look at:

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

Dojo and Closure can be integrated in plex build systems and their pilers 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 prehensive 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.

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 remend 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.

jQuery for JavaScript. Many great UI plugins for UI controls in addition to the code jQuery API that hides the browser differences in the DOM.

1. Angular JS - Awesome. MVC Framework, great for quick SPA's

2. jQuery - DOM manipulation - good for effects (fading, toggling etc.)

   Don't rely on it too much though.

3. Angular JS, jQuery - Some argue they work well together.

4. Backbone.js

5. Ember.js

6. React.js - Uses JSX, not JS, but pretty much the same thing

<script type='text/jsx'>
    //JSX
</script>