Convert a Windows Store App to the Web in Under 10 Minutes

Microsoft held an event called re//build in Atlanta and I had the opportunity to speak about what’s new with WinJS. The event used a lightning talk format so with only 30 minutes to present, I decided to make the presentation itself the demo. I wrote the re//build WinJS Windows Store app by starting with the JavaScript Grid template and customizing it to generate slides. I also included the open source animate.css library to show transitions. I purposefully went overboard on animations to show how rich the app experience can be despite using HTML.

If you run the app (don’t worry, I’ll give you a link in a minute if you don’t want to build and run it on Windows 8) you’ll see some of the more interesting announcements included future convergence of libraries (right now there are separate libraries for the phone and PC platform) and fresh support for the Xbox. Although those are both cool, what intrigued me the most was the fact that they made the WinJS library open source. What does that mean really? I originally viewed WinJS as a shim between HTML5 and the Windows Runtime, so I couldn’t imagine a scenario where it made sense on the web. Was this just a set of glorified controls? If you experiment online it looks like it might be.

Of course the first question I received during my talk was, “Do you have other versions of the app, for the web or Xbox?” No, I did not. But I was certainly determined to try. I figured it would be an interesting exercise to convert the app over to a pure web app, but assumed I’d end up stuck with a static page and wouldn’t be able to use the navigation or fancy features like Semantic Zoom.

Oh, was I wrong!

The first thing I did was copy the contents of my Windows Store app to a new folder. I deleted things like project files, security certificates and manifest files that didn’t make sense for a web app. Next, I pulled down and built the open source WinJS library. I grabbed the stylesheets and JavaScript for version 2.1 and dropped those into the folder. I updated the references in the source from this:

<!-- WinJS references -->
<link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

To this:

<!-- WinJS references -->
<link href="/winjs/css/ui-light.css" rel="stylesheet" />
<script src="/winjs/js/base.js"></script>
<script src="/winjs/js/ui.js"></script>

I tried running the app, and it immediately aborted due to a missing reference to “Windows.” I popped open the default.js and immediately saw this:

var activation = Windows.ApplicationModel.Activation;

I know that is a projection to a Windows Runtime component, so I just hacked it. In fact, I simply removed the various references to Windows Runtime components but left the rest. What I ended up with was this:

var app = WinJS.Application;
var nav = WinJS.Navigation;
var ui = WinJS.UI;
 
app.onready = function () {
     nav.history = app.sessionState.history || {};
     nav.history.current.initialPlaceholder = true;          
     ui.disableAnimations();
     var p = ui.processAll().then(function () {
         document.body.onkeyup = function (e) {
             WinJS.Application.queueEvent({ type: 'keyUpTriggered', keyCode: e.keyCode,
     handled: false });
         };
    return nav.navigate(nav.location || Application.navigator.home, nav.state);
     }).then(function () {
         ui.enableAnimations();
     });
};
 
app.start();

Thinking, “OK, how much more of this will I need to do?” I opened it up and was blown away. It’s easier to just let you see it for yourself. I suggest Internet Explorer but it will work in other browsers. This is the online version of the Windows Store App! It is fully functional, try pinching on the main page to see semantic zoom take effect. When you are in slides, use the right arrow key to bring in effects like the book on the main slide or bullets, otherwise use SPACE to advance to the next slide or BACKSPACE to go to the previous one (left arrow also works, and up arrow will take you back to the main page that previews all slides). You can also browse the source code for the converted app.

There are still a few rough edges. The size of the WinJS library (including JavaScript and CSS) is enormous (several megabytes) and the experience isn’t consistent in Chrome and FireFox. However, I still think it’s pretty amazing to see the full navigation framework and advanced controls like grid layouts and semantic zoom render faithfully in the browser, and there really wasn’t much I had to do to my app at all to make the transition. Granted, apps that rely heavily on WinRT components won’t convert as easy, but this opens up enormous possibilities for sharing code across platforms.

Because seeing is believing, I recorded a short video showing the entire conversion process. Enjoy!

An Introduction to Cross-Platform, Cross-Browser WinJs

In case you missed the big announcement, Microsoft has open sourced their Windows Library for JavaScript, otherwise known as WinJS. Many of you may not have noticed this because, like me, you assumed WinJS was just a shim for accessing the Windows Runtime from JavaScript. If this blog were one year older, that would be true, but it’s no longer the case. Although the library was initially built to create Windows 8 experiences, the team has worked hard to expand those experiences to the Windows Phone and finally to the browser itself. That means it provides truly cross-platform, cross-browser experiences. You can build a web-based app using the library and literally run it on your Android browser. It’s that simple.

I covered some of the highlights in my re//Build WinJS Windows Store app that I wrote as a slide presentation using HTML and JavaScript. That app was specifically designed to run on Windows 8.1 so I did not adapt it to the web. To make a web-based example, I had to pull down the WinJS library from GitHub (the instructions to pull it down and build it are on the main page). It was a little strange pulling a Microsoft project via git and then compiling it via grunt, but there you go. Times are changing! I copied the build over to a new directory and got to work on a very simple example I creatively named Jeremy’s Books. You can play with the example online or inline. You should be able to scroll and tap/touch your way through the list (tap on the link to open it). Be sure to refresh so you can see the animations.

There are really six things I’m showing here:

1. How to scaffold a basic WinJS application
2. Data-binding via templates
3. Using the WinJS provided stylesheets
4. Page entrance animations
5. Tap animations
6. The ListView control

For a more comprehensive walkthrough, you can check out all of the controls and experiment online at the Try WinJS site.

The basic pattern for wiring up the app looks like this (find it in the app.js source file)

WinJS.Application.onready = function () {
    WinJS.UI.processAll();
};
WinJS.Application.start();

The call to process all is what triggers parsing the declarative markup and instantiating the actual controls. After I’ve processed the controls, I trigger a page enter animation to animate the elements in from the right. When the animation finishes, I find the controls that were generated as the result of data-binding to wire in click handlers for a tap effect (tap on a book cover and you’ll see it respond).

WinJS.UI.Animation.enterPage(document.getElementById('mainDiv'), null).then(function () {
    var controls = document.getElementsByClassName("book"), i;
    for (i = 0; i < controls.length; i+=1) {
        addPointerDownHandlers(controls[i]);
        addPointerUpHandlers(controls[i]);
    }
});

Each element gets multiple handlers for different types of input:

function addPointerUpHandlers(target) {
    target.addEventListener("pointerup", onPointerUp, false);
    target.addEventListener("touchend", onPointerUp, false);
    target.addEventListener("mouseup", onPointerUp, false);
}

And the corresponding animation is triggered:

function onPointerUp(evt) {
    WinJS.UI.Animation.pointerUp(evt.target);
    evt.preventDefault();
}

For the list of books, I create a simple JSON array and then bind it to a list. I use the WinJS convention of assigning it to a namespace to make it easy to reference from markup:

WinJS.Namespace.define("Book.ListView", {
    data: new WinJS.Binding.List(books)
});

Now that it’s wired up, let’s take a look at the HTML. The basic HTML simply includes the base for WinJS and the UI as well as several stylesheets. I’m using the “light” theme but you can swap that to the dark theme to see how it changes (I prefer dark but have grown accustomed to light themes for presenting). I use a special data-win-control attribute to define the item template:

<div id="bookTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
    <div class="book">
        <img src="#" data-win-bind="src: img; alt: title"/>
        <h4><a href="#" target="_blank"
 data-win-bind="href: link; textContent: title"></a></h4>
    </div>
</div>

Notice in the image tag that the attributes are not bound directly. Instead, the binding attribute is used to provide a list of attributes on the parent element and the properties to bind their values to (in this case, the src attribute is bound to the img property, and the alt attribute is bound to the title property of the data). Next, I declare the list view with options. I especially like that WinJS crunches whitespace so I can format my options across multiple lines. The options provide a template for the list view to use, indicate how to handle taps and swipes, provide the item template and also where the data is pulled from. Some may argue that is too much imperative code being squashed into a declarative attribute; however, the options may also be set up programmatically.

<div class="bookList" data-win-control="WinJS.UI.ListView"
        data-win-options="{
        itemDataSource: Book.ListView.data.dataSource,
        itemTemplate: bookTemplate,
        selectionMode: 'none',
        tapBehavior: 'none',
        swipeBehavior: 'none',
        layout: { type: WinJS.UI.GridLayout }
        }"></div>

You should note that I passed plain JSON to the list binding option. I do not bind directly to the object, but instead bind to the exposed dataSource property. As you can see, it was very straightforward to wire up a fluid user experience with selection, animated feedback and scrolling. Although I’m optimistic about using this library in the future, right now the sheer size is a deal-breaker. The uncompressed JavaScript for the UI by itself is almost 3 megabytes in size, then add another megabyte for the base. In addition add the 150KB stylesheets and you’re looking at a lot to load in the browser. I am hoping in the future there will be options to build to specific controls and provide a trimmed-down version that only contains the bare necessities for what will be used in an app.

There’s obviously a ways to go, but the real promise is the ability to create experiences that can truly share both code and markup between multiple targets, whether they are platforms and browsers or native experiences such as Windows Store apps. I’ll be keeping a close eye on this framework as it evolves and look forward to sharing more in future posts.

Grab the source and see the demo.

Review: The Lenovo Yoga 10 Android

I received my first Android device to review! For full disclosure: this is the first product I’m reviewing that I received for free from a vendor. In this case Lenovo was kind enough to ship me the unit. It was a gift with no obligation to post or review, and I will only write reviews that I believe provide value to my readers. In this case, I was very surprised with the experience and wanted to share it in two posts. This first post will cover the hardware and OS aspects, but I intend to write a follow-up post that compares Android to Windows 8.1 in general.

The unit that I received was a Lenovo Yoga Multimode 10” tablet. The specs at a glance:

• 10.1” screen size
• 1280 x 800 resolution
• 1.2 GHz Mediatek 8389 Quadcore processor
• 1 GB DDR2-SDRAM memory
• 16 GB drive
• 802.11bgn wireless
• BlueTooth 4.0
• 18 hour (per marketing) battery life
• Android 4.2 Jelly Bean operating system
• 10.20” x 7.01” x 0.31” dimensions
• 1.3 lbs. weight

Cost is $239.99. This model does not come with cellular wireless.

Readers of my blog know I’ve mostly been a Windows 8.1 user, so why the write-up for an Android device? It turns out I’ve been using it every day since I received it, and here’s why.

Unboxing

The box it came it mirrors most of the packaging I’ve seen for slates: black, sleek, and professional looking. In fact, it was very similar to the packaging from the ASUS I reviewed a few years earlier.

Opening the box revealed the slate itself and a power adapter.

Build

The tablet itself feels sturdy and metallic all around. The display is thin and the kickstand portion (more on that in a minute) is nice and rounded. Overall it has a very solid feel. The kickstand is sturdy enough that it requires a good pull to unfold but then it stays locked in place and there is no worry about it folding away. The exterior of the tablet is simple. On one side is a mini-adapter for the power supply and a nice, large power button:

The other side has the volume rocker, what I’m guessing is the microphone, and a headphone jack:

With the kickstand folded out there is also a slot of a microSD card. The power button is smartly placed. I never accidentally bumped it, it was easy to find, and the device itself provides a prompt that enables you to use the button to power the device on or off, go into sleep mode, or even quickly switch on airplane mode.

Kickstand

The trademark feature of the Yoga line is the ability of the tablet to take on different modes. Although at first glance it may seem the tablet is unwieldy due to the large bulge on one end that holds the kickstand, it is actually what I consider the most functional feature. Most of the time I have the tablet on the table at a slight angle that feels perfect for casual use.

This is very sturdy but has enough angle that I don’t feel like I have to crane my neck. For viewing videos or presentations, I can use the stand to set it upright like a laptop display:

When holding the tablet, the kickstand collapses and the rounded edge becomes a grip. This is very handy, especially for holding the tablet in portrait mode. It’s easier to illustrate from the back like this:

Display

The display is gorgeous with great viewing angles and works fine for casual use (i.e. email, social networking, watching short video clips, etc.). It does fall short of the higher density displays present in competing models. In fact, it’s difficult for me to understand why a gorgeous 10.1” display wouldn’t have a higher number of pixels unless perhaps it would strain the integrated graphics. 1280 displays are now commonplace on 8” tablets and smart phones so it seems a little low resolution for this model. Having said that, many of the original Windows 8.1 slates I reviewed had 1366 x 768 displays so this is an improvement. The display provides vibrant colors and text is clear and readable. I didn’t notice any issues with blurry fonts of pixelated graphics.

Here’s a picture of the slate displaying some of my Instagram photos. Notice the bottom software buttons that look like they could be hardware lights:

Sound

The built-in speakers were the most disappointing feature of the tablet. It has two front-facing speakers and uses Dolby technology. The range is very limited and the sound comes out tinny/metallic. There is almost no low range available. It is perfectly fine for Skype and notifications (in fact, the built-in microphone works really well and I had no issues making conference calls from the slate) but it’s not the type of tablet you can spin up some tunes and expect to enjoy the listening experience. For movie watching and music, I found myself plugging into the earphone jack which delivers acceptable sound.

Performance

The performance overall was solid. As I mentioned earlier, I was a little surprised to find myself with an Android and thought it may end up being just a “novelty” for me. However, I have not set the tablet down since I received it weeks ago. I’ve heard Microsoft’s marketing spin regarding the Surface 3 Pro: the reason most people have multiple devices is because tablets just aren’t strong enough. I disagree. I think there is a very valid reason to have two devices. When I want something extremely light that is instant-on and easy to carry with me, put away, turn off and set aside or pick and browse, I want the slate. I keep the slate downstairs and my laptops upstairs and in the office. This lets me grab the slate to check email, post updates to Facebook and Twitter, and browse the latest news feeds. I do a lot of reading, browsing, and even watching videos of talks and presentations. Sometimes I may even plug in the headphones and watch a movie if our main TV is otherwise occupied.

When I want to write code, I don’t grab my slate. I jump on my laptop. If I want to be “portable” and maybe sit on the deck, I’d much rather have a super light ultrabook with a bright, crisp display than a super-powered tablet. That’s just my opinion, but I’ve been using a variety of devices for several years now and just can’t see myself replacing my ultrabook with a slate. Instead, I’ll keep both.

Having shared my caveat, let’s get back to the device. When I saw the memory and disk and processor I despaired that I wouldn’t get much done, but that’s not the case at all. Everything I do from networking and emailing to watching presentations works fine. Even some of the games I experimented with were fast and fluid (I’m not much of a gamer anymore, but like to have them there in case I get bored from time to time). The apps that are available were written for the form factor and it shows. I really do not feel any constraints with memory or disk space or performance in that regard. Because I save almost everything to the cloud (both OneDrive and Google Drive), local storage is less of a concern and will likely only factor in on long trips when I want to store movies and music for offline playback.

The first time I tried streaming videos I was disappointed due to noticeable stutter. This was using the Netflix app. To determine whether the problem was the app or the slate itself, I then tried out YouTube, Vimeo, and watched some of my own videos at WintellectNOW. All of these options worked perfectly fine – I was able to watch high definition full screen video with no issues at all. The slate does a great job of handling video and for some reason only the Netflix app seems to struggle. Locally stored video ran equally as well so given the long battery life I’m excited about the prospects for taking this on long flights.

Battery Life

The second best feature, next to the kickstand, of this slate is the battery life. It is advertised at 18 hours and I believe it. When I first powered it on, I ran it all day and barely chewed into the battery. I purposefully did not charge it for several days. I used the laptop heavily in the morning when I answered initial emails, scanned feeds for news bits, scheduled Tweets and read several articles in Flipbook. I’d use the slate throughout the day in a similar capacity and heavily at night while I left my laptops upstairs. At night I did not power it off, but simply let it go into sleep mode which still picks up mails and sends notifications. By the time I decided to plug it in again, it still had 30% battery remaining after 5 days of use and showed 25 hours of uptime in the settings display. I just can’t imagine running this battery down without doing heavy gaming or video streaming over a continuous amount of time.

CAMERA

The camera is right there with the speakers: it works but is not high quality. The day after I received the slate I drove to a beach house on Lake Lanier in Georgia for a weekend hack-a-thon with co-workers. It was a beautiful morning so I stepped outside and snapped this shot with the slate:

As you can see it’s serviceable but I doubt it will win many awards. I have not had the opportunity to try out video chat yet, but I suspect the camera is good enough for casual conversation and chatting. I’m of course completely spoiled having a 42 megapixel camera built into my phone but it was worth a shot (see what I did there?)

Wireless

The wireless worked great. I had no issues connecting to any hotspots public or private, and was able to achieve very fast speeds on my home network. The speed test I ran was comparable to what I get on my laptop machines: 28 Mbps down and 6 Mbps up, which is about the limit for my local service and shows the slate can take as good as my network can give.

To test out the Bluetooth 4.0, I grabbed my Sennheiser MM550-X Noise Cancelling headphones. These are hands-down the best pair of headphones I’ve ever owned. I use them when doing my video editing, while watching movies on my slates and ultrabooks, and connected to my phone for long runs. The slate had no problems finding the headphones and paired with them immediately. The sound quality through the pairing was phenomenal. I played one of my favorite Florida dance stations and it came through as clear and crisp as CD quality audio. The range was good too – I set the slate down and walked around the room and there were no noticeable disruptions to the playback.

Software

As a Windows 8.1 user, I’m very aware of a common complaint that there just aren’t as many software titles available for the Windows platform. That is definitely not the issue in the Android ecosystem. In fact, it has been a strange experience for me being able to grab pretty much any piece of mobile software I need. When visiting websites I’m used to seeing the ad for the “mobile app” then having to click through and try to find the Windows version. That’s gotten better as the platform has matured but there are very few sites that don’t have an Android option available. It’s been fun to see “grab the app” and not feel excluded (“oh, you don’t have a Windows version?”) and be able to pull it down right there. I picked up several apps, magazines, and games and seemed to only miss out on one app and that’s my Amazon Instant video player.

On the slate I frequently use: the calendar (which syncs nicely with all of my email accounts including Outlook), the calculator, weather, Skype, navigation (the built-in GPS is great), Chrome, Google+, GMail, generic mail that includes my Outlook.com and work accounts, Twitter, Facebook, Kindle, Flipboard, OneDrive, feedly, Pocket, Instagram, Flixster, Amazon, and a note-taking app in addition to some magazine apps I pulled down. It was nice to see the OneDrive integration. It works well and I literally edited a PowerPoint presentation on my ultrabook then pulled it down and reviewed it with a co-worker on the slate later that same day.

Lenovo provides a custom UI to help organize “widgets” on your main display and group program icons together for easy access and launching. Although this works great, I still miss the “at a glance” information I get with the start tiles on my Windows 8.1 devices.

What I Like

The tablet is light and sturdy. The kickstand works well and is very functional. The battery life is phenomenal. Usability overall is good and the swipe-style keyboard makes it easy for me to compose email replies. There is a great ecosystem of apps available and Lenovo did a great job with their pre-installed apps. I like that I can leave the slate downstairs, pick it up at any time and be very productive. It plays video well but requires headphones for decent audio. The software keyboard is great and I use the swipe feature quite a bit. It’s cool that you can upgrade to different software keyboards as well.

What I Don’t Like

The display could carry a few more pixels but that would likely mean a stronger processor to push them. The sound and camera quality should be improved. As much as I like the Android OS, I still am very much a fan of Windows 8.1 and miss some of the features such as swiping between apps and snapping apps side by side without having to resort to OS hacks. The static app launch tiles seem so outdated after working with live tiles and having real-time information and not just dead icons to start from. I miss the handwriting recognition on Windows 8.1 slates and believe it or not, there are Windows 8.1 apps I really like that aren’t available on Android. For example, I have yet to find an app to organize feeds as well as NextGen Reader does. The browser and touch integration is also a bit rusty – there are some sites that unexplainably collapse dialogs when the software keyboard appears and aren’t usable that work just fine on my Lenovo Yoga 13 in touch mode with Windows 8.1 running.

Verdict

As I mentioned earlier, right now I’m very pleased with the tablet and use it every day. It is convenient and functional. It performs incredibly well for only 1 GB of memory and I have yet to run into any problems with the amount of storage. It’s tough to give a final verdict for two reasons. First, I haven’t used any other Android hardware at similar price points (low $200) so I don’t have much to compare it against. The form factor is definitely superior to other Windows 8.1 slates I’ve used, but I do want to try out some 8” models as well before deciding what my favorite is. It’s certainly become a part of my daily workflow for now. I’ll write a follow-up that compares the Android and Windows 8.1 operating systems shortly.

Enterprise Typescript

This past Thursday I had the pleasure of presenting for the Linked In .NET Users Group. The topic was TypeScript. My goal was to show how well TypeScript works to solve common problems in the enterprise to tackle it from the perspective of Return on Investment and how it scales teams, improves productivity, increases quality and reduces overhead. The talk is split between this discussion and hands on examples that cover the semantics while tying them back into the concept of large, parallel teams.

Here is the abstract of the talk followed by the video and deck.

TypeScript is a superset of JavaScript. Designed to enable enterprise-scale application development, TypeScript compiles to pure JavaScript. It provides important features such as classes, modules, and interfaces. TypeScript helps improve the quality of code by generating well-known and widely accepted JavaScript patterns while providing powerful development-time type-checking and discovery. TypeScript runs side-by-side with existing JavaScript and supports the concept of type definition libraries that can describe existing libraries for use by TypeScript even if they are written in pure JavaScript.

In this talk, Jeremy Likness will explore the use of TypeScript in enterprise-scale applications. He’ll discuss not only the technological benefits of TypeScript but also explore the impact to the software development lifecycle overall. TypeScript enables a development workflow that helps scale development teams, improves quality and decreases ramp-up time. It also encourages a logical approach to software construction that results in more reusable and easily maintainable code.

Video of the Presentation

Presentation Deck

Enterprise TypeScript from Jeremy Likness

Source on GitHub