Your SlideShare is downloading. ×

Going offline with JS (DDD Sydney)

1,398

Published on

Going Offline with JS, presented at DDD Sydney 2012

Going Offline with JS, presented at DDD Sydney 2012

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,398
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
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 @brendankowitzGoing Offline with JS 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.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, Queenslandhttp://html5andmvcdevbrekkieqld.eventbrite.com/
    • 28. Wrap up 1 2 3Problems with JS JavaScript Patterns Windows 8CommonJS Spine.js JavaScript MetroNode.js PhoneGapRailway.js QUnitTobi.js
    • 29. With thanks to our sponsors
    • 30. Please complete your feedback forms, and return them to theregistration desk for a chance to win a Nokia Lumia
    • 31. brendan.kowitz@readify.netThank you. http://www.kowitz.net @brendankowitz http://hg.kowitz.net/ddd

    ×