Angular 2.0 vs Polymer

Hi guys! Before I start comparing these two javascript frameworks/libraries it’s important to understand how the way of web development is changing and how the new frameworks are trying to facilitate that change.

The new way of web development

Components

• Modular design and development are popular principles among developers. In web development world, components based development has evolved on the principle of modularity.
• Modular code is easy to maintain and reuse. There is less likelihood of bugs due to the smaller, isolated, more testable codebase.
• Frameworks like Angular, Ember, React, Backbone, and others have provided their own solutions for componentization on the web.

Web components

• Web Components have brought the concept of components to the browsers natively. Though we can still use the component solutions provided by frameworks, native web components bring a degree of reusability that other frameworks can’t achieve.
• Web Components encapsulate modules of functionality into the most basic unit of HTML, a DOM element. With the progress made on Web Components, they have become the way to go for modular code on the web.
• Web component specifications are not fully implemented by all the browsers yet. But browser vendors are actively implementing the different portions of the spec, meaning that support for Web Components is only going to get better.

The bridge to web components

Angular 2.0

• Angular is one of the most popular javascript framework amongst the developers. The latest version of Angular (Angular 2) also works on the concept of components.
• Angular 2 is a full fledged javascript framework which not only lets you build the components but also helps in managing various aspect of web applications like routing and state handling.
• Angular 2 can also be configured to generate web components.

Polymer

• The Polymer library is a lightweight sugaring layer on top of the Web Components APIs. Polymer is a library which helps us to capitalise on the full potential of web components.
• Unlike a typical javascript framework, Polymer is designed to leverage features baked into the web platform itself to let you build components.
• #UseThePlatform is the name Polymer give to represent the want for the browser to do all the heavy lifting without libraries.

How do they compare

Size:

Size of a web application has a direct impact on the load time performance. Apart from application code and assets, external frameworks and libraries also add to the size of application. So it is desired that the contribution from external libraries to be as small as possible.

Angular 2.0: 566 KB — 766 KB. The size of minified Angular 2 package is 566K. Angular 2 relies on observable pattern supplied by Rxjs library. Size of Angular 2 with Rxjs library is 766K.

Polymer: 127 KB — 168 KB. Size of minified Polymer 1.6 is 127KB. It also requires a polyfill called webcomponents.js for browsers where web components are not natively supported. Size of webcomponents-lite.js is 41 KB

Re-use:

The pattern of components brings a lot of scope for reusability. Components are small and isolated pieces of code which can be used in multiple places of the same application or across applications.

Angular 2.0: Supports components and reuse. Angular 2 components can be used only in Angular2 applications

Polymer: Supports components and reuse. Polymer components can ideally be re-used in any web application. Non-polymer application would need to import polymer library to be able to reuse polymer components.

Application Structure:

In large applications it is important to have a structure to the code. Frameworks help to provide structure and pattern to the code.

Angular 2.0: Dictates structure of code. Angular 2 is a full fledged framework. It provides a way to structure the application. It comes with built-in application routing, state management and data communication

Polymer: No say in structure. Polymer facilitates only component creation. However, polymer team has created few components which can be used for routing. A separate library can be used to manage data communication. e.g. Redux, or any other Flux based library.

Longevity:

While selecting the technology stack it is important to consider the longevity of frameworks/libraries. A framework which can get obsolete or stagnated very soon is a wrong choice for application building.

Angular 2.0: Angular’s version upgrade from 1.x to 2 was a complete revamp and will practically cause a complete rewrite for applications. Angular did provide an upgrade path from 1.4–1.5–2. But the effort of following upgrade path could have been equivalent of rewrite.

Polymer: Polymer intends to be lighter with the evolution of web platform. Polymer 2 preview version is out. Polymer has a hybrid mode where 1 & 2 can run together. Since polymer is not framework heavy, upgrades should be easier.

Learning:

Angular 2.0: Typescript is a new language and its ‘decorator’ way of writing code is also not well known to javascript developers. Although, upcoming versions of javascript have concept of decorators. Developer will have to learn the framework as well as the language.

Polymer: Polymer components can be/usually written in ES5 / ES6 javascript. Developers will have to get used to the concept of components (true with Angular 2 as well). Polymer provides minimal syntactical sugar over web components api, which doesn’t impose a steep learning curve.

Server Side Rendering:

Server side rendering is important when it comes to SEO friendliness, social media previews and quick ‘view-ability’ of the page. However there are many techniques to achieve quick first render even with client side rendering. Also, Google can index client side rendered websites, but other search engines may have problem in doing that.

Angular 2.0: Angular team is working on Angular Universal which can be used with Angular 2 to allow server side rendering.

Polymer: Polymer doesn’t have support for server side rendering yet.

Recommended Stack

Based on above comparison if I have to choose a front end stack today, I would choose this:

• Polymer library is lighter than Angular 2 framework library.
• Polymer components can be reused in any application while Angular 2 components can be used in only Angular 2 applications
• Polymer intends to get leaner with the evolution of web platform, i.e. as browsers improve their support for web components specifications Polymer will be able to reduce its size
• Redux is based on Flux pattern. It gives guidelines about controlling the data flow inside the app. This helps in creating predictable and scalable applications.

Thanks!! Have fun!

A slightly detailed version of this writeup is in my blog http://dotjsfile.blogspot.in/2017/04/angular2-vs-polymer.html