Building Single Page Web Apps for Desktop, Tablet and Mobile

Gone are the days when you can get away with building web applications that make repeated trips to the server to render html. Thanks to the proliferation of apps on devices like iPhone, iPad and Android, users now expect a fast, rich, engaging experience while using their apps. Any lag – perceived or real – is no longer acceptable.

The mobile OS makers (apple, google, MS, etc) will push you toward building native applications using their custom frameworks – but who wants to learn a new programming language and application framework?

I have years of experience using open web technologies, why can’t I use these skills? And can I use these skills and deploy into the mobile market places?

Yes… You… Can…

With HTML5, CSS3, Javascript and some complimentary technologies you can build your application once and then customize it for each platform you wish to target.

First let’s start with the theory… the what, why and how questions for building single page apps.

Bert Appward’s Field Guide to Web Applications

Data Access

There are numerous technologies – open-source & proprietary – that can be used to build your data persistence layer. This article focuses on .net technologies but I think it’s worth noting that that where you persist and query your data from is not as important as how you do it. In short to build a SPA you will want to provide a RESTful API that accepts and returns json.

The newly released Asp.Net Web API is the quickest and easiest way to build a RESTful API for your SPA to communicate with. It provides OData hooks and can sit on top of an Entity Framework instance.

Javascript client-side framework

To ease development and prevent re-inventing the wheel it’s best to utilize a mature and comprehensive client-side application framework. There are numerous javascript MV* (MVC, MVP, MVVM) frameworks knocking about but the framework the MS is backing is an MVVM framework called knockout.js. It has excellent documentation, a great tutorial environment and strong community backing.

Now that you know a bit more about how knockout.js works, check out this TechDays talk – Building Single Page Web Apps for Desktop, Tablet and Mobile where Steve Sanderson walks you through a complete but brief implementation of a SPA using the ASP.NET WEB API, Knockout.js and some complimentary javascript libraries including history.js and upshot.js

The tutorials and documentation listed so far should get you well and truly started on the basics of building an SPA. As tutorials often focus on explaining a limited set of technology, the following section details complimentary frameworks and technologies that can help you with building a feature complete, efficient, maintainable SPA.

Complimentary technologies/frameworks

Javascript Dependency Resolution and Namespacing

You will want to avoid Javascript spaghetti and structure your client side application using structured folders, files and namespacing. The following libraries can help you out here.

• requireJS – file and module loading – client side
• cassette – asset bundling for .net – server side

CSS Pre-Processors (Amp up your CSS abilities)

• LESS
• SASS

Web to native mobile app frameworks

• Appcelerator – build native apps using web technologies
• KraniumJS – makes your appcelerator titanium apps a little more open web
• PhoneGap – native app wrapper around browser control with exposure to device level APIs
• AppMobi – native app wrapper around browser control with exposure to device level APIs

Data Libraries

• YQL – Yahoo Query Language that let’s you go cross domain across web services

UI Frameworks / Widgets

• JQuery UI
• JQuery Mobile – application framework for mobile devices including specialized widgets
• Bootstrap
• Datatables.net – extremely flexible javascript data table solution
• KendoUI & KendoUI for Mobile
• Sencha ExtJS and Sencha Touch
• + a billion others.

Notification Frameworks

• SignalR – introduction (.net specific)
• PubNub – cloud based
• Airship – cloud based

Responsive/Adaptive Design Techniques

• 960 Grid
• Responsive Tables
• Media Queries – A List Apart Explains & CSS Media Query Device Values
• ASP.Net MVC 4 – Device Detection
• 51Degrees – Device Detection

Tools

• Asana- Task Management (for Teams)
• Visual Web Developer + Resharper + NuGet = a MS developers complete toolset?
• Web Workbench for Visual Studio – syntax highlighter and intellisense for SASS, LESS and Coffeescript
• BandAid – VS Debugger Extension
• Google Chrome + Window Resizer & YSlow extensions
• IDEA – WebStorm – alternate IDE with top of the line Javascript/HTML support and refactoring
• LinqPad - execute Linq queries against your DB

Have you had success with any of the above technologies?
Do you rate a particular framework/technology/platform over another?
Are there any other tools, frameworks or services that I should take a look at?