For those of you haven't got chance to work on Single Page Application (SPA), I will be discussing few of my learning in series of post, including how to perform CRUD operation using both Breeze and Web Api.
What is Single Page Application (SPA)?
In my own words:
- SPA application doesn't requires page postback.
- SPA application works very well with web api and it can be used for good user experience (UX).
- SPA application doesn't mean that, their will be only single page in your application. It will be multipage application which doesn't requires postback
Example of SPA
- GMAIL is best example of SPA.
- John Papa's CodeCamper Demo
- I personally find it is very easy and fast to develop SPA application using Breeze and it is easy to do client side caching of data.
- If you are not sure about which route to go, I would recommend you to try implementing Repository Pattern with both Breeze and Web Api and it will make your decision simple.
ASP.NET Web API
Breeze.js - rich data management
ASP.NET Web Optimization - bundling and minification
Durandal.js - navigation and view composition
Knockout.js - data bindings
Require.js - Modularity with AMD and optimization
Toastr.js - pop-up messages
Twitter Bootstrap - robust CSS styling
Teched Video Tutorial for SPA
- Most of the time when you are working on SPA, if you run into problem. Search appropriately to get quicker solution: For example: If you are facing problem in data binding then search for "Knockout" rather than "Hot towel spa" or "SPA". Similarly if you run into problem for navigation then search for "Durandal", If you are running into problem for CSS search for "Bootstrap" and so on.
- Have F12 (Developers tool open while working on SPA)
- If something is not displaying on screen as expected, check "Console Log" for browser - Shortcut - Cntrl + Shift + J
- Always "Disable cache"
- In chrome go to settings at the right end corner and select Disable cache (while Dev Tools is open)
- Master concept of Knockout.Js and Web Api. On High level SPA is all about using Knockout.Js and Web api (Please note: I am assuming here that user will be using Hot Towel SPA template and using all combination as describe above)