Angular JS is a complete framework for building web applications, whereas Polymer JS is a library for creating Web Components. Those components, however, can then be used to build a webapp.
Angular directives are conceptually similar to Custom Elements but they are implemented without the use of the Web Components APIs. Angular directives are a way to build custom elements, but Polymer and the Web Components specification are the standard way to do.
Similar to Angular, Polymer elements provide templating and bi-directional data binding. However, they also provide new functionality such as the Shadow DOM, which enables encapsulation of CSS. Angular directives don’t have any notion of style encapsulation, but Angular is expected incorporate that functionality eventually.
A comparison of an element that renders a Gravatar written as a Polymer Custom Element and as an Angular directive.
What is Polymer Is it Necessary for Web Development
Building modern web applications requires a lot of tooling. This includes pre-processors, JavaScript frameworks, testing tools and much more. As the complexities of these applications increase, the usage of tooling and services are needed to be managed by them.
Web components aim to solve some of these complexities by providing a consolidated way to create new elements that encompass rich functionalities without the need for extra libraries. Web components are comprised of four different specifications they are, Custom elements, Templates, Shadow DOM, and HTML imports, these are still in the process of standardization by W3C and are not yet present in today’s browsers.
To bridge the gap and give developers access to this rich functionality, Google has created the Polymer library which serves as a set of polyfills to bring the promise of Web Components to you today. So, let’s dive a little deeper to know more about the concept. What is Polymer?
The polymer library is designed for the developers to create great and reusable components for the modern web. Polymer library is a set of Polyfills that helps a developer to create Web Components on all modern web browsers. It provides the framework for defining, creating, and rendering complex custom elements in a simple manner. It also helps to simplify the way you use complex components by:
1) Encapsulating the complex code and structure.
2) Allows the developers to use simple-to-use tag style naming convention.
3) Providing a suite of predefined user interface elements to leverage and extend.
With Polymer.js, you can create your own HTML elements and can compose them into complete complex web applications that are scalable and maintainable.
Polymer – Web Development:
Polymer.js places a heavy set of requirements on the browsers, relying on a number of technologies that are still in the process of standardization and are not yet exist in today’s browsers. Examples include Shadow DOM, template elements, custom elements, HTML imports, mutation observers, model-driven views, pointer events, and web animations. As we already know, in order to fill the gap, the Polymer suggests the usage of Polyfills. The recommended Polyfills are designed in such a way that it will be seamless to replace once the native browser versions of these capabilities become available.
For now, we are going to use Polyfills to avoid the usage of JavaScript libraries. Isn’t it fascinating?
The developers are in an oblivion mode with the polymer, as it is ultimately relying on browser technologies that do not exist yet. Polymer.js today seem more likely a study in how element-centric applications may be built in the future. At present, Polymer seems like an intriguing concept than an actual option for creating robust change of your view in the world of applications right here and now, which makes writing a Polymer tutorial difficult outside of Google’s documentation.
Polymer architecture:
Polymer.js is architecturally divided into four layers.
Native Layer:
Needed features that are currently available in all major browsers.
Foundation Layer:
The major intention of this layer is to disappear overtime as the capabilities become available natively in the browser.
Core Layer:
The necessary infrastructure for Polymer elements to exploit the capabilities provided by the Native and Foundation layers.
Elements:
A basic set of elements, intended to serve as building blocks that can help you to create your own applications. It also includes elements that provide basic functionalities like Ajax, animation, flex layout, and gestures. And also the encapsulation of complicated browser API’s and CSS layouts.
Installing Polymer:
The most recommended way to install polymer is through Bower. Bower is a package manager that manages dependencies for your project. The below are the instructions to install Bower and get started with it.
Assuming you have a project folder setup with a bower.json file, and also, you can install the latest version of Polymer by running the following command.
bower install –save Polymer/polymer
this will install the Polymer library and the platform polyfills inside the bower – components folder
Add the platform.js polyfill in theof your document and then you’ll be ready to use predefined custom elements in your documents.
Final thought:
The polymer has an enormous scope and it might take some time to get used to all the custom elements as well as its APIs. Nevertheless, Web Components and Polymer will certainly influence the way you build web applications.
