Cloud Computing

Menu

Next steps sometimes can be cumbersome. Yesterday, I was trying to deploy a node.js application with express.js to an Azure Website. I was following this tutorial. I figured I’d never make it on first attempt.

Much to my surprise, I did in just six minutes.

On a personal note, I’d like to add that publishing to Azure Websites using git (and getting this really useful deployment history) is something that makes me happy on every single deployment.

So today I was ready for the next step. I am usually working with Visual Studio, so I wanted Node.js Tools for Visual Studio. This give me a lot of benefit out of the box that I’m not even going to mention here, but Scott Hanselman was pretty excited about it some time ago.

So after installing I created a blank Node.js app. To be precise, it was this option.

I was not using any of the Azure variants listed here, as I did not need the deployment scripts they add in this case. For a difference overview of these project types, check out the “Converting to an Azure project type” section on their deployment wiki page.

After the project wizard did it’s job, I created a new commit, created an azure website, added its git endpoint as remote, and pushed. After yesterday’s experience, I figured it would work in about 30 seconds.

Much to my surprise, it didn’t. Not even in six minutes.

Turns out there were two problems.

Problem 1

The project wizard creates a .gitignore file. This seems to be a variation of the standard Visual Studio .gitignore file, which excludes everything beneath bin folders. However, for some reason the project template uses a www file instead of server.js. Guess its path? Right, bin/www. Which means it gets excluded, so I had to make sure to explicitly add it.

Problem 2

Are we good now? Not quite. Contrary to the tutorial I followed yesterday, my “real code” does not live in the root of my git repo. Instead, that’s where the .sln file lives, the project is one level deeper.

Which means, Azure will get confused about the nature of your project (won’t recognize it as node.js application) and fail more or less miserably. It just didn’t tell me, as deployment history showed green.

The second last paragraph on this Kudu help site brought me on the right track, as well as a comment on the first tutorial mentioned above: it is necessary to tell Azure website to look one level deeper. The most flexible way of doing so is an app setting entry in the Azure Management Portal itself, under the Configure tab of your website.

The key needs to be Project, and the value has to be <projectfolder>.
Notice the dot at the end. Like so:

Saved the settings, headed over to the deployment history and forced a redeploy of my last commit.

We need to refactor that into a service if we want to access these objects inside PlaylistCtrl (singular, detail view). We need to create a new Typescript file called services.ts inside /scripts/app.

Optional, but good stuff: To get Intellisense support (one of the benefits of working with Typescript), right click on angular.js inside /scripts folder and hit “Search for Typescript Typings”. In the list that NuGet Manager shows, select angularjs.TypeScript.DefinitelyTyped and click Install. This will include a set of *.d.ts files inside /scripts/typings

Now when you start typing “angular.mod” inside a Typscript file (such as services.ts) you will get Intellisense completion.

Good stuff, as I said. Remember to include services.js inside index.html.

And now for some structure

Apparently, we’re dealing with playlists here. Let’s create a model for that

In case you’re wondering what this is doing exactly, have a look at the Typescript handbook section for classes and optionally run this code through the Typescript playground to see the resulting Javascript.
Next is a small service that holds our dummy playlist data and includes two methods (sorry, functions) to return all playlists or find a single playlist by id.

Not on my watch

inside the list? Well, since this.playlists has to be an array of Playlist objects, the Typescript compiler can check for a number of things:

Object type inside the array

Number and type of constructor parameters for each object

Make sure Playlist is called as constructor, not as function

All of these things could happen accidentally with plain Javascript, and I think it’s a good thing Typescript can help us here.

I have to admit that my implementation of find(id) probably leaves some room for improvement. I am sort of cheating on the indexing id here, but for the sake of clarity … Anyway, we have written this service and we need to tell Angular about it so we can get it via dependency injection.

We can now use this service to refactor our already existing PlaylistsController. To do that, I copied the contents of controllers.js, deleted the file, recreated it as Typescript file (controllers.ts) and pasted the content back in. Then I added a modification to PlaylistsCtrl to define the type of playlistSvc I want injected:

Now, when we navigate into the detail view for a playlist, we are presented with its name. As we continue to add members to the Playlist class, we can get access to all these members through the same mechanism.

To get the complete code for this step, refer to commit #3 on the github repository: “Refactoring playlists into service and adding type definitions”

Now it’s time to add the Ionic-Angular bundle to our little application. The easiest way to get all you need is via NuGet Package Manager: Open it and search for “Ionic”. Then hit install, which will give you a bunch of scripts.

Open index.html and then, inside your script folder, locate ionic-bundle.js and drag it into your index.html to create a script reference. Do the same for ionic.css inside the content folder.

By doing so we prepared our Visual Studio Cordova application to host a typical Ionic application generated by Ionic tooling

$ ionic start myApp sidemenu

You can do that yourself now, if you’ve got Ionic up and running. The idea would be to run the aforementioned command – but we will only use content from www/js and www/templates to recreate the application. I will describe that process now. You can always get the code from GitHub if you prefer.

So – from file explorer, drag www/templates into your Visual Studio Solution so that it ends up parallel to the existing scripts folder. We want to reuse this completely.

Next, create an “app” folder inside the scripts folder. This is where our own application logic will live. This step is optional but it helps structuring as NuGet will install the majority of its javascript package contents into the scripts folder. To keep things consistent, also move “index.ts” from /scripts into /scripts/app and update the corresponding reference inside index.html. Notice that the file we moved has extension “.ts” while the reference says “.js”. This is because it’s a typescript file, and Visual Studio will compile it to Javascript later. It’s not there yet, as is cordova.js.

Last steps

We’re only two steps away from our goal! We just need to add two script files and modify index.html once more.

First, we need to add app.js and controller.js from www/js into our /scripts/app folder. This will give us the navigation setup as well as rudimentary controller support.

Running Ionic application inside Visual Studio

Now just hit F5 to run the application. Ripple emulator will fire up and show you something like this.

Play with it for a little bit. Watch the side menu appear and how it allows you to jump to a different application part. But – see what happens when you click on one of these playlist? You’re being sent to a detail view where there’s no detail presented. No matter which playlist you select, its name is never shown.

Part 3 will change that by introducing an Angular Service – written in Typescript.

So far, this corresponds to commit #2 on the github repository: “Make Ionic sample application run”

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?

Create an application from the Visual Studio Cordova Template

Pack an application scaffolded by Ionic tooling into it

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

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.

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:

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

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

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.

Now. One might argue that delivering an AngularJS application as a Phonegap package might not be the best idea in terms of performance. Why? Well, what is amongst the worst thing you can do to a browser? DOM Operations and access to computed DOM Properties. Because they are slow.

And what does a clientside MV* Framework like Angular do a lot? DOM Operations.

So far, so sub-optimal. There is a path to more performance, and it basically means to optimize you AngularJS application. I don’t want to go into detail here, because now finally I want to get to the point about Ionic: This very promising framework is taking quite a lot of these troubles off of your shoulders. Particularly, I like these aspects about Ionic:

They provide us with a set of directives to facilitate cross-mobile-phone development

And of course with HTML structure and css styling to iron out the minuscule differences in browser engines

Sounds like a good deal to me. They even provide tooling on top of cordova to help scaffolding an application.

Bespoke tooling does not, at the moment, support Windows Phone. Still I wanted to find out how an Ionic application looks/behaves like on a Windows Phone – the most important reason being the absence of Android and iOS devices from my personal array of handhelds.

After setting up Ionic (read carefully) and scaffolding out an Android application (WP not supported, remember?) I dragged the contents of the www folder into my public dropbox folder, sent me a link to it and opened it in my Windows Phone browser.

As long as the application does not use phonegap specific features, we can debug it in a normal browser without changes

As a quick shout out: just had that problem where I cloned an ASP.NET MVC application that is using SSL from a git repository into my freshly set up development machine, opened it in Visual Studio 2013, let it run and – nothing happened.

Except for the browser telling me that nothing happened because the site cannot be opened. Very helpful indeed.

Quickly checked IIS Express in the toolbar – it says it is running and serving the site, so that’s fine.

Checked bindings in applicationhost.config and compared them to my previous settings – that’s not it.

Found a post indicating that for many people after the default VS 2013 installation, IIS Express is screwed up. So I did a repair install of IIS Express 8.

As mentioned in Part 1 (Javascript), Tekaris is currently undergoing recertification for our Microsoft Gold Partner Status. As a part of this, I was collecting topics addressed by possible questions and thought it might be helpful for others.

This post is targeting HTML5 and CSS3 aspects of the exam. See Part 1 for an overview of Javascript topics.

To get an overview, I have compiled a list of topics. Some are only listed by name, others have links which you can follow, others are even detailed with a few words.