Saturday, September 21, 2013

Polymer for component based Web development?

I investigated polymer.
First I tried all samples in dart-plolymer-dart-examples.

The thing I found was the last half of samples are not working.
The typical error is:

Exception: The null object does not have a method 'callSync'.

NoSuchMethodError : method not found: 'callSync'
Receiver: null
Arguments: [GrowableObjectArray len:0]
  Object.noSuchMethod (dart:core-patch/object_patch.dart:20:25)
  context (dart:js:9:58)
  PolymerElement._shimCss (package:polymer/polymer_element.dart:185:16)
  PolymerElement._initShadowRoot (package:polymer/polymer_element.dart:162:15)
  PolymerElement.created (package:polymer/polymer_element.dart:125:20)
  _initCustomElement (package:custom_element/custom_element.dart:584:18)
  registerCustomElement (package:custom_element/custom_element.dart:53:25)
  registerPolymerElement (package:polymer/polymer_element.dart:27:24)
  _loadLibrary (package:polymer/polymer.dart:109:31)
  initPolymer.<anonymous closure> (package:polymer/polymer.dart:63:19)
Essentially this  problem has been introduced after dart.js removed interop.js.
So I needed to add <script src="packages/browser/interop.js"></script> for most of index.html as following:

    <script src='packages/polymer/boot.js'></script>
    <script src="packages/browser/interop.js"></script>
Since boot.js is always used, it would be simpler to include this in boot.js.

After this fix, I still observered two errors, which I will append to teh end of this post.

Polymer is several useful features like model binding and jps like control extentions in html.
So basic idea is actually closer to traditional extended html approach.

Some interesting feature is  synchronization mechanism through Observable.(using annotation for observable field).
Although it looked good, but when I used this feature in dynamically allocated entity, it did not work.

So overall, I was a bit dis illusioned for polymer.
Essentially, these approach may be useful for more static type of application.
But if we want to do something more dynamic and/or generic, polymer will not be useful approach.
For instance, Apache Pivot has it own XML like GUI definition language(this seems sort of popular approach these days). it has similar problem as Polymer for generic GUI class development.

Still Polymer be useful to package such a generic library even that library may not be using Polymer.

But if we want to take more programatical approach for GUI development, it may not be so useful at all.

==========================================
[interop_with_polymer_elements]
Uncaught TypeError: Cannot call method 'querySelectorAll' of undefined
  inlinePolymerElements (http://127.0.0.1:3030/opt/dart-workspace/dart-polymer-dart-examples/web/interop_with_polymer_elements/packages/polymer/boot.js:83:25)
  inlinePolymerElements (http://127.0.0.1:3030/opt/dart-workspace/dart-polymer-dart-examples/web/interop_with_polymer_elements/packages/polymer/boot.js:92:7)
   ....
==========================================
[nested_templates]

Uncaught Error: EvalException: variable not found: name in 91145084
Stack Trace:
#0      Scope.[] (package:polymer_expressions/eval.dart:169:7)
#1      IdentifierObserver._updateSelf (package:polymer_expressions/eval.dart:406:19)
#2      ExpressionObserver._observe (package:polymer_expressions/eval.dart:252:16)
#3      Updater.visitExpression (package:polymer_expressions/eval.dart:268:15)
....

1 comment: