With more and more developers looking to get into mobile, it would make sense that they would want to use the tooling of their choice. Visual Studio dates back to April 1995 (Version 4.0), with the most current release being Visual Studio 2013, and it shows no signs of slowing down. But the explosion of mobile apps leaves several questions for developers using Visual Studio. What are my options for developing mobile apps in general? How can I develop for iOS without a Mac? How can I develop for Android without learning Java? Maybe, even more importantly, is, “How do I develop for all three mobile platforms using a single-code base with a shared user interface in Visual Studio?” I will address all of these questions in this article.
Web (Part 1) – Responsive Design
Building mobile apps for the web uses the same technologies that all web developers have come to know and love. These technologies typically include HTML5,
As the website is viewed on a smaller screen, you will notice a change in appearance of the content. Upon first launch the website contains all the necessary layout as it has detected the screen size is large enough to fit everything as shown in Figure 3.
As we make the browser smaller as shown in Figure 4, then you will notice the layout changes and we now have a side-panel in the upper right hand corner that contains links to the pages that we no longer have room for on a mobile browser such as the “Home”, “About” and “Contact” pages along with a few others.
By examining the different master pages and included references you can make your own ASP.NET project use responsive web design. For further reading, please read this article by Katrien De Graeve.
Web – (Part 2) Mobile Optimized Web Pages
You could also take this same Web Forms app and add specific views or pages that will only be shown if it detects that a mobile browser is being used. For example, if I added a
Default.Mobile.aspx file to our current project and added a simple h2 tag with the words “Mobile Browser” as shown below:
<form id="form1" runat="server">
Then when this web site is served to mobile devices, then it would render the
Default.Mobile.aspx file based on the user agent as shown in Figure 5.
By using the Developer Tools found in IE11 (or Chrome), we can switch to the emulation tab and use the Windows Phone Browser profile to test our app. As you can see, the proper text is being displayed. If we switch the emulation type back to a desktop browser then the
Default.aspx file will render.
There are obvious advantages and disadvantages to using the web to build a mobile app within Visual Studio. One of the biggest advantages is that you can reuse your user interface and core logic. You also don’t have to get approval from any app store to deploy it. The disadvantage is that you are limited in terms of device APIs that you may want to work with and have no store discoverability. You are also limited to the capabilities of the mobile browser the user is using. If your user is using a modern phone, then HTML5 contains certainly capabilities like geolocation, but it is still missing many others.
If you choose to work with web, our UI for ASP.NET AJAX contains mobile support and responsiveness with our Page Layout Framework and our responsive capabilities found in most controls.
Hybrid apps are a mix between web and native apps. They tend to combine the best of both worlds into a small package that can be deployed via app stores and have access to some device specific APIs. They use the same technologies as a standard web app but run within a hybrid container such as Apache Cordova. Several great tools have been built to facilitate the ease of development of Hybrid Apps. One of those tools is Telerik’s own AppBuilder, which includes a plug-in for Visual Studio. Once the plug-in is installed, if you navigate to Telerik-> AppBuilder then you will see a new project type with 4 project templates as shown in Figure 6.
index.html is already linked to the proper files and style sheets and you have a “F5″ experience out of the box, which will bring load the built-in simulator as shown in Figure 8.
While inside of the simulator, we could do things such as change the skin to see what our app looks like in various iOS, Android and Windows Phone devices. We can also adjust local storage, geolocation and manipulate network connections, to list just a few.
With a quick look at the samples available, you can quickly add features from Apache Cordova such as the device camera, accelerometer, compass and much more.
Finally, when our app is ready to be published, we can simply select “AppBuilder” -> “Publish <App Name> from the context menu and have the option to push the app to Telerik AppManager which will allow you to publish it to your private app store or for the public iOS App Store and Google Play Store.
Using this approach, you have access to write and publish iOS, Android and Windows Phone apps within Visual Studio and share the same user interface and core logic with some minor exceptions. The only thing to keep in mind with hybrid applications is that they limited by the speed and performance of the target device. Hybrid apps are great for enterprises and line of business apps, but will not offer the speed that someone creating an interactive mobile game may want.
Native apps are written in the platform-specific SDKs, have access to all the device APIs and can use the development tools provided directly from the vendor. In the case of Visual Studio, they support building Windows and Windows Phone apps. If you would like to build a native Android application, then you would need to install Eclipse or Android Studio and get up to speed with XML and Java. The same goes for a native iOS app, where you will need a Mac and XCode as well as an understanding of Objective-C. While managing all of these SDKs may seem cumbersome, sometimes building a native app just makes sense. Let’s take a look now at the native apps that are supported by Visual Studio.
With the recent release of Visual Studio 2013 RC2, you will see a new set of templates under the “Store Apps” as shown in Figure 9.
It is divided into three sections:
- Universal Apps – Contain templates for Windows and Windows Phone that uses the Windows Runtime and shared code.
- Windows Apps – Are apps designed specifically for Windows 8.x and uses the Windows Runtime as we have seen before.
- Windows Phone Apps – Contains templates to build Windows Phone 8.1 apps using either the Windows Runtime or Silverlight (which was used in Windows Phone 7 and 8).
It is worth noting that other languages are supported, but we will take a look at a XAML and Visual C# Universal app.
If we select the “Hub App” then it will create three projects for us. A Windows 8.1 app, Windows Phone 8.1 app and a Share Project that contains Images, Helper Classes, Data Model, Localization, an
App.xaml file and an
App.xaml.cs file that will provide application-specific behavior for whichever app is running.
Since this is a native app, you will find that it uses a shared data source that can be found in the SharedProject under DataModel-> SampleData.json. It also uses a variety of controls and layouts found only in Windows 8.1 and Windows Phone 8.1 such as the HubSection, ListView and Frame. If we run this application we can use the rich built-in tooling that Microsoft provides as shown in Figure 10, which demonstrates a Windows 8.1 and Windows Phone 8.1 Emulator running side by side.
One thing to keep in mind about native apps supported by Microsoft is that they are limited to Windows 8.x and Windows Phone 8.x if you are using Visual Studio 2013. You will need to downgrade to Visual Studio 2012 to create a Windows Phone 7.5 app.
If you decide that a native is the right solution for your app, then you may want to check out our native controls forTelerik UI for Windows 8 and Telerik UI for Windows Phone. We currently support all Windows 8.1 apps and Windows Phone 8.x (Silverlight).
Xamarin allows you to build apps for iOS, Android and Windows with .NET and C#. They have a Visual Studio extension available at the Business and Enterprise level that allows you to easily construct an app for the various platforms. A sample of an Android app inside Visual Studio 2013 is shown in Figure 11.
The difference between Xamarin and other cross-platform frameworks is that your Xamarin app is compiled to a native binary, not interpreted. Native compilation, as I said earlier, is great for apps that demand fast screen refreshes such as gaming or complex data-visualization such as a chart that needs to plot thousands of points.
Keep in mind that if you decide to create an iOS application on a Windows Machine using Visual Studio and Xamarin, you will still need a Mac as a build host.
Besides using .NET, Xamarin allows third-party libraries to be added to your project, which, for example, makes it easy to use Telerik’s Backend Services and Analytics as shown in this post. They also have a component store, with a variety of popular libraries ready to integrate into your app.