My journey to Polymer 3 starts with an idea for a side project, Daily, a Chrome extension that will provide all the latest news for web developers. In a nutshell, a Chrome extension is nothing more than a webapp with special API for close integration with the browser. As a Polymer advocate, I immediately bootstrapped a Polymer 2 project using polymer-cli and started hacking. Soon enough I understood that Polymer 2 as is, is not the right tool for the mission, Chrome does not allow running inline scripts from extensions. I found myself at crossroads where I had to choose whether to crisp all the inline javascript and keep using Polymer 2 or to use Polymer 3, which I recall (after watching the videos of Polymer summit 2017) uses es6 modules and not recommended for production. I hacked a quick proof of concept using Polymer 3 and loved it, so I decided to ignore the “non production” nonsense (kidding, of course) and just go it with.As I see it the only reason Polymer 3 is not production ready yet is the tooling. Tools are very handy for a web developer, from the very moment he or she needs to bootstrap a project to the long waited moment of shipping it, or even just to upgrade an existing project. I had to build everything from scratch, fortunately now that Polymer 3 uses es6 modules there are many tools that available out of the box (babel, uglify, webpack, etc). I had problem using es6 modules with Chrome extension so I ended using webpack with babel just to bundle everything to a single file without import , very simple building flow.Moving to npm and es6 modules is the best thing the Polymer team has done, it enables us, developers, to use almost every nodejs package out there. But it is not all rainbows and butterflies as we need to manage devDependencies and regular dependencies a bit differently. The dependencies has to be managed in flat hierarchy because they will be executed in a browser environment and devDependencies are executed in a nodejs environment so they can be managed as usual. Yarn partially supports this flow, but Rob Dodson already on it, you can keep tracking progress here. Basically to install a package use:
yarn add --flat --modules-folder modules packageName --production
For devDependencies:
yarn add --dev packageNameMy favorite Polymer feature is using HTML, when all other libraries/frameworks moved to JSX or other javascript based templating. Unfortunately, Polymer 3 just joined the others and now you have to write the templates using es6 template literals. Of course, it enables very complex templating patterns than before as it is basically a javascript code but I like to write my HTML in a HTML file, it feels more native. I think that the Polymer community also favors HTML but that just a hunch. I believe that the Polymer team will provide a tool to compile HTML to a template literal as part of the polymer-cli for Polymer 3. Writing templates using javascript requires a state of mind change, I still uses dom-repeat and dom-if although I can simply use javascript to do so, it will take time to do this transition.Other than moving to npm and es6 modules Polymer 3 is exactly like Polymer 2 and feels like home. The API is the same and does not require any change and again if I recall correctly the Polymer team said they are even building a tool for migrating Polymer 2 to 3.
Polymer 3 has a lot of potential to be the perfect library, it just needs the right tooling to answer the community needs and of course the most important thing to keep everything simple as it always have been with Polymer.
I would like to thank the Polymer team for their great effort making this amazing library and the tight communication with the developers.You are more than welcome to check out Daily and see Polymer 3 in action. This extension made is for you and for you only, so you will always be up-to-date and not waste your time chasing blog posts and RSS feeders.
