stacktalk

@smucode

telepresence
/telprezns/

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 congure 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 prex formaKers computed proper@es html5 data aKribute

no expressions congura@on debugging

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