AllThingsOpen

Which open source JavaScript framework to use
for cross-platform and browser web apps?

(this is going to get opinionated)




Hunter Loftis
@hunterloftis

Director of Technology
Skookum Digital Works
skookum.com

How do you evaluate tools?



Best todo list app?

Cleanest syntax?

Largest feature list?

Most popular?

Smallest, fastest?

Pain


I think most developers choose tools largely through pain.

(including me)

So keep that in mind.

Examined Projects

(2012 - 2013)


Directv (phone, tablet, web): Sencha, Backbone, Angular

Harris Teeter (phone): Sencha

Status4 Golf (phone, web): Zepto, Knockout, Angular

Coca Cola Bottling Co. (tablet): Backbone

Sesame Street (tablet): Backbone

"On-demand print company" (NDA) (tablet, web): microjs

plus experiments with Polymer and jQuery Mobile

The Contenders

(from least to most proscriptive)

  • "microjs" (zepto / ender / jquery + libs)
  • Backbone
  • Knockout
  • Polymer
  • jQuery Mobile
  • Sencha Touch
  • Angular


So many options!
Are you paralyzed by choice yet?



microjs


Stitch together your own 'framework' from a collection of micro libraries.
This is the most flexible and least proscriptive route, but you'll end up writing a lot of glue.

Best for:

  • nonstandard user interfaces
  • "simple but weird" projects
  • hand-tuned performance


Backbone


Lightweight Model-View-Whatever library. Strong with Models, Collections, and Events and weak with Views. Simple and flexible, but by the end of the project you've probably monkey-patched half of it.

Best for:

  • relatively simple UIs
  • (or non-standard interfaces)
  • RESTful API communication
  • CRUD on collections of models
  • light organization on top of jQuery

Knockout


A Model-View-ViewModel framework featuring declarative two-way bindings, dependency tracking, and templating. Strong with Views and interactions, weak with Models and overall structure. It's easy to make a page come alive, but be careful not to turn it into spaghetti.

Best for:

  • traditional page-by-page apps
  • adding interaction and dynamics
  • simple interfaces without nesting or reuse

Polymer


A library based on the Web Components spec featuring two-way data binding, reusable components, and templating. Encapsulation is the name of the game because everything is an element. Will shrink with time as Web Component polyfills are removed like training wheels.

Best for:

  • projects of the future! 2014?
  • single-page apps and others than can leverage reuse
  • responsive apps targeting multiple platforms
  • (this will likely replace Knockout and Angular for me)

jQuery Mobile


A touch-optimized web framework based on jQuery and focused on wide compatibility with touch devices. It includes out-of-the-box UI widgets, a theming system, and pushState URLs. Your app won't be the smoothest, fastest, or sexiest, but it will work on a Nokia Symbian^3 and Internet Explorer 7.

Best for:

  • Mobile "apps" that won't be wrapped and published
  • Rapid development with built-in components
  • Extreme platform cross-compatibility

Sencha Touch


A mobile user interface framework featuring a component library with platform-specific themes. UI is built imperatively (like Java), rather than declaratively (like HTML). This class-based framework has so many abstractions that you may not even realize you're writing in JavaScript.

Best for:

  • Developers more comfortable with Java than JavaScript
  • Rapid development with built-in components
  • Mobile apps that will be wrapped and published

Angular


A Google-maintained MVC framework that allows you to extend HTML into a domain-specific language for your app. Angular encourages declarative UI, imperative business logic, dependency injection, decoupled DOM manipulation, and code reuse. Written by CS PhDs with a "my way or the highway" philosophy, its way is usually smart but abrasive, overly complex, and verbose.

Best for:

  • Single page apps with complex UIs
  • More complex models than CRUD
  • Apps with reusable components
  • Encapsulating components of large apps

I want answers!

Fine.

Easiest to learn: Backbone

Most powerful: Angular

Most promising: Polymer

Hippest: microjs

Won't scare management: jQuery Mobile

Loved by Microsoft devs: Knockout

Loved by Java devs: Sencha Touch




Fin.

Questions?
@hunterloftis

js-frameworks

By hunterloftis

js-frameworks

  • 1,765