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.
- component catalog: list components, their apis, installation notes and online demos.
- package management:
- Bower - supports flat dependency structure needed by polymer
- NPM - install Bower and other tools
- chrome dev editor: IDE, unfortunately, this is no longer under development.
- polyserve: server:
- hydrolysis: generates API docs
- polyup - tool for porting polymer 0.5 to 1.0
- wct - web component tester
- polymer starter kit - boilerplate application project (offline support, responsive, theming,
- seed-element: boilerplate component project
- materialpallete.com - provides material design theme files in polymer's app theme file
- build process:
- gulp
- quality & testing:
- wct
- jshint
- jscs
- minification:
- vulcanise
- javascript
- CSS style sheets
- images
- cross device
- browser sync & reload
- routing components:
- page.js
- tutorials:
- 30 + polycast videos by Rob Dobson in the chrome developer channel
- polymer summit videos
- code labs
- support:
- 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 ?
Want to watch the Addy Osmani's video from the polymer summit ?
Comments
Post a Comment