BlogBlog

Posts tagged with: MSDN

MSDN Magazine: Develop Hybrid Native and Mobile Web Apps

Friday, March 2, 2012 10:04 AM

MSDN Magazine: Develop Hybrid Native and Mobile Web AppsMy article on building hybrid native and mobile web applications has been published in the March issue of MSDN Magazine.

Mobile applications are all the rage these days. There are currently three major mobile platforms: Apple’s iOS  (iPhone and iPad), Google’s Android , and Microsoft’s Windows Phone , and countless variations within these platforms for the developer to consider. Focusing on any one of these platforms leaves 50% or more of the market unable to use your application, but the cost of building and maintaining the same application on each of the platforms quickly becomes problematic. A web application is another option, but one that leaves the experience diluted and leaves the developer without access to many of the native hardware capabilities. 

In one of my recent projects at EffectiveUI, I spent a lot of time thinking about how to solve this conundrum in a way that provides the best possible user experience while still being cost effective and maintainable. My solution was an application that is a hybrid of a native application and a mobile web application. I had the opportunity to share this solution, and provide a tutorial for building it, in an article for MSDN Magazine , “Develop Hybrid Native and Mobile Web Apps .” I truly believe that this approach is a “best of both worlds” solution that leaves the developer and end user in a better place.

I hope that my approach to this problem helps you in building your applications and I’d love to hear any feedback that anyone might have.

The main text of this post is also cross-posted on the EffectiveUI blog.

 
By: Shane
11 Comments

Comments

  • Ruurd Eijzinga 3/15/20123:48 AM Great article, is there a version for vs2010 ?
  • Shane Church 3/15/20127:48 AM @Ruurd: All of the ASP.NET MVC and Windows Phone 7 code samples in the article are for Visual Studio 2010. The Android project requires Eclipse and the Android SDK and the iOS code requires Apple OS X and XCode.
  • Ruurd 3/15/20128:20 AM sorry, but I get these errors EffectiveUI.MSDN.Web.csproj' cannot be opened. The project type is not supported by this installation. EffectiveUI.MSDN.Phone.csproj' cannot be opened. The project type is not supported by this installation. I am running vs2010 sp1
  • Shane Church 3/15/20128:48 AM You will need the ASP.NET MVC 3 components for the Web project from http://www.asp.net/mvc. You will also need the Windows Phone 7.1 SDK for the Phone project from http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=27570.
  • Kushil Abeyguna 3/25/20123:51 PM Good article. I think many people already have been developing hybrid (HTML5/JavaScript running in a native wrapper) mobile application using open source frameworks such as PhoneGap (which supports six mobile platforms). But I never thought of developing these native shells by myself. This is a good eye opener for most people like me as they would have never thought that their favorite frameworks do a "similar" thing to the above in their native wrappers. Good work indeed. I do not have to stick to a bridging framework like PhoneGap anymore.
  • Shane Church 3/27/20129:18 AM Kushil, (cross-posted from blog.effectiveui.com) Comparing this solution to one like PhoneGap (now Apache Cordova) is a matter of degree. To me, the big difference in the solutions is that Cordova is designed to allow a HTML/JavaScript developer to build a device native application. For that to happen, some of the HTML and JavaScript have to be deployed to the device itself and there remains a dependency on the Cordova JavaScript APIs for native hardware access. On the other hand, the solution I present in the article takes a cross-platform mobile web application and provides it with access to native functionality as needed. The hybrid technique that I describe in the article provides a much finer level of control over the user experience when compared to Cordova and also has the advantage of being accessible on devices that do not have the native application installed. As I stated in the article, none of these approaches are inherently better than the others and you really need to make sure that you keep the business and end user goals in the forefront when choosing a technology stack for a mobile application.
  • ALex 3/29/20121:25 AM Hi Shane, this seems like a very useful approach! Thank you. Having to write just 1 Web Application and still have access to the ressources of the device can save a lot of time. But I am wondering if this approach could also enable the webapplication to be accessible offline? What do you think?
  • Shane Church 3/29/20123:49 PM Alex, Depending on how you architect the site, you could likely make large portions of the site available offline using the HTML5 ApplicationCache interface (http://www.html5rocks.com/en/tutorials/appcache/beginner/). It really depends on how dynamic the data in the site is as to how much you could make available offline. I think it would be extremely challenging to make the entire content of anything other than a completely static site available offline. More likely, you could use the HTML5 ApplicationCache interface to speed loading of portions of your app by caching images and CSS files on the user device. I hope this helps!
  • ALex 3/30/20125:58 AM Thank you very much. I think the approach you are using and the new things that are coming like SPA on mvc 4 (http://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159) will be very powerful!
  • Mark L 4/16/20129:35 PM Hi Shane, I've just downloaded the sample code from your article, but the Android code doesn't compile as it appears to be missing a referenced library. I get this error: Project 'EffectiveUI.MSDN' is missing required library: 'C:\Users\Shane.Church\Documents\Cartegraph\httpmime-4.1.2.jar' Any chance of posting an updated sample code package that includes this library? Or am I being a numb nuts and it's already there? "
  • Shane Church 4/17/20121:28 PM Mark, The httpmime-4.1.2.jar is part of the Apache HttpComponents project at http://hc.apache.org/index.html. You can download the HttpClient 4.1.3 (GA) release binaries which include httpmime-4.1.3.jar and update the reference in Eclipse.

MSDN Magazine

Monday, December 5, 2011 2:42 PM

MSDNMagazineSmallLogoA few weeks ago, I submitted an abstract of an article on the Cartegraph mobile prototype that I worked on for EffectiveUI to MSDN Magazine.  The concept is about addressing the costs of building a mobile application for all of the rapidly proliferating mobile platforms (iPhone, iPad, Android, Windows Phone) by building the application primarily as a web application using ASP.NET MVC 3 and jQuery Mobile while still being able to leverage native hardware features like the camera, GPS, or accelerometer.  A few minutes ago I got a phone call from Dr. James McCaffrey of Microsoft Research and author of MSDN Magazine’s monthly Test Run column.  The magazine editors liked the abstract, had asked him to review my submission from a technical perspective and he had a few clarifying questions that he wanted to ask.  He really liked the idea and is recommending to them that they move forward with the idea toward publication.  He commented that the abstract was really well written and also offered some advice about how to catch the readers with the concept in the first few sentences of the article.  Hopefully, with any luck, I’ll have a byline in MSDN Magazine here in a few months.

 
By: Shane
2 Comments

Comments

  • Ryan Comingdeer 2/29/20124:21 PM I read your article today in the March MSDN issue. I love the concept of MVC 3 powering mobile apps. Today I do most of my web apps in MVC 3 and I do a ton of Mobile apps using Phonegap and JQuery Mobile. However, one very important note that you didn't mention in your article was that if you develop the app the way you suggested, Apple will NOT approve the app to the public iTunes store. You would be fine on Windows and Android but the Apple team does not allow an app to be just a browser pointing to a website. We have had this issue a number of times with PhoneGap even if the files reside in the app. For some reason, Apple wants to make sure the app is utilizing some portion of Native code before it gets approved. Very sad, but very true. Have you been able to work around this issue?
  • Shane Church 3/2/201210:00 AM Ryan, With this proof of concept application, we didn't go as far as publishing to the app store. A modification that could be made to make it pass Apple's scrutiny would be to make the login page native on the Apple platform.