Site Meter

Architecting large Single Page Applications with Knockout.js

Last week in Oslo I was lucky enough to attend the fantastic NDC 2014 conference, at which I gave the following talk about using brand-new not-yet-released Knockout.js features, along with Yeoman, Gulp, and Karma to build large single-page web apps in a very modern style (while still retaining backward compatibility all the way to IE 6!).

This should be of interest to anyone who uses Knockout or cares about scalable front-end architecture.


  • 00:00 Benefits and challenges of single-page apps; relevance of Knockout.js
  • 11:20 Demo: Knockout 3.2′s components and custom elements
  • 15:40 Demo: Using Yeoman to generate (“scaffold”) a scalable application architecture
  • 22:20 Demo: Scaffolding and building a new Knockout component
  • 30:50 Understanding Grunt and Gulp
  • 34:00 Demo: Using Gulp and require.js to produce control both preloading and incremental loading
  • 41:50 Testing – your options
  • 43:50 Demo: Adding Jasmine and Karma to the technology stack
  • 59:10 Summary: Overcoming the challenges of single-page app development

Watch the video

Architecting large Single Page Applications with Knockout.js

Want more? I also gave a talk about WebGL and GPU coding for the browser.

101 Responses to Architecting large Single Page Applications with Knockout.js

  1. Can I simply just say what a relief to uncover an individual
    who actually understands what they’re talking about
    on the net. You actually know how to bring a problem to
    light and make it important. A lot more people must read this and understand this side of your
    story. I can’t believe you are not more popular because you definitely have the

  2. Hi Steven,
    Great presentation. Where would it be possible to get more info on what you’re using for Ibiza portal?

  3. Thank you for another informative blog. The place else could I
    get that kind of information written in such a perfect means?
    I’ve a challenge that I am just now working on, and I have been at the glance out
    for such information.

  4. xminder

    Thanks for this demo. Where can I get the sample code you use in your presentation?

  5. Adam

    Great talk, would love to here more about how the different views are being switched in and out, the router being used etc by the portal.

  6. Tyrsius

    Steven that was an excellent demo. The Knockout 3.2 components are looking really good, but that RequireJS bundles stuff news to me. We are using one large app bundle right now and I can’t wait to try splitting it up.

    Excellent talk!

  7. Hello there! This post could not be written any
    better! Looking at this post reminds me of my previous roommate!

    He continually kept preaching about this. I’ll forward this post to him.
    Fairly certain he’s going to have a great read. Thanks for sharing!

    my web blog; Throne Rush Hacks

  8. Juan Cortines

    Thanks for this.

    By the way, thanks to this video I discovered how to attach a “dispose” callback to the view model function, which is very useful when playing with timeouts or intervals. Before I had to use “ko.utils.domNodeDisposal.addDisposeCallback” in a custom binding :/

  9. Is there a way to create elements with domain scope? See the second tag form below.

  10. OK… here goes again… :)

    <myapp-grid />

    <myapp:grid />

  11. Every weekend i used to visit this site,
    as i want enjoyment, for the reason that this this website conations in fact nice funny information too.

  12. Thanks for sharing your thoughts about prophylactic. Regards

  13. I’m not sure why but this blog is loading extremely slow for me.
    Is anyone else having this issue or is it a issue on my end?
    I’ll check back later on and see if the problem
    still exists.

  14. Hello, I read your blog on a regular basis.
    Your humoristic style is awesome, keep doing what
    you’re doing!

  15. Anders

    Can you link to css files from templates? If so, how?

  16. This is really interesting, You’re a very skilled blogger.

    I have joined your rss feed and look forward to seeking more of
    your fantastic post. Also, I’ve shared your site in my social networks!

  17. Hi Steve. I have seen this video and quite liked it. Still i found there is some need o fimprovements. The problem which i am facing (Unfortunatly wasn’t solved with this demo presentation) is that i have a view model which is quite complete. I want to manage it by separating initialization data , server related functions and some helper functions used for internal process. Take a look at this question and you will understand.

  18. Hey Steve. I’m quite interested in setting up a similar development environment for javascript editing. Would you consider writing up a blog post about your setup? Cheers!

  19. We’re a group of volunteers and opening a new scheme in our community.
    Your web site provided us with valuable information to work on. You have done an impressive job and our
    whole community will be grateful to you.

  20. syzer

    Someone mentioned the big absent in comparision: Dojo. It is good and long proven (10years) framework.

  21. Hans Roerdinkholder

    Interesting presentation. Gulp, combined with Require’s bundles is something I will definetly explore further.

    Too bad you didn’t really go into performance/memory management. This is a real issue at my company where we build a large SPA that our clients typically use for an extended period of time. Both general front-end performance and memory used (and leaked) becomes more and more of an issue as our application expands (despite our best effords to organise our code in a modular fashion, with a strict separation of responsibilities). It is very hard to find helpful information on spotting the source of these sort of problems, except for ‘learn to use the profiling tools in your browser’.
    I also hoped you would talk more about architecture specific for large SPAs, I feel that the advices you do give (which I appreciate) do not tackle the issues that arise when your SPA expands beyond a certain limit.

    For example, folder structure is usually different between small and large projects: In a small project, I often see the ‘divide by module type’-principle, where in a large application, I tend to prefer ‘divide by business feature and nest where it makes sense’ and group different types of modules that touch the same business feature together.

    The Azure management portal is a brilliant SPA and I would love to learn more about the techniques used to manage the issues that arise in such a large SPA, but although I liked your presentation (and laughed hard a few times), I feel it only scratched the surface. I would love to see a part 2!

  22. Thanks for finally talking about > Architecting large Single
    Page Applications with Knockout.js – Steve Sanderson’s
    blog – As seen on YouTube™ < Loved it!

  23. SteveB

    Great presentation Steve! Only thing is you don’t mention Durandal. We are using Durandal for a large enterprise app, did you consider it for the Azure Portal?

  24. Heya i am for the first time here. I came across this board and I find It truly useful
    & it helped me out much. I hope to give something back
    and help others like you aided me.

    Here is my webpage …

  25. Thanks for sharing your thoughts. I truly appreciate your
    efforts and I am waiting for your next post thank you once again.

  26. Write more, thats all I have to say. Literally, it seems as
    though you relied on the video to make your point.
    You clearly know what youre talking about, why waste your intelligence on just posting videos to your site when you could be
    giving us something enlightening to read?

  27. My brother recommended I may like this website.

    He used to be totally right. This post truly made my day.
    You can not consider simply how so much time I had spent for this information!
    Thank you!

  28. Excellent session! Thank you, Steven! Very interesting toolset. Excuse me, what the tabbed Console did you used there? Is it themed Console2 or something else?

  29. Hi Steve
    In ViewModel of Components we need the callback function for telling that the template has been attached to html.
    Because in my case I need to call $(element).trigger(“create”); with jquery mobiles theme

    need a call back function attachComplete: function (element) {

  30. Having read this I believed it was extremely enlightening.
    I appreciate you spending some time and energy to put this article
    together. I once again find myself spending a significant amount of time both reading and posting comments.
    But so what, it was still worth it!

  31. you are actually a just right webmaster. The website loading
    velocity is amazing. It seems that you are doing any unique trick.
    Furthermore, The contents are masterpiece. you have
    performed a fantastic task on this topic!

  32. After looking into a few of the articles on your blog, I seriously like your technique of
    blogging. I saved it to my bookmark site list and
    will be checking back in the near future. Please visit my
    web site as well and let me know your opinion.

  33. Jacob

    Could anyone tell his opinion ?
    Could it make sense to build a SPA application (client-seide rendering) with a portal, such as Websphere or another one?
    I am asking because Portal are server side.
    Thank you

  34. I like the helpful information you provide in your articles.
    I’ll bookmark your blog and check again here regularly.
    I’m quite sure I’ll learn plenty of new stuff right here! Good luck for the next!

  35. If some one wishes to be updated with most recent technologies therefore
    he must be visit this web page and be up to date all the time.

  36. I know this web site provides quality depending content and other
    stuff, is there any other site which presents
    these kinds of data in quality?

  37. One more thing i would like to add here. What when i need some component observbale value into my view model as component is completely independent and i wont be able to get the value.

  38. OldGrouch

    After you have the files and folders created with yeoman and the generator for Knockout, how do you add these to a new Visual Studio project? Which type of project is best? And thanks for the presentation.

  39. Pingback: Knockout 3.2.0 released - Steve Sanderson’s blog - As seen on YouTube™

  40. There’s definately a great deal to find out about this
    issue. I really like all the points you made.

  41. When I originally commented I clicked the “Notify me when new comments are added” chekbox and now
    each time a comment is added I get three e-mails with the same comment.
    Is there any way you can remove people from that service? Manyy thanks!

    My web page; at&t upcoming phones 2014 (

  42. Yes! Finally someone writes about warp 2 at&t.

    My web blog – o que quer dizer at&t – Brigitte,

  43. This paragraph will assist the internet viewers for building up new
    webpage or even a blog from start to end.

    Feel free to surf to my weblog verizon assurant (Whitney)

  44. Have you ever considered about including a little bit more than just ykur articles?
    I mean, what you say is fundamental and all. Howeverr think about if you added
    some great images or video clips tto give your posts more, “pop”!
    Your content is excellent but with pics and clips, this
    site could definitely be one of the very best in its niche.

    Excellent blog!

  45. Pretty great post. I simply stumbled upon your blog andd wated tto mention that I’ve truly loved broesing your weblog posts.
    After all I will bee subscribing for your feed and
    I am holping you write once mor very soon!

    Take a look at mmy web site boost mobile 4genie racist commercial (Mickey)

  46. Hello just wanted to give you a quick heads up and let you knkw a few of the images
    aren’t loading correctly. I’mnot sure why but I think its a linking issue.
    I’ve tried it in two different browsers and both
    show the same results.

    My bkog post: verizon zte n861

  47. Thans very nice blog!

    Feeel free to visit my web site … boost Mobile 3g speed

  48. Simply desire to say your articl is as amazing. The clearness for
    your submit iss simply excellent and that i can think you’re knowledgeable on this subject.

    Well along with your permission allow me to snatch your RSS feed to keep
    up too date with coming near nwar post. Thanks 1,000,000 and please keep up the rewarding work.

    Visit my homepage – boost mobile 53212 (Catherine)

  49. Nice answers in return of tthis query with real arguments and
    telling everything about that.

    Feel free to visit my web pqge :: Boost Mobile Best Buy

  50. I think the admin of this website is truly working hard
    in support oof his website, since here every material is quality based information.

    my web blog – boost mobile galaxy note, Katlyn,

  51. Good day I am so thrilled I found your site, I really found you
    by accident, while I was browsing on Yahoo for somethin else, Anyways I am here now and would just like
    to say thanks for a incredible post and a all round entertaining blog (I also love
    the theme/design), I don’t have time to go through it all
    at the minute but I have book-marked it and also included
    your RSS feeds, so when I have time I will bbe back to read a lot more, Pleas do keep up the awesome

    my page … at&t signal iin house; Elden,

  52. Attractive portion of content. I just stumbled upon your site
    and in accession capital to claim that I acquire in fact enjoyed account your weblog posts.

    Any way I will be subscribing for your augment or even I achievement you get admission to persistently fast.

  53. Really enjoyed this presentation, it was put together really well. The tool chain demo with Yeoman etc, was great, and the ko.components piece was very interesting.

  54. Weddings and the accompanying engagement parties and showers can get stressful and out of hand for many reasons.

    Wisconsin will undoubtedly serve as the most awesome location for your memorable moment.
    Go for vinyl sleeves, which last longer than brown envelopes
    that can easily get torn.

  55. There is certainly a lot to learn aout this issue.

    I like all the points you have made.

  56. Hi there, everything is going sound here and ofcojrse every
    one is sharing facts, that’s geuinely fine, keep up writing.

    my homepage … verizon talk to representative – Dollie,

  57. Rickard Staaf

    Great talk, even though I am not using Knockout it was an eye opener on other planes.

    I am a bit curious about something else though, which programs are you using for your presentations to be able to transition between presentation and live applications (visual studio etc.) like in 43:51 for example.

  58. Veery nice post. I simply stumbled upon your blog and wanted
    to mention that I have truly loved surfing around your blog posts.
    In any case I’ll be subscribing too your feed and I hope
    you write again soon!

    Feel free to surf to my website – boost mobile text histtory – Freddy,

  59. I constantly spent my half an hour to read this weblog’sarticles everyday along with a cup
    of coffee.

  60. Thanks for one’s marvelous posting! I definitely enjoyed reading it, you’re a great author.Iwill mske certain too bookmark your blog and will eventually
    come back down the road. I want to encourage one to continue your
    great job, have a niche evening!

    my blog post – verizon 4genie friess diner, Lacey,

  61. I got this website from my friend who told me on thee
    topic of this weeb page and at the moment this time I am visiting this web page and reading very informative contenbt at this place.

    my web-site; boost mobile 50 dollar unlimited plan review (Lillian)

  62. It will not make sense and can lead to a good deal of frustration in case your bouncy castle is far too
    small, and people need to queue up to get on. Maximum Competitors: 4Maximum
    Fat: 400lbs – Inflation Time frame: Under 1 Minute – Comes
    as well as: Good UL Blower – Whilst all of us love all of our little ones
    to possess enjoyable and they also just about all absolutely love ones own bouncy castles defense really needs to
    become important. Initially, you need to make positive that you are obtaining
    or in most cases renting, a bouncy castle that’s manufactured
    out of protected materials.

  63. Hello there! I simpply want to give you a huge thumbs
    up for your great information you have here on this post.

    I will be returning to your site for more soon.

    My page: at&t 60617

  64. I’d like to find outt more? I’d love to find out some additional information.

    my web blog; at&t n obt [Francisca]

  65. Magnificent beat ! I would like to apprentice whilst
    yyou amend your site, how could i subscribe for a blog website?

    The account helped me a acceptable deal. I had been a
    little bit familiar of this your broadcast provided bright
    transparent concept

    My blog 1 800 verizon phone Number

  66. Heey would you mind stating which blog platfokrm
    you’re using? I’m going to start my own blog in the near
    future but I’m having a tough time deciding between BlogEngine/Wordpress/B2evolution and Drupal.

    The reason I ask is because your deswign and style seems different then molst blogs and I’m looking for something completely unique.
    P.S My apologies for being off-topic but I had to ask!

    Feeel fre to surf to my site :: boost Mobile robbery pensacola

  67. Excellent, what a weblog it is! This blog provides valuable facts to us,
    keep it up.

    My web blog telefonos de boost mobile (Pamela)

  68. This is very interesting, You are a very skilled blogger. I’ve joied your feed and look forward
    to seeling more of your wonderful post. Also, I’ve shared
    your website in my social networks!

    Also viisit my blog post; boost mobile my account number (Brittney)

  69. We’re a group of volunteers and starting a new scheme in our community.
    Your site offered us with valuable info tto
    work on. You’ve done ann impressive job and our entire community will be thankful to

    My site – at&t zte n9510 (Graciela)

  70. A motivating discussion iss worh comment. I do think thhat you need to write more on this subject, it might not be a taboo matter but usually perople
    do not discuss such subjects. To the next! All the best!!

  71. This design is spectacular! You definitely know how
    to keep a reader amused. Between your wit and your
    videos, I was almost moved to start my own blog (well, almost…HaHa!) Excellent job.
    I really enjoyed what you had to say, and more than that, how you presented it.

    Too cool!

  72. ممنون از مدیر سایت بابت این مطالب مفید

  73. Excellent way of telling, and nice article to take data concerning my presentation focus,
    which i am going to present in college.

  74. If some one wants to be updated with latest technologies afterward he must be visit this website and be up to
    date daily.

  75. The mind will not work if it is not supplied with adequate amount of energy and nutrients.
    Many people do not want to eat carbohydrate, protein, and sugar.
    Instead, men should consider the following when it comes to their
    penis care routine.

    Look at my weblog: healthy & beauty

  76. Digestive system works effective when you follow
    a very good diet program. After eight it’s too late,
    avoid late night dinner. Instead, men should consider the following when it comes to their penis care

    Stop by my webpage – healthy & beauty

  77. I have read some excellent stuff here. Definitely worth bookmarking for
    revisiting. I surprise how much attempt you set to make one of these magnificent informative web

  78. This paragraph gives clear idea in support of the new visitors of blogging, that
    genuinely how to do blogging and site-building.

  79. Thanks for one’s marvelous posting! I genuinely enjoyed reading it, you will
    be a great author. I will be sure to bookmark your blog and will come back very soon.
    I want to encourage that you continue your great work, have
    a nice morning!

  80. Hi, i feel that i noticed you visited my website so i got here to return the
    choose?.I’m trying to in finding issues to improve my web site!I assume its ok to use a few of your concepts!!

  81. i was tested for hpv at my last pap, about which i never got a phone call,
    which (for the health department) implies the
    results are normal. Is your husband now suddenly
    overly concerned with his appearance. its been a year I have not had sex of any kind because
    of this.

  82. Very energetic article, I loved that bit. Will there bbe a part 2?

    Feel free to surf to my blog post; sinn

  83. I was able to find good advice from your blog articles.

    Also visit my web page Marylouise Y. Danese

  84. It’s truly very difficult in this active life to listen news on TV, so I just use world wide web for that reason, and get the
    newest information.,

    Take a look at my blog Cara download dari youtube

  85. There is not a parking lot, so you will need to park on the side of the road
    and walk down the steps. The beach resorts in Mexico have special kid-clubs
    for children of all age groups. Just in case this South Carolina vacation destination is completely new to you.

  86. Hi this is kinda of off topic but I was wanting to know if blogs use WYSIWYG editors or if you have to manually code with HTML.
    I’m starting a blog soon but have no coding knowledge so I wanted to
    get guidance from someone with experience. Any help would be
    enormously appreciated!

  87. Heya this is kinda of off topic but I was wondering if blogs use WYSIWYG editors or if you have to
    manually code with HTML. I’m starting a blog soon but have no
    coding expertise so I wanted to get advice from someone with experience.
    Any help would be greatly appreciated!

  88. What’s up, after reading this amazing piece of writing i am also glad to share my know-how here with colleagues.

  89. Good post. I learn something totally new and challenging on sites I stumbleupon every day.
    It will always be interesting to read through content from other authors and use a little something from
    other sites.

  90. christian villamor

    Great job steve! I’m following along and trying to incorporate this into my project. It’s a lot of things, but I think it’s worthwhile.Thanks!

  91. super kasyno bezpośrednio do Zapisz wyszukiwanie

  92. kobi

    please find someone to clean up the trash-spam in the comments sections of your blog, which disracts the reader from your otherwise perfect presentations. and could you please post the source code the your tv guide example in this video

  93. wonderful points altogether, you just won a new reader.
    What may you recommend in regards to your publish that you just made a few days ago?
    Any positive?

  94. Mark

    I have followed the demo using Typescript. However when I attempt to compile project using gulp I get the error:

    [18:48:24] [tsc] > D://Customers//Development//Vehicle//Test//node_modules//gulp
    -tsc//node_modules//typescript//scripts//processDiagnosticMessages.ts(1,1): erro
    r TS6053: File ‘D://Customers//Development//Vehicle//Test//node_modules//gulp-ts
    c//node_modules//typescript//src/compiler/sys.ts’ not found.
    [18:48:24] Failed to compile TypeScript: Error: tsc command has exited with code

    Any ideas?


  95. xxx

    Awesome moderation of comments…”Casa Margherita da sola XXX Porno and sesso video” :) ))))))))))))
    So awkward…

  96. It inspires and influences the staff to work harder together.

    One of the biggest things then you must do is build rapport using your list.
    When you come up with a claim or promise, support it– with
    stories, pictures, and testimonials;. The fact you’re scanning this means you’re way before the curve.

    Sometimes we never realize the impact we’ve got on others directly or indirectly
    but recognizing that we do and conducting ourselves accordingly is key.
    While it isn’t new news that every person has at least
    some role in shaping his experience, responsibility assumption may
    be the DNA understanding within the realm of cause and

  97. Good web site you have got here.. It’s difficult to
    find excellent writing like yours nowadays. I truly appreciate individuals like you!
    Take care!!

  98. Scanning for viruses is crucial to keeping your computers speed high.
    Computers where regular Windows updates are not installed they are
    more susceptible to virus attack. Having good network security is without question a serious matter.

  99. Definitely imagine that that you said. Your favorite reason seemed to be at the internet the simplest factor to be mindful of.
    I say to you, I certainly get annoyed at the same time as folks think about issues
    that they plainly don’t recognize about. You managed to hit the nail upon the top and outlined out the entire thing without having side
    effect , other people could take a signal. Will
    likely be again to get more. Thank you