Recent Presentation on SPA Basics | John Papa

John Papa

Evangelist on the loose

Recent Presentation on SPA Basics

posted by John with 31 comments

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

31 comments Hide comments

Prabhu Subbiah on said:

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 ?

      Prabhu Subbiah on said:

      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 on said:

        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.

Ward Bell on said:

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.

Eyad Saif on said:

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 on said:

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.

Bill on said:

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 on said:

    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 :)

Corey Gaudin on said:

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 on said:

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 on said:

    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 on said:

      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 on said:

        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 on said:

        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 on said:

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 on said:

    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 on said:

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?

Alex Ball on said:

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 on said:

    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 on said:

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 on said:

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 on said:

    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.

    John on said:

    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.

Leave a Reply


(required)


(required)



CAPTCHA Image
*