Building Single Page Apps with Knockout, jQuery, and Web API – Part 1 – The Story Begins | John Papa

John Papa

Evangelist on the loose

Building Single Page Apps with Knockout, jQuery, and Web API – Part 1 – The Story Begins

...

I’m currently recording a course for Pluralsight with a working title of “Building Single Page Apps (SPA) with ASP.NET Web API, Knockout and jQuery” targeting to be out by August 31. This is an end to end course that hits hundreds (ok, not quite) of technologies that work together to create a SPA that works across multiple devices and screen sizes. As I’m recording the videos, I thought it might be fun to occasionally blog about the experience as there were many good tips (and trips) I hit along the way. I really wanted to share an end to end demo that doesn’t cover every feature of every technology, but rather how they all work together in symbiosis.

So the first module starts out by talking about what is a SPA, why you should be interested even if you aren’t building a SPA, and what the story is for the end to end demo. Basically, it’s the lead in to the entire course. And thus, that’s where this post starts.

One of the coolest parts of this course is the tremendous number of people who influenced it. The developer community we work in is amazing and I try not take you all for granted.

Thanks to the Community

Most of all I have to thank Scott Guthrie for inspiring me to write this course, Ward Bell (for being my code reviewer, pair programming partner, and most excellent friend) and Hans Fjallemark (designer and my CSS mentor). But there were many others (and many of them very good friends) who helped in various ways. For example: Julie Lerman gave me some great tips on Entity Framework Code First, Dan Wahlin helped me refine the JavaScript patterns, the Microsoft ASP.NET team helped me get Web API and Optimization fine tuned, Ryan Niemeyer helped bounce my crazy ideas about performance tuning Knockout. There were many others were just awesome at purely letting me pass ideas by them and giving me their two cents. For that, I included all of these people in the demo as “fake” speakers at the event (with their permission of course).

image

What is a SPA?

In short, there is a great wikipedia page that explains what a SPA is, some ways to create a SPA (there is not just one cut and dry way), and some pros and cons. Definitely check it out. My cliff notes, that I include in the course, are that a SPA is a web app that fits on a single web page that provides a fluid user experience. A SPA is fully (or close) loaded on the initial page load, it’s key resources are preloaded, and progressively downloads features as required. A SPA may also persist and maintain important state on the client while also handling navigation, history and deep linking. A great examples of a SPA is gmail.

What’s the point?

The user experience is key. If you can speed up the perception of page loads and navigation for the user, you win. A SPA preloads what the user may most oft use, so when they navigate they are not making network trips and page reloads on those oft used features. Thus the result is a snappy app and a happy user.

What’s the user story for the demo?

You are attending an event where WiFi may be spotty (isn’t it always?) since you are sharing connectivity with thousands of people. You pull up the event’s web site (which I call Code Camper) and want to browse the sessions that interest you the most, finding the rooms and times for them, and search and filter them. You may have even “favorited” some sessions beforehand that you want to get to quickly. Once loaded, the app should allow you to do all of this with minimal additional page loads just in case you lose connectivity or the connection gets even slower. If its in a SPA … you can!

Mock Ups – End Game

I started with mock ups on paper. Then I moved to Balsamiq, which I love because its quick and easy. It’s not important to be perfect at this stage. The key is to get the idea communicated so the team knows what the goal is. Here is an early mock up of 1 “page” in the app.

image

And after 8 weeks of about 4 hours per night 5 days a week, the app was written.

image

Responsive Design

One of the goals was to make it work in mobile device browsers. So thanks to the great tool known as Electric Plum, you can see the screen shots here from an iPhone and iPad. I used a few other testing platforms too that I go into in the Pluralsight course.

image

Keys

Building this course demo was a great experience. I was able to apply a ton of great scenarios to a very digestible demo app that covers a great deal of ground. The course is a great example of one way to build a Single Page App … one of several ways. I explain through the course that there are other roads you may take, just like with any technology. However I made it a point to follow through on the app to show a completed path. If I were watching this course and digesting its code I would be using it as a foundation, but constantly thinking about how I could tweak it.  So feel free!

In a future post I’ll talk a bit about the technologies that I cover in the SPA course.

More on the Code Camper SPA

Part 1 – The Story Begins (What is the Code Camper SPA?)

Part 2 – Client Technologies

Part 3 – Server Technologies (the Data Layer)

Part 4 – Serving JSON with ASP.NET Web API

Part 5 – HTML 5 and ASP.NET Web Optimization

Part 6 – JavaScript Modules

Part 7 – MVVM and KnockoutJS

Part 8 – Data Services on the Client

Part 9 – Navigation, Transitions, Storage and Messaging

Part 10 – Saving, Change Tracking, and Commanding

Part 11- Responsive Design and Mobility

tags: asp.net jquery knockout pluralsight SPA webapi
  • Richard Buckingham

    I look forward to the course :-)

  • Tim

    “And after 8 weeks of about 4 hours per night 5 days a week” — thanks for including that note. It sometimes seems as though you guys (whose blogs I read) simply come up with an idea and churn out all the code in just a couple hours, while I spend countless nights trying to figure things out and very slow make progress.

  • Jeff O’Connell

    Thanks John. I look forward watching and learning from you, and your collaborators, on how to best create SPA’s using the latest and greatest tools and technologies. I strive to do this now (creating fluid experiences) using existing technologies such as ASP. Web Forms, ASP.Net Ajax, JQuery, Json and Web Services but for one delivery platform. However, it’s the newer technologies like SPA’s, Web API, JQuery, EFCF, Knockout etc is where its at, I wanna learn and Pluralsight is the perfect place to get it at.
    @ Tim, couldn’t agree more with your comment too.

  • john

    Jeff – Thanks. I think you will find that you can do all of what I show on the client with ASP.NET web forms and web services too. I specifically wrote it to make it easy to swap in and out different tech, and to keep it using tech that is ready and available today. Hope you like it :)

  • john

    Tim – I hear you on that. These things take time. But we learn a lot along the way. This specific SPA app is for this course and thus I went out of my way to make it simple enough to grok, but complex enough to use for real world. If I had used an existing one, I could’ve been done by now … but where is the fun in that. LOL

  • https://twitter.com/petek68 PeteK68

    @Tim: I completely agree with you here too. It’s nice to get a sense of time that goes into building these things.
    John, I enjoyed your other two courses on Pluralsight, and I’m looking forward to watching this one.
    What technologies are you using to build this? I’m currently starting a SPA project and would like to take a crack at it before diving into your course (I find it easier to relate this way). Obviously you’re using KO + Web API + jQuery. But are there any other libraries or tools that I should familiarize myself with in the meantime?
    Thanks, and keep up the great work!
    Peter

  • john

    Pete – I’ll post more about the tech I used in detail next week … there is quite a bit included. Some important js libraries are ko, jquery, sammy, amplify, underscore, and require.js. I promise I’ll post more later … but first priority is recording :)

  • Boulos Dib

    I am looking forward to your new course. I am now convinced: one more tutorial with Taylor guitars, and I am going to be forced to add one to my collection. I really enjoy your courses and the NY Pluralsight Study group is now a big fan as well.

  • john

    Thanks Boulos. No Taylor guitars in this one, though I was tempted :) I hope you enjoy watching this one as much as I am recording it.

  • http://theshravan.net shravan kumar kasagoni

    Eagerly eating for the course John, want see spa in action using KO+Web API

  • Eric

    Manning Press has an upcoming book on building SPAs. I’ve purchased the “early edition”, but only 3 of the 9 chapters are finished. Looking forward to your pluralsight course. I’ll have to re-subscribe once it’s up.
    http://www.manning.com/mikowski/

  • Cesar K San Jose

    I can’t wait for this course. The only thing missing is Kendo UI. Otherwise, all of the technologies you are using are part of our stack for 2 of our projects.

  • john

    Shraven – Thanks. Knockout and the Web API are crucial parts of the app and the course. I think you will like that.

  • john

    Eric – Should be an interesting book. There are many ways to develop a SPA, so having a few examples is great.

  • john

    Cesar – Glad to hear you are excited, thanks! I could have used Kendo UI or WijMo or bootstrap or jQuery UI (etc). But in the end I decided not to just to show that you dont need them, but can easily add if you want. But yes, I agree having one of those libraries is nice.

  • TuyenV

    Great!
    Even more if there is a navigator to go to the other parts here.

  • john

    TuyenV – Thanks for the comment. The course covers navigation in a SPA, which I believe is an integral part of the experience..

  • Al

    Hi John,
    Thanks for putting this series together and for making the live application available for us to knock around. I also appreciate you including the time it took to put the application together. Did that time include trial and error as well as working through ideas with the contributors or was it just for the coding? I am asking because I, like many others, am at a crossroad with Silverlight and I am trying to decide if my next app should use the technology. I know, I know, it depends and Microsoft certainly has not been particulary helpful lately. I also know that I would have to factor in some time to include mobile-friendly pages.
    Thanks,
    Al

  • john

    Hi Al,
    You’re welcome. :)
    It’s a pretty good estimation of the time I spent on it over 9 weeks (1 week I was at Tech Ed). The contributors time was not included, but I’ll ask Hans and Ward how much they put in.
    If I recall, Hans did most of the initial design in a day or 2. Ward wrote about 10% of the app according to github. But Ward spent a lot of time not coding … helping me vet ideas. Keep in mind we all have day jobs, so we couldnt have put more time in even if we wanted to. :)
    Also, to be clear, the 160 hours is just the May/June time to write CC … not the course production time.
    There were certainly challenges along the way, some of which I mentioned in the course (I really hope a datacontext-like library comes out that is awesome). But I was happy with the results, especially since I found the modularization much easier to follow than spaghetti code js.

  • Jason

    I have been watching the course and was wondering if the code is available for download?

  • john

    Jason – Thanks for watching! Pluralsight provides the code and slides and offline viewing of the course with their “Plus” subscription.

  • Michael

    I have been watching this great course and have been downloading the source files from pluralsight. However, I’m not able to load the solution more than once using Visual Studio 2012 Professional. Loading for the first time succeeds. I’ve made no changes and closed the solution. Then loading again fails leaving the projects in the “initializing stage”. VS reports that its busy waiting for an internal operation to complete. Does anyone have an idea what went wrong?

  • Belle

    I am having the same issues as stated above. Running VS 2012 Premium V 11.0.50727.1, don’t have SQL Server installed. The CodeCampler.Model has loaded, the rest are hanging in the “initializing” stage.
    Just upgraded to the “Plus” subscription to get this code. Bummer.

  • John

    Michael & Belle,

    I’m sorry you are experieincing that. I’m not sure what would cause Visual Studio 2012 to do that. It sounds like it can;t load due to something it doesn’t support. Make sure you have .NET 4.5, IIS Express, VS NuGet, etc. Look through the readme file in the root of the solution I included for more details on requirements. Let me know how it goes.

  • Belle

    I am not sure what was wrong, but I was able to open the CodeCamper solution. I originally have only extracted that last project.
    This time I extracted all other demo files (spa_m2.., spa_m3..) and opened them. And magically the CodeCamper loads now as well!
    Thanks for the prompt reply. Your class is outstanding!!

    • Dave A-W

      Heads up that I experienced the same issues as Belle and Michael.

      Per Belle’s comment though, once I’d opened all the previous module solutions, the full CodeCamper solution decided to play nice. Absolutely no idea what “setup” the prev solutions did (perhaps with IIS Express?) to help the full solution load properly.

      Cheers, Dave.

  • Pingback: Quick post #2 « Sagar Solanki

  • Joao Passos

    Hi John.
    First of all I want to congratulate you for this excellent course.
    I subscribed pluralsigth course mainly to see your courses on JS.
    You really make it simple to understand even for newbies on javascript, me included.
    Having that said, I want to ask your opinion on building large LOB applications mainly using JS VMs.
    For this simple, yet very neat, application you have a lot of code. How can i , having the vm in C#, minimize the amount of JS code ?
    I know that Mapping.js can help on this. Do you have other suggestions?
    Thank you for your time. Keep up the excellent work.

  • Pingback: Cool articles on building single page apps with knockout jquery and web-api | Dom's Code

  • Johan

    I got stuck in a rut: mvc, get, post, bla bla.
    But this is the most inspiring thing I’ve seen for years: web sites becoming web apps.
    Thanks John!

    Do some of you think that mvc will die? It seems that the client is getting smarter and the server is just becoming a restfull api.

  • Pingback: Inside the New Single Page Apps Template | John Papa

  • Pingback: Building Single Page Apps with Knockout, jQuery, and Web API | .Net Web Development | Scoop.it

  • Hawk

    Is there a reason why you picked KnockoutJS instead of BackboneJS? I think BackboneJS has more support and larger community around it.

  • Pingback: Single Page Apps – Live at the LinkedIn .NET User Group | John Papa

  • Akash

    Hi John

    First of all I really wanted to thank you for the wonderful and fun Sessions. According to my understanding this is a Good Starting project for SPA projects since you have not only written the app but also the Seed Level Framework (Seed Work). if I use this project’s Seed Work Codes (specially JavaScript) and some of the CSS And Media Queries for my next project, will it be a problem for you or is it perceived as plagiarism ? .

    Many Thanks
    Akash

    • John

      Hi Akash,

      Thanks for asking! I just sent an update to Pluralsight containing a few minor changes to the Code Camper SPA. I also added a license file to the update. I expect they will replace the download for the course in a few days. Once that happens you can grab the new course code and the license file.

      But yes, you can use the code as long as you follow the license.

  • Steve Hueners

    Greets John – just finished my first time thru the puralsight production and kudos – highly polished and I’m very much looking forward to not spending at least a few dozen hours that I otherwise would have thanks to your 160+ contribution. (and your friends at PS should know that I’m re-upping for another month primarily so I can step thru CodeCampers again now that I know how it ends.)

    Also very much appreciate the followup you’ve demonstrated here – enough butter? – great – here’s my followup. ;)

    Many CodeFirst tutorials show the ‘navigation properties’ as being established in the POCO with something like:

    public virtual ICollection
    AttendanceList { get; set; }

    I understand this creates a Foreign Key in the database. Hoping you can lend a word or two to your usage of the 2 CodeCamper.Data|Configuration classes because I’m not completely clear what they are contributing that the NavProperty in the POCO isn’t. Seems like the POCOs collection and the EntityTypeConfiguration both address foreign key relations – what is EntityTypeConfiguration bringing that the POCO’s ICollection hasn’t?

    and again – thanks for raising the bar re: online tutes – very, very helpful to see a non-trivial implementation.

  • Dominic Thompson

    Hi John, I am novice in javascript and i am learning to develop SPA, however kudos to your effort on CodeCamper SPA, your concepts are very nice and clean, but i have a problem with datacontext on the client, its very ambiguous, your data services are clean and neat, i am not comfortable with your opinion on breezejs. I took a look at their site and it requires knowledge of metadata on EF, which to me establishes a strong dependency. I need your opinion on using backbone.js for dataservices, and using knockout for viewmodels,which to me is cleaner and easy

    On your Add Todo list(http://www.johnpapa.net/insidespatemplate)
    …breeze.js : Rich data services

    how about:
    …..backbone.js : Rich model and data service

    I am comfortable and satisfied with the rest of your mappings

    please advice.

    • John

      Hi Dominic,

      The idea of abstracting the datacontext is important for separation, scaling, reusing code regardless of the library you use. You can certainly change the code to use backbone if you prefer that library (as it sounds as if you have experience there already). In fact, that’s why I wrote the app with so much separation: to make it easier to swap libraries in and out. Many folks have written to me sharing some of their ideas for different libraries (there are many to choose from). Please let me know how your backbone experiences go.

      BreezeJS is not directly tied to Entity Framework. The samples may show EF but if you have requests for how to do something specific that doesn’t involves EF, feel free to share with them directly or on StackOverflow.

  • Dave Young

    This is amazing, it looks a little like silverlight….
    I want to learn this one.
    Can I use SPA for large LOB projects?
    Is is suitable?
    Thank you John.

  • Anthony

    Hi John, this is awesome, I love it. Can’t wait for your next plural-sight course (when is that by way?)

    I’m playing around with CodeCamper and tried to use JQuery UI’s ‘draggable’ on it, but without success.

    I ended up sticking this:

    $(‘.article-right-content’).draggable();

    …just before the closing body tag, to see if that would work, but still nothing.

    I open the console in dev tools and run:
    $(‘.article-right-content’).draggable();
    …and it works, but why not before?

    What am I missing???

  • Anthony

    KnockOut templates use and afterRender property to set a callback function after the template renders.

    That’s what I was missing ;-)

  • Pingback: Building a LOB Gamification Service Administration Website: Domain Model « Dan's Green Shoes

  • Pingback: Building Single Page Apps with Knockout, jQuery, and Web API | ASP Web Development | Scoop.it

  • Pingback: Passing values from your ASP.NET MVC Controller to Javascript | gabrewer.com

  • Pingback: New ASP.NET Single Page Application Template - Gunnar Peipman's ASP.NET blog

  • Tooraj

    Hi John,
    Great job! Thank you.
    Is SPA architecture is good for an ERP app? if you have 100 items in the menu, do you go for SPA?

    • John

      Hi Tooraj – I can;t advise you on any technology direction without more details on what you are tyring to do. But I will say that I wouldnt exclude SPA just because you have 100 views. I would suggest that you try and break it down into smaller app that work together. A more modular design like that can allow you to kee things separated and easier to rollout and test.

  • Pingback: benpowell.org

  • Pingback: Online Pluralsight course for SPA development from John Papa

  • Hans

    John – This course is fantastic! There is so much more in there than what the title suggests. It took me a couple views to really absorb some of it but I’m glad I put in the time. My programming feels more solid and understandable (especially JS). Thanks so much. I’m applying this knowledge to a new app using jquery mobile and knockout. Naturally I’m running into what appear to be fairly common integration woes. If you have any suggestions like a Pluralsight course or blog post I’d greatly appreciate it. All the best.

%d bloggers like this: