Mobile Hybrid Apps with VS Code and Ionic

Visual Studio Code is a great tool for building traditional web applications using JavaScript, TypeScript, HTML/CSS, Node, as well as many of today’s modern frameworks, such as AngularJS. Because of this, it is also a great tool for building HTML5 and JavaScript based mobile hybrid applications that run on platforms such as Apache Cordova.

Ionic is a very popular (and cool!) UI framework for building these types of applications. It relies heavily on the also very popular AngularJS framework, delivering very rich UI components and behaviors through its CSS, JavaScript, and graphics libraries. If you are not familiar with Angular, I recommend starting with the Angular tutorial as described in Getting started with Angular and VS Code.

The Ionic Book does a great job walking you through the process of building your first Ionic based application. I thought it would be interesting to see how Visual Studio Code can make a great companion for writing Ionic based applications.

I’ll assume you’ve followed the tutorial and have the canonical "ToDo" application running on your Mac. If not, you can clone a version of the application that has all of the VS Code tweaks that we will discuss in this blog from here: https://github.com/chrisdias/ionic-todo-vscode.

clip_image002

Rich Code Authoring and Navigation

Out of the box, VS Code has great code editing and navigation experiences for JavaScript, HTML, CSS, SASS, JSON, and more. For example, Code provides IntelliSense and validation for well-known JSON files. Using Quick Open (Cmd+E or Cmd+P), let’s open bower.json.

JSON

Let’s navigate to bower.json using Quick Open, either by clicking on it in the Explorer or through Quick Open (Cmd+E or Cmd+P) and then typing in the first few characters of the file name. Press Enter to open the file.

clip_image004

The first thing to notice is the warning on line 3.

clip_image006

If you hover over the warning or press F8, you will see that the expected type is boolean and not a string.

clip_image008

Tip! The status bar will show the total number of errors and warnings it currently knows about. Here we can see that I have zero errors and one warning.

image

Clicking on the status will bring up the command palette with a full list of those errors and warnings, along with the offending file, line, and column, which you can select and quickly navigate to.

clip_image012

Not only can we validate the JSON, we can provide IntelliSense with rich descriptions for all of the properties and values that are valid based on the schema for this type of JSON file. Simply press Ctrl+Space to bring up the list.

clip_image014

The set of JSON schemas that VS Code understands are found in the user settings file. Open the settings by pressing Cmd+, and then search (Cmd+F) for "json.schemas".

clip_image016

Tip! Another way to quickly scan a file is by looking at an outline for the file. Press Cmd+P to bring up Quick Open, then type in “@:” to outline the contents of the file. The ":" will group the symbols by type.

clip_image018

If you need to add additional dependencies to your project you can either go to the terminal or run “npm install <package> –save-dev” or you can use VS Code to edit the “dependencies” section of bower.json or package.json directly. Let’s open package.json using Quick Open (Cmd+E). We will add a new dependency, but instead of manually typing it in, press Ctrl+Space to bring up IntelliSense. VS Code will show you a list of the popular Node packages. Start typing and if necessary the tool will query the Node Package Manager service, helping you find the package you are interested in.

clip_image020

Press Ctrl+Space on the version and we will prompt you with the current information from NPM.

clip_image022

Sass

When I first created this Ionic application, I configured it to use SASS for Style Sheets instead of plain CSS using the command “ionic setup sass”. Among other things, this command updated the index.html file to point to /css/ionic.app.css” which is derived from ./scss/ionic.app.scss.

clip_image024

This file is not too exciting right now. You can add your own SASS here and know that it will be compiled into the proper CSS file and location (more on that in below). What is interesting in this file is the reference to _variables.scss, so use Quick Open (Cmd+E) to navigate to that file.

clip_image026

The first thing to note are the inline colors. When you enter in a color either by name, hex, rgb, or through IntelliSense on a color, VS Code will provide you a nice preview. (Yes, having a color picker is on the backlog!)

clip_image028

What is more interesting is that the language services for CSS, SASS, and LESS understand the structure of the files. That means we understand that “$dark” is a variable and can be referenced elsewhere in the file. Right click on a variable and choose “Peek Definition”. This will bring up an in place view of all of the places where the variable is being used throughout the file. You can make edits in place and navigate by double clicking on the line or the file.

clip_image030

JavaScript

When I ran the “ionic setup sass” command in this workspace not only did it update our HTML file it also created a gulpfile.js with a set of tasks to watch changes to any .SCSS files and compile them to .CSS files.

clip_image031

Visual Studio Code uses the TypeScript compiler as the language service for JavaScript files because all JavaScript is valid TypeScript and we can take advantage of the power of the compiler to provide a richer experience.

At the top of our file we see a “triple slash reference” to “typings/tsd.d.ts”. We use /// references to give the editor hints to the shape of libraries we are programming against. In our gulp file, we’re using gulp, gulp-util, shelljs, and more. The tsd.d.ts file has references to all of the TypeScript definition files for these libraries so we only need to make one reference from our sources.

clip_image033

With this meta-data in hand, we can provide rich IntelliSense and validation for the libraries you are programming against.

clip_image035

A large number of TypeScript definition files exist for the popular frameworks in use today. A project called DefinitelyTyped curates these on GitHub along with the TypeScript Definition Manager. To download a new definition, run the following command:

tsd query <projectname> –action install –save

This will query the repository for the <projectname> TypeScript definition, download it, and install it to the path specified in the “tsd.json” found in the root of our workspace. The tsd.json also tracks the installed definitions so they can be restored later (see “tsd help” for details). The –save option tells tsd to add the /// reference to tsd.d.ts.

Angular

The Ionic Framework embraces the AngularJS framework and VS Code makes writing Angular applications even easier. Angular directives are markers on DOM elements that tell Angular to attach behavior to or transform the elements.

VS Code has built in support for Angular directives in IntelliSense within HTML tags. For example, open index.html and press Ctrl+Space on the button tag, and search for “ng ”.

clip_image037

In our Angular code we can take advantage of the Angular TypeScript definition file for IntelliSense against the Angular module.

clip_image039

We also get IntelliSense for Angular’s built in Services such as $http, $controller, $window, and more.

clip_image041

Looking forward, we are investigating support for user defined Angular services as well as markup within HTML.

Task Running

Visual Studio Code provides a lightweight service that makes it easy to integrate your existing task running framework (gulp for example) into the tool. Code does not try to replace your task runner. Instead, it strives to provide keyboard access to your build and test tasks and to surface errors and warnings in the editor, where they originated.

If a gulp file is detected in the root of the workspace, VS Code will automatically surface the tasks found within the file to the Command Palette. In our project we have a gulpfile.js that was created when we initialized SASS. By default, the Ionic CLI creates a handful of tasks for watching files and compiling SASS to CSS. I’ve added a few more tasks to call the Ionic CLI directly to launch the application in the browser (serve), the emulator (run), and as well as a task to build (build) the application.

clip_image042

Press Shift+Cmd+P to bring up the Command Palette and search for and select “Tasks: Run Task”. All of the tasks from the gulp file are now available to you from directly within VS Code.

clip_image044

I can attach key bindings for Build and Test by configuring the task runner. Open the Command Palette (Shift+Cmd+P) and search for “Tasks: Configure Task Runner” which will open ./.settings/tasks.json with the following content.

image

This tells Code that our task runner is gulp. I’ve “overridden” the “build ios” task to say that it is our default Build command, meaning it is attached to the key combination Shift+Cmd+B. Because “showOutput” is “true, when I execute the command the Output pane opens with the Tasks channel selected. File references are automatically detected and shown as links, so I can quickly navigate to that file directly from the editor.

clip_image047

AutoSave

Visual Studio Code has its roots in browser based tools where AutoSave is common, as you are never sure when the user will navigate away from the tool. When developing web applications, having a fast “edit-refresh” cycle is very productive, and AutoSave enables that when running locally. Make changes and reload the browser, or better yet use browsersync to reload the browser automatically.

You can enable AutoSave in VS Code on the File Menu.

clip_image048

By combining AutoSave with Ionic’s “live reload”, which is on by default when you run the “serve” or “run” tasks, whenever you make changes those changes will automatically be reflected in the running application. Let’s run the “Run” task and make some changes to /www/index.html. We will change the style of the bar from “bar-dark” to “bar-royal” and after a moment, we will see our app updated right in the emulator.

clip_image050

In the status bar, between the git status and the errors and warnings status, you will see a spinning line. This indicates that a task is running. To stop the “Run” task, simply press Shift+Cmd+X.

Conclusion

In this post, we’ve seen all of the ways that you can use Visual Studio Code to create mobile hybrid applications using the Ionic Framework and Cordova. You can find more documentation on VS Code at http://code.visualstudio.com. Let us know what you think!

Thanks!

Chris