Recent Presentation on SPA Basics | John Papa

John Papa

Evangelist on the loose

Recent Presentation on SPA Basics

...

I’m working on a new course that will help folks get a jump-start on building a SPA. The course’s working title is SPA Fundamentals. I decided to present some of the early demos from this upcoming Pluralsight course at some recent events. These are early prototypes of the main app (titled “Code Camper JumpStart”)  that will be in my course, but they are a great starting point.

This post contains the  Single Page Apps presentation I gave at DevConnections (Las Vegas, NV) and Tampa Code Camp (Florida) in October 2012. Thank you to the 600+ people who attended at both venues … I had a great time and really enjoyed the questions after the sessions. The deck, abstract and samples are in this post.

Abstract is below:

Single Page Applications (SPAs) focus on delivering better user experiences with significant client-side interactions using JavaScript, HTML5 and CSS. This session explores what a SPA is, why modularity is important, how to use data binding and MVVM with Knockout.js on the client, navigation and routing with Sammy.js, and use rich data services with Breeze.js.

View more of my presentations on SpeakerDeck  here.

Sample code shown in the presentation for the SPA can be found here. (The demos require Visual Studio 2012 and you’ll need to enable package restore so they can grab the NuGet packages.)

In the meantime, if you are interested in creating a SPA you can check out in my in depth course Single Page Apps at Pluralsight, which covers dozens of topics while building a SPA from end to end.

tags: breeze code camp devconnections javascript knockout sammy SPA
  • Eric

    I love the new stylesheet for the blog.

  • Pingback: Recent Presentation on SPA Basics | John Papa | WebDevStuff | Scoop.it

  • Prabhu Subbiah

    Hi John,

    What is the future of UpShot, I understood that upshot is the future Data Access Library for SPA application, I don’t see the upshot usage in your blogs/Demos. Also it is not shipped with the new VS 2012 SPA template. Can you throw some light on this ? What we need to consider instead of upshot.js ?

    • John

      Hi Prabhu,

      You can see the roadmap for Upshot at this link from the ASP.NET team. Based on that information, I do not recommend using Upshot. If you want similar functionality, I do recommend BreezeJS which you can find at this link.

      • Prabhu Subbiah

        Thanks John, Hope to see more on the ASP.NET SPA in your Presentation for the Linked.NET user group tomorrow.

        Also I would like to know how the Single Page Application will fit in to Enterprise Systems Landscape with reference to the performance and scalability. Can we says that Single Page Application will replace Silverlight applications ?

        • John

          I’ll show some of the template in the session tomorrow. But I caution you because the template is only a preview and is just a starting place. I have hopes that it will be refined before release and be a great starting point. Good people are working on it.

          SPA can certainly work in many situations. If you need reach, its a nice option.

  • http://www.breezejs.com Ward Bell

    Hi Prabhu – Upshot has no future. Upshot is dead. The preview of the ASP SPA template is no substitute and is not a useful guide to SPA development in its present form. We can expect improvements but there is nothing at the moment to suggest that it will offer Upshot capabilities.

    I’d recommend that you study John’s Pluralsight course on SPA and his blog posts on SPA. Keep an eye on John’s Code Camper Jumpstart too; I expect that will be the basis for a short course on SPA in the not-distant-future.

    When it comes to data management in a SPA, I’m partial to BreezeJS as well. Of course I’m biased … as I’m deeply involved in its development and promotion. Bias aside, I think you’ll find BreezeJS does most (all?) of what Upshot intended to do: LINQ-style query in JavaScript, object-graph navigation, change tracking, validation, batch saves, offline support, dynamically generated JavaScript entity types from server metadata, etc.

    It’s also free and open source. Check it out.

  • http://www.dierbergs.com Programmer

    Thanks so much for posting this source code. Keep up the great work on the presentations/examples. They’re extremely useful!!!

  • Eyad Saif

    Thanks John,

    Hope to see more features in this new course, we need to see how can
    we build the back-end for code camp like business apps including:

    – Business apps layout (left menu + Tab Close Control)
    – Grid sopport( Filtering, Paging….).

    really thank you for your work

  • andy

    John,

    Great presentation! Any thoughts on integrating Sammy into jquery Mobile’s navigation architecture? I use jquery mobile on a couple of mobile apps but I would like to investigate Sammy as my navigation method.

    • John

      Andy – Thanks. I have not tried that yet. But if you go there, please share what you find.

  • Bill

    I’ve tried using jQuery Mobile with sammy.js with tons of trouble. Basically, I’ve written a SPA based almost entirely on John’s SPA Pluralsight course, then tried to jQuery Mobile-ify it, and had nothing but trouble with sammy.js and jQuery Mobile. jQuery Mobile kind of has its own hash-based routing that doesn’t work cleanly with sammy’s routing (at least not the way John implemented his router module in the Code Camper SPA). Maybe I’m not using the two together correctly (because this is my first client-side/javascript UI/SPA/mobile web site), but I had a lot of hacks, and it still has issues that I’m trying to work out.

    So, Andy, if you have any insights, let us know.

    And, John, if you have any suggestions on how to take your SPA and make it work on mobile devices (basically make it look like a native mobile app — preferably using a 3rd party tool so we don’t have to write all the CSS and javascript from scratch), please let us know. For us, this is critical and urgent.

    Thanks.

    • John

      Bill,

      Thanks for the detailed feedback. I appreciate it. As it sounds like you are well aware, you can use CodeCamper as is to work in mobile but if you want a mobile “feel”, then you could shift to jquery mobile. If you do that, it might make more sense to use jquery mobile’s navigation aspects. It might make for a good follow up course … althoguh I have a ton in my backlog already :)

  • http://acadianaug.org/ Corey Gaudin

    John, how do you get the index.cshtml to be the default in the root web site along with registering the default mvc routes? I cannot seem to create the same scenario. Specifically looking at your CCJS-Breeze example.

  • Kingsley

    Hi John, I think your SPA course is very good. Although, I must say it takes a while to go through all the technologies you are using on the client side.

    I have looked at both the version you have on pluralsight and the CCJS-Breeze sample and noticed you do not use repositories or Uow in the Breeze sample. Can you give some pointers on the best way to get Uow and repositories into CCJS-Breeze. I am also looking at the best way to apply authentication and authorization if I move to using Breeze. Any pointers on that would be welcome.

    • John

      Kinglsey – You can take the UoW and Repository patterns that th e Code Camper SPA uses and apply them to the CCJS-Breeze example. No problems at all with that. I just kept the CCJS examples brief to limit the concept count.

      • Djordje

        Hi John, great works, thanks.
        I wonder is there any example for combining UoW and Repository patterns that the Code Camper SPA uses and CCJS-Breeze. How I combine those two Context (DbContext and EFContextProvider), which one I need to use. It’s a little confusing…

        • John

          The EFContextProvider is a wrapper around the EF DbContext. Breeze uses this wrapper. You go this route “as-is” or you can create a more formal UoW/Repo pattern and tie breeze into it. I suggest you add a question to StackOverflow for this, as the Breeze folks are very active there.

        • Ward Bell

          John – That’s good advice for Djordje. Most of our demos are focused on client and we just let the server slide.

          We’re not being responsible on the server in these demos: no authentication, authorization, limits on what can be seen or the amount you can query. Basically the server is saying “I’m all yours … come and get me!”.

          It’s a demo. You do that in demos. In practice, you want to write a safe server with proper security and validation. The techniques for that purpose should be familiar to the server-side developer. You’ll find the beginnings of a discussion in the answer to this StackOverflow question: http://stackoverflow.com/questions/14913498/how-do-i-inspect-change-set-data-on-the-server-before-saving-it .

          Back to the question. Yes, in my more advanced samples and in my real Breeze applications, a Breeze Web API controller always delegates to a Repository or a a UOW+Repositories.

          Whether writing a UOW (with child repositories) or a single Repository (the simpler case). I might write it as a sub-class of EFContextProvider. Then I follow the usual practices for such a class, perhaps along the lines of what you saw in CodeCamper. Instead of talking to the DbContext directly (as John does in CC), I’d talk to the EFContextProvider base class methods.

          Now I’m not really a fan of inheritance; I prefer compositional techniques. So what I would do for my own stuff is write a UOW that held a sub-class of EFContextProvider. But this wrinkle is more a preference than a prescription.

          You’ll see an example of the Repository-inherits-EFContextProvider in the forthcoming BreezeMvcSpa template … due very very soon. Watch for news of it from Microsoft.

  • Chris Bower

    Hi, really liking the look of the SPA apps. my only question is regarding the changing of the JavaScript data access libraries. The first SPA apps were using Amplify, then Upshot and now Breeze. Do you think that Breeze will last the distance or could that be replaced in the future?

    • John

      Chris – Thanks for the feedback. I’m not sure what you mean by the “first apps were using Amplify, …”. Amplify is a helpful library, but it is not a rich data library. Compare it’s features to that of what Upshot had and what Breeze or JayData has. Amplify is not intended to do those things. So I’ll leave Amplify out of this as it’s not solving the same set of issues as the others. Upshot is a different animal as it is no longer being developed, so I hear you on that one. It was cool, but it never made it to a full release, so I never used it in production. The 2 leading rich data libraries are BreezeJS and JayData. I prefer BreezeJS for what it does on the client.

      Your question however, is more towards “the changing of the JS data access libraries”. Are you concerned that new options exist? Are you concerned that some won’t exist in the future? I can;t foretell the future, but personally I am happy that there are multiple options. You could still roll your own like I did with jQuery’s AJAX and Amplify or opt for a richer model like BreezeJS and JayData offer. It’s an app choice.

      If you have specific question Id did not answer, I apologize. Please feel to restate it and clarify if I did not answer it and I’ll try again :-)

  • Barrie Nemetchek

    John,

    now that you are starting to use breeze.js in your sample app, can you recommend a set of GUI tools that will work with it. The biggest problem I have found, even with the tools that directly support knockout.js, is that the breeze entities have a circular reference and this breaks every tool I have found so far. Can you recommend an alternative that works with breeze? Esp. for a grid?

  • Doguhan Uluca

    I posted a question on stack overflow regarding how this setup (ko/breeze) can work elegantly in a Multi Page Application – any thoughts or comments would be great!

    http://stackoverflow.com/q/14261826/178620

  • Alex Ball

    John,

    Great john on current SPA course. Will this new SPA course utilize a multi-controller setup on the server as is the case with your current course? I find this requirement in Breeze a bit messy. In WCF RIA you could have mutiple services associated in the same context, it was one of the great features of the library. Our WCF RIA solution used NHibernate in a UoW configuration, and it was great for progressing with new features and testing.

    Thanks John

    • John

      Alex – Hi, thanks for the feedback. I will be using 1 controller (actually 2 in some cases, bit I digress). But your point is more about wanting to use multiple. You can do that, and if you want to do that I suggest you reach out to the Breeze folks on Stackoverflow so they can show you how. Breeze does not restrict you to 1 controller.

      Hope that helps.

  • Carl

    Hi John,

    Do you have any timeframe on when the codecamper jump start using breeze course will be out please?

    As a noob to these technologies it’s hard to look at the full complex codecamper course and see where breeze.js would be used instead. I remember you saying it would largely replace section 8 of the codecamper course, but there’s a whole lot of devil in that detail and it would be phenomenally useful to get a handle on what advantages (assuming there are some!) using breeze would offer over how you did it in your full SPA course.

  • Carl

    Just to add: Having just rewatched part 8.10 (Navigating Models) I’m guessing that this is all redundant when using Breeze as the query would have specified “expand” to access those same navigation properties? Furthermore the whole mapping logic you have in codecamper would be redundant with Breeze too as it’s able to retrieve the database metadata directly?

    I keep understanding more each time I work through the course and I’m only really able to guess at what Breeze can bring to this party but I’m fairly confident it’s a pretty useful set of tricks.

    • John

      Hi Carl,

      I am scheduled to complete the course and have it to Pluralsight by the beginning of March 2013. You are correct that a lot of that module would be replaced by Breeze. You can certainly check out their site and visit their tutorials, or grab the code in the download on this page for now. Breeze has quite a lot to offer that I coded by hand previously. I think it is more compelling when you go through that because now you know how hard that is. Without seeing that or going through it, it is harder to clearly see the value in Breeze. But believe me, its there :)

      I’ll be blogging about the course too as I go, tho the first priority is getting it done.

  • Matt

    John what is the purpose of the mergePartialEntityIntoCache function in the dataservice?

    • John

      Matt,

      The idea here is to be able to get a summary list of entities (or partial entities) so we can reduce the bandwidth needs. We dont want to go get the entire database, for example.

      You get back a list of “partial” entities. In other words you have requested only a few of the properties/fields of the entity. So we take those and check to see if we already had those entities in cache. If we do, is that entity in cahce already? If not, then we create it, mark it as partial, put it in the cache and map the properties to it. If its in cache already, we map the properties we just got to it. The goal is to merge the new data into any existing data we have, because we have 3 states: eitehr the entity is not in cache, its in cache as a partial, or its in cache as a full.

      Hope this helps.

  • Chris

    John, first of all, Great Work!

    I have taken both Pluralsight courses (Code Camper and Code Camper JumpStart) and now I am in the process of choosing a data management framework. However I have run into a brick wall and cannot decide. I apologise for the long question but I think its best to explain the scenario. Also I am quite new to single page applications so please bare with me.

    I am currently building a rather large application which has its own share of complexities. In a nutshell, it is not your run-of-the-mill CRUD app. I used the exact architecture you used in the first Code Camper course, however I access the UOW and repositories via another layer of service methods. Everything is bound using Castle Windsor on a PerWebRequest lifestyle.

    Therefore, currently the client calls a service which in turn uses the UOW.

    The issue I have with Breeze is that it works with the DataContext within the Controller. In my case, I do not have access to the DBContext at this level and I do not think It would fit my application to work with it at controller level. For example, when I call myService.GetAccount(int id) I am not simply fetching an account entity from my repository but I am doing a bunch of other stuff like logging and audit trail or some other “non-data related” operation.

    So, I have the following queries:

    1. Is Breeze a good fit for this type of application or should I continue following the architecture you showed in the first Code Camper course even for the data services on the client?

    2. If I should go for Breeze, would I need to change my architecture, get rid of the “services layer” and do everything via Breeze?

    Thanks John!

    • johnpapa7

      Chris – to create the metadata when you do not have EF, you can do it by hand or use EF in a temporary project to generate the metadata for you (a one time thing). See the docs here for that: http://www.breezejs.com/documentation/metadata-by-hand or http://www.breezejs.com/documentation/ef-design-tool

      I’m not sure what the “services” layer is exactly in this context of your app. Breeze sits on the client and acts as a way to talk to the back-end (among other things). So as long as you expose services to the client, Breeze can talk to it.

    • Ward Bell

      Hi Chris. For the record, I never expose the Context in my controller classes except in demos. It’s a “bad” practice, IMO, for the controller to reveal any persistence operations. I move all that stuff to a UoW/Repo, often in an entirely different assembly … just as you are doing. So what about Metadata? My repo (or some other component) can expose a Metadata property and implement that property by what ever means necessary. The controller calls upon this repo method … just as it does your other query and save methods. If your service model (the classes on the wire) are sufficiently like the business/entity model (the classes in your server-side business logic) then this is a piece of cake: you just move the Metadata code you see in demo Breeze Controllers down into the repo and you’re done. Take a look at those links John mentioned to cover cases where some or all of your service model is different from your business/entity model.

%d bloggers like this: