Friday, December 20, 2013

Building Application Polymers in Dart

I tend to doubt that I will include a deployment chapter in Patterns in Polymer. It would be difficult at best to find commonalities between the Dart and JavaScript version. I would also imagine that best practices on the matter would change and likely be better in web form than in book form. Still, I am curious enough to play with it one more night.

Last night, I found that, instead of organizing a Dart application with application-specific polymers in the usual lib structure:
├── hello_you.dart
└── hello-you.html
└── index.html
I had to include my application specific Polymers in a subdirectory of the web application directory:
├── elements
│   ├── hello_you.dart
│   └── hello-you.html
└── index.html
I can live with that, especially since I found that the ToDo MVC does the same. But then James Hurford reported that he was able to get it working with the lib approach. So let's see if I can get this going.

This is not the first time that James has reported being able to do something that I could not get working. The most obvious difference between our setups is that James is coding in the DartEditor while I rely on the one true editor, Emacs. To eliminate this as a possible cause, I fire up the application in the DartEditor and right-click build a Polymer app:

When I run my app in Dartium, I am still not seeing my Polymer, just the text wrapped by the Polymer:

In addition to not seeing Polymer in action, I also see that my assets, like:
<link type="text/css" rel="stylesheet" href="/assets/ie/bootstrap.min.css">
Are not being loaded. At this point, I realize that I am specifying my URLs absolutely, including the URLs that point to my application Polymers:
<link rel="import" href="/packages/ie/hello-you.html">
If I change both to relative URLs:
<link type="text/css" rel="stylesheet" href="assets/ie/bootstrap.min.css">
<!-- ... -->
<link rel="import" href="packages/ie/hello-you.html">
Then re-build, then my application Polymer works!

That turns out to be the solution to my application specific Polymers. Switching back to Emacs and the command line, I change the Polymer URL back to an absolute URL and run pub build (part of Dart Pub). Serving the application up in pub serve, my Polymer fails again. It should not matter with pub serve because the relative and absolute URLs are the same in this case (DartEditor adds another URL path, which is why I noticed the assets not loading).

Switching that single Polymer import from an absolute to relative URL fixes the problem:
<link rel="import" href="packages/ie/hello-you.html">
After a quick pub build, my Polymer is again working just fine (in all browsers).

It seems that the pub build process really, really wants that to be a relative URL. I suppose that makes some sense since it is converting a web URL into a file system path. Still, I would think that the build process ought to be able to make that conversion on its own. For now, I am happy to have a solution, but I may file that as a bug after sleeping on it.

Day #971


  1. Hey I love Emacs too. I did my final research report for my Postgrade Diploma in it, using org-mode. Best thing since sliced bread is org-mode. ;-)

  2. Web/Components directory (for your components) seems to fit mental model better than Web/Elements.

    Your thoughts?

    1. That's a good point, I think you're right. I'm a bit concerned that the “components,” as opposed to “web components,” is a bit overloaded. The “web/components” path sounds right, but the “web” in Dart applications is meant to provide a different context than here. Heh. I'm really overthinking now :)

      Ultimately, I prefer putting them in the lib directory as I was able to do above.

    2. I prefer the lib directory for my components too, for the reason of, that web components are supposed to be libraries of code that we can reuse, and in Dart library files go in the lib directory.

    3. I can understand why you guys maybe attched to the lib directory.
      Have u considered that a component is made up of CSS, HTML & some Dart code? And having all these in one place 'web/components' is perhaps most logical.
      For your sever-side Dart apps ofcourse you'll use the lib directory.