Building Single Page Apps with HTML5, Knockout, jQuery, and Web API – Part 2 – Client Technologies | John Papa

John Papa

Evangelist on the loose

Building Single Page Apps with HTML5, Knockout, jQuery, and Web API – Part 2 – Client Technologies

...

Last week I wrote about the overall story for my new course for Pluralsight “Building Single Page Apps (SPA) with HTML5, ASP.NET Web API, Knockout and jQuery” (due out August 31st). This week I want to share some of the client technologies that I am exploring in the SPA. This is an end to end course, so I cover the app and how it uses all of the technologies to produce the SPA. To avoid the course being 100 hours long, I cover just the pieces you need to know about to build a SPA. This should help keep the course flowing along from topic to topic.

I’ll keep putting these types of posts out to help compliment my course as long as you continue to find them useful.

Here is a diagram from the course which hits some of the major 3rd party JavaScript libraries I demonstrate in the course. jQuery makes working with the DOM and making AJAX calls easy, and I use a series of plug ins for jQuery to help with things like creating mock data (jquery.mockjson) and creating activity indicators (jquery.activity).

image

It’s no surprise that I am using Knockout in the course, since I make it no secret that I am a huge fan. Knockout provides data binding and is a solid foundation for MVVM in a web application, including SPAs.

Along with Knockout I use a series of plug ins for it to handle commanding (something Hans and I co-wrote), change tracking (with the help of Steve Sanderson and Ryan Niemeyer), Templating (Jim Cowart’s library), and Validation (Eric Barnard’s library). These Knockout plug-ins all play a central role in building the application. For example, the app covers validating the data before sending on to the Web API. The Validation plug in works great for this and it works nicely with or without HTML5. I’ll be posting the change tracking and commanding plug ins to github over the next few weeks, too.

You can dig deep into Knockout right now by checking out my Knockout course on Pluralsight.

ko ps

I enjoyed using amplify for abstracting my AJAX calls so I could use mock data. Plus it has the added bonus of helping with local storage and messaging (yes, that same messaging concept from MVVM). Thanks to Elijah Manor for pointing this one out to me.

Quick notes about the rest from the diagram above  ….

  • Sammy is simple and effective library for managing routing and history for both modern and older browsers.
  • Require helps with Asynchronous Module Definition (AMD) … one feature is dependency resolution.
  • underscore is a fantastic helper that I found quite useful for dealing with array, collection, and object manipulation where the browser’s support of JavaScript was lacking.
  • moment is my favorite date library because, well, dates suck
  • toastr is my toast/alert/popup library for HTML.
  • qunit is a simple unit testing library

I cover how to make all of these libraries work together in a decoupled manner, using patterns like MVVM, AMD, Revealing Module Pattern and much more. Of course, there is a ton of custom code too.

If interested, I’ll touch on some of the server side technology I use in the next post.

Until next time!

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: jquery knockout mvvm patterns pluralsight SPA
  • http://blog.efvincent.com Eric Vincent

    We chatted a few weeks back on twitter – when you were starting this course. You recommended I go with Sammy/Knockout – which I did. My SPA is in production, but can’t wait to see your work on this course. Thanks!

  • Zarazi

    Just got the one to try in my trial 10 days period – Thanks so much JPapa ;)

  • Stone

    Hi John,
    nice post! For me, I’m right in the beginning to use HTML5 + Javascript / jQuery for my own test-projects (coming from the Silverlight-path).
    Could you provide some information about how to set up the development-envrionment? For example: What editor do you use? What tool do you use for debugging Javascript (and databinding in knockout)?
    It would be great, if you share this information to us…
    Thanks and kind regards.
    Stone

  • http://www.novasoftware.com/Developer/JavaScript.aspx Chanva

    You are using so many JS libraries, will they cause some performance problem? Thanks.

  • john

    Eric – Great! Can you share what you did? Love to hear about it. Especially what went well, and what you might change now that you have been through it.

  • john

    Chanva – Performance issues aren’t directly tied to the number of libraries. It’s what those libraries are doing and how you code. Same as .NET, Java, etc.

  • john

    Stone – great points! I prefer Visual Studio 2012 (RC right now). I use NuGet, Mindscape (for LESS) and Resharper (refactoring tool) extensions for VS. I debug C# code in VS, but I debug JavaScript in the browsers: Chrome, FireFox and IE. I find it easier and quicker. That’s a quick list … but maybe I can post more later.

  • mike

    John, can’t wait for the new course. Looking forward to seeing how you’ll use amplify and qunit.

  • http://johnwest.com John West

    John,
    Do you have any concerns with Amplifyjs’s lack of updates or road map? Their last version and roadmap update was made November of last year.
    Also, do you use the knockout mapping plugin? http://knockoutjs.com/documentation/plugins-mapping.html
    Or knockout sortable? https://github.com/rniemeyer/knockout-sortable
    I’ve found both of them very useful in production environments.

  • http://johnwest.com john west

    Ah, I think I see how your diagram works now. The boxes in purple are areas of functionality provided by knockout, right? How are you implementing commanding?

  • john

    John West – Good questions. No, I don’t have any concerns with Amplify. Partly because I have talked with some of the team at appendTo and more importantly, it does what I need right now. I look for stable libraries, that do what I need, and are well used. It covers those areas. And if I find a better library, I would use that next time :)
    I have used those plugins for Knockout, but I decided not to use them in this app. I find the mapping plugin to be good for basic scenarios but not so much for more involved ones, but its not hard to write your own mappings, so I do that.

  • john

    John West – Yes, the purple ones are Knockout plugins. Hans and I wrote the commanding plugin (not yet publicly available) to be similar to how we would want Commanding to work in XAML technology. I will release it publicly on github in a few weeks, and of course in my course.

  • http://seangoresht.com Sean

    hi there,
    Your work has always intrigued me. I am a big fan, and a member of pluralsight. Your Knockout videos on MVVM will be taking a portion of my time next week.
    Thanks for those links as well.
    Just curious about your thoughts on using the gist from balupton’s history js here: https://gist.github.com/854622

  • http://bunjeeb.com M Najeeb

    Hi John,
    What do you think about JayData??
    That makes me drool
    See this wonderful video

  • http://johnwest.com John West

    Call me overly cautious, but I don’t want direct data access from js like that which JayData provides, at least based on the shared video (thanks!). I feel more comfortable transfering data from the server to the client via dtos. Anyone else share my thoughts?

  • Ward Bell

    @john_west – I’m curious. Why are you more comfortable using dtos and mapping by hand? What concerns you about letting another component do that? Honest questions; I have no connection to JayData … but I am working on tech that bypasses the dto-dance and other libs do the same (ember, upshot).

  • http://johnwest.com john west

    @Ward – The problem with sending domain objects is that it sends all or nothing in most cases. So if you send a person object to the client and there’s a property called SocialSecurityNumber, it will be sent. You might not display it, but it’s easily available. Or you might have one security level that can edit 5 properties for a user, and another that can edit 10. The point is, it’s rare I want an entire domain object to be viewed/edited. Having dtos makes it impossible for information to inadvertently get sent to the client unless I explicitly define it. Does that make sense?

  • http://jaydata.org/blog Robert Bonay

    @John West. After Ward’s comment I have to admit that I’m member of JayData DEV team. :)
    Many teams are working hard to make data access easy from JavaScript or publish data to JavaScript apps. The “direct data access” is provided by the OData (Open Data Protocol), JayData makes it only easy to access. In case this is your only consern, check out the same video at 4:20 – northwind.Products.filter(…).map(…). The map is translated to OData $select query option to reduce network workload by a projection. DTOs contain _data_, but data managment libraries help you to work with data _and_ metadata, which is helpful in many SPA scenarios (probably doesn’t fit your requirements). You can find me in JayData forum (http://jaydata.org/forum), I can answer all your questions, keep this discussion as an overview like John published.

  • maria

    Hi John,
    I am doing a registration sign up page using javascript , knockout bindings and jaydata , but I have a problem, on how can I check if the new member registered is already exist in sql database?

%d bloggers like this: