Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Israel JavaScript Conference
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Web app that fits on a single web pageprovid...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Navigation, history, deep linkingPersisting ...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Reach Rich UXReduced Round Tripping
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Stands for Model-View-ViewModelNot technolog...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Observables are special JavaScriptobjects th...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Observable ComputedObservableArray
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |<div class="console-brief" title="Go to cons...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Notifies when items are added/removedDOESN’T...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |define([services/dataservice], function(data...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |<section class="view-list" data-bind="foreac...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Based on other properties and observablesSup...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |entity.finalPrice = ko.computed(function () ...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Text andappearance
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Dependency injection for JavaScriptLoad only...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |ModuleFModuleEModuleAModuleBModuleDModuleC
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |ModuleFModuleEModuleAModuleBModuleDModuleC
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |<script src="scripts/require.js"data-main="A...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Loading require.jsdefine([durandal/system,se...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |define([“jquery”], function ($) {return func...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Loading require.jsDefine the moduleEach depe...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Handle navigation from page to pageHandle lo...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Routing
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |View and ViewModel compositionDynamically lo...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Static contentStaticcontentDynamicShell area
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |define([durandal/system,services/logger],fun...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |<div><header data-bind="compose: { view:nav}...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Configure the routesActivate the Router obje...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Based on the popular SammyJS frameworkA sing...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |var router =require(durandal/plugins/router)...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |var routes = [{ url: consoles, moduleId:view...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |define([durandal/system,services/logger,dura...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |<div class="navbar-inner navbar-secondary"><...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |<div data-bind="css: { active:router.isNavig...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |navigateBack()navigateTo(url)replaceLocation...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |canActivate canDeactivateDeactivate Activate...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |canActivate canDeactivateDeactivate Activate...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |No consistency in callback APIsNo guarantees...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com | A Promise represents the result of atask, ...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |getGamesForConsole("xbox360", function (err,...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Only one success or failure will be calledHa...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Pure JavaScript library, 8.5kb minifiedDuran...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |var primeData = function () {return Q.all([g...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Durandal takes care of all the plumbing ofa ...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |http://durandaljs.com/documentation/http://j...
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
Upcoming SlideShare
Loading in...5
×

Spa Architecture with Durandal and Friends

4,216

Published on

A presentation i gave at JS-IL conference about building a SPA (single page application) using Durandal and other supporting libraries (Require.JS, Knockout and Q)

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

No Downloads
Views
Total Views
4,216
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Spa Architecture with Durandal and Friends

  1. 1. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Israel JavaScript Conference
  2. 2. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
  3. 3. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
  4. 4. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Web app that fits on a single web pageproviding a fluid UX by loading allnecessary code with a single page load
  5. 5. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Navigation, history, deep linkingPersisting stateInitially loading most of its contentDownload additional features as needed
  6. 6. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Reach Rich UXReduced Round Tripping
  7. 7. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
  8. 8. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
  9. 9. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
  10. 10. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
  11. 11. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Stands for Model-View-ViewModelNot technology specificAwesome with data binding!MVVM is, foremost, a separation pattern
  12. 12. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
  13. 13. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
  14. 14. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Observables are special JavaScriptobjects that can notify subscribers aboutchanges, and can automatically detectdependencies.
  15. 15. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Observable ComputedObservableArray
  16. 16. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |<div class="console-brief" title="Go to console details"><img data-bind="attr: { src: consoleImageName }" class="img-polaroid"/><address data-bind="text:Title"></address> By <span data-bind="text: Manufactorer"></span><br />….</div >var Title = ko.observable();
  17. 17. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Notifies when items are added/removedDOESN’T notify when object are changedCompatible with standard array functionsTracks the state of the array
  18. 18. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |define([services/dataservice], function(dataservice) {var games = ko.observableArray();dataservice.getGamesPartials(games);var vm = {games: games,};});
  19. 19. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |<section class="view-list" data-bind="foreach: games"><article class="article-container-full-width"><div><img data-bind="attr: { src: imageName }"class="img-polaroid"/><span data-bind="text: Title"></span> <br />Genre: <span data-bind="text: Genre"></span></div></article></section>
  20. 20. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Based on other properties and observablesSupports data bindingEnables creation of new observables
  21. 21. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |entity.finalPrice = ko.computed(function () {return parseInt(entity.Price() * (100 -entity.Discount()) / 100);});
  22. 22. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Text andappearance
  23. 23. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
  24. 24. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
  25. 25. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
  26. 26. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Dependency injection for JavaScriptLoad only what we need, when we needUses the AMD patternBreak your applications into smaller,more manageable, units of code
  27. 27. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |ModuleFModuleEModuleAModuleBModuleDModuleC
  28. 28. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |ModuleFModuleEModuleAModuleBModuleDModuleC
  29. 29. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |<script src="scripts/require.js"data-main="App/main"></script>Loading require.jsStart here – load main.js
  30. 30. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Loading require.jsdefine([durandal/system,services/logger,durandal/plugins/router,config,services/datacontext],function (system, logger,router,config,datacontext) {var shell = {activate: activate,router: router};return shell;function activate() {returndatacontext.primeData().then(boot).fail(failedInitialization);}...Define the moduleDependenciesEach dependency has acorresponding object
  31. 31. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |define([“jquery”], function ($) {return function(){};});
  32. 32. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Loading require.jsDefine the moduleEach dependency has acorresponding objectNo more messy script tags paradeLoad only whats needed, WHEN neededAllows for nested dependencies
  33. 33. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
  34. 34. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
  35. 35. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Handle navigation from page to pageHandle loading of resources (JS,HTML…)Listen for app lifecycle eventsManage views
  36. 36. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Routing
  37. 37. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |View and ViewModel compositionDynamically load modules as neededFires App lifecycle eventsAsync programming with promisesPage navigation and deep linkingConfigurable convention
  38. 38. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Static contentStaticcontentDynamicShell area
  39. 39. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |define([durandal/system,services/logger],function (system, logger) {var shell = {activate:activate};return shell;function activate() {logger.log(Shell loaded!);}});
  40. 40. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |<div><header data-bind="compose: { view:nav}"></header><section id="content" class="maincontainer-fluid" data-bind="compose: { model:router.activeItem, afterCompose:router.afterCompose, transition: entrance }"></section></div>
  41. 41. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
  42. 42. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Configure the routesActivate the Router objectBind away!
  43. 43. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Based on the popular SammyJS frameworkA singleton module – only one per appMultiple ways to define routesMapping is done most to least specific
  44. 44. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |var router =require(durandal/plugins/router);router.mapRoute(consoles,viewmodels/consoles, Consoles, true);router.mapNav(games, viewmodels/games,Games);Requires therouter objectURLModule Name VisibleSame as mapRoute,but always visible.
  45. 45. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |var routes = [{ url: consoles, moduleId:viewmodels/consoles, name: Consoles,visible: true },{ url: games, moduleId:viewmodels/games,name: Games, visible: true },{ url: consoledetails/:id, moduleId:viewmodels/consoledetails, name: ConsoleDetails, visible: false }];Encapsulate theroutes in config file
  46. 46. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |define([durandal/system,services/logger,durandal/plugins/router,config,services/datacontext],function (system, logger,router,config,datacontext) {var shell = {activate: activate,router: router};return shell;function activate() {returndatacontext.primeData().then(boot).fail(failedInitialization);}function boot() {router.map(config.routes);return router.activate(config.startModule);}});
  47. 47. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |<div class="navbar-inner navbar-secondary"><div class="btn-group" data-bind="foreach: router.visibleRoutes"><a data-bind="attr: { href: hash }, css:{ active: isActive }, html: caption"class="btn btn-info"></a></div></div>For each visible route…Bind the route linkCheck if link is active, ifso add css class ‘active’And its html to thecontent of the link
  48. 48. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |<div data-bind="css: { active:router.isNavigating }" class="pull-rightloader"><i class="icon-spinner icon-2x icon-spin"></i></div>
  49. 49. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |navigateBack()navigateTo(url)replaceLocation(url)Navigate withoutsaving history!
  50. 50. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
  51. 51. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |canActivate canDeactivateDeactivate ActivatebeforeBind afterBindviewAttached
  52. 52. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |canActivate canDeactivateDeactivate ActivatebeforeBind afterBindviewAttacheddocumentAttaced
  53. 53. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
  54. 54. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |No consistency in callback APIsNo guarantees whatsoeverTying callbacks kills the flow of our code
  55. 55. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com | A Promise represents the result of atask, which may or may not havecompleted. By using promises we wont be calling apassed callback, but instead – return apromise.
  56. 56. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |getGamesForConsole("xbox360", function (err, result) {getGamesByGenre("action", function (Err, result) {// do more stuff here});});getGamesForConsle("xbox360").then(function (result) {return getGameByGenre(result, "action");}).fail(failFunction);
  57. 57. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Only one success or failure will be calledHandles will always be called asynclyPromises can be easily chained
  58. 58. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Pure JavaScript library, 8.5kb minifiedDurandal make use of Q for its promisesMake it easy to write promise based codeAllows to wrap non promise based code
  59. 59. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |var primeData = function () {return Q.all([getLookups(), getSpeakersPartials(null, true)]);}function getLookups() {return EntityQuery.from(Lookups).using(manager).execute().fail(queryFailed);}
  60. 60. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |Durandal takes care of all the plumbing ofa SPA so you wont have to.Works in a modular way, saves bandwidthUses KnockoutJS for its data bindingFun!
  61. 61. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |http://durandaljs.com/documentation/http://johnpapa.net/SPAhttp://pluralsight.com/training/courses/TableOfContents?courseName=single-page-apps-jumpstarthttp://knockoutjs.com/documentation/introduction.htmlhttp://channel9.msdn.com/Events/TechEd/NorthAmerica/2013/DEV-B350#fbid=K3XtHQDs9Q3
  62. 62. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
  63. 63. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |
  64. 64. Israel JavaScript Conference | 03 – 6325707 | info@e4d.co.il | www.js-il.com |

×