Is there a way to use existing Polymer standard core elements , such as core-toolbar and core-menu, in Dart?
If you download the polymer project with bower you can find the javascript versions in /polymer/bower-components/.
core-toolbar, for instance, contains a core-toolbar.html and a metadata.html. These have <polymer-element> tags in them just like in Dart. Can these be adapted?
In the meantime, an official package has arrived:
http://pub.dartlang.org/packages/core_elements
And you can even have the paper elements of the material design:
http://pub.dartlang.org/packages/paper_elements
I found this issues:
https://code.google.com/p/dart/issues/detail?id=14098
This is not the post I talked about in my comment.
https://code.google.com/p/dart/issues/detail?id=13758
The linked discussion in this issue could be the post I remembered
the TodoMVC is a Dart demo project (https://www.dartlang.org/samples/) that uses some Polymer.js polymer_elements
see source in lib-elements directory
As mentioned in my comment alternatively you could use the Dart port of polymer_elements and polymer_ui_elements
https://github.com/ErikGrimes/polymer_elements
https://github.com/ErikGrimes/polymer_ui_elements
Related
So I found this nice port of Chart.js as a polymer component on customelements.io but I'm not able to use them in my polymer.dart project. I copied all the files from the library project into my project and fixed the paths but the elements are not showing up. I get
Uncaught ReferenceError: Polymer is not defined chart-bar.html:27(anonymous function) chart-bar.html:27
(+ same error for the other files from the library proj).
I have no bower.json in my project (but a pubspec.yaml) and I'm wondering if I need one because the library project got one in there?
So what is the right way to get those polymer elements into my project?
There is currently no straight-forward way to use Polymer.js polymer elements in a Polymer.dart project.
You can try to generate Dart wrappers using https://github.com/dart-lang/custom-element-apigen / https://pub.dartlang.org/search?q=custom-element-apigen.
The code generation depends on proper JavaScript codedoc in the JS elements which is often incomplete but I have heard of people who were satisfied by the result (Dart core_elements/paper_elements are generated with this but there is also manual work involved).
I am curious to know if its possible to have Asynchronous module definition with Angular.dart (or dart in general), if yes, then please share a sample code for such a single page application.
AMD is made largely irrelevant by the fact that Dart comes with a complete module system that is built into the language. That is the purpose of the import statement. Dart files are dynamically loaded in Dartium. If you are using the darttojs transpiler, it will create a single large file. The solution to this is to use use the DeferredLibrary class which will cause darttojs to create separate javascript files for each annotated import
See Seth Ladd's blog post for more details.
I have read the Chapter on Production Deployment of the angular tutorial which indicates several ways to optimize the JS output size.
I also see a commit named feat(transformers): Add angular transformers to pub for no-mirror code generation. In this commit we can see the use of a new angular transformer.
Will this new transformer make the advices of the Angular tutorial obsolete ?
Will the optimization process be as simple as adding a single transformer to the pubspec.yaml ?
Yes and yes.
The tutorial should be updated with the next AngularDart release.
You can try out the transformers now by referencing the github repo in your pubspec.yaml.
I have this code:
// main.dart
import "package:angular/angular.dart";
main () => ngBootstrap();
I make dart2js --minify --out=main.dart.js main.dart
Then i have main.dart.js with size 2.6 MiB (2,744,320 bytes).
It is not normal. What i'm doing wrong?
Is angular.dart usable for production at this stage?
#media-slave24
Maybe this will be helpful for You:
https://code.google.com/p/dart/issues/detail?id=14686
It's reported on dart bug tracking system. Some people using mirrors got 760kb. So it's definitely a bug.
UPDATE (Jan '14): AngularDart 0.9.5 now includes a standard MirrorsUsed list. To finalize it and trigger Dart's tree-shaking optimizations, you need to add a MirrorsUsed to your program
listing all the classes you introduce.
override: '*' to finalize the MirrorsUsed.
Since helloworld has no new classes, say:
#MirrorsUsed(override: '*')
import 'dart:mirrors';
See Github for the complete helloworld program
The key is to include a #MirrorsUsed annotation in your Dart file. Pavel's link to the AngularDart tutorial is an excellent resource.
To actually answer your question: Yes, AngularDart can be used in production but be aware that it is in "beta" release right now. We expect many breaking API changes!
Take a look at angular.dart.tutorial Chapter 7 about deployment. It has a section on managing compiled code size:
https://github.com/angular/angular.dart.tutorial/tree/master/Chapter_07
I don't want to wait anymore and would like to use a polymer element written in dart right away.
The problem is that I want to use it in an already existing app, that's running on JavaScript.
Can I just compile my polymer elements to JavaScript, include the whole thing in my current app, and use my <awesome-element> tags?
No, you have to build a Dart app to use Dart Polymer elements.
You can include JavaScript in a Dart/PolymerDart application.