JavaScript Series

Patterns and Techniques of Modern Web Applications

Presented July 17, 2012

What are we here to discuss?

  1. Model-View-Controller (MVC)
  2. The evolution of the ViewModel (MVVM)
  3. Publish/Subscribe Pattern
  4. Templating
  5. Understanding Application State
  6. Test Driven Development

Presented By...

Aaron Greenlee

aarongreenlee.com | @aarongreenlee

Director of Development
WRECKINGBALL Media

James Brown

ja.mesbrown.com | @ibjhb

Director of Technology
WRECKINGBALL Media

Sponsored By...

Central Florida Web Developers User Group

  • 403 Members
  • This is our 38th Meeting
  • Founded June 2009

Our Mission

The Central Florida Web Developers User Group’s mission is the professional and personal development of our members through presentations, discussions and exercises that advance technical skills, use best practices, teach methodologies and attract opportunities to our members.

Let's GO!

Model-View-Controller

By Aaron Greenlee

The Problem?

How do you modularize the user interface functionality of a Web application so that you can easily modify the individual parts?

The same data needs to be shown in different ways!

A Solution?

Separate the modeling of the domain, presentation and actions into three separate classes.
- Microsoft

What is a Model?

  • Represents knowledge.
  • A modeling of something from the real-world.
  • Can be simple or complex.
  • Can have knowledge of other models.

What is a View?

  • A visual representation of knowledge.
  • Manages the display of information.
  • Highly customized for an implementation.
  • Can have it's own knowledge (private) to manage itself.

What is a Controller?

  • Manages inputs and communicates to Models and/or Views.
  • Links a User to the system.
  • Links other systems to the system.
  • Manages workflow.

A Tip When Coding

Code Size Guideline

Come on! Write this one down!

We all love Mario... but what is Mario?

Is he a View?

Or, is he a Model?

Mario can be a view and a model!

Powered by a Controller!

Are you starting to see the MVC "pattern"?

But, things evolve!

Introducing Model-View-ViewModel (MVVM)

  • Hybrid that blends the Controller and View.
  • Helps reduce "Code Sprawl" and improve legibility.
  • Perfect choice for JavaScript applications.
  • MVC + MVVM = OK!

Where does MVVM make sense?

Breaking GitHub down into views...

Breaking GitHub down into views...

Backbone.js Uses the ViewModel Pattern!

(function($){
    var ListView = Backbone.View.extend({
        el: $('body')
        // `events`: Where DOM events are bound to View methods. Backbone doesn't have a
        // separate controller to handle such bindings; it all happens in a View.
        ,events: {
            'click button#add': 'addItem'
        }
        ,initialize: function() {
            _.bindAll(this, 'render', 'addItem');
            this.counter = 0;
            this.render();
        }
        // `render()` now introduces a button to add a new list item.
        ,render: function() {
            $(this.el).append("<button id='add'>Add list item</button>");
            $(this.el).append("<ul></ul>");
        }
        // `addItem()`: Custom function called via `click` event above.
        ,addItem: function() {
            this.counter++;
            $('ul', this.el).append("<li>hello world"+this.counter+"</li>");
        }
    });

    var listView = new ListView();
    })(jQuery);

Are you starting to see the MVVM pattern?

Application State

By Aaron Greenlee

What is Application State?

Application state is a means of creating variables that can be seen by all users.

What is Application State?

What is Application State?

  • The Web is Stateless!
  • You access "resources" at a given time.
  • You may need to maintain state.

Maintaining State on the Web

  • Set cookies to maintain user session.
  • Transmit custom headers/tokens to maintain state.
  • Use Websockets to publish state messages to clients.
  • Storing values in global scopes (Memory).
  • Storing values in databases (Slow).

Thiking About State

Publish / Subscribe

(aka Pub/Sub)

By James Brown

What is Pub/Sub?

Sometimes called the Observer pattern.

Loose coupling between objects.

Also called decoupling

Reduces dependencies between objects.


Instead of object 1 calling a specific function on object 2, object 2 would instead 'listen' (or subscribe) for an 'announcement' (or publish).

Why don't things break?

If an announcement is made and no one is listening, nothing happens (i.e. things don't break)


Likewise, if an object is listening and there aren't any announcements, nothing happens.

Benefits?

Why the heck worry about using it?

Decoupling

(obviously)

Publisher doesn't need to know who is subscribing

Better code re-use

Multiple subscribers

Many subscribers can listen to one publisher



Example time!!

Easier to TDD & Unit Test

More later...

High availability

(Message queues)

Example: Amazon SQS

Allows publishers to send messages and when subscribers are ready, they can read the message

Simple example: Image resize service

Amazon SQS Example

We'll review more Pub/Sub after we learn about templating

JavaScript Templating

By James Brown

Think Microsoft Word Mail Merge

(but much less painful)

String Replacement

(Very Basically)


  • Mustache.js
  • Allows (requires) templates to be logic-less
  • This is good because it keeps a separation of concerns
  • This could be bad because it can be a pain
  • Allows for both server & client templates to be re-used

String Replacement++

(More Advanced)


  • Handlebars.js, Underscore.js & tons of others
  • Allows templates to be advanced with logic
  • Provides if/then/else, looping, helper functions and full JavaScript
  • This could be bad because code can get muddy quickly
  • Also could bad because of lack of server-side libraries

TDD

By James Brown

Test Driven Development

Unit testing is about testing the smallest unit of functionality possible

Tests are written first!

Test are run first and failed

(Just do it)

Write your production code

Sometimes called a spec or SUT

Run Tests again

Yay!

Refactor, if possible

Re-run your tests to ensure things didn't break

Why TDD / Unit Test?

  • So you don't break your own sh*#!%
  • So you don't break other dev sh*#!%
  • Immediate feedback and gratification
  • Extremely fast iteration process
    (which keeps you off Twitter)
  • Parallel Development
    (spys, stubs, mocks)
  • Cover every code path
    (if/then/else, switch statements, error handling)
  • Prove bugs exist that other developers wrote
    (your code is perfect, right?)

Disadvantages of TDD?

None!

(Just kidding)

Disadvantages of TDD?

  • Claims of slower development
    (Typically TDD is actually faster over time)
  • Requires applications to be planned out more
    (Is this really bad???)
  • Requires discipline
    (Developers are lazy)
  • People don't run unit tests
    (Developers are really lazy! - Solved by CI)
  • UI can be difficult to test
  • Too trusting of tests

How do we test JavaScript?

Use a test suite

Jasmine, QUnit, YUI, Hiro, Mocha



(Start with QUnit if unsure)

Use Spies, Stubs and Mocks

Sinon.js is great



Example time!

BY
Aaron Greenlee (@aarongreenlee)
AND
James Brown (@ibjhb)