image image 25th September 2018

What is Polymer?

Polymer is a JavaScript library that helps you create custom reusable HTML elements (web components), and use them to build performant, maintainable apps.

A web component is a set of HTML, CSS and JavaScript that defines its look, behavior and functionality, it is notably different from a standard html element in the DOM because it contains a hyphen in the name e.g. <iron-list>.

The Polymer team believe that embracing the modern web platform is the best way to give users and developers what they need.

For users, too many web apps are too slow to load and respond to inputs, performing poorly compared to native apps. How often have you been sat on a train waiting for a website to load or tapping at the screen because a website isn’t responding to your tap?

This isn’t just about performance and keeping users waiting, it has real commercial consequences too. For example, it’s calculated that if Amazon’s page slowed by 1 second it would lose $1.6 billion in sales each year, as customers abandoned the site.

For developers, the web has been frustratingly slow to evolve. For years, developers had to plug holes in the web and build layers on top of it to meet their needs (defining components and loading modules are a couple of examples). This has led to an explosion of frameworks often resulting in lots of rewriting or technical debt as different developers bring their favourites to a project. This was well explained at the Polymer Summit 2016

So why Polymer?

  • It’s built on top of agreed web standards, giving you some syntax sugar to make it easier to develop and give a more uniform experience by poly-filling older browsers
  • It’s modular at heart; you build using the idea of reusable components that are just responsible for their own content. For example, you want a specific looking button, make that as an element then use that wherever you need a button.
  • It follows PRPL as a pattern for structuring and serving Progressive Web Apps (PWAs), with an emphasis on the performance of app delivery and launch. This stands for:
    • Push critical resources for the initial URL route.
    • Render initial route.
    • Pre-cache remaining routes.
    • Lazy-load and create remaining routes on demand.

Basically, be lazy and do less.

  • There is a whole community of people (including the Polymer team themselves) building reusable components ( so you can plug and play… all you have to do is install them and you’re ready to go!
  • You can also start off with the Polymer Starter Kit which gives a great base to get going quickly on a web app with loads of features already included. Basically, if you’re trying to do something, there’s an element for that.
  • The modular nature of it also means it works well with teams of developers as the components can be worked on independently by separate developers and plugged into the final app, and means that components can be reused across projects saving you time in the future.
  • You can use Polymer elements in isolation inside other projects especially as it’s only a tiny library and work towards building a Progressive Web App which is a web site that perform like native apps e.g. they work offline, on all devices and screens, can send push notifications and advanced app like features and are performant.

So, who is using it?

All Google and YouTube websites, including the Chrome settings/home pages

ING, EA and Coca Cola websites

McDonalds and Taco Bell menu screens

GitHub is moving components to it at the minute. The date indicator e.g. “a day ago” is now an element you just pass the date to and it will convert it so consistent across site


Resources – Polymer Website – Library of both polymer and some other elements for module frameworks – Elements from the Polymer team, really helpful base components – Polymer Summit talks – Polycasts (a series of video tutorials and explainers)

We Love Data

Want to know more?

Drop us a line – we’re always happy
to chat – we promise we’ll keep the
geek speak to a minimum (unless
that’s your bag in which case we’ll
happily comply)!