What's Hot in the World of JavaScript and SPAs?
Client-side development continues to be more and more popular which is both good and bad for developers. It's good (great!) because we have more power than ever at our fingertips. It's bad because it can be challenging to stay up-to-speed with all of the libraries and frameworks being released (I call that job security). I hear some developers complaining about Web development and all of the script libraries being released but I personally think it provides us with a lot of choice and flexibility, not to mention enhanced productivity. I’d rather have the flexibility of choosing from a variety of scripts as opposed to only a handful.
From time to time people ask me about what libraries I'm using or keeping an eye on as my company builds custom applications or provides training to companies. As a result, I thought I'd put together a post that includes a few script libraries and frameworks that I find interesting and that I think might interest you as well. Some of them have been around for quite some time while others are brand new to the scene. I plan to update the list over time as I find something else interesting or move away from a particular script for whatever reason.
Keep in mind that I can’t list every library and framework out there. My goal is to list ones that I personally find quite compelling and that I (or someone I know very well) has direct experience using.
Script Libraries
There are a lot of great script libraries out there that perform a variety of functionality. Here are a few scripts that I find interesting and quite useful for building client-side applications.
jQuery
This one is rather obvious and no surprise if you've been building client-side applications over the past 5+ years. jQuery is the most widely used script library on the planet and the base for many other scripts out there. It provides support for selecting DOM elements, handling events, performing animations, making Ajax calls, working with plugins and more. If you haven't taken the time to learn jQuery then there's no time like the present. Check out my jQuery Fundamentals course on Pluralsight for additional details on what you can do with it in client-side applications. I've also blogged quite a bit about jQuery over the years. See http://weblogs.asp.net/dwahlin/archive/tags/jQuery/default.aspx for more details.
If you’re new to jQuery and interested in learning it check out my jQuery Fundamentals course on Pluralsight.
Knockout
Knockout is arguably the most popular script library out there for handling client-side data binding. It provides a flexible way to declare bindings in HTML, write view model objects that are bound to HTML, handle dependency tracking and write templates. If you're working with a lot of data in a client-centric application then KnockoutJS is definitely worth taking a look at. It has an excellent set of online tutorials available at http://learn.knockoutjs.com. Check out John Papa's course on Pluralsight as well for a nice walk-through of the features it offers and how they can be used. My good friend John Papa has a nice course on Knockout!
RequireJS
As more and more script libraries are used in an application it can become difficult to manage all of the dependencies between scripts and ensure that they're loaded when they're needed. RequireJS is a module-based script loader that can handle loading scripts upfront or as they're needed. By using it you can simplify the process of managing script dependencies.
AmplifyJS
AmplifyJS provides a set of jQuery components that can be used for Ajax requests, client-side communication between components (publish/subscribe), and client-side storage (desktop or mobile). It provides a unified API for accessing different data sources that can make your code more re-useable and easier to maintain. If you find yourself duplicating Ajax calls across an application then you can use AmplifyJS to define them in a more centralized component.
Bootstrap
http://twitter.github.com/bootstrap
Twitter released the Bootstrap library that provides dozens of components that speed-up client-side development and make it look good at the same time. It includes built-in components such as dropdown menus, buttons, navbars, pagination and progress bars as well as jQuery plugins that handle transitions, modal dialogs, tabs, tooltips, slideshow carousels and more. Bootstrap also includes CSS to help make the various components look good without having to write a lot of custom styles or code. I’ve used jQuery UI quite a bit over the years as well but also like what Bootstrap offers.
Backbone.js
http://backbonejs.org
Backbone.js is a popular client-side option that can be used to build MVC-like applications that have models, collections, views and routes. It provides a way to introduce a formal structure into an application which is great for overall architecture and maintenance and supports declarative binding, templates, events, routing and more. Objects used in an application are created by extending the Model, View, Collection, or Router objects provided by Backbone.js. Check out the Todo application available at https://github.com/addyosmani/todomvc/tree/gh-pages/architecture-examples/backbone to get started using it. While I personally consider Backbone.js to be a framework since you build upon it, it’s “officially” categorized as a library.
Breeze
Are you working with a lot of data in your application and performing a variety of CRUD (create, read, update, delete) operations? If you are, you’ll definitely want to check out Breeze since it provides much needed client-side data management capabilities. It can handle data caching, change tracking, entity data validation, entity query support and batch saves of data back to the server. Breeze integrates well with many popular script libraries and can also play nicely with different back-end frameworks as well. To get started with Breeze check out the interactive tutorials at http://learn.breezejs.com.
Script Frameworks
My close friends will tell you that I haven't been a huge fan of Single Page Applications (SPAs) – at least not "true" SPAs as they’re defined today since they involve a lot of scripts, dependencies and complexities that I find to be overkill in some cases. You won't find a single post on my blog dedicated to SPAs because I just haven't been a big believer in them up to this point.
Why haven't I jumped on the SPA bandwagon? I've done a lot of production support over my career working with both large and small teams and am worried about what happens down the road as a lot of interrelated scripts in an application change versions, people come and go on dev teams without sharing the "tribal knowledge" they have, different developer skill levels are involved with a SPA application, etc. If you only have a few scripts in an application then it’s not a big deal to manage but once you approach 10+ scripts things get more interesting over time as those scripts evolve. Hopefully they’ll always play together nicely but past experience leads me to believe otherwise. You can certainly build a solid SPA application with some of the script libraries I mentioned (and others not mentioned) but you'll definitely have to spend quite a bit of time learning the ins-and-outs of the different libraries (that’s not a bad thing of course). You'll also want to factor in maintenance costs if you're building them with a team – something that a lot of people just don't seem to think about (one direct reason I've spent quite a bit of time working with TypeScript over the past few months by the way).
So what's my take on SPAs now days? The good news is that SPA frameworks are emerging to help manage the complexity and dependencies (history, navigation, data management, data binding, storage, templates, etc.) which I'm really excited about. If you've been holding off on building SPAs at your company due to some of the reasons I mentioned above then here are a few frameworks that might change your mind. I've started to blog about some of these frameworks and why I think they're a much better approach compared to creating a SPA from scratch using a mish-mash of scripts and will have more posts in the near future.
AngularJS
Although not explicitly stated on its homepage, AngularJS is a robust Single Page Application (SPA) framework with an enormous amount of functionality built-in. It stands on its own and doesn't require any other scripts while providing features such as two-way data binding, MVC-like architecture, form validation, routing, history, Ajax functionality and much more. I've blogged about AngularJS in the past and recommend you check out their tutorials as well located at http://docs.angularjs.org/tutorial. If you’re worried about managing multiple scripts over time in an application then the AngularJS framework provides a nice alternative.
- JavaScript Data Binding with AngularJS Part I – Getting Started
- JavaScript Data Binding with AngularJS Part II – Binding a View to a Controller/ViewModel
Durandal
Durandal is a brand new framework by Rob Eisenberg (creator of frameworks such as Caliburn Micro) but I wanted to include it here since I'm excited about what I've seen so far. It's another option for building SPAs (I personally think a better name would be Rich Web Applications or RWAs but that's just me) and provides a lot of functionality such as a clean architecture, modularity, messaging between components in a page, navigation and history to name a few. It's built on top of the jQuery, Knockout and RequireJS script libraries so they’re still used behind the scenes and as you build your views and view models. However, I really like how it abstracts many of the complexities of SPAs away and seems to offer a more maintainable and modular solution compared to building SPAs by hand. Documentation for Durandal can be found at https://github.com/EisenbergEffect/Durandal/wiki and I'll be blogging about it more over the next few months (I’m considering doing a new Pluralsight course on it as well). I'll also be speaking about Durandal at the upcoming DevIntersection conference in Las Vegas in April.
Sammy.js
Sammy.js is one of the smallest frameworks out there (currently around 5.2k compressed/gzipped) but is designed to be modular so that it can be extended using plugins and adapters. It’s built on top of jQuery and provides a way to organize code into routes that are linked to callback functions (very handy in SPA applications) and you can use built-in events or define your own. A great way to get started with Sammy.js is to check out their tutorial at http://sammyjs.org/docs/tutorials/json_store_1. A list of some of the plugins available for the framework can be found in the Github repository located at https://github.com/quirkey/sammy/tree/master/lib/plugins.
Node.js
Node.js is different than the other frameworks mentioned since it can be used in a variety of ways. It's primarily a server-side JavaScript framework (although it can be used in other ways as well) that can be used to build fast and scalable Web applications, serve up data through RESTful services and more. What's unique about Node.js compared to other server-side frameworks is that all of the code is written in JavaScript providing an end to end story for application development - JavaScript on the client and JavaScript on the server. It's also supported by a large community that consistently adds new modules that can be accessed using the built-in Node Package Manager (NPM). Node.js is capable of performing functionality seen in other server-side frameworks such as ASP.NET, PHP and Ruby on Rails. A lot of companies are using Node.js more and more now (I just did some custom training on the framework for a big bank in the United States with a large team using Node.js).
Conclusion
So is that all of the libraries and frameworks that you should take a look at? Not even close – there are many other worthy scripts out there that can be used and that are quite popular. I've tried to cover a few of the key scripts that I like (or find interesting) and hope that will spark your interest in taking a closer look at some of them. There are certainly others I’m interested in as well. I think it’s safe to say that we’re on the cusp of a new movement where more and more frameworks like AngularJS and Durandal will be released to simplify the process of creating robust client-side SPA applications.
Do you have other scripts you use a lot? Leave a comment about them below to give myself and anyone else reading the post some details about what you like about them.