Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Building responsive applications in HTML5 and JavaScript

Talk for NYC .NET Developers Group on 3/15
by

Jimmy Schementi

on 24 March 2012

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Building responsive applications in HTML5 and JavaScript

Building
Responsive
Applications in
HTML5 and
JavaScript

Jimmy Schementi
Programming
languages &
compilers
IronRuby,
IronPython,
Dynamic Language Runtime(DLR)
.
.com
Tour of
JavaScript

if (true) { }
for (var i = 0; i < 10; i++) { }
for (var i in obj) { }
while (true) { }
Control Flow
structured syntax from C-style languages
var i = 0;
function foo () {
for (var i = 0; i < 10; i++) { }
return i;
}
Variables
Function scoped, not block stoped
var foo = "test";
window.foo; // => "test"
Global object
in the browser ...
var you = true;
var name = "Jimmy";
var count = 4;
Primitives
0 == false
null == false
!"foo" == false
Type coersion
Boolean:
String:
Number:
1 == true
{} == true
"foo" == true
var obj = {key1: 'val1', key2: 42};
obj.key1 == 'val1';
obj['key2'] == 'val2';

var array = [1,2,3];
array.push(4);
Objects
function foo () { } // named
foo(foo);
var foo = function () { } // anonymous
foo.a = 1;
foo.b = 2;
Functions
First-class objects
function fib (n) {
if (n < 2) return 1;
return fib(n-2) + fib(n-1);
}
Example:
Memoization
function fib (n) {
if (!fib.t) fib.t = {};
if (fib.t[n] != null) return fib.t[n];
if (n < 2) return fib.t[n] = 1;
return fib.t[n] = fib(n-2) + fib(n-1);
}
function User (name) {
this.name = name;
}
var user = new User("Jimmy");
user.name == "Jimmy"
Function instantiation
User("Jimmy");
name == "Jimmy" // 0_o
function User () { }
User.prototype.setName = function (name) {
this.name = name;
}
var u = new User();
u.setName("Jimmy");
u.name == "Jimmy";
Prototype
inheritance
function Person() {}
function Schementi (name) {
this.firstName = name;
}
Schementi.prototype = new Person();
Schementi.prototype.lastName = "Schementi";
var me = new Schementi("Jimmy");
me.firstName == "Jimmy";
me.lastName == "Schementi";

me instanceof Schementi
me instanceof Person
me instanceof Object
function Counter () {
var count = 0;
this.getCount = function () {
return count;
};
this.incr = function () {
count ++;
};
}
Closures
var c = new Counter();
c.incr();
c.getCount() == 1;
c.count // err!
Modern
Browser-based
Applications
Exposes an object model representing the current HTML page and other browser operations to JavaScript.
Window/Navigator
HTML/CSS
Canvas
SVG
etc...
{
DOM
window.
function test() {
return this;
}
test() == window;
Context
De-mystifying "this"
var obj = {
test: function () {
return this;
}
};
obj.test() == obj;
var t = obj.test;
t() == window; // 0_o
function toArray (obj) {
Array.prototype.slice.call(obj);
}
function bind (scope, fn) {
return function () {
return fn.apply(scope, toArray(arguments));
};
}
obj.test = bind(obj, obj.test);
var t = obj.test;
t() == obj;
traditional this
this == wait, wft?
[].join.call([1,2,3], " ") == '1 2 3';
[].join.apply([1,2,3], [" "]) == '1 2 3';
this == you name it
Here's
the catch
...
DOM is a poor API for the usual single-page
HTML app use-cases.
Features vary in support-level across browsers.
JavaScript lacks modern language features, like modules and a thorough standard library. Also, JavaScript performance was very poor.
Browsers (circa 3 years ago) do not support use
cases we associate with "rich" client apps.
Browser
evolution
and
libraries
HTML5
Canvas, push state, storage, CSS3,
WebGL, WebSockets, etc ...
jQuery, RequireJS, Underscore.js,
Backbone.js, etc...
That was then...
... this is now.
Libraries
Web Browser
Model View Controller
Model View Presenter
Model View ViewModel
Architectures and
Patterns
Backbone.js
Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
Website: http://documentcloud.github.com/backbone/
Annotated Source: http://documentcloud.github.com/backbone/docs/backbone.html
Book: https://github.com/addyosmani/backbone-fundamentals
Resources
DEMO
Backbone.js Todo app code walk-through

Thanks!
Questions?
Node.js/Socket.io chatroom
Other fun stuff ....
@jschementi
Full transcript