Essential points you need to know about Google Polymer
Published on 18 June 15
James0
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
<!-- Polyfill Web Components support for older browsers -->
<script src="components/webcomponentsjs/webcomponents-lite.min.js"></script>
<!-- Import element -->
<link rel="import" href="components/google-map/google-map.html">
<!-- Use element -->
<google-map lat="37.790" long="-122.390"></google-map>Create your own elements:
<dom-module id="contact-card">
<link rel="import" type="css" href="contact-card.css">
<template>
<content></content>
<iron-icon icon="star" hidden$="{{!starred}}"></iron-icon>
</template>
</dom-module>
<script>
Polymer({
is: 'contact-card',
properties: {
starred: Boolean
}
});
</script>The <firebase-collection>
Build more sophisticated elements by composing simpler elements together to retrieve data from a Firebase database.
<dom-module id="friend-list">
<link rel="import" type="css" href="friend-list.css">
<template>
<firebase-collection data="{{data}}"
location="https://users1.firebaseio.com/users">
</firebase-collection>
<template is="dom-repeat" items="{{data}}">
<contact-card starred="{{item.starred}}">
<img src="{{item.img}}" alt="{{item.name}}">
<span>{{item.name}}</span>
</contact-card>
</template>
</template>
</dom-module>
<script>
Polymer({
is: 'friend-list'
});
</script>
<friend-list></friend-list>Benefits of Google Polymer:
Here are a few benefits of Google Polymer
Quick
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
Back then, developers had to use a combination of HTML, CSS and JavaScript, to create web pages which is absolutely a chore if you to apply any modifying, debugging and reusing. The Google Polymer is great in that it encapsulate the three languages into functional component elements from which Web pages can be constructed, reducing development complexity and boosting reuse, which creates app-like, immersive experiences on the Web.
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.
Source: https://developers.google.com/web/tools/polymer-starter-kit/index?hl=enCatalog 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.
Molecules (Mo)
Molecules are elements that wrap other JavaScript Libraries
Foreseeable Problems
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.
This blog is listed under
Development & Implementations
, Data & Information Management
and Digital Media & Games
Community
Related Posts:
Post a Comment
