SPA Conversations | John Papa

John Papa

Evangelist on the loose

SPA Conversations

...

Recently I was lucky enough to have the opportunity to be a guest on the Herding Code podcast and the Channel 9 Web Camps TV video series to discuss SPA.

Herding Code Podcast

mic
The episode of the Herding Code podcast was hosted by Jon Galloway, K Scott Allen and Scott Koon. We sat down together, along with my friend Ward Bell, and we discussed the state of SPA today and the new Visual Studio templates. It was a very casual conversation between the 5 of us discussing a SPA from many angles. It’s a good listen for anyone who may share some of the same questions we posed and tried to answer in the podcast. You can download the podcast directly or listen to the podcast here or read the show’s notes (which are very detailed).

Web Camps TV

tv camera
While at the MVP Summit in February, I was invited to my old stomping grounds in B20 to film an episode of Web Camps TV with Brady Gaster and Cory Fowler on Channel 9. We discussed Single Page Applications and showed a short demo of the new Visual Studio template named “Hot Towel” as well as the ASP.NET only NuGet package named Hot Towelette.

tags: events javascript SPA visual studio 2012
  • Marvin

    Looking forward to seeing code camper on nuget or GitHub!

  • Steve Brown

    Hi John,

    We have been closely following your Pluralsight courses and have gone through the original Code Camper solution and the HotTowel JumpStart. First of all, thanks for all of the fantastic work you have been doing, SPAs have really opened up our options in the post-Silverlight world.

    Durandal is fantastic, but we have been looking at Breeze which is also really great but we are a bit concerned with the way Breeze does not really seperate concerns and makes building a Repository with IoC quite difficult. We thought the original Code Camper Repository/UoW solution was very good. Can this sort of thing be achieved with Breeze without having to inherit from EFContextProvider which makes it hard to test/mock repositories. We have had a look at the Breeze ToDo sample but were not overly impressed with the Repository solution there.

    Many thanks for your help and keep up the excellent work!

  • Mike

    Can you tell me why we would want a SPA vs a regular ASP.NET MVC app? I don’t really see the benefits of one over the other. Can you explain?

    • John

      Mike – Start with with you want to create. The big reasons to do SPA are the 3 R’s: Reach, Responsive UX and Reducing roundtrip postbacks. You can achieve reach with ASP.NET, but I argue that the responsiveness is a better with SPA than server gen’d pages and you do get a UX improvement for users. look at your skills too … often I suggest folks who know ASP.NET use those skills and ease into JavaScript. Add a little to your app and get comfy with it first. They both are great approaches. But if you don;t need the 3 R’s , ASP.NET on the server is just fine.

  • Mike

    My skillset is C# and ASP.NET but I’m always up for a challenge. In fact, I built our current app on ASP.NET MVC beta and released it about 1 month after the 1.0 release.

    Is there ever a time where you fill an SPA is not a good fit?

    I’m getting ready to build a project management tool for our company to manage resources and provide services. I’m actually starting on the code today, but now I see this and it looks interesting.

    Do you have any live apps you’ve created with Hot Towel that I could look at?

  • Patrick

    @ Mike – Check John’s twitter timeline he put CodeCamper finished version on Azure I believe it is still there.

    @ John – I have been honing my Breeze / KO skills as of late but one thing that has been bugging me is my inability to successfully render KO Observables in a Parent / Child relationship that are properly binded. I know how to do this in JavaScript but using Breeze / KO and the MVVM pattern seems to be binding the child based off of the parents bindings (for instance if I have a parent with element ‘description’ and a child has a ‘description’ also it binds both elements to the $parent’s description)

    I can’t seem to find any fiddles or anything on StackOverflow showing examples of how to handle this (it is very possible I am not searching correctly) so I was hoping you knew of an example somewhere or there was a tutorial of some sort to handle this.

    I think part of the problem I am having is that ‘you don’t know what you don’t know’ so sometimes it can be harder to search for a solution if you are using improper terminology.

    • Patrick

      Answered my own question and thought I would leave it here in case anyone else had the same issue trying to make sense of libraries they may have not been completely familiar with prior –

      – Breezejs.com offers a walk-thru tutorial that may be good for developers not familiar with LINQ-style queries and shows how Breeze uses KnockOut to bind elements, and when to not use KnockOut and how to differentiate. http://learn.breezejs.com/

      – Knockout offers a very similar and challenging walk-thru tutorial that may be good for developers with limited exposure to JavaScript libraries to learn the KnockOut binding system and when to use with:, foreach:, etc… for your bindings and also when to use $root’s and $parent’s to bind back to the proper observables. Another added bonus is a very basic SPA example, and even throws in a bit of Sammy.js. http://learn.knockoutjs.com/

      Both of these would were a baseline I should have went through prior to the PluralSight courses that John offers on HTML5 with KnockOut and MVVM http://goo.gl/yn7nB SPA – JumpStart http://goo.gl/29fDe and SPA with HTML5, WebAPI, KnockOut, and jQuery http://goo.gl/DRHic

  • Marcus Baffa

    Hi John,

    I am a Pluralsight subscriber and I have watched your intermediate course about SPA.

    It is really fantastic. I have already implemented two applications using almost all the frameworks and concepts you have produced. Congratulations.

    I am now starting the jumpstart because of Breeze, Durandal and Bootstrap.

    But I am having problems with a view that has a google map in it. People say that hidden divs cannot show correctly Maps. There is solution but it is not working in my view.

    Do you have any suggestions to solve this kind of problem ?

    Thank you very much

  • Patrick

    @Marcus – http://stackoverflow.com/questions/4064275/how-to-deal-with-google-map-inside-of-a-hidden-div-updated-picture Don’t know if this is the same issue but sounds similar to what you are asking.

    • Marcus Baffa

      Thanks Patrick.

      I had already seen this thread. The answers work partially, none of them are perfect, but they are surely acceptable solutions.

      I have adopted setting the display equal to block. It its working but I have to show the map first then I can toggle freely the display style.

      I am going to try some other options.

      Thank you very much.

  • Sandy

    is there a way to add pagination to knockout?

  • Samuel

    Hi John,
    There is a way to “merge” this spa concept with win8 javascript app!!

    I am starting developing that idea appear… [probably a stupid idea but...]

%d bloggers like this: