iris

View Github Repository Open presentation in a new window

maxbeatty

See all presentation from maxbeatty

iris

0 0

iris

Presentation on the idea and implementation of iris

On Github maxbeatty / iris

Iris

Idea to Implementation

Presented by Max Beatty

CONFIDENTIAL

What is Iris?

Iris is a full-stack app built with Backbone.js on the client which RESTfully talks to a Node.js server that's able to call our service layer.

Where?

Seemslessly embedded inside

Users have no idea they are using a separate technology stack.

How?

A single JavaScript include inside of coreapp loads the Backbone app using RequireJS

use_javascript(
  "/i/components/requirejs/require.js",
  '',
  array("data-main" => "/i/main")
);

Why?

Prince coreapp Less work to build from scratch Easier service-layer interactions

Who?

  • Gui, Chris, and Max owned the decision to move further away from coreapp.

  • Max lead the architecting of the Node.js-backed Backbone app with inspiration from ƒovea and BuyAds Pro

Everyone but Brian has contributed

When?

  • Initial commit: May 21, 2013

  • Production Launch: July 15, 2013

  • Shipped in less than 2 months

  • Averaging 15 commits per day

Architecture

100% CoffeeScript

Client

RequireJS

Backbone.js

Server

Node.js

Express

More to come from Ryan

Workflow

1. User loads page including iris snippet

2. Remotely fetches data from iris server

3. Renders view client-side with Underscore templates in Backbone views

4. Interactions with models and collections are synced to server

Sample View

define [
  'jquery'
  'underscore'
  'backbone'
  'text!tpl/user/_info.html'
], ($, _, Backbone, tpl) ->

  class User extends Backbone.View
    template: _.template tpl

    className: 'participant clear-both'

    initialize: ->
      @model.bind 'change', @render, @ # triggered after fetch

    render: ->
      @$el.html @template @model.toJSON()

Promises

Promises are objects which represent the pending result of an asynchronous operation

jQuery 1.5 added Deferred which implements Promises

Example Deferred

seller = $.Deferred (deferred) => @getSeller options.seller, deferred
getSeller: (sellerIdentity, deferred) ->
  if sellerIdentity.userUid?
    seller = new User uid: sellerIdentity.userUid
    sellerBlock = new UserView model: seller
  else
    seller = new Group uid: sellerIdentity.groupUid
    sellerBlock = new GroupView model: seller

  seller.fetch
    error:
      deferred.fail "error fetching user"

    success: (model, response, options) ->
      deferred.resolve sellerBlock.el.outerHTML

$.when

Provides a way to execute callback functions based on one or more objects, usually Deferred objects that represent asynchronous events.

$.when( $.ajax("/api") )
.done(
  (data, status, jqxhr) ->
    console.log arguments
)

Multiple Deferreds

Control flow by waiting for both to finish

seller = $.Deferred (deferred) => @getSeller options.seller, deferred

buyer = $.Deferred (deferred) => @getBuyer options, deferred

$.when(seller, buyer)
.done(
  (sellerResponse, buyerResponse) =>
    @render sellerResponse, buyerResponse[0], buyerResponse[1]
    options.deferred.resolve @el.outerHTML
)
.fail @failedFetch

Questions?

Feedback?