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.

56 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.

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">