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…
First let’s start with the theory… the what, why and how questions for building single page apps.
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.
Learn about knockout.js here (essential reading/watching)
learn knockout.js – interactive tutorials
Tutorial, benefits, comparisons with other frameworks
note: you can sign up for a free trial account and watch the majority of these videos for free but you can’t go wrong spending the $50 for a months full access.
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.
CSS Pre-Processors (Amp up your CSS abilities)
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
- 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
- KendoUI & KendoUI for Mobile
- Sencha ExtJS and Sencha Touch
- + a billion others.
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
- 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
- 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?