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,
JavaScript and CSS3. When developing these apps from within Visual Studio, you will typically start with a New ASP.NET project template as shown in Figure 1.
Figure 1 shows an example of a new ASP.NET project from within Visual Studio 2013.
One general approach used throughout the industry is responsive web design. With this approach, the layout and content is scaled to adapt to various screen sizes. A great sample of this is the Web Forms project template found in Visual Studio 2013 as it contains two master pages. One is designed for desktop screen and one is designed for mobile. The site master contains references to Bootstrap that pulls in the necessary JavaScript and CSS files. If you create a new ASP.NET Web Form project, then you will see Bootstrap is already installed in the NuGet Packages section by default as shown in Figure 2.
Figure 2 Project Structure for a new ASP.NET Web Forms application.
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.
Figure 3 shows an example of an ASP.NET Web Forms app displayed in a full-screen desktop browser.
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.
Figure 4 shows an example of responsive layout that occurs as our browser is made smaller.
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:
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.
Figure 5 shows an example of mobile optimized web pages in ASP.NET Web Forms.
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 App
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.
Figure 6 Build Hybrid Apps in Visual Studio with Telerik’s AppBuilder.
All of the project templates use Apache Cordova as the hybrid container, but others contain additional JavaScript libraries like jQuery Mobile or Kendo UI DataViz / Mobile. We will select a Kendo UI Mobile project and take a look at the default project structure found in Figure 7.
Figure 7 Kendo UI Mobile Hybrid App inside of Visual Studio with Telerik’s AppBuilder.
After examining the file structure, there are a few files that I’d like to review. You will see that the directory structure contains a place for Cordova Plugins as well as the necessary JavaScript files for Cordova and Kendo UI Mobile. The 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.
Figure 8 Telerik Platform Built-in Simulator inside of Visual Studio.
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 App
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.
Figure 9 Native Templates provided by Microsoft for Windows and Windows Phone native apps.
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.
Figure 10 Native Windows and Windows Phone apps in the simulator provided by Microsoft.
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 for Telerik 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
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.
Figure 11 Xamarin.Android app being built with Visual Studio 2013.
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.
Conclusion
We’ve been on a long ride today and discovered that you have a vast variety of options to use to create mobile apps within Visual Studio. While I’ve listed out 5 ways to build your mobile app, it eventually comes down to choosing the right technology. Does your team have a strong background with HTML, CSS and JavaScript? If so, you have options for Web or Hybrid. If you need high performing apps or lower level hardware access, then you might want to build a native app. The one thing to keep in mind is that there is no such thing as a one-size fits all solution to mobile app development. You and your team need to carefully examine your requirements before making a decision to go web, hybrid or native for your next mobile app.
If you have any questions or comments, then please leave them below.