Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Brendan Kowitz                                         @brendankowitzGoing Offline with JS   JavaScript Application Develo...
Overview    • Introduction1 • JavaScript on my Server!    • Dependencies, Patterns, Templates2   • Client-side JavaScript3...
What are the issues?• How to we reuse our own libraries?• How do we tackle dependency / module  management?• How do we str...
What can we gain?• Vast open source community• Mostly platform independent• Some of the fastest Dynamic Language  interpre...
What can we build?                                                     Windows 8Node.js + Railsway.js   jQuery Mobile + Sp...
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)  – R...
Dependency Management --cont   • Using those libraries in your page       – CommonJS specification            • RequireJS ...
Railway.js•   railway init blog && cd blog•   npm install -l•   railway generate crud post title content•   railway server...
Testing from the server• Node.js  – Zombie.js  – Tobi.js  – … many others
Server-side demo
Client-side JavaScript     jQuery Mobile + Spine.js
Common Client-Side Patterns    • Free for allhttp://xkcd.com/292/
Common Client-Side Patterns•   Namespaces•   Module Pattern•   Sandbox•   .. MVC
JavaScript Refresher(function(){            var Person = function(firstName, lastName){                       this.firstNa...
MVC: Spine.jshttp://addyosmani.com/blog/building-apps-spinejs/
Testing Part 2• Client-side  – QUnit  – Jasmine (BDD)  – (Many others)
Spine.js demo
Windows 8 Metro - WinJs• App starts like any web page - HTML page  loads• HTML page loads its files  – WinJS script & styl...
Windows 8 Metro - WinJs
Working with Async   • Promise Pattern   • jQuery 1.5+            $.when($.ajax("http://www.example.org/somedata.json”))  ...
Navigation• Multi page (Not recommended in MSDN doco)   –   Default behavior of browser   –   Navigation loads a new page ...
Fragments• We want separate HTML files  – Easier to design  – Easier to maintain• Fragments  – Separate files, plus a load...
Navigation & Fragments});WinJS.Navigation.addEventListener("navigated", navigated);WinJS.Navigation.navigate(”            ...
demo
Further Reading
Next Steps July 26, 2012 Building Responsive Mobile Web Applications with MVC4 and HTML5 Thursday, 8:30 AM to 10:30 AM (GM...
Wrap up     1                   2                      3Problems with JS    JavaScript Patterns     Windows 8CommonJS     ...
With thanks to our sponsors
Please complete your feedback  forms, and return them to theregistration desk for a chance                       to win a ...
brendan.kowitz@readify.netThank you.                    http://www.kowitz.net                              @brendankowitz ...
Upcoming SlideShare
Loading in …5
×

Going offline with JS (DDD Sydney)

1,884 views

Published on

Going Offline with JS, presented at DDD Sydney 2012

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Going offline with JS (DDD Sydney)

  1. 1. Brendan Kowitz @brendankowitzGoing Offline with JS JavaScript Application Development
  2. 2. Overview • Introduction1 • JavaScript on my Server! • Dependencies, Patterns, Templates2 • Client-side JavaScript3 • WinJS (Windows 8) • Wrap up
  3. 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. 4. What can we gain?• Vast open source community• Mostly platform independent• Some of the fastest Dynamic Language interpreters around*• Reduce language ambiguity
  5. 5. What can we build? Windows 8Node.js + Railsway.js jQuery Mobile + Spine.js JavaScript Metro
  6. 6. Server-side• Exploring Node.js• Dependency Management – Node.js Package Manager• Railway.js MVC
  7. 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. 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. 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. 10. Testing from the server• Node.js – Zombie.js – Tobi.js – … many others
  11. 11. Server-side demo
  12. 12. Client-side JavaScript jQuery Mobile + Spine.js
  13. 13. Common Client-Side Patterns • Free for allhttp://xkcd.com/292/
  14. 14. Common Client-Side Patterns• Namespaces• Module Pattern• Sandbox• .. MVC
  15. 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. 16. MVC: Spine.jshttp://addyosmani.com/blog/building-apps-spinejs/
  17. 17. Testing Part 2• Client-side – QUnit – Jasmine (BDD) – (Many others)
  18. 18. Spine.js demo
  19. 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. 20. Windows 8 Metro - WinJs
  21. 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. 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. 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. 24. Navigation & Fragments});WinJS.Navigation.addEventListener("navigated", navigated);WinJS.Navigation.navigate(” ");WinJS.Navigation.back();
  25. 25. demo
  26. 26. Further Reading
  27. 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, Queenslandhttp://html5andmvcdevbrekkieqld.eventbrite.com/
  28. 28. Wrap up 1 2 3Problems with JS JavaScript Patterns Windows 8CommonJS Spine.js JavaScript MetroNode.js PhoneGapRailway.js QUnitTobi.js
  29. 29. With thanks to our sponsors
  30. 30. Please complete your feedback forms, and return them to theregistration desk for a chance to win a Nokia Lumia
  31. 31. brendan.kowitz@readify.netThank you. http://www.kowitz.net @brendankowitz http://hg.kowitz.net/ddd

×