Ember–Handlebars.helpers in Windows 8 Metro

I tried to use Ember.js Handlebars helper {{action}} in a Windows 8 Metro (Windows Store) application. The data marker attribute appeared, but the function was never called.

I managed to find the root cause: Ember.js uses jQuery.ready() for initialization.

Solution

Change

waitForDOMContentLoaded: function() {
    this.deferReadiness();

    var self = this;
    this.$().ready(function() {
      self.advanceReadiness();
    });
  },

to

waitForDOMContentLoaded: function() {
    this.deferReadiness();

    var self = this;
      
    WinJS.Application.addEventListener("ready", function () {
        self.advanceReadiness();
    });

  },

and comment out 2 lines as shown below:

advanceReadiness: function() {
    this._readinessDeferrals--;

    //if (this._readinessDeferrals === 0) {
      Ember.run.once(this, this.didBecomeReady);
    //}
  },

Now you will use the Metro infrastructure for events.

Handlebars and Ember templating in Window 8 Metro

Handlebars uses script blocks for template markup. E.g.

<script type="text/x-handlebars" data-template-name="say-hello">
      Hello, <b>{{MyApp.name}}</b>
</script>

Unfortunately the Metro JavaScript engine removes the data-template-name attribute from the script tag, so this method can’t be used for templating.

As JS files are available locally for execution, the template files can be stored in separate HTML files and can be parsed from code. The implementation is simple:

        

Windows.ApplicationModel.Package.current.installedLocation.getFolderAsync(path).done(function(folder) {
    var search = folder.createFileQuery(Windows.Storage.Search.CommonFileQuery.orderByName);
                search.getFilesAsync().done(function (res) {
                        res.forEach(function (file) {
                                var template;
                                Windows.Storage.FileIO.readTextAsync(file).then(function(fileContent) {
                                       var template = Ember.Handlebars.compile(fileContent);
                                       Ember.TEMPLATES[file.displayName] = template;
[…]

I omitted the async promises from the code for readability, but the code won’t work without them.

The code above

1. reads all the files from a folder
   
2. compiles the template
   
3. stores the compiled template as an Ember template

Now Ember.js and Handlebars.js are fully functional, even Ember.View can be used with view.append().

Digital TV Experience

I have some experience with a Samsung smart TV I will summarize here.

TV

I have access to analog TV signal, and I must tell you this is not what a digital TV was made for. It’s acceptable, but

• the image is not sharp, thanks to the low resolution
• the aspect ratio of the picture (aka picture size) changes among channels, or even between programs
• the TV tries to enhance the quality of the image (e.g. sharpens the edges at still images), and sometimes that can be annoying
• no electronic program guide (EPG)

I tried to receive DVB-T signal but I couldn’t. Just a few channels with long breaks in receiving. Though the image quality was wonderful and I got EPG.

Teletext

Teletext comes with the channels supporting this technology. It is the shadow of the analog era. Digital TVs try to enhance this technology:

• store pages in memory, no need to wait for paging
• more txt display modes

Don’t expect too much from this.

Multimedia

Digital TVs support a standard protocol (DLNA) for receiving multimedia streams from other devices. Just put the two devices onto the same subnet of your LAN (use the same router with cable or Wi-Fi) and the two devices will see each other. In my case I run a Samsung AllShare DLNA server on my desktop computer and

• I can select the movie I want to play from the TV’s menu
• I can start playing the movie on my TV pressing a button on my computer using AllShare or Windows Media Player.

Smartphones have the same capabilities. Moreover

• I can start playing a movie on the TV from my computer pressing a button on my smart phone
• I can control the TV from the smart phone as a TV remote (needs special app on your phone)

You can by a NAS with DLNA support and you will have an always online media server without noisy fans.

HDMI

Connecting a HDMI cable to the TV and the computer, means the computer’s desktop can be displayed on the TV, in excellent quality.

Even the sound can be redirected to the TV’s speakers or sound system. Just open the sound playback devices and set the TV as the default sound device.

If your TV supports HDMI Ethernet channel, you can use your TV as a(n Internet) router for multimedia device (blue-ray player etc.).

Smart features

I have access to a Samsung smart TV. It has an Internet browser and apps can be downloaded from a store. There are some useful apps like online radio and TV  channel guide, but the most useful app is the Internet browser. It has Flash support and loads most of the websites I tried to visit.

For better experience I suggest you to buy a wireless keyboard and mouse. There are multimedia keyboards combining these devices into a small device just like a game controller.

Require JS with Win 8 Metro interface

Require.js works with Windows 8 Metro-style (Windows Store) applications.

Page scripts

There is a JavaScript file for each HTML page files. You cannot wrap this .js file into a require function. The page events (e.g. the ready event) won’t be called.

You can place a require call into the event handler function and that works.

Git: create a tag on a (remote) branch

You can create a tag on the local branch and you must push the tag to the remote.

Command line

> git tag …

> git push --tags

TortoiseGit

1. Create tag
1. set tag name
2. set tag/branch/version
3. enter message
2. Sync/Push
1. Select Push tags instead of Push button in the dropdown

Git Extensions

1. Browse
2. Right click on the commit log you want to tag
3. Select Create new tag
4. Enter data
5. Push
1. Select Push tags tab

Hate JavaScript?

Do you hate JavaScript? Well, I have bad news. There are still no alternatives in the web browsers.

I develop ASP.NET (MVC) –based web applications, and I must use JavaScript. What’s the big difference between the modern web applications and websites from a few years ago? Well, the server-side/client-side ratio. A few years ago I was happy coding on server-side. I did as much as I could do in C#, in ASP.NET. I did learn JavaScript but I avoided it as much as I could (so I never knew it well enough).

Now you can’t avoid JavaScript anymore. More and more code is on client-side. More and more business logic and architectural challenges are on client-side, right in the browser. I’ve written database-like features and even messaging systems in JavaScript. That challenge reminds me the early days of other languages. Missing features, missing language support, missing best practices, missing design patterns. Pure greenfield tasks.

How well do you speak JavaScript? A few years ago it was enough to understand how to define a function and some variables. Learn how DOM works. How different DOMs work. That’s not a small thing if you did it well. But did we write good, quality code with low bug ratio and good manageability? I’d say no.

A few years later there came the object-oriented world to JavaScript. We, I personally, had to learn the idea behind prototype-based languages. That’s a hard step with a ‘real’ object-oriented (Java, C#, C++) mindset. How can I implement inheritance? How can I hide data? How can I achieve polymorphism? Tough questions. Luckily along came design patterns. There are even a few books on the topic in JavaScript. Still, it’s not easy. I personally can recite 4-5 inheritance patterns. There are at least 2 data hiding patterns I can recall right now.

Well, many options, with their own drawbacks. It’s not easy to choose, e.g. at the beginning of a new project. There is no universal solution. There is no good solution. You have to consider the tasks you have to do with your object model and the knowledge level of the colleagues. Usually the later is harder. How much knowledge people have about JavaScript in e.g. Java/C# world? As much as they get along the projects. They teach each other.  To good and bed. What I saw in the last years, mostly obsolete and sometimes bad. Not easy to show them the current trends and solutions. Or may I say, contemporary engineering practices. People can, and usually are, be very proud of their coding style, quality, cleverness, etc. How can they be so neglect on these in an other language, e.g. JavaScript?

Now there are frameworks for DOM manipulation (jQuery, dojo, YUI), for common tasks (Underscore, YUI, Closure), and there are architectural frameworks (Knockout, Backbone) as well. As you can see, they are fractured and you must use different frameworks for different tasks. You should choose well because it’s very very hard to change frameworks, and you have to watch out for compatibility. Framework version changes represent huge risk in the lifetime of a project. Even a minor version change can render your web application totally useless. So test heavily.

No we have two ways. Full manual testing with a lot of humans. Or follow the ‘new’ trend and use some kind of automated test frameworks (Selenium, Watir). If they work the way you think. If it’s not more time to maintain your tests than execute them manually.

The same applies to unit tests. There are various frameworks in different flavors (xUnit, BDD, etc.) with different capabilities and APIs. Some live long, some live short. Choose well. Update regularly. Follow the news, trends.

Well, I chose a unit testing framework. Now I should test my code. How? It produces HTML into the DOM and calculates things according to different business rules – in the same function. Well, good luck. Try separating your business logic from visual stuff. Rings the bell? MVC? MVVM? Well, I’d say Knockout and Backbone. I’d say use (revealing) module pattern for your view model and your rendering as well. Separate them. Use a framework, e.g. Require.js. If you do it good, you can even get rid of the inheritance and other OO problems. Now you can test your business logic separated from the UI.

Next problem: I have a dynamic AJAX (AJAJ - Asynchronous Javascript and JSON) application calling back to the server. That’s not good. Let’s spy. Let’s stub.  Let’s mock. Find a framework, I chose Sinon.

So, let’s summarize. I do my job well if I know functions, variables, OO patterns, DOM frameworks, task frameworks, architectural frameworks, testing frameworks, module patterns, JavaScript mocking frameworks. Is that enough?

I have bed news. We in the web world develop applications like C++ coders develop applications for Windows, Linux, BSD… at the same time with the same code base. Instead of OSs, we have browsers and JavaScript standard versions. Now we have mobile devices as well, with different kind of browsers. So keep up, learn and write code in JavaScript. It’s better to learn and understand it than hope for surviving it. The next few years are about JavaScript and the Web. Get used to it, accept it. Do it as good as you do your job on server-side.

jQuery div vs native doc fragment

I assumed creating a div with jQuery takes more time compared to native document fragment creation. Surprise, I was wrong. I’ve created a test page on JSPerf at http://jsperf.com/jquery-vs-documentfragment. Simply put, the speed depends on the browser.

Verdict: Use document fragment in all browsers except Internet Explorer. In general, use document fragment:

document.createDocumentFragment();