Thursday, December 19, 2013

Polymer.Dart in IE

The browser wars are long since over, won by Firefox when it reached 10% market share ca. 2005. Once that inflection point hit, it was impossible to target a single browser without alienating 1 out of every ten potential customers. At this point, it hardly matters which browser is “winning.” If a particular browser or browser version has 10% or more of the market share, we developers have to support it. If a particular browser or browser version has less than 10%, then we have to make a cost-benefit judgment on whether to support it.

That said, I rather like the approach of Dart and Polymer (and others): support only the most recent versions of evergreen (self-updating) browsers. To be sure, applications that are delivered today would ignore a fair portion of potential customers (10%-25% depending on which damn statistics you believe). But the cost of maintaining libraries and codebases for antique browsers is high—often prohibitively so. And as modern, evergreen browsers like Chrome, Firefox and Internet Explorer continue to evolve, the number of ignored potential customers goes down rapidly.

Bottom line: supporting browsers like Internet Explore 10+ is important. I have every reason to expect that Polymer, Dart, and even Polymer.dart will work on IE. But I have not tried it yet. I create a “hello world” type Polymer.dart application (actually, copy it from Patterns in Polymer) and serve it up via pub serve. When run in Dartium, the bound variables update the title and the button randomly changes the color in the same title:

My next step is to add the Polymer transformer to pubspec.yaml so that pub can transform this into JavaScript for other browsers:
name: ie
  polymer: any
  observe: "0.9.0+1"
  unittest: any
- polymer:
    entry_points: web/index.html
Only that doesn't work. Even in Dartium, I now find that my Polymer is being ignored. It is almost as if it is not being loaded from the lib directory.

After checking the sample ToDo MVC code, it seems that is exactly what is going on. In there, they have all of the Polymers in sub-directories of web.

So I copy my elements from the lib directory into web/elements:
➜  dart git:(master) ✗ cd web
➜  web git:(master) ✗ mkdir elements
➜  web git:(master) ✗ cd elements
➜  elements git:(master) ✗ cp -r ../../lib/hello* 
Then I update the page to point to the new location of the Polymer:
    <!-- Load component(s) -->
    <link rel="import" href="elements/hello-you.html">
    <!-- Load Polymer -->
    <script type="application/dart">
      export 'package:polymer/init.dart';
    <script src="packages/browser/dart.js"></script>
And I restart pub serve. With that, I have my Polymer.dart application serving up properly—even on Internet Explorer:

I will have to dig into the lib vs. web directory locations a bit more. I suspect that I need to package my Polymers for pub deployment rather than serving them from lib. For now, I am happy to have a proof of concept Polymer.dart successfully running under Internet Explorer.

Day #970


  1. Pub build with polymer transformers doesn't work for packages with entry pages in the web and elements in lib directory.

    The library package needs a polymer transformer without entrypages and the app package with entrypages defined.

    1. Thanks for the info -- at least I'm not crazy or doing something wrong!

      It seems like this ought to work though. I can understand requiring library packages to define their own polymer transforms. But there are times that I can see defining a Polymer that is specific to this one web application that I am writing. The added overhead of creating and maintaining a separate repository for that app-only Polymer library seems unnecessary.

      Ah well, I will give your suggestion a try. Much thanks for clueing me in :)

  2. Sorry to contradict. Again this doesn't work for you, but what you were originally trying to do with pub build actually does work for me. It must be something to do with my ENV. I have to specify the page I want to view though in the URL, ie http://localhost:8080/yourentrypoint.html. Or am I missing something obvious here?

    1. Sorry I meant to say pub serve

    2. Figured it out thanks to your tip:

      Thanks yet again :)