Saturday, October 24, 2015

What tools and developer resource are available for Polymer ?

Data scientists need a platform for disseminating information and ideas. Polymer 1.0 release is perhaps the biggest news for web development this year and as this platform from Google matures we get more information on how app/website development is viewed by Google. New tools are being released and a whole ecosystem is forming around polymer and web components.



Last month the polymer summit took place in Amsterdam. One of the most useful session involved an outline of the full gamut of tools available for developers. I think it would be useful to summarize all these tools (I also added a few notable omissions). But the full video is embedded below.

  1. component catalog: list components, their apis, installation notes and online demos.
  2. package management: 
    1. Bower - supports flat dependency structure needed by polymer
    2. NPM - install Bower and other tools
  3. chrome dev editor: IDE, unfortunately, this is no longer under development.
  4. polyserve: server: 
  5. hydrolysis: generates API docs
  6. polyup - tool for porting polymer 0.5 to 1.0
  7. wct - web component tester
  8. polymer starter kit - boilerplate application project (offline support, responsive, theming, 
  9. seed-element: boilerplate component project  
  10. materialpallete.com - provides material design theme files in polymer's app theme file 
  11. build process:
    1. gulp
    2. quality & testing:
      1. wct
      2. jshint
      3. jscs
    3. minification:
      1. vulcanise
      2. javascript
      3. CSS style sheets
      4. images
    4. cross device 
      1. browser sync & reload
  12. routing components:
    1. page.js
  13. tutorials:
    1. 30 + polycast videos by Rob Dobson in the chrome developer channel
    2. polymer summit videos
    3. code labs
  14. support:

    1. slack polymer channels


The rest of this post is in Q&A format:

Seed element

Seed element - a template for  creating a reusable web component with

Polyserve

How to use polyserve with a custom port?

polyserve -p portNumber

Polyup

how to run a recursive upgrade on an polymer 0.5 project ?

$find . -name  -"*.html" -execdir polyup --overwite "{}" \;

WCT

How to install web component tester?

bower install Polymer/web-component-tester --save

how to run test using all installed browsers?

wct    

how to test with wct with just the chrome browser?

wct -l chrome    

how to test with wct and keep a browser open?

wct -p

how to test a single file with wct ?

wct path/

where is there more information on the polymer web component tester?

at the GitHub project page.

Vulcanize

vulcanize is mentioned frequently in the polymer, and here are are some use cases for working with it. Note that google analytics the page speed insights reports will frequently recommend taking some of these steps to improve the web site's performance:

how to install vulcanize ?

npm install -g vulcanize

how to using vulcanize to reduce ab app and its dependencies into a single file ?

vulcunize compnent-name.html > build.html

how to inline script and imports using vulcanize ?

vulcunize --inline-scripts  component.html

how to inline polymerised stylesheets using vulcanize ?

vulcunize --inline-scripts component.html

Crisper

splits a vulcanised file into html and javascript

Polyclean

What does polyclean it do ?
removes wite space

Polybuild

A build tool that is aware of vulcanise, crisper, polyclean and is used to build the polymer starter kit.

what does maximum crush option mean?


it's just shorthand for js minified with  whitespace removed

how do I  use maximum crush with polybuild?


polybuild -maximum-crush index.html

Polylint

how to install polylint ?

npm install -g polylint

how to use  polylint ?

polylint index.html

Want to watch the Addy Osmani's video from the polymer summit ?