JavaScript Smackdown!
Brian speaking at fluent 2013
redditgifts is hiring

Hashtags for this session

#ruggedandhandsomelumberjack #yoloswag

#lunapuppy #awww

My puppy Luna

#flugame

Michael Jordan's Flu Game

#redditMVC

@holtbt

Why?

  • You're choosing an MVC for your next project.
  • You understand 1 or 2 of these frameworks and want to know about the other(s).
  • You just really wanted some reddit stickers.

You have come to the right workshop!

This workshop depends on audience participation.

  • I've done some work in all these. However, these are all large, robust, and mature frameworks. If you know a better pattern to share, let's stop and talk about it.
  • That said, let's not get semantic. This workshop is really to communicate the look and feel of working in these frameworks, not every nut and bolt.

Unsolicited Opinions

Why Backbone?

  • Dead simple to interact with with RESTful APIs on a model level.
  • Offers great way to organize JavaScript code. Gets out of your way after that.
  • Barebones. Piece together your own client-side tech stack.
  • Works great for large applications.

Why AngularJS / EmberJS?

  • These largely scratch the itch.
  • Perfect use case for these is rapid prototyping.
  • Also do fairly well in small-to-medium size products.
  • Some interesting idiosyncrasies become evident at large scales.
  • Both are pretty damn fast. They both have areas of churn in different places.

AngularJS

  • The power of the directive. Directives are an extremely powerful way to influence the DOM in a declarative fashion.
  • The ease of the POJO (plain ol' JavaScript object.) This makes Angular both easier to pick up and easier to apply your already awesome JS skills to it.
  • While monolithic at present, AngularJS is being decomposed into a more modular fashion, making it easier to piece together and improve on. Like how awesome the Angular-UI router is.

EmberJS

  • Computed properties are awesome. Binding together models in your code makes some really cool possibilities.
  • Opinion: EmberJS has fewer weird gotchas than AngularJS. I think this comes from having control over their objects.
  • Though I believe Ember's barrier to entry to is higher, I think the router is much easier to get used to. The Ember router is awesome.
  • Ember's docs are better.
But wait! There's more!

There's tons of great things about these frameworks that we didn't talk about. Core features even.

Cool things not addressed here.

Backbone

  • Mentioned a bit, but interacting with APIs once you have your models up and going is really easy.
  • We did this workshop with pretty vanilla Backbone. There are a ton of awesome libraries to go along with Backbone. Marionette is a personal favorite of mine as it makes a lot of these common design patterns in Backbone dead simple and takes away a lot of the boilerplate.
  • Backbone seems like a lot of code, but once you get your core models and views together, it becomes a very productive framework to work in.

Ember

  • Computed. Properties. You can set up properties that become are dependent on other properties. Like if you have a rectangle and you have an area property. You can make that a computed property that depends on the length and height.
  • Ember is a framework as opposed to the toolset that Angular confesses to be. The difference is subtle but is evident in their design patterns. You use Angular to build a framework for your app. Ember is the framework.
  • Everyone says Angular directives are amazing (they are) but most things can largely accomplished in Ember's views.

Angular

  • Okay. Directives are really, really cool. Think of them as decorators for HTML elements that you can mix and match. A directive can be as simple as adding two-way data-binding for a CSS property all the way to being a fully-functional web component(-esque) element.
  • Filters! Filters allow you filter input before you display it. If you wanted to not show some of your todos based on if it didn't have any letter 'V' in the title, it'd be simple to write a filter for that. Or automatically take display format currency or time.
  • Custom services. You saw scope, but you can write your own dependency injected services. Things that you find yourself doing a lot can easily be abstracted into a service, tested, and reused. I made one for a essentially a local version of memcache using localStorage. Really simple to do using services.
redditgifts is hiring
JavaScript Smackdown!