Category Archives for Mobile Development

How to: Ionic in Visual Studio

Mobile devices are taking over the world. If you are a web developer, you need to be prepared for a world where people spend the majority of their computing time on mobile devices. This doesn’t mean “the web is dead”, just that you need to be able to write code that works on mobile devices. The primary way to do this is by writing responsive web sites. However, sometimes you want to be on your user’s home screen. For that, you need to build an app. While learning the native platforms is a possibility, there’s a significant learning curve. Fortunately, there are hybrid applications.

What’s a hybrid application?

A hybrid application is a mobile app (it sells in the app store) that runs within an internal web browser. Hybrid apps use standard web technologies like HTML, CSS, and JavaScript. For the average user, hybrid apps are indistinguishable from standard native apps. There are two main advantages. First, you can use one code base for all three platforms. Second, you use existing web skills to build that code base.

My Path to Hybrid Development

I spend most of my time developing ASP.NET applications, but I’ve been experimenting with mobile technologies for the past year. I’ve built native apps in Android and Windows Mobile. I’ve played around with Swift. I tried to use Xamarin Forms (and hit the paywall at File -> New). The one technology that’s been on my list that I haven’t gotten around to until recently, is hybrid.

A big part of why hybrid technologies got kicked to the back of my list is because of the ongoing debate between hybrid and native. Hybrid apps got off to a lousy start. They were slow and clunky compared to their native counterparts. Turns out DOM manipulation is slow, especially on a phone with 128mb of ram and a single core processor.

In recent years, a combination of improving web browsers and Moore’s law have fixed this issue. Unless you are building a video game, hybrid apps are fast enough.

Another barrier for hybrid technologies is that each native environment has it’s own design language. Each of the native environments has a standard list of controls and design guidelines that help you fall into the pit of success. You don’t have to work hard to make something that looks professional.

When building my Windows and Android apps, I went from zero knowledge to a simple, but decent looking app in a few days. I used the standard controls with some minor color tweaks and had something that looked like it belonged.

Most hybrid environments, like Apache Cordova, don’t have this built in design. You start with a blank canvas. This gives you lots of room to shoot yourself in the foot.

In the web world, we solved this problem with front-end frameworks. You can use Bootstrap, Foundation, or a host of other frameworks to give your app a default design you can override later. This has made it a lot easier for developers to build professional looking web applications.

Fortunately, people who build hybrid applications caught on and built their own frameworks. While there’s quite a few of these, the one I’m going to cover here is Ionic.

What is Ionic?

Ionic is a hybrid application framework that uses Angular.js to build cross platform hybrid apps. It sits on top of Apache Cordova and provides a standard set of controls for building hybrid applications. Think of Ionic as Bootstrap (+5) for hybrid applications. It gives you starting point and way of doing things that speed up development.

Why Ionic?

There are lots of advantages to using Ionic, but ultimately, I care about building great applications as fast as possible. Before learning about Ionic, I had recently downloaded an app. I was impressed with it’s design and functionality. When I first heard about Ionic, I noticed that they had a showcase of apps built using the platform. In that showcase, I saw the app I recently downloaded. At that point I was convinced. If an independent developer can build an award winning application that rates 4+ stars in both app stores, the technology that created it is worth a look.

Another reason that I’ve decided to try hybrid development is that Microsoft is embracing hybrid. Cordova tools for Visual Studio is now built into Visual Studio 2015. Microsoft is also building their own set of emulators to aid in hybrid development. This means that people that are using Microsoft technologies can use familiar tools to build mobile applications.

Overall, I think this is a big win for ASP.NET Developers.

How to get started?

Install Node.js

There are two paths to using Ionic with Visual Studio, but both of them start with some basic setup. Like many front end frameworks, Ionic uses the Node Package Manager (npm) to run commands. NPM is basically NuGet for Node.js. You can find Node.js here.

Install NPM Packages

Once Node.js is installed, fire up a command shell (in admin mode) and enter the following command:

npm install -g cordova ionic

This command installs both Apache Cordova and Ionic.

Now that you have the basic tools setup, there are two ways to use Ionic with Visual Studio. The first option is to use Visual Studio. In this case, we’re going to use Visual Studio 2015.

Visual Studio 2015

To develop with Ionic on Visual Studio 2015, do the following:

Install Tools for Apache Cordova

These come with the default installer. They’re listed under “Cross Platform Mobile Development”. If you need to add the tools in after the fact, you can just run the installer again.

Use the Ionic Template

The makers of Ionic have published some handy templates for you to use in Visual Studio. In the new project screen, go to Online and search for “Ionic”. You should then see the Ionic Tabs template. This template will set you up with a basic Ionic App to check out.

Ionic Template

Run Your App

To run your app, select either select an emulator and hit “Run”. The easiest emulator to use is the Ripple Emulator, which brings up your Ionic app in your web browser.

Ionic in Ripple

Visual Studio Code

Another way to get off the ground with Ionic is to use Visual Studio Code. If you haven’t checked out Code yet, you really need to. It’s a lightweight code editor that’s fast and optimized for ASP.NET and Node.js development. If you want to use Code to do your Ionic development, do the following:

Install Visual Studio Code

Download code here and follow the installation instructions for your platform.

To add the “code” command to your command line on a Mac:

Start up Terminal

Type cd ~/ to go to your home folder

Type touch .bash_profile to create a bash profile file.

Edit .bash_profile with your favorite editor (You can just type open -e .bash_profile to open it in TextEdit.)

Add the line code () { VSCODE_CWD="$PWD" open -n -b "com.microsoft.VSCode" --args $* ;}

Type . .bash_profile to reload .bash_profile and update any functions you add.

Create an Ionic Project

Open up a command window and browse to the folder where you want your project.

To start an Ionic project type ionic start appname template.
For “appname”, substitute your app name. For “template”, Ionic comes with three basic templates. Try the “tabs” template for now. (Additional Info on starting an Ionic App)
This command builds your Ionic app using your chosen template.

To Edit Your Ionic Project

To open up VS Code, you can use the UI, or you can just type code . in your ionic project folder.

To Run Your Ionic Project

Type the command ionic serve
This will open up your Ionic project in a web browser. You can also use emulators to run your Ionic app. (Instructions here)

Additional Resources

Ionic Framework
Visual Studio Code
Node.js
Ionic Showcase

Navigating the Mobile Development Landscape – September 2014

Smartphone and tablet adoption has exploded in the past five years. This trend has encouraged me to start exploring mobile development technologies. I found that there are lots of ways to build apps for mobile devices. Several mobile development technologies leverage my current web development skills. I’m going to cover the four primary ways to build mobile applications.

1. Responsive Design

The easiest way for a web developer to get started in mobile development is to build mobile-friendly web applications. You can build web applications that work on most screens by applying CSS tactics like media queries and relative sizing. Front end frameworks like Bootstrap and Foundation make it easy to build responsive web apps. Responsive design should be the default for any new web application. You never know when someone is going to try to browse your app with their Internet enabled toaster.

Responsive design is great because it has the flattest learning curve for a web developer. The other huge advantage is that you don’t need to build a separate app for each platform.

Unfortunately, building a mobile web app means you have to design for the lowest common denominator. You don’t get access to the platform specific features like a native app. You also have to deal with network issues and browser quirks. Additionally, most people on mobile devices prefer to use apps instead of their web browser.

Links:
http://getbootstrap.com/
http://foundation.zurb.com/

2. Hybrid Application

Hybrid applications are another way to use existing web skills to build mobile apps. You develop hybrid apps using standard web technologies like CSS, JS, and HTML5. They have some access to platform specific features via JavaScript apis. Unlike pure web applications, hybrid apps can be sold in app stores alongside native apps.

At first glance, hybrid development sounds like a great deal. A single code base that can be used on all the major mobile platforms and still have access to platform specific functionality. The people who make hybrid application platforms claim that hybrid apps compose the majority of top apps in the app store.

Unfortunately, there are serious flaws to the hybrid development model. The first is that hybrid apps are much slower than their native counterparts. Performance is better than a few years ago, but hybrid apps are never going to be as performant as native apps. Additionally, hybrid apps don’t behave like other native apps. There are lots of transition effects and other native behaviors that are hard to replicate in a hybrid app.

Links:
http://www.telerik.com/appbuilder
http://cordova.apache.org/
http://phonegap.com/

3. Xamarin

The Xamarin platform offers the ability to build cross platform mobile applications using C#. With Xamarin, you build the user interface for each platform using C# wrappers for native libraries. You can then use shared libraries for all the core business functionality. Xamarin claims that you can have up to 95% code reuse on their platform.

Xamarin is great for .NET developers who want to build mobile apps because using tools they are familiar with. You can get near native performance and significant code reuse between platforms.

Xamarin is not perfect though. Xamarin is expensive and it comes with a steep learning curve. Not only do you need to learn the APIs for each mobile platform, you also need to learn Xamarin.

Links:
http://xamarin.com/
http://www.whitneyland.com/2013/05/why-i-dont-recommend-xamarin-for-mobile-development.html

4. Native Applications

The final, and most obvious option, is to build separate apps for each native platform you wish to support. While its inconvenient to have to build separate apps, going 100% native has some advantages. First, each app will have a native look and feel without having to resort to outside libraries. Second, pure native development offers the best performance. Finally, all the major native app platforms have great references and development resources. There will be better support and more open source code for native developers than any of the hybrid platforms.

Links:
http://developer.windows.com/en-us
https://developer.android.com/index.html
https://developer.apple.com/devcenter/ios/index.action

Conclusion

I’ve spent a lot of time reading about different mobile development options. Additionally, I watched demos of several different mobile development plaforms. (Specifically, native Android, Window, and iOS developement, several Xamarin demos, and Telerik’s App Builder.) Based on that experience, I’m going to focus on mobile web applications and native development. Mobile web applications leverage my current skills as a web developer. I also think the mobile web option will become more popular as mobile web browsers get better. Hybrid development looks promising, but based on what I’ve learned, it’s a “good enough” solution at best. Native development provides the best user experience and is a prerequisite to “combination” platforms like Xamarin. Overall, there’s no shortage of ways to build a mobile app.