Polymerize v0.9.1 is Out!

Extra! Extra! Read all ‘bout it!

A new version of polymerize is out with pub + dartdevc support !

Since dart version 1.24 on dartdevc is directly supported with pub.

For that reason polymerize from v0.9.1 on doesn’t require bazel anymore and you can just use the usual pub build workflow.

Bazel support will eventually added again if requested, probably by means of the official bazel support for dart (dazel).

Switching to pub gives many advantages and greatly simplify developing with polymerize because:

How to use polymerize

From this version using polymerize for your projects requires to make some modifications to your pubspec.yaml AND to your index.html.

Changes to pubspec.yaml

If you want to add support for polymerize to your project you just have to add it as a transformer:

dependencies:
 - polymer_element: ^2.0.4
 - html5: ^0.1.4
 - polymerize: ^0.9.1
transformers:
 - polymerize

The polymerize transformer should be added to any project that uses polymerize. In other worlds to the main project or to any other dependency that declares polymer elements.

Application entry point(s) (html and dart)

A polymerize application may have different entry points that are loaded on demand.

For each entry point you have to define at least two different files, for instance for module X:

     @init
     void startUp() {
        print('module X started');
     }
     
     import 'package:myapp/moduleX.dart';
     main(List<String> args) => startUp();
     

The actual file names are irrilevant. The important parts are :

For the main entry-point you will have to create an html file too :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Title</title>
        <script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
    </head>
    <body>
        <script type="application/dart" src="index.dart"></script>
        <script src="polymerize_require/start.js"></script>
    </body>
</html>

(In this example the main entry point is index.dart)

The html file should have to :

  1. include the web components polyfill (webcomponents-loader.js)
  2. define the main entry point with a script of type application/dart
  3. run the polymerize startup script (polymerize_require/start.js)

Finally entry points should be configured in the pubspec.yaml too using a glob expression :

...
transformers:
 - polymerize:
    entry-point: web/*.dart
...

Enabling dartdevc

Polymerize works only with dartdevc, so you have to build the project using that compiler. This can be done either by specifying the option in the command line:

 pub build --web-compiler dartdevc

Or by adding the web compiler configuration to the pubspec.yaml:

web:
  compiler:
    debug: dartdevc
    release: dartdevc

Warning : using dartdevc for release build will make your project loose the tree-shaking optimization and minification by dart2js. Polymerize allow you to use another option for shortening the load time : dynamically load modules on demand. So unless using some other ways to optimize your code and make load time shorter (like polymerize does) it is discouraged to use it for release build.

DEMO PROJECT

The demo project has been updated to use the new polymerize so, as usual, see the todo_demo for a code sample!

More on dynamic loading

Polymerize let’s you dynamically load pieces of your application based on user demand.

This makes it possible to create a startup page that loads very quickly and then load the rest of the application (or only a part of it) in a second time.

This is done by creating different entry points :

When the user access to the application the main entry point loader1 is initially loaded that shows a nice loading splash screen to the user. This will take a very short time to load.

Then the application will trigger the loading of mod1 that takes a bit longer. When finished the user can interact with the application.

When the users triggers a view defined inside mod2 the module is loaded and the view is displayed.

Even if the total loading time is greater if compared to a dart2js optimized application, the user experience could be even better because the most time he/she doesn’t even need to access to every modules and anyway the time he/she has always a feeling of a interactive and responsive application.

To learn more about this topic see the next post where we will show a real example with code samples and a step by step guide.

Update:

You can see a demo project that demonstrates the dynamic loading feature here.

The loading time (time for seeing the splashscreen) is around 117ms.

Then the first real module is loaded and the main component shown, this takes around 1s.

Finally clicking on the button an heavy module is loaded and shown.