Polymer (library)

Last updated
Polymer
Developer(s) Google [1] and contributors [2]
Initial releaseMay 29, 2015;9 years ago (2015-05-29) [3]
Stable release
1.x 1.12.0 / 21 May 2019;5 years ago (2019-05-21) [4]
2.x2.8.0 / 24 June 2019;5 years ago (2019-06-24) [4]
Repository polymer
Written in JavaScript, HTML
Type JavaScript library
License 3-Clause BSD [5]
Website www.polymer-project.org

Polymer is an open-source JavaScript library for building web applications using Web Components. The library is being developed by Google developers and contributors on GitHub. Modern design principles are implemented as a separate project using Google's Material Design design principles.

Contents

Polymer is used by a number of Google services and websites, including YouTube, YouTube Gaming, the redesigned Google Earth (since 2017), [6] Google I/O 2015 and 2016 websites, Google Play Music, redesign of Google Sites [7] and Allo for web (until its shutdown in 2019). [8]

Other notable users include Netflix, Electronics Arts, Comcast, Nuxeo, Coca-Cola, McDonald's, BBVA, IBM, Interxion and General Electric.

History

Public development of Polymer began in November 2013 with the release of a Promises Polyfill. This steadily expanded into a web design library covering visual styling guidelines (via Material Design), data binding, and a large number of "Core" and "Paper" Web Components. Core components were originally envisioned to encompass generic functionality that would be essential to most websites, while Paper components were intended to provide more specialized components with Material Design concepts forming a key part of their design. A major milestone was reached with the release of Version 0.5, which was considered the first version of the project ready for use by early adopters. [9]

Google continued to revise the design of Polymer after the release of 0.5, with special consideration given to the performance issues a number of developers found. This culminated with the release of Polymer 1.0 in 2015, which was the first "production ready" version of the library. [10] Version 1.0 significantly improved the performance of Polymer, reducing load times by up to 7 times. [11] With version 1.0 Google split the elements from the Polymer project to clearly distinguish the elements catalog from the Polymer polyfill & webcomponents-sugaring library.

On 14–15 September 2015, Google organized a Polymer Summit in Amsterdam.

On 17–18 October 2016, Google organized a Polymer Summit in London.

On 22–23 August 2017, Google organized a Polymer Summit in Copenhagen.

On 2 May 2018, the Polymer team announced that any future development in Polymer will shift away from its two-way binding and its template system, and will focus on LitElement [12] (still part of Polymer [13] ) and one-way bindings. [14]

Features

Polymer provides a number of features over vanilla Web Components:

Usage

Polymer has begun to gain increasing recognition in the market, with spikes in use in 2015 and 2016 as documented by the website BuiltWith. [15] Special attention has been paid to its structured design process, allowing for an interoperable "Lego Block" structure. [16] LitElement was developed by the Google Chrome team as part of the Polymer project in 2018. LitElement was designed to be a lightweight and easy-to-use framework for creating web components that can be used with any front-end framework or library.

Custom elements

Custom elements can be created using ES (ECMAScript, most commonly JavaScript) modules with classes. Custom element definition comprises CSS style, HTML template of the element's local DOM, element properties, lifecycle callbacks and JavaScript methods:

import{PolymerElement,html}from'@polymer/polymer'classHelloElementextendsPolymerElement{// Define the element's templatestaticgettemplate(){returnhtml`        <style>        /* Local DOM CSS style */        </style>        <!-- Local DOM -->        Hello {{name}}!        `;}staticgetis(){return'hello-element';}// Define public API propertiesstaticgetproperties(){return{name:{type:String}};}}window.customElements.define(HelloElement.is,HelloElement);

The element defined above can be used in HTML code:

<hello-elementname="World"></hello-element>

See also

Related Research Articles

ASP.NET AJAX, formerly called Atlas, is a set of extensions to ASP.NET developed by Microsoft for implementing Ajax functionality. It is released under the Microsoft Public License (Ms-PL).

<span class="mw-page-title-main">YUI Library</span>

The Yahoo! User Interface Library (YUI) is a discontinued open-source JavaScript library for building richly interactive web applications using techniques such as Ajax, DHTML, and DOM scripting. YUI includes several cores CSS resources. It is available under a BSD License. Development on YUI began in 2005 and Yahoo! properties such as My Yahoo! and the Yahoo! front page began using YUI in the summer of that year. YUI was released for public use in February 2006. It was actively developed by a core team of Yahoo! engineers.

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animations, and Ajax. It is free, open-source software using the permissive MIT License. As of August 2022, jQuery is used by 77% of the 10 million most popular websites. Web analysis indicates that it is the most widely deployed JavaScript library by a large margin, having at least three to four times more usage than any other JavaScript library.

Svelte is a free and open-source component-based front-end software framework, and language created by Rich Harris and maintained by the Svelte core team members.

This is a comparison of web frameworks for front-end web development that are heavily reliant on JavaScript code for their behavior.

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of loading entire new pages. The goal is faster transitions that make the website feel more like a native app.

<span class="mw-page-title-main">Vaadin</span> Web development platform written in Java

Vaadin is an open-source web application development platform for Java. Vaadin includes a set of Web Components, a Java web framework, and a set of tools that enable developers to implement modern web graphical user interfaces (GUI) using the Java programming language only, TypeScript only, or a combination of both.

<span class="mw-page-title-main">Google Closure Tools</span> JavaScript developer toolkit

Google Closure Tools is a set of tools to help developers build rich web applications with JavaScript. It was developed by Google for use in their web applications such as Gmail, Google Docs and Google Maps. As of 2023, the project had over 230K LOCs not counting the embedded Mozilla Rhino compiler.

In software development, a polyfill is code that implements a new standard feature of a deployment environment within an old version of that environment that does not natively support the feature. Most often, it refers to JavaScript code that implements an HTML5 or CSS web standard, either an established standard on older browsers, or a proposed standard on existing browsers. Polyfills are also used in PHP and Python.

AngularJS is a discontinued free and open-source JavaScript-based web framework for developing single-page applications. It was maintained mainly by Google and a community of individuals and corporations. It aimed to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in web applications and progressive web applications.

<span class="mw-page-title-main">Bootstrap (front-end framework)</span> Web design front-end

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

Foundation is a free responsive front-end framework, providing a responsive grid and HTML and CSS UI components, templates, and code snippets, including typography, forms, buttons, navigation and other interface elements, as well as optional functionality provided by JavaScript extensions. Foundation is an open source project, and was formerly maintained by ZURB. Since 2019, Foundation has been maintained by volunteers.

<span class="mw-page-title-main">Elm (programming language)</span> Functional programming language

Elm is a domain-specific programming language for declaratively creating web browser-based graphical user interfaces. Elm is purely functional, and is developed with emphasis on usability, performance, and robustness. It advertises "no runtime exceptions in practice", made possible by the Elm compiler's static type checking.

<span class="mw-page-title-main">Ember.js</span> JavaScript framework

Ember.js is an open-source JavaScript web framework that utilizes a component-service pattern. It is designed to allow developers to create scalable single-page web applications by incorporating common idioms, best practices, and patterns from other single-page-app ecosystem patterns into the framework.

Web Components are a set of features that provide a standard component model for the web allowing for encapsulation and interoperability of individual HTML elements. Web Components are a popular approach when building microfrontends.

<span class="mw-page-title-main">React (software)</span> JavaScript library for building user interfaces

React is a free and open-source front-end JavaScript library that aims to make building user interfaces based on components more "seamless". It is maintained by Meta and a community of individual developers and companies.

<span class="mw-page-title-main">Vue.js</span> Open-source JavaScript library for building user interfaces

Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications. It was created by Evan You and is maintained by him and the rest of the active core team members.

Angular is a TypeScript-based free and open-source single-page web application framework. It is developed by Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS. The Angular ecosystem consists of a diverse group of over 1.7 million developers, library authors, and content creators. According to the Stack Overflow Developer Survey, Angular is one of the most commonly used web frameworks.

<span class="mw-page-title-main">Deno (software)</span> Secure JavaScript and TypeScript runtime

Deno is a runtime for JavaScript, TypeScript, and WebAssembly that is based on the V8 JavaScript engine and the Rust programming language. Deno was co-created by Ryan Dahl, who also created Node.js.

htmx is an open-source front-end JavaScript library that extends HTML with custom attributes that enable the use of AJAX directly in HTML and with a hypermedia-driven approach. These attributes allow for the dynamic definition of a web page directly in HTML and CSS, without the need for writing additional JavaScript. These attributes allows tasks that traditionally required writing JavaScript to be done completely with HTML. The library was created by Carson Gross as a new version of intercooler.js.

References

  1. "AUTHORS.txt" . Retrieved 18 August 2017.
  2. "CONTRIBUTORS.txt" . Retrieved 18 August 2017.
  3. "1.0". Polymer Project. Retrieved 18 August 2017.
  4. 1 2 "Releases · Polymer/polymer". GitHub. Retrieved 4 September 2019.
  5. "polymer/LICENSE.txt at master". GitHub. Retrieved 24 April 2017.
  6. Bidelman, Eric (2017-04-18). "Mission accomplished: has been componentized. New @googleearth is built w/ #WebComponents using @polymer.pic.twitter.com/h76ztfynYy". @ebidel. Retrieved 2017-07-08.
  7. "Meet Google Drive – One place for all your files". accounts.google.com. Retrieved 2021-06-21.
  8. "Who's using Polymer?". GitHub. Retrieved 4 June 2016.
  9. "Polymer gives us a closer look at Google's Material Design UI". Android Authority. Archived from the original on 2021-08-05. Retrieved 2015-08-21.
  10. Steven Max Patterson (29 May 2015). "Google's Polymer 1.0 brings reuse and better branding to Web development". CIO. Archived from the original on 9 December 2018. Retrieved 21 August 2015.
  11. "Welcome - Polymer 1.0". Archived from the original on 2015-08-14.
  12. "Roadmap update, part 1: 3.0 and beyond".
  13. "Justin Fagnani on Twitter". Twitter. Retrieved 2018-05-14.
  14. "Roadmap update, part 2: FAQ - Polymer Project". www.polymer-project.org. Retrieved 2018-05-14.
  15. "Polymer Usage Statistics". BuiltWith. March 2019. Retrieved 30 May 2019.
  16. Allie Coyne (13 August 2015). "Inside ING Direct's new lego block app architecture". iTnews.