Tech Blog

Jay's Technical blog

Logo For Windows8 in JavaScript: Lessons Learned

29 November 2012
Jay Kimble

[WARNING! This is an archived post and as such there may be things broken/missing here.. you have been warned.]

So Kevin Wolf created a community challenge with a ARM Surface Tablet as the prize. He presented this to the local Florida Windows8 Development Community which I am a part of.

Here’s the basics of the challenge:

  • The Windows 8 App must be 100% JavaScript/HTML/CSS; no other client technologies allowed.
  • It had to be in the Windows Store by Dec. 1st (we had approximately 2 months to do it)
  • He wanted the app to be non-trivial so therefore there was criteria for what was “non-trivial”:
    • App must have a market base that was not the development community (and could not be a sample app). In other words it had to have an audience, a real audience.
    • App must implement some form of capture (first name, last name, etc)
    • App must connect to a web service of some type and pull and push data to it (both reads and writes); social networking sites were disallowed, but any other public or private web service was acceptable
    • Needed to implement either search or the share contracts
    • Must use either:
      • the camera in a meaningful way
      • Location services AND Bing maps in a meaningful way
    • Must implement 1 animation

That was it. When I saw the list I was thought, “Boy, he rigged the contest.” I could do that, but I’ve done this kind of insane project in the past. I considered doing it and forgot about it for a month.

A Funny Thing Happened on the way to a presentation

So  along the way I had agreed to do a presentation for the Great American Teach in at my kids’ school. I decided that I would show them some beginning programming with the Logo programming environment (aka Turtle Graphics). I decided since I would be using my Samsung Slate to do this that I should probably go ahead and find a Windows 8 implementation of logo. I couldn’t find one. After a bit of searching around I found a nifty one in JavaScript using the HTML5 Canvas. I decided to take this single page environment and make a full Windows 8 Store app with it. It was all rather trivial. I think the initial version took me 2 evenings to get working (so a couple of hours). I did have to change things. The version I had was using jqConsole which seemed to be overkill, but it provided one nice thing: history. So I fired up TyopeScript and created a nice little history component for my jqConsole replacement (essentially a Textbox with a sprinkling of JavaScript code to sniff for the enter key). I also added a few buttons to make it convenient to retrieve past history items and a scrollable region containing that history.

My presentation went off wonderful, and now I was thinking about finishing the app and getting it into the store (really as a convenience for others). It was at this point that I remember the challenge and realized that I had done the first couple items. Next up was the whole Share contract. Essentially what I did was make it possible to share out your history. I also implemented (I think) the opposite mechanism where you can share text back to the Logo app where each line will be executed by the Logo interpreter.

For the animation I created a simple movement of my turtle in CSS; he starts at the bottom of the page and moves to the center where he belongs.

Next I implemented hitting my personal App Analytics server for Error reporting (mainly). It stays off in most cases unless I am having issues with something then I turn it on for an app. Anyway, I only implemented the read component of this.

At this point I submitted to the Windows8 Store. I failed for not having a privacy policy (you have to have one when you need Internet access). That was harder than it should have been since I needed to learn a few things about doing this in HTML5 apps (which, BTW, is easier than what it takes in XAML.. HTML5 apps have a few more controls that we should have in XAML, but I digress). I got in…

I announced that I had won the challenge, only to read closer and realized that I needed GPS and WebService pushes. I decided to implement a non-standard GLAT/GLONG expressions in the Logo interpreter as a nicety for teaching students how to write a “how close am I too the equator (or other landmarks)” function. This didn’t take that long.

I next implemented a simple write to my Web service and got it working (this was harder). For both of the these I wrote TypeScript. I’ve learned enough about JavaScript that if I am writing something non-trivial I want a tool to help me. There are way too many gotchas with JavaScript that it just makes sense to me (Mind you, I have maintained systems that have tens of thousands of lines of JavaScript code and even worked on a system with 100k of JavaScript! By no means am I a rookie). I got it working and got rejected on Tuesday do to something not working.. not sure what that would be…

BUT I realized that the requirement was to write something with GPS AND Maps.. Not just GPS. If I had chosen camera (and I could have come up with something for that, but reasons also matter, because of the words “meaningful way”), I would have more or less been there. I have resubmitted but even if this version gets in before Dec. 1, I still didn’t complete the challenge…

Surprises

I ran into a couple of surprises. In some respects the set of controls that MS has enabled with WinJS/Html is a little more rich, and pretty easy to setup. The biggest item was the flyout when I built a settings panel for my GPS Enabler. The code to write this was mostly HTML and magic CSS Classes (I say magic because the MS Environment just knows what to do with them to create the control). This actually had me slightly enamored..

Takeaways

First of all if you have talked to me in the last week or so you may have gotten a different impression. I mentioned some positives to this. There are definitely some positives. BUT, I also need to factor in me. I was a trainer during the Web 2.0 craze. I knew my stuff. I once worked on/maintained/added features to a web project that had close to 100k lines of JavaScript code. I want you to ponder that for a moment…. you back? Good. Now realize that I can do non-trivial things with JavaScript and HTML (things you might not be able to do). I’m not as knowledgeable with the latest and greatest on the HTML5 track, but by no means am I an newbie with this.

Also, the project I took was something that already worked well with IE10, and I simply sucked it into the Windows8 Templates. If that was the end of the story then I would say everyone should be doing this, but it’s not. While my project was non-trivial, the task seemed to be trivial. Creating the share contract for instance involved me tweaking the JS code to expose things I could share. I imagine this is the case with Search as well.. you will have a fair bit of tweaking to make things happen.

Lessons Learned

So the positives, Microsoft has thought through this and what they have delivered is a nice environment. You can do some stuff with this. They have enabled a pretty easy mechanism for you to access the various controls via CSS Styles which makes things pretty easy on that front. If you are doing something fairly trivial (port a single page over that already works in IE10, or single page that sucks in rss feeds) then have at it. You can do it with HTML5/WinJS.

If you are doing anything more complex, I would suggest skipping HTML5, and putting on your “big boy” pants and building your app with XAML, VS2012, Blend (if you need it), and a copy of John Papa’s Data-Driven Services with Silverlight 2 (which needs to be renamed “Data-Driven Services with XAML” because it still applies today). With all that in hand you can do XAML. It’s not that hard. AND, by “complex” I mean web services in any form (where you don’t already have a fully tested/stable JavaScript library to access that service), Maps, Fancy Animations, File Apis, anything data driven…

Another lesson learned, if you have to write JavaScript, write TypeScript instead. You still have to remember that you are using closures from things like events, but it’s certainly a lot better having the design environment tell you when something is wrong due to typing, or misspelling, etc.

Html/WinJS has the same net effect in my mind as most of the JavaScript apps I have written in the past.. they are quirky. My Xaml apps feel much more solid. In my mind I will keep an eye on the technology, but I am going to stick with XAML for the near future… (you can’t do everything in JavaScript as some would like us to believe).