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
For that reason
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 (
pub gives many advantages and greatly simplify developing with
- you don’t have to install another tool but only the dart sdk
- you don’t have to learn another build system
- it’s supported on every platform where
dartruns (windows ?)
pub serveWORKS !
How to use polymerize
From this version using
polymerize for your projects requires to make some modifications to
pubspec.yaml AND to your
Changes to pubspec.yaml
If you want to add support for
polymerize to your project you just have to add it as a
polymerize transformer should be added to any project that uses
In other worlds to the main project or to any other dependency that declares
Application entry point(s) (html and dart)
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
lib/moduleX.dartthe actual main entry point that should define the main function, annotated with
web/moduleX.dartthat’s simply a file that declares a
mainfunction that have to invoke the startUp :
The actual file names are irrilevant. The important parts are :
- having a
mainfunction in a
webfolder that makes a reference to
@initannotated function in
For the main entry-point you will have to create an
html file too :
(In this example the main entry point is
html file should have to :
- include the web components polyfill (
- define the main entry point with a
- run the polymerize startup script (
Finally entry points should be configured in the
pubspec.yaml too using a glob expression :
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
Warning : using
dartdevc for release build will make your project loose the
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.
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 :
loader1: Loader entry point , is the minimal part of the app that shows the loading page
mod1: Default module entry point, is the module that’s initially loaded after the loading page
mod2: Another module entry point, is another module that’s loaded based on user request
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.
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.