Going Offline with JS

  • 1,153 views
Uploaded on

Going Offline with JS presented at DDD Brisbane

Going Offline with JS presented at DDD Brisbane

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,153
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
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