Comparison between Angular and Polymer

Angular :-  Angular is a robust application level js framework based on MVC pattern, facilitate you to extend HTML’s syntax to express application’s components clearly. Angular’s bi-directional data binding and dependency injection reduce code complexity and development time.

Polymer :- Polymer is a lightweight js library used to build custom reusable HTML elements(components). It uses standard web component API to create rich, configurable and standard web components by encapsulating js, css, and HTML.

Difference b/w Angular and Polymer – Angular and Polymer both are js framework/library, developed by – Google Inc. Angular is an application level framework and Polymer is the library to create web components.

Angular development is mainly used to build CRUD apps, although Polymer Web component too could be arranged to develop the application.

Angular directive and Polymer component show some similarity but approach to create custom HTML elements differs. Polymer uses standard web component API to create a rich custom tag that encapsulates js, CSS, and HTML altogether. While Angular compose only HTML and js to create reusable directive without the use of web component API.

Web component API includes these four elements –

1. Custom elements
2. HTML Templates
3.  Shadow DOM
4.  HTML Imports

Polymer uses these elements to define a custom element. But web component API is supported only by modern web browsers, so Polymer component might create some issue with older browsers.

Polymer core library provides some standard web components, that could be used in application with ease, hence development time could be reduced by using existing web components. But when you talk about stability, Angular wins. Angular is a robust framework with high level APIs for services, routines, filters, animation etc. While Polymer is still in alpha phase.

Both Angular and Polymer support templating and bi-directional data binding, while Polymer facilitate an additional functionality Shadow DOM, enables css encapsulation for components.

And one more thing, Polymer components are easier to develop as compared to Angular directive.

Example –

Angular directive –

angular.module('mySimpleDirective', []).controller('Controller', ['$scope', function($scope) {
 
 $scope.user = {
  name: 'abc',
  address: 'xyz'
 };

}]).directive('user', function() {

 return {
  template: 'Name: {{user.name}} Address: {{user.address}}'
 };

});

Polymer component –

<!-- Imports polymer -->
<link rel="import" href="../polymer/polymer.html">
<!-- Defines element markup -->
<dom-module id="hello-world">
    <template>
        <p><strong>{{welcomeMessage}}</strong></p>
    </template>
</dom-module>
<!-- Registers custom element -->
<script> Polymer({
    is: 'hello-world',

    properties: {

        welcomeMessage: {

            type: String,

            value: 'Hello World'

        }

    } });
</script>

Personal experience –

If you want to develop a lightweight web app using some existing Polymer core components and want to attach some of your own custom tags, Polymer might be the right choice. While for a complex CRUD app, you should go with Angular.

The combination of both also could be used according to project requirements and personal choice of technology. Hope this will help you to choose the right option for your development stack.