What's with the latest Google Polymer?
The Google Polymer is essentially a library for creating Web Components, which are a set of W3C standards and upcoming browser APIs that you can used for constructing your own custom HTML elements which support web browsers.
It is said that the Polymer 1.0 has been build from scratch to easily make quick, seamless, and inter-operable web components.
The idea of polymer
The fascination of Polymer is derived from its claim of placing elements as the fundamentals of web development. With Polymer.js, the ability to craft your own HTML elements and compose them into complete, complex web applications that are both practical and manageable is a fascinating thing.
Furthermore, Polymerâs elements are deemed the building blocks of the web and are based on reusing the current element paradigm (leveraging on an existing native browser) to construct more powerful web components.
Examples and benefits of Polymer codes:
As the Polymer library allows you to create powerful elements, it provides web developers tools like templating and data binding to reduce the amount of boilerplate you need to write.
Here are lists of examples of Polymer codes:
Inputting Google Maps
Create your own elements:
Build more sophisticated elements by composing simpler elements together to retrieve data from a Firebase database.
Benefits of Google Polymer:
Here are a few benefits of Google Polymer
It is said the new library is about three times faster on Chrome, four times faster on Safari, and a third less coding required than in developer preview. Also, itâs ready to be used in production applications and deemed to be easier for developers to produce feature rich apps and websites.
Polymer is also great for reducing web development complexity as well.
Reduces the gap between developers and designers
Polymer guarantees an easier working relationship between designers who uses Web page UX and developers who are concerned with Web page functionality. Developers are given Polymer elements which include designs and themes, which mean there isnât a need to modify complex Web page source code to match designersâ specifications.
The Architecture of Google Polymer
Polymer.js consists of four architectural levels:
Native: Fundamental features that are available natively in all established browsers (Chrome for example).
Foundation: Polyfills that are found in browser features and are havenât been natively available in the browsers themselves.
Core: The indispensible infrastructure required for Polymer elements to take advantage of the capabilities provided by the Native and Foundation levels.
Elements: A basic set of building blocks that are the driving factors to create your application. Elementsâ functionalities consist of: animation, flex layout as well as encapsulation of complicated browser APIs and CSS layouts.
Encapsulation of three languages
Polymer Starter Kit
Along with version 1.0, Google will be releasing a Polymer starter kit, consisting of build tools and boilerplates for creating Web apps via Polymer.
Here are the features of the starter kit:
Components for nearly any app, out of the box
Get started quickly with the complete set of the same paper and iron elements used by Google products.
Complete build chain
Build your app using a suite of gulp tasks that leverage the full range of Polymer-related tools, such as vulcanize, crisper, and more
Testing made easy
Test your app and all of its components using the built-in and pre-configured Web Component Tester.
Flexible app theming
Easily theme your entire application, including the built-in elements, using app-level Custom CSS Properties.
Framework-free, or framework-compatible
Build your app out of elements, or wire in an external framework to handle business logic. It's up to you!
Responsive app layout boilerplate
Start off mobile-friendly with the included layout boilerplate.
Live Browser Reloading
Reload the browser in real-time anytime an edit is made, without the need for an extension.
Material design ready
Use the built-in paper elements to create a full material design-style app.
Catalog of Elements
Play through different catalog of elements for third-party libraries that can be incorporated into Web applications seamlessly.
Such elements include:
Iron element (FE)
Iron elements are a set of visual and non-visual utility elements. They include elements for working with layout, user input, selection, and scaffolding apps
Paper element (Md)
Paper elements are a set of visual elements that implement Google's Material Design.
Google Web Components (Go)
Google Web Components (eg, Google Analytics, Google-Apis, Google-calendar, Google-castable Video (HTML 5 Video), Google Maps and Google youtube)
Gold Elements (Au)
The gold elements are built for E commerce use-cases like checkout flows
Neon Elements (Ne)
Neon elements implement special effects
Platinum Elements (Pt)
Elements to turn your web page into a true web-app , with push, offline, and more.
However, Polymer is still a relatively new technology for developers; here is the list of possible problems.
â¢ Thereâs a lack of documentation and guidance. Not all UI and non-UI elements are documented and guidance of issues such as organizing larger applications is barely minimal.
â¢ You may come across dependency errors where you might find yourself pointing to different version dependencies in the same element.
â¢ Polymer.js performance on mobile platforms can be problematic where for instance downloading an entire library is slow and you need to download ever Polymer Element for intended use. Also, there have been complaints of the polymer.js when rendering into a canvas on iOS.
What the future holds for Polymer
To end of the post, the polymer is highly recommended for front-end developers to take advantage on these new cutting edge browse technology. The polymer is deemed an appealing concept as it revolutionizes the manner in which develop web applications. However, more improvements is needed to make Polymer fully functional and feasible for use.