Going Offline with JS presented at DDD Brisbane

1. Brendan Kowitz
@brendankowitz
Live Backchannel: #dddbrisbane #web03
Going Offline with JS
and JavaScript Application Development

2. Overview
• Introduction
1 • JavaScript on my Server!
• Dependencies, Patterns, Templates
2 • Client-side JavaScript
3 • WinJS (Windows 8)
• Wrap up

3. 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?

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

5. What can we build?
Windows 8
Node.js + Railsway.js jQuery Mobile + Spine.js
JavaScript Metro

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

7. 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)

8. 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

9. 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

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

11. Server-side demo

12. Client-side JavaScript
jQuery Mobile + Spine.js

13. Common Client-Side Patterns
• Free for all
http://xkcd.com/292/

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

15. 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);
}());

16. MVC: Spine.js
http://addyosmani.com/blog/building-apps-spinejs/

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

18. Spine.js demo

19. 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

20. Windows 8 Metro - WinJs

21. 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

22. 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

23. 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

24. 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");

25. demo

26. Further Reading

27. 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

28. 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

29. brendan.kowitz@readify.net
Thank you. http://www.kowitz.net
@brendankowitz
http://hg.kowitz.net/ddd