Ionic Framework Inside a Visual Studio Cordova Application using Typescript Part 1

TL;DR:

How to use Ionic Framework (for hybrid application development) inside Visual Studio (for tooling) with Typescript (read: Javascript++, for a Javascript development overhaul)

What will we do in this series?

  1. Create an application from the Visual Studio Cordova Template
  2. Pack an application scaffolded by Ionic tooling into it
  3. Refactor it a little bit and use Typescript to add an Angular Service

Technical titles sometimes tend to get clumsy. When combining different technologies and approaches, one needs to fit a lot of words into the headline to let the reader know what one is talking about.

My alternative title was “Magic bullet combination for hybrid mobile application development” but that one’s only 12 characters short the current title and no one would have a clue what this is all about. Still, I believe the alternative title would have its justification. Let me briefly outline why.

1) Ionic

In my last post about Ionic, I gave some reasons why I believe Ionic (especially in combination with AngularJS) is a good take at hybrid mobile app development.

2) Visual Studio Cordova Template

Together with Visual Studio tooling for cordova applications, this feels like a huge push compared to Phonegap/Cordova development a year ago.

It is also complementary to Ionic in terms of tooling: It removes some setup headaches and even brings debugging to the table.

3) Typescript

Combining the above might seem pretty adventurous already. Why would someone like to bring Typescript into this mixture?

To be honest, I was curious. And Microsoft is supporting Typescript for their Cordova Template. And there is really not much to lose, as Typescript will go out of your way if needed. On the contrary, I will show how painless it is and what some of the benefits are.

If you want to hear about Typescript from someone a little bit (just a little) more destined to do so, listen to Anders Hejlsberg on the bottom of the Typescript homepage.

Part 1 – Tools and a first glance
Part 2 – Ionic meets Visual Studio
Part 3 – Enter Typescript

1-2-3 Magic bullet

The idea is to use Ionic (with Angular, needless to say) but use Visual Studio Cordova tooling support instead of Ionic’s own tooling.

To do so, we will use a standard Ionic application as scaffolded by

$ ionic start myApp sidemenu

Then we will put that into the Visual Studio Cordova template and let it run. All of this will happen in this article.

In the next installment, we will make some changes to the business logic inside that application and convert some of it to Typescript.

 

Install the tools

Before we’re installing Ionic, we should actually install Visual Studio Tooling Support for Apache Cordova a.k.a. Multi-Device Hybrid Apps. Why, you ask? Because it’s installing a lot of stuff (like Java JDK 7 and Ant as well as Ripple Emulator ) that you would have to install manually to get Ionic up and running.

This might take a few minutes to install. Take your time.

Or better yet, continue reading. Because now you are being confronted with two options:

  1. Install Ionic to do the scaffolding
  2. Go to Github and get the code I prepared for you

As we’re only using Ionic to scaffold the application and the library and CSS (alright, everything Ionic offers EXCEPT their tooling) you might as well go with option 2. Anyway, I am going to describe option 2. If you really want to go with option 1, make sure you check your setup against the more detailed setup instructions. Just sayin’.

Create an empty Apache Cordova Application with Typescript. Though we’re starting without Typescript, we will need it later

Blank Apache Cordova Template

You can then press F5 to run the application in Ripple Emulator. Your browser window should look something like that

RippleApplicationReady

This corresponds to commit Blank Cordova App with Typescript on Github.

There is nothing happening with AngularJS here. And this also has nothing to do with Ionic yet. Let’s change that in part 2.

 

Hope that helps
.jonas

Advertisements

4 thoughts on “Ionic Framework Inside a Visual Studio Cordova Application using Typescript Part 1

  1. Pingback: Ionic Framework Inside a Visual Studio Cordova Application using Typescript Part 2 | Developing with your head in the clouds

  2. Pingback: Ionic Framework Inside a Visual Studio Cordova Application using Typescript Part 3 | Developing with your head in the clouds

    • Hi Michael,
      Xamarin certainly is a very useful tool that’s more suitable for certain scenarios. However, Cordova, Ionic and the like are also viable options in other scenarios. For me, it’s one more tool in my belt, and it’s important to know when to use which.
      So I’m not really sure what your comment is supposed to tell me. I’m writing on Ionic, and you say there’s Xamarin. That’s like commenting on a Xamarin blog post “Check out Java” 😉

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s