AngularJS vs ReactJS vs Polymer: Key Techniques for 2015 Front‑End Framework Selection

1. First Experience

Using a simple TODO example, the article demonstrates how each framework implements the same functionality.

Angular implementation:

React implementation (non‑Flux):

Polymer implementation:

Combined comparison:

Angular separates controller and component concepts, while React and Polymer treat everything as a component. In simple use cases the differences are minor; all three have similar entry barriers, but mastering each requires understanding its internal mechanisms.

2. Technical Features

The core of MVVM frameworks is data‑view binding, which can be broken down into template analysis and data observation.

Template analysis collects markers like {{title}}, generates a view‑update function that stores the DOM fragment and associated data names, and re‑renders the fragment when data changes.

Data observation approaches differ among frameworks:

Custom data objects with explicit set methods (e.g., user.set('name','john')) to trigger updates.

Using Object.defineProperty getters/setters; limited by inability to detect added or deleted properties (some use Object.observe where supported).

Dirty‑checking, as used by Angular: the framework stores previous values and periodically compares them, which works for deep objects but adds performance overhead.

React simplifies this with a virtual DOM: after setState, a new virtual DOM tree is created, diffed against the previous one, and only the changed parts are applied to the real DOM, resulting in fewer direct DOM manipulations and better performance. Add‑ons and immutable.js can further improve update efficiency.

3. Componentization

React and other frameworks are moving toward Web Components. Polymer aims to reduce code size as browsers implement the standard. Web Components enable frameworks to expose custom elements as interoperable interfaces.

React can wrap components as custom elements, but its philosophy of not directly manipulating the real DOM conflicts with the native‑DOM‑centric usage of custom elements.

Browser support for Web Components is still limited (mostly Chrome), and legacy browsers like IE8/IE9 pose challenges. React offers better backward compatibility, while Polymer’s polyfill only reaches IE9.

To improve reusability, the author’s team proposes a "template rewrite" rule with two modes:

Partial rewrite (illustrated below) allows modifying only parts of a component’s template while preserving the rest:

For extensibility, a "shared scope" approach is suggested: an import‑to marker injects external HTML into a component, allowing the injected markup to access the component’s internal state and data. This decouples view structure from data logic, though it still requires knowledge of the component’s implementation.

4. Application Architecture

The discussion shifts to well‑structured applications, using React’s FLUX pattern as an example.

FLUX separates concerns into Actions, Dispatcher, Stores, and Views. Actions can originate from UI events, AJAX calls, or initialization processes. The Dispatcher forwards actions to registered Store callbacks, allowing multiple parts of the app to react in a controlled order.

Compared with traditional MVC, adding a new feature (e.g., a statistics block) in FLUX requires only a new Store and action registrations, without modifying existing controllers or models. This event‑driven approach is similar to patterns found in back‑end frameworks like Zero or Yii.

FLUX is framework‑agnostic; it can be implemented in Angular or Polymer as well. While Angular’s module system lacks asynchronous loading and scope isolation, its dependency injection, filters, and services are robust, and combining them with FLUX can be powerful. Polymer’s simplicity makes custom FLUX implementations straightforward.

5. Summary

2015 is expected to be a year of convergence among front‑end frameworks, driven by the rise of Web Components. Core techniques such as rendering mechanisms, data binding, componentization, and modularization differ across AngularJS, React, and Polymer, each offering valuable lessons. React’s rapid ascent and FLUX’s influence suggest they will continue shaping the industry.