Polymer:
- A wrapper with syntactic sugar for the new HTML WebComponents W3C spec.
- Allows easy modularization and reuse of HTML/CSS/JS code.
- Creates more readable source files.
- Being actively developed by Google.
The purpose of this article is to provide the basic information needed for the easiest way to get started with Polymer, including downloading creating a custom Polymer element, and reusing other elements. This article probably could have been split into three separate smaller ones, but I'm opting for a single page that can be used as a "cheat sheet". Most of this information is from the
official site, but the difference is that this is shorter guide with many deletions, a few additions, and different organization.
Getting Started For The First Time
This is a quick walkthrough for how to get started with Polymer from scratch.
1. There are a few different ways to get Polymer, but the easiest is with Bower, which is a package and dependency manager for many web libraries. So,
install Bower if you don't already have it.
2. Create a new directory for your web project, then run `
bower init` in it using a console. There will be a few questions, in which you can just press Enter if you don't know what to do yet. This initialization just produces a `bower.json` file, which has settings that can easily be changed later.
3. Install Polymer for the project by running `
bower install --save Polymer/polymer`. This will create and fill a new directory `bower_components` with Polymer and its dependencies. Using `--save` will update the `bower.json` file by listing Polymer as a dependency. (Sidenote: To update the components in bower_components, just run `
bower update`.)
Now, you can use Polymer in your project. See the section on [How To Create A Polyment Element] for a quick walkthrough on getting a simple app working.
How To Create A Polymer Element
In this quick walkthrough, you'll create and implement a simple Polymer element called `my-element`.
1. Create a new file called `my-element.html` and add the following code. Make sure the import is pointing to the valid location within the bower_components directory that was created in the previous walkthrough.
Use your element in `index.html`. Here's a minimal example. Note: The above `my-elements.html` was put in an `elements` directory for some organization.
Run the app from a web server so that the [HTML Imports](https://www.polymer-project.org/platform/html-imports.html) work correctly. For example, to run on localhost instead of remote, if you have Python 2, then you can run `
python -m SimpleHTTPServer`. If you have Python 3, then you can run `
python -m http.server`.
Notes about Polymer elements:
- The name of the element must have at least one dash `-` in it. (Reason: It's part of the web component spec as to not interfere with official HTML tags.)
- The `noscript` attribute used in the above sample code indicates that it's a simple element with no script, which allows it to be registered automatically.
How To Reuse Other Polymer Elements
First, find some elements with Bower by running `
bower search Polymer`. This will show most of the elements that the Polymer team as created. For a curated list of custom elements, check out
customelements.io/. For a scrape of GitHub of all the projects that mention "web component", see
Component Kitchen. These instructions work for both Polymer elements and regular web components as long as they are registered with Bower, otherwise they'll have to be installed manually.
1. Install the element for your web project, for example: `
bower install --save Polymer/core-ajax`. The `--save` flag is used to add that element as a dependency to the `bower.json` file. After the optional `save`, the pattern is `
/`. The element will be installed to the `bower_components` directory.
2. Use that element in your layout or custom element. An import statement must also be included, for example, to edit the custom `my-element` created in the last section:
Run the project and enjoy how easy it is to create modular web apps and site now. If you don't see anything on the page, then make sure that all your imports are pointing to the correct place.
The best way I've found to learn about using new elements is to see the demos and look at the source code for the ones that you like.
There's plenty more details that I haven't included in this article because they weren't vital to the setup process. So, if you have any questions, the official Polymer website is a great resource or I'll be happy to try to answer any questions.
:)
~
Danial Goodwin ~
