Well that went better that I expected. Deploying Dart flavored Polymer elements, that is. So the question tonight it, am I overlooking something?
I've had troubles building Dart Polymer elements in the past, so I was trepidatious diving into it last night. But it went surprisingly well. At least some of my earlier trouble may have involved interoperating with JavaScript, but I still expected more trouble than I found last night. So let's see if I can cause trouble.
First up, let's see if I can do something about the sheer number of Dart compiled / supported JavaScript files that are necessary for my single
<x-pizza> custom element:<!DOCTYPE html>
<html lang="en">
<head>
<script src="/scripts/x_pizza_templates.js"></script>
<script src="/scripts/shadow_dom.min.js"></script>
<script src="/scripts/custom-elements.min.js"></script>
<script src="/scripts/interop.js"></script>
<script src="/scripts/index.html_bootstrap.dart.js"></script>
</head>
<body>
<div class="container">
<h1>Ye Olde Dart Pizza Shoppe</h1>
<x-pizza></x-pizza>
</div>
</body>
</html>These JavaScript files are already minified:➜ scripts git:(master) ls -lh total 800K -rw-r----- 1 chris chris 11K Mar 27 23:14 custom-elements.min.js -rw-r--r-- 1 chris chris 417K Mar 27 23:16 index.html_bootstrap.dart.js -rw-r--r-- 1 chris chris 280K Mar 27 23:16 index.html_bootstrap.dart.js.map -rw-r----- 1 chris chris 426 Mar 27 23:15 interop.js -rw-r----- 1 chris chris 80K Mar 27 23:14 shadow_dom.min.js -rw-r--r-- 1 chris chris 1.5K Mar 28 21:41 x_pizza_templates.jsWell, as minified as they get. The main
index.html_bootstrap.dart.js file is definitely on the large side. There is not much that do about it as dart2js has done its best with a still early-in-development library. So, instead of worrying about making these any smaller, I hope to simply combine them into a single file:➜ scripts git:(master) ✗ cat \
x_pizza_templates.js \
shadow_dom.min.js \
custom-elements.min.js \
interop.js \
index.html_bootstrap.dart.js \
> x_pizza.jsWell, of course I can combine them into a single file, but will it work for deployment purposes?<!DOCTYPE html>
<html lang="en">
<head>
<script src="/scripts/x_pizza.js"></script>
</head>
<body>
<div class="container">
<h1>Ye Olde Dart Pizza Shoppe</h1>
<x-pizza></x-pizza>
</div>
</body>
</html>The answer, it would seem is a definite “yes”:
I am still able to build my pizzas with
<x-pizza> in a non-Dart enabled Chrome (Firefox works as well) and am now using only a single, readily deployed <script> source to do so. Nice!The other way that I thought to break this would be to include another compiled Dart script—event a simple one like:
import 'dart:html';
main(){
query('h1').style.color = 'red';
}After compiling that to JavaScript with dart2js, I pull the result into my deployment's script directory and try to use both this main() Dart script as well as the Dart Polymer element:<!DOCTYPE html>
<html lang="en">
<head>
<script src="/scripts/x_pizza.js"></script>
<script src="/scripts/main.dart" type="application/dart"></script>
<script src="/scripts/dart.js"></script>
</head>
<body>
<div class="container">
<h1>Ye Olde Dart Pizza Shoppe</h1>
<x-pizza></x-pizza>
</div>
</body>
</html>And, happily, that works absolutely as desired:
So wow. This Polymer.dart deployment really works. Sure, I might like the size of the Polymer elements to be smaller, but the compile size will gradually improve as Dart and Polymer.dart evolve. But to have everything else working this well, this early is wonderful. I think tomorrow I will look to automate all of this.
Day #17
No comments:
Post a Comment