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

http://jquery.com

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

http://knockoutjs.com

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

http://requirejs.org

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

http://amplifyjs.com

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

http://breezejs.com

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

http://angularjs.org

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.

Durandal

http://durandaljs.com

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

http://www.sammyjs.org

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

http://nodejs.org

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.

comments powered by Disqus

17 Comments

  • Excellent post! I would love to see something like this every 6 months. It's nice to know what other people are working with, and what we should be looking at.

  • You forgot backbone and kendo

  • Thanks for the comment Billford. While I did mention backbone in the last paragraph, after some more thought I decided to add a full section on it which is now updated in the post. I considered mentioning Kendo but opted to leave it out since it involves a bit of licensing under some circumstances.

    Dan

  • Thanks Dan! Would love to see a Pluralsight course on Durandal. This would compliment your buddy's soon to be released course on SPA fundamentals quite nicely. C'mon, doooo eeeeiiit!

  • Backbone is considered a library rather than a framework. Also, Ember.js is an ambitious framework that provides a full stack with declarative bindings, state based routing and data persistence through ember-data (very similar to breeze). It is definitely worth a look.

  • Thanks Greg....although I know they categorize it as a "library" it provides a framework of objects to built upon (extend) which is why I originally listed it in frameworks. It's not worth the time to debate though so I'll move it up to the library section (even though I don't necessarily agree with how they categorize it). :-)

    Dan

  • You didn't mention Nexus.js SPA AMD
    Ok, it's still in beta but it is coming soon and it brings a lot of goodies with it.

  • How could you mention Breeze and neglect Jaydata? (www.jaydata.org) - Breeze is generations behind Jaydata.

  • Alex and Oisin:

    I only listed libraries or frameworks I've directly used or know of being directly used by multiple friends and had no intention of listing everything out there (it's obviously not possible to do that...mentioned that at the beginning and end of the post). I haven't used Jaydata or Nexus.js and at this point don't know any friends using them but will certainly check them out to see what they offer.

    Thanks,
    Dan

  • I'm sold on SPA's because the future looks like "mobile internet" = "web app". But admittedly I agree that these many libraries scare me. It also seems that they have some overlap. I'm hoping that only a few will mature and survive similar to what jQuery did a few years ago when it became the clear dom leader.

  • Totally agree Joe. I'm hoping the strong scripts survive and the weak ones die off. I'm really hoping that some of these frameworks pan out because I see that being the future as opposed to having to make a ton of different scripts play nicely.

    Dan

  • Thanks Arnold - appreciate you adding the info and link. I haven't personally used Knockback but it sounds very useful for Backbone.js devs.

    Dan

  • I am using the smallest framework of Sammy.js. All frameworks are good but Sammy.js framework is good for me to build small apps.

  • Please do a course on AngularJS on pluralsights. Your two post on AngularJS was excellent for me also your AccountAtGlance course (which made me to subscribe to pluralsight in first place)

    thanks

  • Khuzema,

    Thanks for leaving a comment. I'm considering doing an AngularJS course for Pluralsight but haven't finalized anything at this point. I appreciate the input though.

    Dan

  • Hy Dan,

    Please forgive me, but this comment is about structuring javascript code

    weblogs.asp.net/.../new-pluralsight-course-structuring-javascript-code-in-html5-applications.aspx

    I can't comment there because it is in the archive, so i will do it here.

    So my question is this, i was using this pattern for long time :

    myJS.Calculator = {

       nbResults: 0,

       nbResultsPerPage: 0,

       initialize: function () {

       }

    }

    How to call it ? What are pros and cons ?

    Of course it folow the singleton pattern.

    Thanks for help

    Riadh

  • Riadh:

    It really depends on the pattern that's used so there's not a direct comparison between an object literal and a given JavaScript pattern. The Revealing Module Pattern allows you to create a singleton or multiple instances but also allows members to be marked public or private (public members are returned out of the wrapper function). So, it has a member visibility benefit if you want it. Patterns like the Revealing Prototype Pattern allow for public/private members plus extension, functions only loaded in memory once, multiple instances, etc.

    I use object literals (what you list above) for what I refer to as "model" objects (data entities - data container objects) and the patterns when I need logic to be structured into nicely organized containers (kind of like classes). I have a few posts on the various patterns if you're interested so you can get a more in-depth look at other options:

    http://weblogs.asp.net/dwahlin/archive/2011/07/31/techniques-strategies-and-patterns-for-structuring-javascript-code.aspx

    Dan

Comments have been disabled for this content.