Tips and Tricks in a world of Mix

Archive for 28/03/2013

SPA 2–JOHN PAPA– Technologies and Patterns of the Code Camper SPA

You can check out the series of the posts on the subject

<—SPA 1.1. Getting Code Camper Started

SPA 3– Data Models, Entity Framework, and Data Patterns –>


Exploring the Solution Structure

Data Project

  • Global Conventions at the configuration folder ( c# fluent EF definitions)
  • DBContext – in charge for basic CRUD functionality
  • Unit Of Work combining the Repositories and orchestrating it by the process flow as needed.




Model Project – will be returned to client as part of an AJAX request




Web Project  –image


  • routing issues connected to global.asax
  • Ninject IOC global configurations
  • bundle for js and css connectivity …and more




LESSLESS extends CSS with dynamic behavior such as variables, mixins , operations and functions.LESS runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).


Opening the projects –

At the course he’s talking about building it from scratch there he’ll  open MVC4 template with WebApi template because we are going to serve WebApi services which will serve JSON for us,  but we already have the project from my previous post  – Getting Code Camper Started.

Now all we need is is to update the packages thought the NuGet Package Manager Console :

View –> Other Windows –> Package Manager Console

For instance write :

Update-Package jQuery   

It’ll uninstall the old version and install a new one.

After half an hour I’ve discovered the option of just –

Update-Package  which will update all of the packages in your project

now I had all my packages updated at once .


I’ve resolved some bizarre issue with critical error on jQuery map and went on .


Helpful Tools

You can check out the series of the posts on the subject

<—SPA 1.1. Getting Code Camper Started

SPA 3– Data Models, Entity Framework, and Data Patterns –>


critical error jquery map SCRIPT1004: Expected ‘;’–solved

JavaScript critical error at line 1, column 11 in http://localhost:52692/Scripts/

SCRIPT1004: Expected ‘;’



Change in the Bundles


bundles.Add(new ScriptBundle("~/bundles/jquery").Include(



   bundles.Add(new ScriptBundle("~/bundles/jquery").Include(


workes like a charm!

SPA 1.1 – Getting Code Camper Started or Using NuGet without committing packages to source control – auto rebuild missing references

In previous post I have started the SPA  course by John Papa .

You can read my posts on the subject here

  <—SPA 1 – Getting Started                 SPA 2 – Technologies and Patterns –>


Well before going on , I wanted to install the Getting CodeCamper project to fill from close .


So I got the code from GitHub just by login and getting the zip file

UPDATE: Pay attetion!  -  this is not a full project , don’t use it – this one seems to be good. download this one!


Then opened it and got lost with all the missing references.

The trouble was that there was all the needed packages configurations , but yet the NuGet didn’t know how to handle it automatically .





so the solution

Enabling Package Restore During Build

In Visual Studio, enable "Allow NuGet to download missing packages during build". This setting lives under Options -> Package Manager -> General.



Project Setup

Let’s assume that you have a solution that is either already using NuGet, or planning to use it, and that you want to set up the no-commit workflow.

Right click on the Solution node in Solution Explorer and select Enable NuGet Package Restore.

Enable NuGet Package Restore Context Menu item

and there it was – my CodeCamper was healthy again



…keeping playing

You can read my posts on the subject here

  <—SPA 1 – Getting Started                    SPA 2 – Technologies and Patterns –>

Spa 1 JOHN PAPA – Getting Started with the Code Camper SPA (my summary)

That’s my series of posts on a SPA subject .

Connection to the next post in the series :

                                                               SPA 1.1 – Getting Started with code –>



wiki – Single-page application

pros :

  • Expected reaction even without wifi
  • Fluid UX Experience
  • Usually with single page load



Definition of a SPA :

  1. Maintain Navigation ,
  2. Maintain History ,
  3. Deep Linking- when going from page to page it’s not really going to another page, it’s loading a different information on the same page .
  4. Persisting important state on the client  – for instance data that is not likely to be changed (code tables) . Not the whole database but still.
  5. Fully\mostly loaded in the initial page load
  6. Progressively downloads features as required
    Additionally handled issues that we meet in RIA plug-in apps :
  • Async services
  • Client-side application & business logic
  • Long-lived client-side state
  • 2-way data binding (MVVM)
  • Tombstoning /dropped connections – when your app crushes to get back to the point you stopped the last time .


    Code Camper overview :


  • Using SamiJS for rodding in history feature – allowing to go back and forth in pages
  • Using fade-in on JQuery animation
  • The idea with the star grade for the speaker is to intercept on the transition and check out is it ok to leave the current page or not
  • Tombstone – remembers the uri  and the filters , so even if we close the browser when we come back it’ll open the wright page and the filter that you’ve find before.


Technologies of the SPA




Server Technologies

  • DB used SQL CE


  • ORM as EF Code First through POCO Models
  • Repositories implementing CRUD (create update delete)  per sessions
  • Unit of Work is the way to aggregate to CRUD data with multiple different Repositories


  • Web API Exposing the API to the client – interact through Ajax and return JSON.




  • Web Optimization – turn on the minification and bundling for js and css files
  • Ninject IOC  – lets you decouple your classes on the server



Client Technology

  • Html5 pros – tags such as section , article , placeholder and a validation attribute
  • Modernizr  – deals with fallbacks, if the browser doesn’t support some HTML5 feature
  • Html5 Boilerplate – gives you the start for developing the HTML5 apps (for instance includes Modernizr in the project )




Javascript Patterns

  • AMD – Resolve our dependencies through our JavaScript modules.

from wiki

Asynchronous module definition (AMD) is a JavaScript API for defining modules such that the module and its dependencies can be asynchronously loaded. It is useful in improving the performance of websites by bypassing synchronous loading of modules along with the rest of the site content.

In addition to loading multiple JavaScript files at runtime, AMD can be used during development to keep JavaScript files encapsulated in many different files. This is similar to other programming languages, for example java, which support keywords such as import, package, and class for this purpose. It is then possible to concatenate and minify all the source JavaScript into one small file used for production deployment.


  • Revealing Module Pattern – reveal only the needed parts of the modules publicly
  • Prototypes – improving the performance , reduce some code and save memory space
  • MVVM – model-view-viewmodel –

separate our models – which is our data

and our views  – which are our html

from our viewmodels – which are our JavaScripts







jquery.mockjson – creates a mock data

jquery.activity – can create commands under the ui layer

toastr.js – setting the message throughout the application


Connection to the next post in the series :

                                                               SPA 1.1 – Getting Started with code –>

Tag Cloud

%d bloggers like this: