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.

Contents

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

37 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
    gift.

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

  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. http://stackoverflow.com/questions/24281426/how-to-break-knockout-view-model-in-parts-with-requirejs

  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 … myvegasbusinessbonus.wordpress.com

  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.

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="">