Windows 8 Development - Things to Know about JavaScript

03 June 2014

For my client's Windows 8.1 project, the team was happy to see that Microsoft offers the ability to write the application in JavaScript. This is because we are primarily web developers, and we could bring a lot of our current skills directly into the project. Other than the code that is considered “unsafe” (which does bring a lot of runtime-only issues), there does not seem to be any restrictions on what you can do in your application. You still have complete access to the .NET (WinRT) framework in the same way that a C# project has. For us, the JavaScript project was actually even more beneficial to us than C# because we didn't have any expectations around open source libraries that we would later find out are not compatibility with WinRT.

JavaScript Windows Store Applications are Based on IE11

This might seem silly to point out because of course Microsoft is going to use their own browser as the basis for their own development technology. But, it is worth mentioning that your application will be running in a version of IE11. For developers who work on internal applications where IE tends to be the primary browser, this might not be an issue. But, for developers who write for the larger web, IE seems to always be the problem that needs to be worked around. Obviously, it is not as bad as the days of IE6. But, the IE legacy continues and has caused troubles more than once on our project. That being said, if you are having HTML/CSS issues, you will want to think of it in terms of IE11.

Your Presentation Framework Determines Your “Back-End” language

Previously, with other project types, you could mix and match your languages. For example, with ASP.NET MVC, you could have C# models and controllers and mix JavaScript and Razor/C# in the view. However, in Windows Store applications, this is not (as much of) an option. If you choose to use C#, VB.NET, or C++, you are forced into using XAML as the presentation layer. JavaScript projects are tied to HTML5 and CSS3, but this would be a reasonable expectation anyway. With a JavaScript project, you can make Windows Runtime Components in C#, but there is awkwardness to work around. In general, there is little mixing of C# and HTML5, and no mixing of JavaScript and XAML.

This certainly put a damper on my project at first. Coming into the project, not knowing anything, we had an expectation of a more ASP.NET MVC-like environment. For normal Windows Store applications, this might not be an issue because ideally you should put very little (if any) business logic into a tablet/phone application and let “the cloud” do most of the heavy lifting. However, in an industrial setting such as ours, network connectivity simply is not an option. And, most everything needs to be built into the tablet application.

Do Not Judge WinJS Based on the VS Project Templates

My team's initial application was based on the “Grid App” in the JavaScript project templates for Store apps. For us, this template was (and still is) a great starting point to get things moving fast from the start. That being said, it gives the impression that all of the pages are distinctly loaded into the application's view/memory space. And, this simply is not true. If you look at the “_navigating” function in /js/navigator.js (which is produced by the template), you will see that it is “navigating” between pages by rendering the new page and disposing of the old page resources. There is absolutely nothing wrong with this. At a high-level, this is exactly how I write my single-page web applications using BackboneJS. But, you must be aware that you are essentially writing a single-page application for the phone/tablet. Otherwise, you will absolutely run into CSS issues as the styles are cumulatively added.

HTML/JavaScript Restrictions

Microsoft places restrictions on what you are allowed to do to your HTML via JavaScript, and does not allow you to do anything that they consider “unsafe.” If you try anything that they consider unsafe, you will get an exception.

Some of the tags that are unsafe are a little funny. For example <blink />. I am not sure why that is still a thing, and I would love to find someone who can tell me why it is a security risk. But, others are understandable (e.g. <applet />). I found the Microsoft documentation to be really confusing on this subject and the restrictions to be inconsistent. But, after quite a bit of experimenting, it makes some sense and follows only a few patterns.