Developing webapp using Polymer : is it ready for production? or not?

Jeongkyu Shin

Lablup Inc.

• From XHTML to WebApp

• XSLT / Google Gear

• HTML5 and eternal war

• webcomponent

Webcomponents• HTML imports

• Custom element to extend basic DOM

• Templates

• Shadow DOM

• “Polyfill”

• Polymer by Google Inc.

• x-tag by Mozilla

• Web “App”

• Native Custom DOM element support

http://lablup.com source

Problem?

–Old phrase

“Devil is in the details.”

1. It is too google to be true• Polymer-based project since March 2015.

• 0.5 - 0.8rc2 - 0.9 and

• We gave up (twice) because it is too hard to migrate between each version

• Specs changes like fluid:

• OK. Let’s believe one more time!

• And our quest begins…

• How hard?

• Original 0.5 components are unusable on 1.0

• And is it ready?

• Polymer main site is still on 0.5

• Many core functions are still missing

• e.g. iron-form-behavior with paper-toggle

2. Vulcanize

• Polymer cannot be used as production without vulcanize process

• “Compile process” for polymer library

• It does not work as intended:

• Generates broken HTML: did not work with IE

• Redundant codes in vulcanized HTML

• Different CSS result between browsers after compile

• Still too fluid: specs are changing every week

• We had to make our own patched compiler / script to work with IE

• And how big is it?

• ~600k for common paper elements

• —inline-css —inline-script option

Code Vulcanize minimize crisper

3. Polyfill has to fill the ocean

• 79 / 47 / 34 / 9

• The number of page rendering during HTMLimports

IE Safari Firefox Chrome

79 47 34 9

*Tested with our project (without vulcanize)

Pros?!• One code can rule them all

• Polymer+electron = Desktop web app

• Automatic (and inevitable) responsive design = Mobile web app

• Provides

• iron elements (HTML form / behavior elements)

• paper element (HTML elements with material design)

• gold element (special elements for e-commerce)

• google element and

• platinum element (for web app features like push / local storage)

Final word

• It’s too google to be solid yet

• Vulcanizer issues

• Rendering issues

Final word

• Swim in the ocean. DO NOT swim in the sand ocean.

• However, if you prepare for the future web, try it.

• And we are working on it.

Have a good day :)