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.

Spa Architecture with Durandal and Friends

4,844 views

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

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 |

×