Polymer vs. React—which should you use? It’s a question that inevitably crops up whenever anyone discusses the components-based future of the web. While both Polymer and React are libraries created to support a component-oriented approach to front-end web development, they do so in very different ways. In this article, we’ll try to illustrate the role each of these technologies plays in front-end web development so that you can decide which is best suited for your needs.
Background
In the early days of the internet, websites were much simpler—built-in HTML elements, a little CSS and some vanilla JavaScript, were all a front-end developer needed to meet the visual standards of the time. As the web grew more complex, websites became dynamic. Users started demanding sleeker user interfaces, “desktop-like” performance, and more powerful web applications. Having outgrown the capabilities of basic HTML, CSS, and JavaScript, web developers turned to frameworks to help them create dynamic web applications. While frameworks have been very beneficial to the world of front-end web development, there is still a great need for more modular reusable code and better compatibility across browsers.
Introducing Web Components
In order to understand the difference between Polymer and React, it’s important to understand Web Components—the new set of standards currently being added to HTML and the DOM (Document Object Model) by the W3C, the main international standards organization for the World Wide Web. These standards can be categorized into four main features that can be used independently or all together when building a website:
- HTML Imports: These make it easier to import HTML documents into other documents.
- HTML Templates: These allow you to create inert sections of the DOM within the tag.
- Shadow DOM: This provides encapsulation of JavaScript, CSS, and templating so that your web component code remains modular and separated from the rest of the DOM.
- Custom Elements: These are APIs for building your own HTML elements.
The goal of these new features is to simplify web development by providing low-level APIs that allow developers to build complex web applications from custom made HTML tags and elements. Imagine having the support and functionality of a framework like AngularJS, with the simplicity of loading widgets with the style and features you want directly into the DOM. Unfortunately, the Web Components standard is still in its infancy—the major browsers have only just begun to adopt these new features, and it will still be some time before people are making fully fledged web apps solely off of their custom elements.
What Is Polymer?
Officially released on May 27, 2015, Polymer is a new, open-source JavaScript library designed to assist developers in building web applications using Web Components. Developers from Google and GitHub are continuing to add to the library.
Polymer Elements
Enter Polymer—a library that provides the support you need to build your own custom elements. It approximates features like the Shadow DOM, Templates, and HTML imports via JavaScript libraries called polyfills, so that you can start building custom elements today that will be forward compatible with Web Components in the future.
Here are the current element lines available in Polymer, as of version 1.0:
- Google Web Components: Wrappers for Google’s extensive suite of apps, APIs, and services (i.e., Google Maps, YouTube, and Google Analytics)
- App Elements: Elements for building full web apps out of custom modular elements (i.e., app routing and storage)
- Iron Elements: Elements for building the core functionality and structural layout of a web app
- Paper Elements: Visual elements that build off of the support provided by iron elements and implement Google’s Responsive Material Design paradigm
- Gold Elements: Elements for adding e-commerce functionality to your website (i.e., checkout flows)
- Neon Elements: Elements for adding special effects (i.e., animations)
- Platinum Elements: Elements for more complex features like Bluetooth and push notifications
- Molecules: Wrappers for external JavaScript libraries
Isomorphic JavaScript
Not everyone agrees that Web Components are the future of the web. While the list of features present in the new standards is impressive, the lack of support for isomorphic JavaScript is worrying to some. JavaScript applications that can run on both the client-side and server-side come with a handful of compelling advantages:
- Code is shared by the front-end and back-end
- SEO friendly
- Server-side rendering of the view is faster
The performance advantage of server-side rendering in particular is the reason many consider isomorphic JavaScript frameworks and libraries like React to be the future of web development. It is also a lot easier to manage your codebase, when you can share it between the front-end and the back-end.
What Is React?
React (also known as React.js or ReactJS) is an open-source, isomorphic JavaScript library that was created with the purpose of providing a high-performance solution for the “V” in MVC (Model View Controller). It uses one-way data binding with immutable data structures and server-side rendering to give it a performance edge over competing technologies.
Here are some of the key differentiators of React:
The Virtual DOM
Not to be confused with Web Components’ Shadow DOM, the Virtual DOM is an entirely different technology that helps React achieve its amazing rendering speeds. The Virtual DOM consists of two copies, the original and an updated version that reflects changes received from the view. A React function checks the differences and outputs a stream of DOM operations that only alter the parts of the view that actually changed, saving time and resources that would have otherwise been spent recreating the entire updated view.
JSX Files
JSX files combine HTML and JavaScript code into a single file. This can be counterintuitive to what most web developers learn in school, however React’s sleek and simple syntax means you get a single, self-contained component that tells you exactly how it will be rendered.
Server-Side Rendering
Server-side rendering speeds up initial page loads by allowing the app to pre-render the initial state of React components on the server. By supporting both client-side and server-side rendering, it’s possible to use the Virtual DOM system described above to render changes to the view quickly and efficiently.
React, Polymer, and the Component-Oriented Future of Web Development
Both React and Polymer seek to simplify web design with modular, encapsulated, and reusable components. The key difference between the two is that React accomplishes this in a very different way that’s independent of W3C’s Web Components. While Web Components use the DOM’s component model as a framework for web design, extending the functionality of HTML, React creates its own component model that can run like an interoperable native HTML element, drawing its performance edge from server-side rendering. Choosing between one over the other has a lot to do with the unique needs of your project. If your application has a lot of dynamic content changing within the view, like the gallery of photos on your Instagram feed, React is the clear winner. If you don’t have time to learn React, those JSX files have you feeling uncomfortable, or you want to be ready for the WC3’s latest web standards, it might be easier to quickly setup a sleek and simple website using Polymer. Given that Polymer has only been out for a little over a year, it shouldn’t be surprising that React is generally considered to be the more performant option available on the web.
That said, given the inherent emphasis on encapsulation in both technologies, there is no reason you can’t use Polymer and React together. When implemented properly, Web Components should behave no differently than native DOM elements. This means it’s possible to use Polymer elements in React.js as if they were a native part of the DOM. See some functionality that you like in a custom Polymer element? Simply add it to your React application. You can even wrap a React component within a Polymer element, within a larger React component—and although it’s still too soon to say whether there’s any practical application for this functionality, it illustrates the power of the component-oriented design approach.