The document discusses JavaScript application development for both server-side and client-side applications. It covers dependency management with Node.js Package Manager, using MVC frameworks like Railway.js and Spine.js, testing with tools like QUnit and Tobi.js, and developing Windows 8 Metro apps with WinJS for navigation and fragments. Common patterns like namespaces, modules, and promises are also discussed.

1. Brendan Kowitz
@brendankowitz
Going Offline with JS
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.Pages namespace

24. Navigation & Fragments
});
WinJS.Navigation.addEventListener("navigated", navigated);
WinJS.Navigation.navigate(” "
);
WinJS.Navigation.back();

25. demo

26. Further Reading

27. Next Steps
July 26, 2012
Building Responsive Mobile Web Applications
with MVC4 and HTML5
Thursday, 8:30 AM to 10:30 AM (GMT+1000)
Brisbane, Queensland
http://html5andmvcdevbrekkieqld.eventbrite.com/

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. With thanks to our sponsors

30. Please complete your feedback
forms, and return them to the
registration desk for a chance
to win a
Nokia Lumia

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