Toolroom Tech Blog

Devlopers Digest

9 reasons why to use Single Page Web Apps

... and 9 why you should do it not.

... and 9 why you should do it not.

This week I had a discussion with a friend where I tried to convince him of SPAs ... but It wasn't easy. So I decided to bring tdown and share my thoughts. There may be scenerios where it really doesn't make any sense to implement an SPA. But you should consider it - it's a great opportunity to create a great web based app. I hope this list will help you to decide whether to make a web application or not.

Advantages

Disadvantages

REST API required
Since you need an API to exchange data with your Server, you can reuse this API with other, i.e. mobile, apps. If well designed, you can do a complete frontend rewrite without any(!) impact on the server.
REST API required
Some would say it's more work. Indeed, it is.
Testability of server communication
It's much easier to test an API than a mishmash of HTML and Javascript.

Highly responsive

You can immediately give feedback to user activity. No need to perform a partial or full page roundtrip. Once loaded you can simply reuse data in different ways or just make the whole thing more interactive.
Longer initial loading
Since you initially load the whole application at once, including Scripts, Templates and CSS, the time to load the app will increased. In extreme cases drastically.
No server state
Since stateless, we do not need to keep a 'clone' of the client state on the server. You just need to authenticate the requests.
No server state
You don't know the requesting client. That means the API must claim all parameters it needs within each action again and again. And: you need to implement a proper security concept to validate each request by yourself!
Data Binding
Most JavaScript SPA frameworks come with bindings. They save lots of work since you are not required to pay attention on all parts of the application that should be updated if whatever happens whenever.
Side effects & debugging issues due Data Binding
Sometimes bindings may lead to side effects you would never think of. Furthermore it can be hard to debug those bindings...
Lightweight data exchange
Once loaded, the app communicates only data (JSON) with the server. No heavy requests, no heavy HTML responses. In extreme cases you can make almost everything offline.
Furthermore, while debugging your app, you can better read and mock the data transmitted between client and server, i.e. via Fiddler.
Easier to manipulate request and response
Transmitted data may always be subject of interception. But it's much easier to manipulate human readable JSON.


JS business logic
You have to implement the whole Business logic with JS ... this seems very horrible. On the other Hand, why not - good apps always check data integrity on the Server. 

No date issues
Prevent issues where you have to guess the timezone or the local date format. Just give UTC to the Client and it does the rest. Don't bother about time zones, the Client knows it!



JS Memory leaks
Well, that's a Problem. Most Frameworks are well built to minimize the potential to run into such issues. I recomment to sometimes do a full page load instead of just a partial switch.

Search engines do not speak JS
That's not the full truth, Google tries to understand JS. But in fact you should also provide a static version of the content you want to expose to search engines.

No Server generated Scripts
No need to generate JS generically on the Server.


JS must be enabled on the Browser
But imho that's not a real issue anymore.
Move load from server to client
Since everything is rendered on the client, your servers will make a party.

 

Windows authentication with Forms fallback in ASP

Windows authentication with Forms authentication if first one fails. Works with ASP.net and MVC.

These days I was working on a simple MVC 4 application to be hosted on IIS 7.5/8, nothing special. But it made me crazy when I tried to implement the last feature ... windows authentication with forms authentication fallback. THe problem is, that IIS typically supports either Windows or Forms authentication. In principle you can do two things: a single-app solution, where both authentication methods are combined within a single application or a multi-app solution that uses one app per authentication.

How does Windows authentication work?

Windows authentication follows the NTLM/Kerberos challange handshake protocol. This is more or less, what happens:

1) User requests access to a resource

2) The server negotiates the protocol with the client

  • IIS sends two WWW-Authenticate headers: Negotiate and NTLM

3) Our negotiation comes up with NTLM authentication (Kerberos is more secure/complex, search it on your favorite search engine):

  • IIS responds with a 16-byte random challenge message
  • The client sends a hash, generated from the users password to encrypt the challenge sent by the server
  • IIS now sends user name, the original challenge, and the response from the client to the Domain Controller
  • The DC obtains the password hash for the user, and then uses this hash to encrypt the original challenge. Next, the domain controller compares the encrypted challenge with the response from the client computer. If they match, the domain controller sends the server confirmation that the user is authenticated.
  • If the credentials are ok, IIS grants access to the requested resource
  • IIS passes to ASP.NET the token that represents the authenticated user or anonymous user account. It is accessible via HttpContext.User.

Single-App Solutions

I found lots of suggestions to create a single-application solution, but mostly not worth implementing it due complexity or possible maintenance issues when moving the application to other servers.

Microsofts Paul Wilson writes on http://msdn.microsoft.com/en-us/library/ms972958.aspx how to do it with classic ASP.net on IIS 6. His solution builds up on forms authentication and requires two login pages and a custom 401 page. But on the one hand i do not want no modify the application too much andf on the other hand it's hard to make it work on IIS7.

So, I decided to use a multi-application approach that indeed needs a second application but is much smarter and cleaner in my opinion.

Multi-App Solution

As already said, you can only use either windows or forms authentication in a asp.net application. And this is exactly the way this solution is based on.

Pros

  • No modification or optimization of your base application
  • Use only standard authentication modules
  • Attach this solution to any forms application

Contras

  • Requires a second application or at least a sub-application on IIS

Implementation Summary

First of all we need our base web application providing configured to use forms authentication. Then we need another, almost empty web application, that is configured to use Windows Authentication. The latter is responsible to do the Windows Authentication and to set the forms authentication cookie before it redirects to our base web application. If the windows authentication did not work, HttpContext.User.Identity.IsAuthenticated is set to false and the user will be redirected to the forms login page.

How to do it

ASP.net uses a so called machine key for ViewState encryption and validation as well for signing the authentication ticket for forms authentication. This feature was introduced especially for load balancing. That means, if both of our applications, the base and the authentication app, use the same key, they can both access the authentication cookie.

In our authentication app we just need one Action, I create the action 'Index' within a controller named 'NtlmController'. Since the Windows authentication of the request is already done before the action is executed, we can  access the authentication token here. If the token says, the user is authenticated, we set the authentication cookie and that's it.

public ActionResult Index()
{
	var principal = (IPrincipal) Thread.CurrentPrincipal;
	if (principal != null) {
		if (!principal.Identity.IsAuthenticated)
			throw new ArgumentException("Principal is not authenticated, should not happen :)");
		//User is validated, so let's set the authentication cookie
		FormsAuthentication.SetAuthCookie(principal.Identity.Name, true);
	}

	//use this if your authentication app is a sub-app of your base app
	//return Redirect("~/../");

	//use this if your authentication app is another app on the server
	return Redirect("http://www.mywinauthloginapp.com");
}

Now generate a machine key for the authentication app. In IIS >=7 it's easy to achieve this: In IIS left click on your app, in the features view open machine key and click generate keys. Save it and IIS will update your web.config automatically.

 

The resulting line should look like this:

<system.web>
	...
	<machineKey decryptionKey="C7976FD237C42579DDD645F4649DD05A3F09F32069691C34" validation="SHA1" validationKey="1EE24CF0741E7F7557E5390CCEF5F5DF1BF90F098294AF2BC3D8B3C2F1195E2E268377FDD7361AE8998374064A6CB23DE361414DDDDA90DF49D4BC6E55687F63" />
	...
</system.web>

Now let's do the only modifications to our base app. First copy the machineKey line to to the web.config and add some parameters to the forms authentication configuration, so that redirects between both applications are allowed:

<system.web>
	...
	<machineKey decryptionKey="C7976FD237C42579DDD645F4649DD05A3F09F32069691C34" validation="SHA1" validationKey="1EE24CF0741E7F7557E5390CCEF5F5DF1BF90F098294AF2BC3D8B3C2F1195E2E268377FDD7361AE8998374064A6CB23DE361414DDDDA90DF49D4BC6E55687F63" />
	<authentication mode="Forms">
		<forms loginUrl="/Account/Login" timeout="2880" domain="localhost" path="/" enableCrossAppRedirects="true" name=".ASPXFORMSAUTH" protection="All" />
    </authentication>
	...
</system.web>

That's it. If you directly access your base app, you'll get your forms login. But if you access the authentication app from a machine within your domain, you will automatically be logged on.

Good luck.

 

 

Furher information

http://msdn.microsoft.com/en-us/library/aa292114(VS.71).aspx
http://msdn.microsoft.com/en-us/library/ff647076.aspx
http://msdn.microsoft.com/en-us/library/ms972958.aspx

Default Mobile Viewport Width

Recently I've done some optimizations for mobile websites where I focused on the default viewport size of common mobile browsers.

Here's the list of the default viewport width I used:

Windows Phone 7 IE: 1024px
Android: 800px
iPhone Safari: 980px
Opera Mobile: 850px