Experience developing a Windows Phone 8 app with Html5 and Javascript

Recently we developed a Windows Phone 8 app communicating with a simple rest service with C#. With all the buzz around html5 and JavaScript we wanted to see how hard it was for us to port our C# app to Html5 and Javascript.

If you are developing a Windows Store 8.1 app there is a possibility to use WinJS, which makes a native Html5 + Javascript app. Windows Phone 8 do not have support for WinJS so our solution is to create a C# app which embeds a web browser, fortunately for us there is one such template out of the box in Visual Studio 2013.

This approach lets us create an Appbar and integrate with hardware buttons in C# that invokes JavaScript methods. It’s also possible from C# code to listen to Javascript events and react on those. Everything you pass around in these events are strings, so if you want to send more complex stuff, json is the way to go. The communication between C# and Javascript enables us to get closer to a native feel in the app.

As a C# developer you most often use MVVM pattern in you apps, in JavaScript there are a few libraries that enables MVVM pattern to make you feel at home. The best part is that many Javascript libraries are available through Nuget so it’s easy to install and try them out. If you want a challenge, try AngularJs or some other cool Javascript framework. We were up for a challenge and used AngularJs – it was fun but we ran into a few strange things that we will write about in a later post in this series.

When developing using Html5 and Javascript it’s really easy to separate logic from UI and styling. You got your html file that declares the structure of the UI, then you got you Javascript file with logic and finally a CSS file with the styling. There is a few Javascript libraries (AngularJs, SammyJs) that enables templates which could translates to .Net UserControls. These templates are then easily reused and code becomes more separated and structured.

It’s rather easy as C# developer to read and understand Javascript code, from our point of view as the languages have their similarities. It’s going from XAML to html and CSS that’s the biggest obstacle but as soon you get used to it you often realize that it has some nice features that you will miss in XAML.

So give it a try, it won’t hurt you and when you realize it isn’t so bad you might even enjoy writing your next app in Html5 and Javascript. And with Html5 and Javascript in your tool belt new opportunities arise, you are now able to create a hybrid app for all different platforms and cool Javascript powered webpages.

In the next blog post we will dig into the code and reveal all the pitfalls and crossroads we bumped into. There are some nice tips and tricks for a developer to consider whilst developing a hybrid app using AngularJs. Until then, code away!

//Alexander Persson & Frank Camara

This Post Has 3 Comments

  1. Heath

    I’m looking to do this myself. I’ve got a XAML/C# Windows Phone app that I’d love to port to HTML5/JavaScript just to share a code base with its equivalent Windows Store App.

    Particularly interested in the AppBar bits you mentioned. Looking forward to the next article!

Leave a Reply