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.

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

  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 (edublogs.org)

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

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

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

    Stop by my webpage – healthy & beauty

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