Turbolinks in ASP.NET MVC

I just created a new nuget package that integrates Turbolinks with ASP.NET MVC application. In case you don’t know what Turbolinks is, it comes as default in Rails 4 and the latest basecamp uses it extensively. Turbolinks uses ajax and the history api to boost page performance and gives users a smooth ux. Integrating it with ASP.NET MVC is trivial, once you install the nuget package, add the script file into your layout page, there is no dependency on any other external scripts, it works even without jQuery. Next, register the Turbolinks action filter in GlobalFilterCollection, you may also decorate it with selective controllers and actions instead of registering it globally. Behind the scene, turbolinks captures all of the anchor’s click and uses ajax to load the page, once loaded it replaces the current page body and title with the new, verifies the script and stylesheet changes and finally uses the history api so that the browser back behavior remains the same as regular server side page.

Implementing User Confirmation and Password Reset with One ASP.NET Identity – Pain or Pleasure

Recently, I was trying to introduce GitHub and Twitter login for my TextUml, it was using the simple membership which has out of the box support for Twitter login, my attempt to create a client for GitHub OAuth2 failed, it seems the OAuthWebSecurity was receiving different query string name for provider from GitHub, anyway I did not want to invest too much time as Microsoft is coming up with a new Membership system called ASP.NET Identity (also the default in ASP.NET MVC 5) and I want to give it a try as the server side of TextUml is already running on all the edge versions of different packages.

Meet TextUml – A Real-time Application Developed with Signalr and Backbone.js

Its been quite a while that I have shared a complete application implementation with my peers, so here is it TextUml, it is still in very early stage and in terms of features it draws uml sequence diagram from your input and you can share the document with multiple users who can participate in collaborative editing.  There are few more features that are still under development, so keep an eye on upcoming releases. Behind the scene TextUml is developed with Backbone.js in CoffeeScript, it uses Require.js for modularization, KineticJS for html5 canvas drawing,  Mocha, Chai and Sinon for client side testing. The server side uses all the latest beta of ASP.NET MVC, ASP.NET WebAPI and Signalr. If you are new to Single Page Application in Microsoft space, the TextUml can serve as good reference application for your learning. The complete source is released under MIT License and available in Github

Enjoy and do let me know your feedbacks!

Creating a Basic CRUD Application with Backbone.js Starter Kit (part–3)

In the last post, we have completed the category management, in this post I will show you how account list is implemented. The account management will be typical CRUD screens, where the accounts will be shown in a html table and each row will have links to edit and delete individual account, there will be separate screens to edit and create account. Lets list the features in a bit more details:

User Management with AngularJS and ASP.NET SPA

Lately I started to dig around AngularJS framework, one of the thing that I often found helpful is to port an existing codebase to the new thing that I am trying to learn, so I decided to create an AngularJS version of my Backbone.js StarterKit.  I have been working with Backbone/Spine for more than a year and I am well familiar with the basic building blocks of these client side mv-* frameworks, but there are certain features of AngularJS that I really like, to name few the composition over inheritance (no need to inherit from special framework class), dependency injection and testability. The other important feature is creating extension of html vocabulary known as directive, I am still investigating the Angular source to fully understand it, so it is too early for me to comment on this, but having worked with many years in webforms which as well abstracts the html generation, I can say there are obviously some concerns. Nevertheless, AngularJS is a powerful framework  for building rich client side applications and does worth looking into it.

Creating a Basic CRUD Application with Backbone.js Starter Kit (part–2)

In the previous post, we have seen the UIs and its functionalities, in this post we will see how the category list is implemented. Typically CRUD UIs are presented in html tables to list the records and separate screens for adding and editing individual record, but in this case the category has only two attributes the title and the type(expense or income) so instead of creating multiple screens we will be using the same list view to add, edit and delete the categories. Lets recap the functionalities of category list:

Creating a Basic CRUD Application with Backbone.js Starter Kit

This is a first part of a multi-part series article where I will show you how to create a relatively simple CRUD Application with Backbone.js. The Application is a personal finance application where the user will be able to create multi-currency accounts and should be able to track expenses and incomes. The application is created with the Backbone.js Starter Kit of my previous post and the full source code is hosted on GitHub.

Introducing Backbone.js StarterKit

Recently I completed few Backbone.js Single Page Applications, one of the thing that really bored me was setting up the project. It seemed that I was doing the same stuff over and over again like setting up the folder structures, installing the required nuget packages, writing the same user registration and login codes etc. So I decided to create a project template which I can use as a starting point for my application and thus born the Backbone.js StarterKit and thankfully and it is now showcased in single page application section. It was initially created as a VSIX extension, I know unlike myself, people often do not like to install something new unless it is absolutely necessary, so I have also created separate nuget packages that includes all the features of the VSIX template, just create an empty ASP.NET MVC project and install your preferred package.  Although my preferred client side language is CoffeeScript but I encounter clients who prefers pure JavaScript as well as clients who become fan of typescript due to its auto complete and compilation support in VS.  So there are three separate nuget packages which are same but implemented in different languages. To Install the package, open the package console in VS and type your preferred version:

Html5 Offline Cache Integration with ASP.NET MVC Bundle

One of the lesser known and misunderstood feature of Html5 is offline cache, with carefully crafted it can make your application blazingly fast. In this post, I will show you how can you implement offline cache with the new asset bundle, the same technique can be also applied to other asset managers like combres or cassette. Currently the browser support of offline cache is aligned towards mobile platform comparing to desktop(except IE all other has this support) but the nice thing of offline cache is the browser that does not support it will simply ignore it, on the other hand the mobile platform which is dominated by the mobile web-kit has first class support of it, so I will use the default jQuery Mobile project the comes with the ASP.NET MVC 4.

The ASP.NET WebAPI and its shortcomings

I managed some time to stab the new ASP.NET WebAPI, I have developed few Http API in the past solely on ASP.NET MVC instead of going through the WCF route. My goal was to check how much work I can delegate it to the new WebAPI instead of doing it myself. No, I am not going to show you some CRUD controller that does the basic stuffs, I take it for granted. Instead, I would show you something that is more realistic. The example that I am going to present a Contact resource that has id, first name, last name and a collection of associated addressed, still pretty basic stuff.