Visual Studio TACO Update 8 and new Ionic templates

Last week we announced many new Visual Studio updates, including Ionic support in the Cordova Extension for Visual Studio Code, and Visual Studio Tools for Apache Cordova (TACO) Update 8. In this post, I’ll highlight the main changes included in the Visual Studio TACO Update 8 release – which you already have If you installed Visual Studio 2015 Update 2!

Along with the new VS TACO update, we’ll also discuss some new templates available to you now, using the very popular Ionic framework.

In this TACO release we focused on two things:

  • Providing greater control over your development environment.
  • Providing prescriptive guidance for plugins and templates.

For a complete list of the changes in this release, see the VS TACO Update 8 release notes.

Take command of your environment

Open source technologies can sometimes move at a breakneck speed. For example, each month for the past year there’s been an update to at least one component of the Cordova tool chain (check out the Cordova blog). For some, that kind of innovation can be exciting and open new worlds of possibilities. For others, the pace of updates can be dizzying and introduce an element of unpredictability. With this release, we introduce features to help this second group enforce tighter control over the development environment.

In updates 7 and 8, we introduced “sandboxing” of two core 3rd party dependencies: Node.JS and the Node Package Manager (NPM). These tools are essential to make Cordova work. To ensure they work reliably, we now automatically install private versions of these tools with TACO. This guarantees that when you build with TACO, you’re building with a reliable, well-tested version of Node and NPM.

Of course, if you prefer to use the global copy of Node & NPM, then there’s a configuration setting that lets you turn off this sandboxing support.

What exactly is sandboxing doing?

When you use the sandboxed version of NPM and Node, Visual Studio:

  • Downloads copies of Node 0.12.9 and NPM 2.14.9
  • Places those copies into the local AppData folder (currently these are downloaded into %APPDATA%\Microsoft\VisualStudio\MDA\vs-npm)

… then, when Visual Studio builds a Cordova project or downloads a Cordova plugin, it uses these sandboxed versions of Node and NPM. This approach doesn’t prevent you from using a different version of Node or NPM from the command line. When you use Cordova or other Node-based tools from the command line, you’ll still be using the same globally installed versions of Node & NPM that you’d use today. You can also rest assured knowing that your Visual Studio project and files will not be made incompatible with other versions of Node/NPM when use use this feature.

One final note: These sandboxed versions are not used to manage your packages in Visual Studio – for those you would configure the External Web Tools which are already using their own private copies of Node and NPM.

Play nice with network proxies

Another important change in this release is the addition of automatic proxy configuration. If you have a network proxy configured on your computer (common in many corporate networks), the Cordova tooling will pick up that configuration and automatically apply it when working with NPM.

The proxy settings used are the same ones you would set at the system level in Windows, in the Proxy system settings of Windows 10 (or network settings within Internet Explorer). The proxy will be used any time NPM is used during a build in the Cordova tooling, or to acquire plugins. Again, this proxy is not the same as the one used to manage dependencies in Visual Studio and managed via the External Web Tools settings.

Head “True North” with the right plugins

When building out almost any app with Cordova, you’ll be using plugins to get at native device capabilities and services. Visual Studio provides a list of suggested core plugins when you open the Cordova config.xml file in a Cordova project. In this release we’re making our largest update yet. You may be asking “How do we decide what makes a Core plugin?” – good question! A plugin is included in this list when:

  • Enterprises commonly use the plug-in to access device features, improve security, store data, etc.
  • The plugin passes validation tests to ensure mainline scenarios work for Android, iOS, and Windows platforms (where the platform enables it).

Here are the new plugins added to the Core list in this release, and where you can learn more about them:

  • Azure Mobile Apps
    This library enables you to develop scalable and secure cordova mobile apps hosted in Microsoft Azure. You can incorporate structured storage, user authentication and push notifications in minutes. For more information, check out http://azure.microsoft.com.
  • Azure Mobile Engagement
    This plugin integrates the Azure Mobile Engagement (AZME) SDK into your Cordova Application. It supports both reporting and push features. For more information, see the Azure Mobile Engagement documentation.
  • Bluetooth LE
    Use the Bluetooth Low Energy plugin to connect your Cordova app to new Bluetooth devices like heart rate monitors, thermometers, etc…
  • CodePush
    This plugin provides client-side integration for the CodePush service, allowing you to easily add a dynamic update experience to your Cordova app(s).
  • HockeyApp
    This plugin exposes the HockeyApp SDK for iOS and Android. HockeyApp brings Mobile DevOps to your apps with beta distribution, crash reporting, user metrics, feedback, and powerful workflow integrations. Learn more at http://www.hockeyapp.net.

Beyond getting started: get the New Ionic templates & samples

We’ve heard from many developers that you want design and architectural guidance when getting started. When getting started there can be a lot to decide – what design patterns will I use? What UI components can I choose from? How do I build out multi-page navigation?

To help you quickly get into prototyping and building your ideas, we’re providing templates and samples using the Ionic framework.

Ionic is a framework built on top of Cordova and optimized for mobile app development using web technology. Beyond providing structure and guidance for your apps, it gives you:

  • Controls that are optimized for performance on mobile devices.
  • A UI framework that adapts to the look-and-feel of the native platform (e.g. tabs on bottom for iOS, on top for Android).
  • Web components that abstract away the HTML and CSS so that you can focus on business logic.
  • A vibrant community of developers working with Ionic every day to build out Cordova-based apps.

Learn more about Ionic in their excellent documentation site.

You can download the Ionic templates and an Ionic + Azure sample app from the Visual Studio Gallery, right now:

Ionic Project Templates for Visual Studio

The home screen for the Ionic Tabs template A set of three templates, providing examples of using the Ionic framework with features like tab navigation, animation, and common controls.The three templates included in this set are the same ones you get when using Ionic’s own Command Line Interface:

  • Blank
  • Side Menu, and
  • Tabs

AzureIonic To-Do List Sample App

The default home screen for the Azure Ionic To-Do List sample app An Ionic To-Do list sample app integrated with the Azure App Services.It creates the code structure and adds the dependencies to your project so that you can start building apps right away

Pair these with the IonicPack extension and you can also see IntelliSense suggestions for Ionic APIs as you code.

IntelliSense with automatic suggestions for ion elements

In addition to Ionic, please provide us feedback (vscordovatools -at- microsoft.com) on what kind of templates you would like to see in the VS gallery.

What’s next?

Last summer we released the first version of these tools and since then we’ve worked hard to release updates every 1-2 months. To help improve our next update, we’d love to have you download Visual Studio 2015 Update 2 with TACO Update 8 and give us your thoughts.

Join the conversation about TACO, ask questions, and provide answers on Stack Overflow (using the visual-studio-cordova tag). To stay up to date on these updates, news in the Cordova world, and more, follow us on Twitter (@VSCordovaTools). And as always, feel free to email us with your feedback (vscordovatools –at- microsoft.com), we enjoy hearing from you!

Jordan Matthiesen (@JMatthiesen)
Program Manager, Visual Studio Tools for Apache CordovaJordan works at Microsoft on JavaScript tooling for web and mobile application developers. He’s been a developer for over 18 years, and currently focuses on talking to as many awesome mobile developers as possible. When not working on dev tools, you’ll find him enjoying quality time with his wife, 4 kids, 2 dogs, 1 cat, and a cup of coffee.