Cross Platform development with VS Code

A quick tip for when using Visual Studio Code in a cross platform team. You may have tasks (in the tasks.json) config file. They may be specific for Bash or Powershell (such as in my case).

VS Code allows specific platform properties. So in my case I have the tasks use Bash for my Mac, whereas the other developers use Powershell on Windows. It’s as simple as defining an override for your platform like so (OSX):

Tasks.json example
Tasks.json example

Winter of Xamarin 17

I was lucky enough to attend the Microsoft Winter of Xamarin 2017 event in Auckland on Saturday the 17th of June. It was held in Beca House Auditorium, a very nice venue located in Pitt Street, Auckland.

The day was a great learning experience were throughout the day we made a cross platform app of iOS, Android and Windows UWP using Xamarin and Xamarin Forms.

The finished app
The venue was packed with close to 100 people all giving up their Saturday to learn about Xamarin. There where people of all ages, some just trying to get their first development job, students and veteran software developers all keen to give cross platform development a go. We had great catered food & coffee, enthusiastic presenters, swag and prizes all for free.

Visual Studio for Mac
I was impressed with the new Visual Studio for Mac, it didn’t feel like a gross cross platform IDE. In fact I’d see say it’s on par with Xcode and Android Studio. Throughout the day I felt very much at home developing cross platform with C#, the API’s for Android and iOS felt very familiar wrapped in a C# way. The concepts of Xamarin and Xamarin Forms were easy to pick up, you had a lot of control to do specific UI overrides when you needed to for specific platforms.

Free swag! Xamarin beanie
Xamarin development experience felt much easier than React Native the only cross platform tool I’ve used heavily in the past. Being able to spin up an iOS or Android emulator straight from the debug menu of Visual Studio was great. It felt as natural as working in Xcode or Android Studio, but you have the benefit of code sharing (including the UI) all in the same project.

Another highlight was a look at Visual Studio Mobile Center (currently in Preview), which bundles up a lot of the boring bits of app development like CI, cloud building and ad-hoc distribution into one easy to use web portal.

I came away from the event enthusiastic to learn more and build an app for the competition using Xamarin.

Best of Build 2016 Conference

I’ve been slowly working my way through some of the videos from Microsofts Build Conference for 2016. There are too many to watch almost, but here are some of my favourites.

Visual Studio Code – Tips & Tricks

Admittedly I’m a big fan of Visual Studio Code. It’s almost everything I want in an editor. Light weight, easy to use, smart auto completion out of the box with Git integration. This video will take your from novice to pro user of VS Code.

As a bonus check out the Github repo with animated Gifs for the talk.

What’s new in TypeScript

Anders Hejlsberg delivers a solid presentation on why and how you should be using TypeScript plus what to look forward to soon.

Building a Conversational Bot: From 0 to 60

Microsoft have made a very easy to use Bot framework with great integration with a whole host of platforms (Skype, email, SMS, Slack and lots of chat apps).

Instantly Releasing Updates to Your React Native Apps

Using the CodePush service from MS you can update your app without having to go through the App Store approval process right from your command line.

Node.js and Microsoft: A Love Story about Developer Tools

A demo of the Node.js development with Visual Studio Code and it’s great debugging environment.

Mobile DevOps with HockeyApp and Visual Studio Team Services

Learn how to iterate fast and maintain quality of your mobile apps using VSTS & HockeyApp.

Electron Wrapper

It’s now never been easier to make a desktop version of your favourite website/web app thanks to the Electron project.

You may even be using an Electron app and didn’t even realise that it was powered by web technology with an embedded version of Chrome. For example Slack‘s desktop app is built on Electron. So is the desktop WordPress app.

Being a Windows user by day (at work) I’ve always missed having Simple Note (a great note taking app) as a desktop app. While they have a good web app, I’m always opening and closing sessions, deleting cookies etc with my work. So running it full-time can be a pain having to log in repeatedly.

To wrap a web app in Electron is very simple. Clone the Git repo for the Electron starter kit. Open the “main.js” file with your favourite text editor and change the following line:

mainWindow.loadURL('file://' + __dirname + '/index.html');

Now add the website address of the website you would like to wrap.


Follow the rest of the Electron starter kit guide and install & start the project. Electron should now run and display the website address you’ve added.

To build a Simple Note app for Windows for yourself, grab my git repo SimpleNoteWrapper.


React.js Conf 2016 Highlights – Day 2

Following my first day of highlights, here are my highlights of day 2 of React.js Conf 2016.


Exponentjs takes the best of developing for the web to native mobile development. It’s a more packaged up solution to Microsoft’s Code Push. It wraps up the build, deploy and update process.


GL-react brings Open GL & Web GL to React. Really impressive effects to images and content that are really performant.


Netflix have their own data fetching library that they use in their apps. Interesting alternative to GraphQL & Relay from Facebook.


Graphene is a python library that’s used for building GraphQL schemas and types.

React-Native tools demo

There was a good demo of the react-native performance tools showing performance monitor from JS Core and Systrace to record interactions to find issues, bottlenecks and where they are occurring.

Obfuscating your React app

There was an interesting lightning talk on obfuscating your code using react-armor to hide the class or component name to stop say ad-blockers ruining your layout.

Enzyme testing utilities

Enzyme a JS testing utility for React from the team at AirBnB. It mimics the jQuery API to make DOM traversal and manipulation easier when testing your React components output. They just released a React-native mock to help testing on mobile.

React.js Conf 2016 Highlights – Day 1

While I may not have attended day 1 of React.js Conf today, I did get to listen to the conference live streamed from San Francisco. Here are my short cherry picked highlights of things that I thought were cool.


Draft.js was announced from Facebook. It’s a rich text editor framework for React that uses Immutable.js. It’s fully customisable and should scale from a simple multiline input to a full text editor.

React Native Tools for VS Code

React Native Tools for my favourite text editor VS Code was announced today. It’s available as a preview. It supports Intellisense for React Native and debugging code.

Continuous Integration and Code Push for React Native

Microsoft have added continuous integration for React Native to Visual Studio Team Services, combined with Code Push. Now just like in web development, updates can simply be pushed live avoiding the app store/play store update process.

Oy – email template tools for React

A collection of utilities for email templates was demoed.

Nuclide React Native Tools demoed

Nuclide a package for Atom editor was “demoed” showing the packager, debugger and inspector.

Realm for React-Native

Realm the mobile database is now available for React-Native.

See my second day highlights.

Getting started with ReactJS

ReactJS is all the rage in the JavaScript community. It allows you to build an apps UI as discrete components that pass the data in a one-way reactive flow. It’s a library just for the view of MVC. But it’s not a framework.

I’ve been using ReactJS for a proof of concept at work and using the mobile library React Native for my local web meetup project Smart Solar.

Things I like about ReactJS:

  • Making all your components self contained blocks is how I’ve always tried to build out my UI. React takes this to another level having the JS and HTML embeded together.
  • I got up to speed a lot faster with ReactJS then Angular 1. The concepts are a lot more simplistic. ReactJS doesn’t have as many concepts to learn like factories, ng syntax and directives with Angular (or let alone when to use the appropriate one).

My learning path to get started with ReactJS was the following: