P. 1
framsia stacktalk

framsia stacktalk

|Views: 51|Likes:
Published by Stig Murberg
My team and I are just about to release the first version of our new web based telepresence scheduling tool. The stack consists of CoffeeScript, Backbone.js, Rivets.js, RequireJS and Buster.JS. I will in this talk run through the rationale behind choosing each of these frameworks and share our experience with them.
My team and I are just about to release the first version of our new web based telepresence scheduling tool. The stack consists of CoffeeScript, Backbone.js, Rivets.js, RequireJS and Buster.JS. I will in this talk run through the rationale behind choosing each of these frameworks and share our experience with them.

More info:

Categories:Types, Speeches
Published by: Stig Murberg on Apr 24, 2013
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

04/24/2013

pdf

text

original

stacktalk  

  @smucode  

tel·∙e·∙pres·∙ence  
/ˈteləˌprezəns/  

The  use  of  virtual  reality  technology,   esp.  for  remote  control  of  machinery   or  for  apparent  par@cipa@on  in   distant  events.  

“create  a  web  applica@on   to  book  telepresence  mee@ngs”  

demo  

the  stack  

user  experience  

base  css  

css  components    

js  plugins    

packed  with  features   visually  pleasing   great  for  prototyping   customizable  

size   originality   html  structure  

intui@ve   compact   expressive  

know  javascript  

#  this  is  a  comment  

//  this  is  a  comment  

multiply  =  (a,  b)  -­‐>      a  *  b  

var  multiply  =  function(a,  b)  {      return  a  *  b;   };  

greet  =  ()  -­‐>      console.log  ‘hello  world’  

var  greet  =  function()  {      console.log(‘hello  world’);   };  

greet  =  -­‐>      console.log  ‘hello  world’  

var  greet  =  function()  {      console.log(‘hello  world’);   };  

callback  =  (data)  =>      @process  data  

var  that  =  this;   var  callback  =  function(data)  {      that.process(data);   };  

multiply(2,  4)  

multiply(2,  4);  

multiply  2,  4  

multiply(2,  4);  

class  User      getName:  -­‐>          @name  

var  User  =  function()  {};   User.prototype.getName  =  function()  {      return  this.name;   }  

class  Cat  extends  Animal      walk:  -­‐>          super.walk()  

var  Cat,  _ref,      __hasProp  =  {}.hasOwnProperty,      __extends  =  function(child,  parent)  {  for  (var  key  in  parent)  {  if  (__hasProp.call(parent,  key))  child[key]  =  parent[key];  }   function  ctor()  {  this.constructor  =  child;  }  ctor.prototype  =  parent.prototype;  child.prototype  =  new  ctor();  child.__super__   =  parent.prototype;  return  child;  };     Cat  =  (function(_super)  {      __extends(Cat,  _super);        function  Cat()  {          _ref  =  Cat.__super__.constructor.apply(this,  arguments);          return  _ref;      }        Cat.prototype.walk  =  function()  {          return  Cat.__super__.walk.apply(this,  arguments).walk();      };        return  Cat;     })(Animal);  

small  units     express  dependencies  

define  id?,  dependencies?,  callback  

define  -­‐>      #  callback      (msg)  -­‐>      #  returned  fn          console.log  msg  

define  [‘cs!./log’],  (log)  -­‐>      log  ‘hello  world’  

supports  plugins  (ie.  cs  /  text)   op@mizer  

hard  to  configure   unhelpful  error  messages   library  is  huge  

wri@ng  and  running  tests  should  be  easy  

demo  

supports  plugins  (ie.  amd)   integrated  mocking  library  

quite  fragile   somewhat  inac@ve  development   does  not  handle  too  many  tests  

structure  

models   collec@ons   events   views   router  

demo  

nice  way  to  organize  your  code   lightweight  

some  hard  dependencies   unsure  how  it  scales  

beKer  templa@ng  

one/two  way  databinding  

<div  id=“meeting”>      <h1  data-­‐text=“meeting.title”></h1>      <img  data-­‐src=“meeting.url”  />      <div  data-­‐show=“meeting.is_recurrent”>          <!-­‐-­‐recurrence-­‐-­‐>      </div>   </div>  

rivets.bind  $(‘#meeting’),  meeting:  @meeting  

binders  

data-­‐text   data-­‐html   data-­‐value   data-­‐show   data-­‐hide   data-­‐enabled   data-­‐disabled  

data-­‐checked   data-­‐unchecked   data-­‐[attribute]   data-­‐class-­‐[class]   data-­‐on-­‐[event]   data-­‐each-­‐[item]  

demo  

two  way  databinding   many  binders   prefix   formaKers   computed  proper@es   html5  data  aKribute  

no  expressions   configura@on   debugging  

slides/code  =>  hKps://github.com/smucode/stacktalk  

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->