Monday, April 17, 2017

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.

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

Polymer

Supports components and reuse

Angular 2 components can be used only in Angular2 applications

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

Polymer

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

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

Polymer

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 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.

Browser Support:

Other aspects:

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

Polymer

Automated tests

Both unit and e2e test cases can be written and executed using karma, jasmine and protractor. Same as angular1

Polymer’s Web Component Tester is an end-to-end testing environment built by the Polymer team

Learning

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 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.

Security

Angular2 has in-built features for content security and XSS protection. Angular 2 has in-built route guards, which can help in implementing application security

Polymer team suggests usage of Crisper tool for content security.

Nativescript Support

Nativescript is a framework for building native iOS and Android apps using javascript. Angular2 components can be used with Nativescript framework.

There is no known support for Polymer components in Nativescript framework.

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.