Tools for Building Rich Web Apps

3 minute read Updated

After recently planning to do a survey of tools for building rich web apps I stumbled across  github.com/codylindley/frontend-tools, which claims to be an opinionated list of tools for building front-end applications. For those new to building modern web applications, it’s certainly easier to take in than larger lists like github.com/joyent/node/wiki/modules. But lists aren’t necessarily the best place to start for putting an application together. At least not where the rubber hits the road.

Update 2017-04-09: This post is out of date. Lately it seems Marko JS may become the new hotness following React and, for Web dev in general, look into JAMstack.

The Web has all the resources you need

Instead of staring down the barrel of a list, consider simply diving in and creating something once you’ve read some related articles. Perhaps one of the best producers of fat-client content and tutorials recently has been Addy Osmani. Check out his blog: Articles for developers. Here are two articles from Addy which, when put together, cover how to set up a full-stack Backbone app with separate front- and back-end components:

The decoupled nature of the above architecture makes it simple to use tools like Brunch to rapidly prototype HTML5 apps which can function in a stand-alone nature and tap directly into a REST API, similar to what I’ve done with Hopstop. Learn to create a rich web app using Brunch and Chaplin, a meta framework on top of Backbone, with my recent article: Developing Web Apps on Windows With Vagrant.

To help ease the challenge of choosing a rich web stack, Addy and others have come together and created TodoMVC, which those building rich web apps are likely familiar.

Full stack and event-driven frameworks

Looking for an opinionated full-stack? Take a peek at the MEAN (Mongo, Express, Angular and Node.js) stack, already being used by some start-ups like Chicago-based HighGround. Not sure if you’d like Angular? Learn how to set-up a MEAN stack with a fantasy football app. Decide you don’t like it? Then consider trying out the content-first, full-stack Node framework from Airbnb called Rendr.

For an alternative approach check out Meteor. And if you’re interested, you may also want to check out an event-driven system using a tool like Flight by Twitter.

Summary

When building rich internet applications, lists can be daunting. Use lists to help discover new technologies and gain a better understanding of the components of rich web apps. But be sure to augment your understanding with some reading and, of course, an ample amount of tinkering. And if you feel you’re getting overwhelmed, take a step back and look for a new ways to do things.