Your SlideShare is downloading. ×
Going Offline with JS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Going Offline with JS

1,185
views

Published on

Going Offline with JS presented at DDD Brisbane

Going Offline with JS presented at DDD Brisbane

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,185
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Javascript can have a lot of challenges in general
  • Node's goal is to provide an easy way to build scalable network programs.Node tells the operating system that it should be notified when a new connection is made, and then it goes to sleep. If someone new connects, then it executes the callback. Each connection is only a small heap allocation.
  • jQuery gives us a great api and it doesn’t restrict how we can structure out applications, this doesn’t mean that we shouldn’t have a nice structureDon’t use jQuery’s namespace, create your own, be your own app
  • A pure js library that provides the windows metro style for js applicationsProvides the controlsStyle sheets (fonts, margins etc..)Touch interface for win8Helpers, PatternsDesigned for easy toolabilityWinJS is a library not a framework..load whatever pieces you require
  • A pure js library that provides the windows metro style for js applicationsProvides the controlsStyle sheets (fonts, margins etc..)Touch interface for win8Helpers, PatternsDesigned for easy toolabilityWinJS is a library not a framework..load whatever pieces you requirePromises: Provides a mechanism to schedule work to be done on a value that has not yet been computed. It is an abstraction for managing interactions with asynchronous APIs.
  • Transcript

    • 1. Brendan Kowitz @brendankowitz Live Backchannel: #dddbrisbane #web03Going Offline with JS and JavaScript Application Development
    • 2. Overview • Introduction1 • JavaScript on my Server! • Dependencies, Patterns, Templates2 • Client-side JavaScript3 • 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 8Node.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 • LABjshttp://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 allhttp://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.jshttp://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 & Fragmentsfunction 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 3Problems with JS JavaScript Patterns Windows 8CommonJS Spine.js JavaScript MetroNode.js PhoneGapRailway.js QUnitTobi.js
    • 29. brendan.kowitz@readify.netThank you. http://www.kowitz.net @brendankowitz http://hg.kowitz.net/ddd