4

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.

Improve this question

4 Answers 4

Reset to default
7

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:

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:

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

5

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.

Improve this answer

1 Comment

Nice whishlist. It assumes a JS-code on the server-side as well though (well, you're not forced to use the whole list by any means I guess).
0

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.

Improve this answer

1 Comment

Not really what the OP was asking though. That's just one part of the stack Eli was after.
0

  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>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.