Polymer 1
Tags: webdev, polymer, ui
Published: 2020-01-11 13:52:24

---
title: Polymer 1
published: true
description: 
tags: webdev, Polymer, UI
canonical_url: https://jordanfinners.dev/blogs/polymer-1
---

What is polymer?
================

Polymer is a piece of Google tech that they’ve launched, which is basically a library on top of the web components spec. It gives you some nice magic on top of web components such as data binding and syntactic sugar.  
Before going to the polymer summit in 2016, I’d played around with the starter kit (which is super helpful) and had a read up of the docs and pre-existing elements too (more on them later). If you want to find the docs there [here](https://www.polymer-project.org/1.0/).

A little background on web components for those who haven’t heard that much about it, \*anyone else skip this bit\*. The point of web components is to expand on the limited amount of html elements allowing you to plug and play with your own elements without having to write out all the code all over again.  
It does this by having names such as _<iron-list>_ where it includes the hyphen in the middle, this defines your web component.  
Like standard html elements they can have attributes which you can define. With polymer, they can also have their own CSS and functions too all in the same element so its easy to see what's going on.
This is a simple overview and if you want more details you can read up in the [docs](https://www.polymer-project.org/1.0/docs/devguide/registering-elements).

Polymer Starter Kit
===================

This is a repo in their [Github](https://github.com/polymerelements/polymer-starter-kit) which you can download and gives you a awesome base to start any project you might want to work on. It also gives you a good intro into how projects can be organised and loads of comments on what the code is doing too!  
  
I found it super handy to get my head around it and I personally like how its organised, it makes a lot of sense to me. They also have a pretty large library of pre-made components which you can include into your projects which gives you some pretty powerful tools with very little effort, all you have to do is bower install it and then include it like you would any other html.  
  
I would definitely recommend getting hands on with it before you try work on something from scratch.

Why I like Polymer
==================

Following on from the trend toward ‘mircoservices’ and componentising of services, it makes a lot of sense to me for this to be extended to the front end too.  
  
I also really like how elements are organised and how they recommend to structure your projects, like I say it just makes sense to me and I find it easy to understand and get to grips with.  
  
Also, its just plain HTML, CSS and JS, there aren’t any huge frameworks to import or get to grips with, there’s very little learning curve with it as its just using the web ‘platform’ #UseThePlatform  
  
For larger teams, it also allows everyone to split the work up between them and just plug it all together when it comes to it, so far, I’ve not really had chance to test the theory on this and see the proof in the pudding, other larger companies have found it to work for them.  
  
I also really like how the team supporting the project is both super engaging on GitHub and in the polymer slack channel and their mind set when it comes to building web apps, how you should really think about the users end experience not just making everything fancy but take an age to load and to use what the platform in terms of the web and browsers already give you.

There is also a growing community creating elements for all sorts of purposes and the Polymer team are helping to grow that community with this library of elements, including having their own on there. You can find it [here](https://www.webcomponents.org/author/PolymerElements) (I promise that's the last link from me).

So, I’m a big fan of this right now, and if you’re going to do something on the web I would highly recommend taking a look at Polymer.