Developing for iOS using the Tools for Apache Cordova

Most developers are already familiar with Xamarin and C++ for iOS development, but Visual Studio 2015 also delivers a quick and easy way for developers to build iOS, Android, and Windows apps using JavaScript. The Tools for Apache Cordova are ideal for projects where speed-to-market, maintainability, and code re-use are paramount. Apache Cordova’s web standards based approach combined with its flexible plugin model allows you to tap into a large and growing client-side web development community. Open source resources are plentiful at all layers of the stack – not just for accessing native APIs via Cordova plugins, but also through web frameworks like AngularJS, Ionic, and Onsen UI. Better still, Cordova’s build system is Node.js based which makes it easy to take advantage of a growing number of Node.js based command line tools like the popular Gulp task runner. The end result is you can mix the best of the web with native capabilities to bring your apps to the next level in a non-proprietary and platform independent way.

Over the last year, we have been working on a number of different areas to improve the overall developer experience when using Apache Cordova for building iOS apps. In this post we’ll summarize the great features already available and highlight some areas you’ll see even more improvements in the coming months.

Ionic and Monaca Templates

The key to every great app is a great UI. As we highlighted a few weeks ago, Monaca and Ionic are two increasingly popular UI frameworks designed to quickly bring web based mobile apps to the next level. Apps built using each framework look and feel great on iOS. Best of all, Monica’s Onsen UI provides powerful theming features and Ionic has SASS based theming capabilities that you can use to give your app either an iOS look and feel or a branded platform-agnostic one as you see fit.

There are now Visual Studio templates for both Ionic and Monaca’s Onsen UI that can help you get up and running quickly.

CordovaPost1

Visual Studio iOS Build and Debug

The Tools for Apache Cordova use a remote agent running on OSX to build, simulate, run, and debug an iOS version of your app right from Visual Studio. You can install this agent on your own machine, use a “pay as you go” or managed plan in MacInCloud, or dedicated cloud capacity in MacInCloud or MacStadium. These cloud providers have the advantage of being total Mac replacements that give you access to not only iOS builds, but also Xcode and all the tools necessary to get you going with iOS development including using the iOS Simulator, accessing and generating signing certificates, and publishing your app using Application Loader.

After installing and configuring the remote agent on your OSX machine, select either the “Remote Device” or “Simulator -*” debug targets in Visual Studio to automatically build, deploy, launch, and attach the JavaScript Debugger, DOM Explorer, and JavaScript Console to your running app. The agent automatically acquires the version of Cordova needed to build your app so you don’t need to take any additional steps if you switch Cordova versions. You can then inspect and edit the live DOM, diagnose layout, trace the matching CSS rules for each element, set breakpoints in code, evaluate JavaScript expressions, and view console.* messages, to name a few.

CordovaPost2

iOS and Visual Studio Online

The Tools for Apache Cordova are designed to work with a number of different team build / CI systems since the projects they create are standard Apache Cordova Command Line interface (CLI) projects. Team Foundation Services (TFS) 2015 provides a new cross-platform agent that enables TFS to build directly on OSX. The end result is that TFS and Visual Studio Online (VSO) have support for building iOS apps using Cordova or even native Xcode projects for the first time.

The VSO cross-platform agent is Node.js based and uses a simple HTTPS connection to your TFS 2015 server or Visual Studio Online to fetch work. As a result, your OSX machine only needs to have HTTP access to your TFS/VSO instance but not the other way around. This makes setup and configuration quite simple and means that dedicated capacity on your own internal network, MacInCloud, or MacStadium can be directly integrated with Visual Studio Online with no additional network configuration!

Better still, you can try out these new cross-platform and iOS build capabilities today for free in Visual Studio Online by simply clicking on the BUILD.PREVIEW menu option and starting up an agent on your own Mac hardware or dedicated capacity in MacInCloud, MacStadium, or another hosting provider.

clip_image005

clip_image006

Sign up for VSO today and see our TFS 2015 and VSO tutorial for details on getting your Visual Studio 2015 Cordova project up and running in with these new capabilities. You can expect an even more streamlined approach in the coming months.

Microsoft App and Dev Services

In addition to these IDE and VSO features, iOS is also a first-class citizen in a number of other Microsoft app and developer services.

Microsoft Intune

We’ve already covered the capabilities that Visual Studio Online can bring to the table for iOS app development but it’s also worth noting that you can also deploy the apps you’ve built internally using Microsoft Intune.

Intune provides a complete Mobile Device Management solution designed to help you secure your iOS, Android, Windows, and Windows Phone devices in an enterprise environment. It has full support for managing iOS devices and provides both an internal app store for employee self-service and the ability to manage and restrict apps on iOS devices. The end result is that you can upload apps you’ve built using Tools for Apache Cordova and deploy them to any number of managed devices.

Intune also has an increasing number of Mobile Application Management features designed to provide you with the ability for even more granular control of security at the individual app level. An app wrapping tool for iOS is already available and you can expect even more exciting features here in the coming months.

Microsoft App Services

Microsoft provides a number of powerful services that developers can use to accelerate building their apps. These services are not just limited to Microsoft devices. Apache Cordova projects targeting iOS can take advantage of these services through a set of Cordova plugins contributed by Microsoft.

Here’s a small sample of Microsoft service-related plugins available for you to try out today:

  • Azure Mobile Services – The Azure team has released an Azure Mobile Services plugin with full iOS support. You can quickly configure your app to use it from Visual Studio simply by right-clicking on your project and selecting “Add > Connected Service…”
  • Active Directory – The Active Directory team recently announced an ADAL and AD Graph plugin for Cordova 5.0.0 that makes it simple to use Active Directory via a native iOS library.
  • Office 365 – There is now both an Outlook Services and File / Discovery Services plugin for Cordova that enables your app to target these services from iOS and other platforms using a single JavaScript code base.
  • Application Insights – The Application Insights team has recently released an Application Insights plugin designed to allow you to collect and analyze usage data from your Cordova app.

While some of these plugins are still early in their development lifecycle, you can expect continued investment from Microsoft in open source and the Apache Cordova community. Our engineering team is committed to ensuring Cordova is fast, reliable, and easily connected to essential app and dev services.

Command Line Interoperability and Visual Studio Code

Last, but not least, we’ve taken steps to make Visual Studio 2015 “command line interoperable.” Developers working in teams using both Mac and Windows can open and edit the same Cordova project using their code editor of choice. By simply installing the correct version of the Apache Cordova Command Line Interface (CLI), you can grab your project’s source code out of a Git repository and continue to build your app on OSX. We’ve created a Cordova plugin to help deal with a few Visual Studio specific features and you can expect much more in the coming months.

What this means is you can now have team members on Windows and OSX developing against the same code base thanks to Visual Studio and Visual Studio Code. Both Visual Studio and Visual Studio Code now reflect the file system directly, so editing your Cordova project in Code is as simple as selecting “File > Open Folder” and selecting your Cordova project folder. You can even use the powerful Gulp task runner and its associated plugins both from within Visual Studio using the Task Runner Explorer and from the command line when using VS Code.

For iOS, being able to edit your project on OSX means you can troubleshoot particularly sticky problems by opening up a native iOS project generated by the “cordova prepare ios” Cordova CLI command from in the “platforms/ios” folder in Xcode – either on own Mac or using a cloud based service. You can then make your edits, build using the Cordova CLI or other command line tools, and then commit your changes back into source control. Developers using Visual Studio or Windows can simply pull down these changes locally when you are done without taking any additional steps.

We’ve got more plans coming to make this workflow even better, so stay tuned!

Summary

It has been a busy year since we first shared a Technology Preview of the Tools for Apache Cordova at TechEd in June 2014. With Visual Studio 2015, we are finally ready to declare official support thanks to the early adopters and the fantastic feedback we’ve received from the Visual Studio and Cordova communities. Thank you! We hope these iOS related features resonate with you and look forward to making things even better in the coming months.

If you haven’t tried out Tools for Apache Cordova yet, simply download Visual Studio 2015 Community or Enterprise RC and be sure to select the “Tools for Apache Cordova” option when installing.

We’re always interested in your feedback, so please contact us via UserVoice, Send-a-smile, Twitter, StackOverflow, or email. If you’d like to contribute to our documentation, you can see this blog post on contributing.

For more info on iOS support from Microsoft, you can also visit the C++, Visual Studio Code, and Visual Studio Online team blogs, as well as the Any Dev, Any App website.

clip_image008

 

Chuck Lantz, Program Manager, Visual Studio Client Tools Team

@chuxel

Chuck spent over 15 years as developer, advocate, and architect in a variety of mid and large scale enterprise IT shops. He brought his passion for app development to Microsoft in 2012 and is currently focused on cross-platform mobile app development.