Going Offline with JS

Brendan Kowitz
@brendankowitz
Live Backchannel: #dddbrisbane #web03

Going Offline with JS
and JavaScript Application Development

Overview
• Introduction

1 • JavaScript on my Server!
• Dependencies, Patterns, Templates
2 • Client-side JavaScript

3 • WinJS (Windows 8)
• Wrap up

What are the issues?
• How to we reuse our own libraries?
• How do we tackle dependency / module
management?
• How do we structure our projects?
• How do we test our projects?
• What tools do we use?

What can we gain?
• Vast open source community
• Mostly platform independent
• Some of the fastest Dynamic Language
interpreters around*
• Reduce language ambiguity

What can we build?

Windows 8
Node.js + Railsway.js jQuery Mobile + Spine.js
JavaScript Metro

Server-side
• Exploring Node.js
• Dependency Management
– Node.js Package Manager
• Railway.js MVC

Dependency Management
• Downloading Dependent Libraries
– .NET has Nuget (this also works for JS in .NET
projects)
– Ruby has Gems
– Node.js uses NPM (Node.js Package Manager)

Dependency Management --cont
• Using those libraries in your page
– CommonJS specification
• RequireJS
• Node.js
• When.js
– Script Loaders (load scripts in parallel)
• YepNope
• Yabble
• LABjs

http://lmgtfy.com/?q=commonjs

Railway.js
• railway init blog && cd blog
• npm install -l
• railway generate crud post title content
• railway server 8888
• open http://127.0.0.1:8888/posts

Testing from the server
• Node.js
– Zombie.js
– Tobi.js
– … many others

Client-side JavaScript

jQuery Mobile + Spine.js

Common Client-Side Patterns
• Free for all

http://xkcd.com/292/

Common Client-Side Patterns
• Namespaces
• Module Pattern
• Sandbox
• .. MVC

JavaScript Refresher
(function(){
var Person = function(firstName, lastName){
this.firstName = firstName;
this.lastName = lastName;
};

Person.find = function(id) {
console.log('Trying to find ' + id);
};

Person.fn = Person.prototype;
Person.fn.fullName = function(){
return this.firstName + ' ' + this.lastName;
};

var john = new Person('John', 'Smith');

console.log(john.fullName());
Person.find(1);
}());

MVC: Spine.js

http://addyosmani.com/blog/building-apps-spinejs/

Testing Part 2
• Client-side
– QUnit
– Jasmine (BDD)
– (Many others)

Windows 8 Metro - WinJs
• App starts like any web page - HTML page
loads
• HTML page loads its files
– WinJS script & styles
– Your app’s scripts & styles
• Your code wires up to app lifetime events
• Start the app
• … and events happen

Working with Async
• Promise Pattern
• jQuery 1.5+
$.when($.ajax("http://www.example.org/somedata.json”))
.then(myFunc, myFailure);

• WinJS
WinJS.xhr({
url:"http://www.example.org/somedata.json"
}).then(function (response) {
updateDisplay(
JSON.parse(response.responseText));
});

http://wiki.commonjs.org/wiki/Promises/A

Navigation
• Multi page (Not recommended in MSDN doco)
– Default behavior of browser
– Navigation loads a new page
– Drops script context
– Have to serialize state that gets passed across pages
(use WinJS to help)
• Single Page
– One page as far as browser is concerned
– DOM elements changed programmatically
– Keeps script context and state for app lifetime
– Harder to design an app in a single HTML file

Fragments
• We want separate HTML files
– Easier to design
– Easier to maintain
• Fragments
– Separate files, plus a loader that will bring them in
– In ui.js: WinJS.UI.Fragments namespace

Navigation & Fragments
function navigated(e) {
WinJS.UI.Fragments.clone(e.detail.location, e.detail.state)
.then(function (frag) {
var host = document.getElementById('contentHost');
host.innerHTML = '';
host.appendChild(frag);
});
}

WinJS.Navigation.addEventListener("navigated", navigated);

WinJS.Navigation.navigate("/html/home.html");

Mozilla Chromeless

“The “Chromeless” project experiments with the idea of removing the current
browser user interface and replacing it with a flexible platform which allows for the
creation of new browser UI using standard web technologies such as HTML, CSS and
JavaScript.”

http://mozillalabs.com/chromeless

Wrap up

1 2 3

Problems with JS JavaScript Patterns Windows 8
CommonJS Spine.js JavaScript Metro
Node.js PhoneGap
Railway.js QUnit
Tobi.js

brendan.kowitz@readify.net

Thank you. http://www.kowitz.net

@brendankowitz

http://hg.kowitz.net/ddd

Going Offline with JS

Recommended

More Related Content

What's hot (19)

Viewers also liked (20)

Similar to Going Offline with JS (20)

Recently uploaded (20)

Going Offline with JS

Editor's Notes