Posted on by Jon

Herding Code 161: Single Page Applications with John Papa and Ward Bell

While at MVP Summit, Jon and the Scotts talk to John Papa and Ward Bell about Single Page Applications, the new ASP.NET and Web Tools 2012.2 SPA templates, and John and Ward’s new Hot Towel SPA template (you need a hot towel at a spa, get it?).

Download / Listen:

Herding Code 161: Single Page Applications with John Papa and Ward Bell [audio://herdingcode.com/wp-content/uploads/HerdingCode-0161-Single-Page-Applications.mp3]

Show Notes:

  • Intro
    • (01:10) K Scott asks John Papa about to overview what’s just been released.
    • (01:24) Jon explains how he remembers the ASP.NET and Web Tools 2012 release, comparing it to a video game "map pack".
    • (02:04) John says that one of the new features in this release is that you can create new File / New / Project templates for ASP.NET MVC using VSIX.
    • (03:18) Scott K says you can find all the new goodies at http://asp.net/vnext.
  • Hot Towel overview
    • (03:37) K Scott asks what happens when you create a new Hot Towel project.
    • (04:30) K Scott asks what’s included:
      • Durandal
      • Knockout
      • Breeze
      • Some other nice things: jQuery, Bootstrap, Moment
      • The useful parts of the ASP.NET stack
  • Durandal and getting the various libraries to play well together
    • (06:00) Jon asks if everything in the Hot Towel parts fit together well, and if it was hard to get them to play well together.
    • (07:14) Durandal uses Require.js for AMD for script dependency resolution. Hot Towel is still using ASP.NET Bundling and Minification system, although when you deploy you can use Durandal’s compilation system.
    • (09:03) Ward talks about what he likes about Durandal.
      • You can bring any thing you know from Caliburn.Micro in, including convention based view composition.
      • It includes a lot of useful debugging and tracing information in the console. That includes intercepting problems with Sammy.js (which would otherwise just report "Error" without any context), binding failures, etc.
    • (10:24) Hot Towel also includes Toaster, which is really useful for debugging.
    • (11:15) Hot Towel has really been carefully assembled and and configured so it all really works well together.
    • (12:06) John says Hot Towel solves a common problem people experience when getting started with SPA development – it’s hard to figure out which libraries to use and how to hook them together.
  • What’s the sweet spot? Line of business apps? Websites?
    • (13:20) K Scott asks if the sweet spot for Hot Towel is for for line of business applications. John says that’s what it’s been used for. It’s great for data intensive applications, but he says it’s not a good fit if you’re just building a website.
    • (13:53) Jon asks about the SEO story. John says there really isn’t a great solution for it, but says that for most SPA stories – e.g. line of business CRUD apps – you probably don’t need or want search engines to be able to read it. For some cases, like a store scenario, you might want a hybrid solution. The store would be a standard website that’s SEO friendly, but when you shift to buying something you enter a SPA experience.
  • Organize all the scripts!
    • (15:45) K Scott asks how John organizes code for a SPA. John says he likes to put all the application specific scripts into a separate /scripts/app folder. Jon says he noticed that in the RTM version of the SPA template, and Ward and John confess to having been the driving forces behind that change.
    • (17:37) John talks about the two crowds who are using these scripts – there are people who have been using JavaScript for a while, and developers who are used to C# and are starting to do more JavaScript development. Simple things like pascal casing vs. camel casing make a big difference in how experienced JavaScript developers perceive and enjoy the shipped JavaScript code.
  • Bringing grownup architecture into client side coding
    • (18:19) Ward talks about other problems in earlier versions, like lumping the viewmodel and data access, etc. He says he understands the effort to make things easy for beginners to figure out, and Scott talks about some of the sloppy, oversimplified JavaScript in some other Microsoft releases. John says that the new script organization in the release turned out both better and easier to understand.
    • (20:48) Scott talks about his thoughts on client-side MVC: HTML is the model, CSS is the view, JavaScript is the controller.
    • (22:04) John says we’ve been figuring out of the past few years that it’s not okay to just throw JavaScript code up there until it works. He says he often surveys developers and asks how many of them have read a book on JavaScript with dismaying results. Scott says it’s not just a problem with disorganized code, you end up with resource management issues. Scott, John and Ward commiserate on the problems they’ve seen with sloppy code in long running JavaScript applications.
    • (24:31) Ward talks about the importance of good coding principles, especially the single responsibility principle. John says SRP is incredibly useful just about everywhere. Scott says he sees the same thing with testable JavaScript code.
  • Hello World and Hello World scenarios
    • (26:37) K Scott asks if there’s a hello world style application when you create a new Hot Towel application. John says there is, but it’s absolutely minimal so that it’s actually useable as a starting point for an application. There’s no database. Ward says Hot Towel has two simple pages with just enough code to get you started; use the other SPA templates to learn about the frameworks, then build your real app with Hot Towel – if you’re going with a Knockout-based UI.
    • (28:37) Scott K says he sees Knockout and Angular cluttering your HTML in ways that violate some of the principles discussed earlier. Ward that you can do both without declarative HTML binding if you want. There’s a discussion of convention based bindings; K Scott asks if the Caliburn.Micro convention based bindings are used in Hot Towel, Ward explains why it’s not done.
    • (31:40) John talks about some poor practices he sees in Knockout demos which just throw in some JavaScript code after the bindings rather than just using a click binding or using delegation.
    • (33:32) Scott asks if we’d have imagined 10 years ago that we’d be writing JavaScript code.
    • (33:54) Ward says the thing that blows his mind is that we’re talking about a ToDo list like it’s rocket science. There’s a description of the canonical sample scenarios. Jon proposes the Contoso SPA, Scott talks about how everyone was writing blog samples a few years ago.
    • (35:43) John explains that he wrote Hot Towel so that you could use it without having to rip out a bunch of demo code; Ward says it also completes the stack, providing IoC, screen management, etc. The price tag of restructuring around composed JavaScript libraries is a lot of small files, figuring out AMD, etc. John and Ward praise Durandal some more.
    • (38:52) Scott K says there’s still a tooling problem with lots of injected JavaScript files. Ward and John say they don’t see that as long as they keep things organized.
  • Getting started with SPA development
    • (40:27) K Scott asks for two things developers should do before getting started with SPAs. John says the first thing is to remember that you can apply your current good coding practices, the second is that you should treat the code as a real language and take advantage of patterns, especially the module pattern. Ward says use your intuition – if something smells bad, stop doing it and ask for help.
    • (43:03) John says don’t worry too much about which framework is the best, just pick one that feels natural. There’s a discussion of how the different frameworks have different feels, and you can just pick one and get started.
  • Did Silverlight development experience help?
    • (45:15) Jon says he first encountered a lot of these issues in Silverlight development. John says yes, and explains how his skills applied. Ward says he can’t comment on how it’d have been for him if he hadn’t used Silverlight, but that if you do have Silverlight experiences they’ll definitely apply. John talks about his experiences with Code Camper.
  • Can mere mortals create VSIX MVC templates?
    • (50:18) K Scott asks how difficult it was to create a VSIX based MVC template and if listeners could start with it. John says he waited for Ward to figure it and he copied Ward’s work, which wasn’t too bad. Ward explains what was difficult – mostly it comes down to poor documentation and duplicate references to files. He says he also hit issues with pulling in NuGet packages from multiple sources. Hot Towel is available as a NuGet package as well.
  • Randomness
    • (58:11) The customary discussion of Ward’s wardrobe occurs.
    • (1:00:00) John talks about his upcoming PluralSight courses. Ward says he’s excited that BreezeJS was selected as part of the SPA story for ASP.NET and that he and IdeaBlade are focused on helping people as they’re getting started with Single Page Application development. 

Show Links:

CategoriesUncategorized