WindowsStore_badge_green_en_med_67x208

Thoughts on Developing Windows 8 Apps with HTML/JS

This weekend I began my path to becoming a Windows 8 developer during the JavaScript Taste Test code jam and boy am I hooked! :-D Here are my thoughts on platform as a whole and the process.

Expectations

I’m not going uber-technical on this post as I’m more in a thought mode tonight but definitely read Building Windows 8 Applications with AngularJS aka Oh Yes I Did! by my good friend Lukas Ruebbelke (also co-author of the upcoming AngularJS in Action, get the MEAP today!!) to get a grasp on the simplicity.

My Brief History Microsoft Tech

For about a year+ I dealt with a fair amount of .NET (specifically C#). A good friend Cody Beckner (one of the smartest dudes I know; said it before and I’ll keep saying it) and I kept having these ColdFusion vs .NET arguments (fun lil’ jabs here/there) and finally I said: “I’m going to put it to the test.” My point was to prove to him how much better CF was than .NET. I was wrong.

We worked on an app for Microsoft called BuzzMark. It was a Stack Overflow clone, with their permission, for internal use so the quality had to absolutely hit the mark and so did the code. What were we going to use as the tech? Well, .NET of course! The shear amount of options we had at our disposal was insane. The simple things were still simple, even if it took a few more lines of code than comparable code in CF, but the hard things were easier through things like method annotations, Linq (OMG…amazing), ASP.NET MVC (wow!), etc.

I was impressed but how does all of this apply to Windows 8 apps? One of the most impressive bits about .NET, to me…a polyglot, was the CLR:

Compilers and tools expose the common language runtime’s functionality and enable you to write code that benefits from this managed execution environment.

In short, this is why you have choice in your .NET language: VB, C#, C++, etc. Well…they extended the CLR to HTML/JavaScript for Windows 8 dev and my same euphoric feelings from my .NET stint returned when building my first two Windows 8 apps for the JavaScript Taste Test code jam.

HTML/JavaScript Native Apps

Weird, right? Native? Seriously? (How many more questions can I add here? One more?)

Yes…native. Why? Because the HTML/JavaScript is compiled through runs on (UPDATE: thx Tim Heuer for the correction) the CLR just like XAML/etc. This is important because it means you get the comfort of picking a language and it is treated like a 1st Class citizen. Typically you have to make a lot of compromises but Microsoft, IMHO, got this one right. It is something I urged @Adobe to do back in the whole “Adobe vs Apple” beef regarding Flash CS5 exports: choose your language with little to no compromise.

At work, I am part of a ~15 developer team where we work on a large AngularJS app. I’ve come to really enjoy it so it was a natural choice when looking at doing HTML/JS apps for Windows 8 but I felt like I’d be losing out in the process. That simply is not the case. Microsoft enables HTML/JS developers with the power of C# developers. What’s sweetest is you can mix them: C# controls used in HTML/JS. (UPDATE: link points to the appropriate place now to show C# called from HTML/JS)

The biggest thing I had to wrap my head around was where to look for answers. I sat there trying to find the code to access an HTML element on the page from my default.js (where I kept my primary/default Windows 8 JavaScript). Ummm…duh…$(“#myelement”)! I had jQuery yet was googling for the right namespace/methods to use for such a simple task. Heck, document.getElementById works too! When you’re in such an integrated environment it is easy to get lost in the weeds. If you do…breathe and remember what’s in your toolbox.

For a bit I also tried to determine how to interop between the Windows JS and my Angular controllers/services. Well…again, it is JavaScript. Right there in Angular I could easily call the Windows APIs with zero fuss. Now…architecturally you may want to tweak your decisions in that regard but still…they work hand in hand and sometimes easy doesn’t mean bad.

This morning I had the itch to add a couple of other features so I opened Visual Studio Express 2012 and within a few minutes I had persistence through a couple lines of code. The best part is because I used the Roaming Settings the data syncs to the users profile and is available on any other Windows 8 device. 2 lines!! That’s it.

Don’t believe me? On Saturday I wanted to spruce up the app to give it a bit more of a native feel. You know…simple stuff like clicking on a calendar date would depress the day so it felt like it was actually clicked or the calendar slides in properly when it first loads. To add these native animations, I added 3 lines of Windows 8 code within my AngularJS directive:

Windows 8 with HTML/JS is insanely fun. Of course, if you know C#/XAML or similar, why not use them?

Why not HTML/JS?

There are times I wouldn’t say use HTML/JS. Some apps need DirectX, etc so you may find the need for C#/XAML or similar. It always boils down to a best tool for the job. HTML/JS is a nail…you’re the carpenter. Choose your nails wisely.

Windows 8 Store

Having deployed apps to the Play Store (by far the fastest and easiest deployment) and the App Store (by far the most cumbersome to setup and slowest process), I was a bit skeptical at how Microsoft addressed deployment, signing, etc. As usual, I left impressed.

  1. Create a developer account (used my biz and was done in ~24 hours)
  2. In Visual Studio, click Store -> Create App Packages
  3. Sign In -> Select App (for an update or to link to a reserved app name)
  4. Run through Windows App Certification Kit (opens it for you)
  5. (once/if complete) Store -> Upload App Packages

This opens your browser and you can simply drag/drop the packages into the page to add them to the app submission wizard. It goes through an Apple’esque certification process (took a mere 2 days to get my app live, almost right at 48 hours) then it is deployed (auto-deploy or you can set a date). Cake!

The mere fact I could spit out those steps from memory after only having done it twice is a testament to the ease. I would need a whole new blog post to explain the steps for iOS (namely steps 1 and 2 are the pain points for iOS dev). This is a key win for Windows 8 development, IMHO.

Get Started!

Microsoft has some excellent resources for learning everything as well. I frequented MSDN the week before JavaScript Taste Test so I could be prepared. Here are some of the resources I used and some other great one’s I found tonight:

Big props to @codefoster and @palermo4 for their great work on the Jump Start tutorial. It really helped me out.

Those are some of the resources but there are tons more but most importantly…it is HTML, JavaScript, and CSS. Don’t get caught in the mindset of finding the specific tutorial on doing it for Windows 8, unless it deals with a Windows 8 specific API (file storage, encryption, etc). Be open to your normal resources for achieving your goal(s) and mix the Microsoft specifics in as you go.

My Apps

I built two apps in ~12 hours on Saturday (from scratch to deploy as a Windows 8 noob) and I built the raw Angular (not in the Windows 8 environment yet) for the third this evening so it is on the way to deploy this week. Look for more details on these as they become available. I’ll give them their proper due in separate posts (short or otherwise). One of them (OvuLately) was linked above in the screencast to show the animations.

I’m doing an extreme MVP on these apps. They are absolutely basic but will continue to grow in features while keeping things simple (a big key I’m now pushing for my apps/work on all platforms). I’m also going to explore the financial options; specifically trials, in-app and ads.

Final Thoughts

It isn’t like I’m quitting web work or Android/iOS but I’m definitely no longer in the “Nah…no one is on Windows 8 so it isn’t worth the trouble” camp. I’m absolutely not in the Android or iOS first camp either. This entire platform has impressed me to seriously consider each apps market appropriately.

Also, no one is saying you can’t use other tech but for those of you more comfortable with HTML/JavaScript it is an exciting time! Join in on the fun and get rolling in the Windows 8 Store.

  • http://timheuer.com/blog/ Tim Heuer

    2 corrections: 1) you aren’t compiling HTML/JS through any CLR…in fact they aren’t compiled at all. 2) you can’t use C# controls in HTML/JS. The controls you use are full JS implementation of controls using only JS/HTML.

    • http://www.johncblandii.com John C. Bland II

      I misunderstood what I read but I’ll make the corrections. Thanks Tim.

      Also, what I meant by using C# controls was you could write C# and use them in HTML/JS.

      • http://timheuer.com/blog/ Tim Heuer

        Yes you could write C# *code* and use it in JS, but you can’t write C# *UI* and use them in JS. C# UI is, by default, XAML — and there is no interop between XAML and HTML currently.

        • http://www.johncblandii.com John C. Bland II

          Ok, yeah. That’s what I meant. Thanks for catching that though.

  • Matheus

    Hi, I am trying to build a Windows 8 app with angular, I also followed the “Building Windows 8 Applications with AngularJS aka Oh Yes I Did! ” tutorial step by step, and it almost worked perfectly.

    The problem is on the focus of inputs of type text, when I click on any of these inputs, the focus goes to some other part of the window, and I can’t type anything, btab to go tout if I use the fields, it seems to work fine, I can type something, click the button and add the messages.

    Do you have any idea of what can be the problem?

    Can you repost you sample ? (the link in the beginning is broken)

    Ps.: I’ve tested also routing, and it worked fine too.

    If you want, you can find my test (Vs2013) on:

    http://1drv.ms/1BKmb2H

    Regards,

    Matheus

    • http://www.johncblandii.com John C. Bland II

      I’m not sure what link you mean. I just clicked nearly all of them and they worked.

      I haven’t heard anything about clicking putting focus on a different element. I scanned your code and didn’t see anything that would trigger something like this. It probably isn’t an Angular issue.

      • Matheus

        Hi John, thanks for your reply.

        The problem is when I click on a textbox, you can see in the following image:
        http://1drv.ms/1xCwEul

        I found the problem, and it realy is not on angular, the problem seems to be on “winstore-jscompat.js”, this script removes the need of wrapping unsafe codes (MSApp.execUnsafeLocalFunction(function(){…})), but using it, I have this problem with focus. To solve the problem I removed this script and I start wrapping unsafe codes on my libraries.

        • http://www.johncblandii.com John C. Bland II

          Interesting problem. Thanks for sharing!