Geekly Articles each Day
📜 ⬆️ ⬇️

Use of vulcanization for polymer modules

polymerjs vulcanize

The project I'm working on now has a widget-like client architecture. Moreover, system widgets can use any library for their implementation, for example, ReactJS, PolymerJS, VueJS, d3JS, and others. Several system widgets are implemented, just like web components based on PolymerJS .

Therefore, I offer you one of the approaches for optimizing the polymer widgets.
')

Content:


1. Description of the problem
2. What difficulties arise?
3. How can they be solved?
4. Vulcanize-polymer-module library
4.1. Structure
4.2. Bower.json description
4.3. Package.json description
4.3.1. Installation Utilities
4.3.2. RollupJS Setup
4.4. vulcanize-utils.js
5. Conclusions

1. Description of the problem


One of the main problems of polymer applications is the multiple loading of the components used and all the dependent components, which in turn can consist of auxiliary styles, behaviors that can also be loaded additionally. As a result, the console in the network section will be “backfilled” with these files. In view of all this, the first download of such a widget can be quite long, depending on the number of composite web components used.

Vulcanization is used in polymer applications for these purposes. It is implied that this application has an entry point in the form, for example, index.html , in which the main container component is deployed, for example <App /> . In this file, the polymer core itself and the component file of the <App /> container are connected, and then all the components used are hierarchically connected, which themselves are separate html files. The process of vulcanization itself consists in “gluing” all the components used and the polymer core into one file, which will ultimately be the entry point for index.html .

2. What difficulties arise?


  1. The first difficulty is that I do not have a polymer-application, but several composite components (let's call them smart components - the Criminal Code), which are wrapped in a system widget, that is, there is no single entry point.
  2. The second difficulty is that during the work with the application the page with these widgets may not be called at all, and accordingly none of the polymer components will simply be needed in the current session of work, not to mention the polymer core itself.
  3. The third one - one Criminal Code uses one set of atomic ( paper- , iron- and others) components (let's call them stupid components - GK), and the other - another set. Moreover, there may be intersections, that is, two different CCs use the same CC .

3. How can they be solved?


If we consider the first difficulty, I could vulcanize each CC separately, but then if we take the third problem, duplication of the same HAs is possible, and there will definitely be duplication of the polymer core, if we consider the situation in which at least two CCs were used in one session . Therefore, another solution is needed.

If we consider the second complexity, we need to make sure that the polymer core and the GCs are loaded only once, at the first access to one of the Criminal Code , and at the time of the second, there is no need to reload everything, but only dynamically load the Criminal Code itself.
If we consider the third difficulty, then we need to make a list of all the used stupid components in the smart, which we will eventually vulcanize together with the polymer itself.

4. Vulcanize-polymer-module library


All the above theses I designed in the form of a library vulcanize-polymer-module.
I want to tell you more about it.

4.1. Structure

vulcanize-polymer-module/
├── imports.html
├── vulcanize-utils.js
├── rollup.config.js
├── bower.json
└── package.json

4.2. Bower.json description

In it, we describe all the HAs that we need as dependencies, including the polymer itself.

For example, the dependencies section might look like this:

dependencies
 "dependencies": {
     "polymer": "Polymer / polymer # ^ 2.0.0",
     "polymer-redux": "^ 1.0.0",
     "iron-flex-layout": "PolymerElements / iron-flex-layout # ^ 2.0.0",
     "paper-button": "PolymerElements / paper-button # ^ 2.0.0",
     "paper-badge": "PolymerElements / paper-badge # ^ 2.0.0",
     "paper-icon-button": "PolymerElements / paper-icon-button # ^ 2.0.0",
     "paper-input": "PolymerElements / paper-input # ^ 2.0.0",
     "paper-item": "PolymerElements / paper-item # ^ 2.0.0",
     "paper-checkbox": "PolymerElements / paper-checkbox # ^ 2.0.0",
     "paper-tabs": "PolymerElements / paper-tabs # ^ 2.0.0",
     "paper-listbox": "PolymerElements / paper-listbox # ^ 2.0.0",
     "iron-a11y-keys": "PolymerElements / iron-a11y-keys # ^ 2.0.0",
     "iron-list": "PolymerElements / iron-list # ^ 2.0.0",
     "iron-icons": "PolymerElements / iron-icons # ^ 2.0.0",
     "paper-progress": "PolymerElements / paper-progress # ^ 2.0.0",
     "vaadin-split-layout": "vaadin / vaadin-split-layout # ^ 2.0.0",
     "vaadin-grid": "^ 3.0.0",
     "iron-pages": "PolymerElements / iron-pages # ^ 2.0.0",
     "iron-collapse": "PolymerElements / iron-collapse # ^ 2.0.0",
     "iron-overlay-behavior": "PolymerElements / iron-overlay-behavior # ^ 2.0.0",
     "vaadin-context-menu": "^ 3.0.0"
   }




Since I use redux with polymer, I included the polymer-redux library .

4.3. Package.json description

It contains the dependencies we need to build, in particular RollupJS , which is used for intermediate cleaning of the output file code. The commands used for vulcanization are also described, let's look at them in more detail.

scripts
  "scripts": {
     "build": "rollup -c",
     "vulcanize": "vulcanize imports.html --inline-scripts --inline-css --strip-comments",
     "run-vulcanize": "npm run vulcanize> imports.vulcanize.html",
     "vulcanized": "vulcanize imports.html --inline-scripts --inline-css --strip-comments | crisper --html imports.vulcanized.html --js imports.vulcanized.js> imports.vulcanized.html",
     "html-minifier": "html-minifier imports.vulcanized.html --remove-optional-tags --collapse-whitespace --preserve-line-breaks -o imports.vulcanized.min.html",
     "build-all": "npm run vulcanized && npm run build && npm run html-minifier"
   }


Commands, in order and priority of their use:

4.3.1. Installation Utilities

As you can see there are many additional utilities that we need to pre-install into the system.

Installation Utilities
 npm install -g vulcanize npm install -g crisper npm install -g html-minifier


4.3.2. RollupJS Setup

Since rollup is used only for cleaning js-code, I use only one plugin for it - rollup-plugin-cleanup . The rollup-plugin-progress plugin is used to visualize the build process.

rollup.config.js
 import progress from 'rollup-plugin-progress'; import cleanup from 'rollup-plugin-cleanup'; export default { entry: 'imports.vulcanized.js', dest: 'imports.vulcanized.js', plugins: [ cleanup(), progress({ }), ] };


4.4. vulcanize-utils.js

To solve the second requirement, the utilitarian loadVulcanized method was written, which loads the CM , but before that loads the vulcanized file, and does it once and in the cases of the repeated call, loads only the CM itself.
Let us consider its parameters in more detail.

loadVulcanized = function (url, urlVulcanized, controller, html, store)
  • url - the path to the smart component. It is required.
  • urlVulcanized - path to the vulcanized assembly. The default is the path to this build - ../vulcanize-polymer-module/imports.vulcanized.min.html
  • controller - in my case it is the system widget controller. Optional.
  • html is the html object of the smart component. It makes sense if the controller is set.
  • store - redux store. Optional.


5. Conclusions


Of course, you can use polymer-cli with the build parameter, but when building with it, it is assumed that the polymer-project is building, and since we use the components in more than one <App /> container, we will have to assemble each CM separately and the build files have duplication of the polymer core and the compound HAs . Therefore, the approach described in the article has sufficient efficiency in systems using several UI libraries together, due to the single entry point for all CCs based on polymer.

One of the possible disadvantages can be considered as the redundancy of the civil code in the vulcanized file, since it contains all the civil code of all the criminal code used in the system, but not all the criminal code can be used during the work session, which means that not all the civil code will be used in downloaded vulcanized file.

Also, as a slight inconvenience, you can consider the fact that after adding a new component, you need to restart the assembly, then update the repository (push), and other users should update this library via bower update.

Despite all this, this library solves its problem in this project, and therefore it may be useful to someone else.

So fork , welcome.

Source: https://habr.com/ru/post/333660/

More articles:


All Articles