Polymer vs. Vue: In-depth Analysis of Top Frontend Platforms

While developing a frontend application, everyone wants an out-of-the-box approach that will instantly reveal one’s potential as a brand. Here’s the catch: there is no silver bullet to developing a top-notch application. With so many frameworks, JS libraries, and platforms to choose from, you need to make an informed decision on making the correct decision.
“So, what are the factors that make technology the right choice? What are the determining factors when selecting it?” you may be wondering.

In this article, Hiren has assessed two popular frontend technologies: Polymer vs Vue, based on standard features like scalability, learning curve, application size, and many more. In case you need professional assistance to choose any one for your project, feel free to check out Simform’s web application development services.

What is Polymer?

Polymer, released in May 2013, is developed by Google developers. It is an open-source library for creating reusable components to build web applications. Written in Javascript and HTML, Polymer is a simplified way of creating web components with cross-browser compatibility. The polymer was one of the sources of inspiration for Evan You while designing Vue.js.

Here are some cool market usage statistics for Polymer:

• A survey by SimilarTech shows that 6,382 websites are built with Polymer, with 1,809 websites developed in the US.
• On GitHub, Polymer has 57 repositories and 21.8k stars.

Use Cases of Polymer:

• Single-page Applications
• Progressive Web Applications
• Reusable UI Components
• eCommerce applications
• Hybrid mobile applications
• Real-time web applications

What popular apps are built with Polymer?

• Youtube leveraged Polymer Web Components to rebuild their Mobile and desktop sites.
• Google Maps has used Polymer’s Web components to create Maps JavaScript API that can be easily integrated into any app and customized as per the app requirements.
• Google Earth opted to use Polymer’s elements and web components to redesign its website and mobile app.
• McDonald’s chose Polymer to design its Menu Board software for stores in 15,000 locations in the US. The modular software structure allowed the company to alter layouts as per every store’s needs.
• USA Today used Polymer to help development and design teams collaborate better on their UI redesign project.

What is Vue?

Vue is a lightweight and flexible JavaScript-based framework that provides advanced web tools to develop modernistic SPAs and front-end web apps. Vue is also considered a versatile and progressive JavaScript framework because it allows change creation in an application code without having influence any core feature built and this provides the opportunity to create progressive UI. With high decoupling, Vue also offers opportunities to extend the functionalities of the web application with customized modules and visual components.

Here are some market usage statistics for Vue:

There are currently more than 2,135,574 successful websites that use Vue globally.
94.1% of the websites that use Vue prefer Vue v2, and the market share held by the framework is not more than 0.7% overall.
The community of Vue is approximately 174k, with 32k forked projects.

Use cases of Vue:

• Progressive web apps
• Single-page apps
• Small project applications
• Large scale enterprise apps
• Existing application design extension
• Existing application functionality extension

Popular apps built with Vue

• Grammarly: Usage of data binding and template engine syntax to create necessary IDE features for building intuitive and easily understandable online editor wrapped with simplistic design and contextual layout.
• Laravel Spark: Seamless functioning of front-end application on the client-side. It offers complete control over SaaS applications. It was made possible by supplementing custom-built Vue components for creating bulky features for the Primer client version of Laravel Spark.
• Behance: Create custom solutions that can uniformly tend to the application code and standardize the application with each new visual feature added over the year. Most of all, Behance undertook Vue to create a roster shift between their developers conveniently.
• Gitlab: Implement complex features that support the existing community to improve their reporting, administration, code management, and analytics. GitLab conducted a slow migration of Vue for its simplicity in creating advanced components without exerting too much effort.
• Adobe Portfolio: Necessity to migrate from a legacy framework without creating a ruckus of data loss or complication was accomplished with Vue. With the help of Vue, Adobe built customized tools that allow users to develop modernized websites via Adobe creatives.

Pros of Polymer:

• Creating Custom Elements – Developers can leverage the functionality to compose enclosed HTML, CSS, and JS as custom elements.
• Data Binding – Polymer allows one-way as well as two-way data binding. With two-way data binding functionality, changes can be made in both upward and downward directions between the host elements and the DOM elements. As a result, data updates between the host and target elements happen automatically.
• Easy Onboarding – It comes with structured and well-maintained documentation compared to React/Angular, which is a significant advantage while introducing new developers to the team.
• Connecting Third-Party Libraries – The architecture of Polymer is not equipped with an extra security layer, and connecting to third-party libraries like Mathjax, d3js, Chart.js, etc., is hassle-free for developers building applications.

Cons of Polymer:

• Understanding Web Components – Developers often experience difficulty understanding Polymer’s web component structure and necessary changes in their coding styles. As a result, they end up rewriting the codes and spending countless hours testing them for any possible bugs. This ordeal affects the project timeline and causes delays in meeting the deadlines.
• Handling Large Scale Applications – Polymer lacks a clear explanation of how it can be leveraged to build and organize large-scale applications. So, if you’re working on a large-scale application, you may not want to go with Polymer.
• Issues with Mobile Platforms – Users of Polymer have often complained about its low performance in mobile applications. This implies, if the majority of your product users are on mobile, you may want to rethink your choice.

Pros of Vue

• Progressive: Migration or integration of Vue can be easily managed by gradually introducing the framework into code while developing components is under process without having to waste any development time.
• Conventional: Vue does not make writing boilerplate code harder by using in-built solutions to create state support for managing components and animations. The conventional approach makes the whole process of building applications with Vue faster.
• Effective Size: With every new version of Vue that gets released, the framework gets even lighter and faster. The optimization ability of Vue allows developers to focus more on feature addition than debugging or code tweaking.
• Functional Extension: Vue offers a set of additive API features that are function-based, which allow the composition of component logic in an application to be flexible and extensive. As a result, application components can become more readable and extended in functionality as per need.
• Future Ready: Vue is known for its strong production environment and thus there is not a need for updating or regularly checking the application for bug fixed or improvements. The framework makes the update process easier by default.

Cons of Vue

• Community: Vue has a community that lacks language understandability. With Vue being popular in regions around China, most of the discussion for Vue is in Chinese, making it difficult for learning, sharing resources for English-speaking developers.
• Code Reactivity: The two-way binding nature of Vue comes in handy to create and sync components across an application. It also results in the rendering of data chunks or parts of features triggered by the DOM.
• Support: Vue is still considered as a young framework, and since its community is relatively small when adopted for large-scale projects, resolving less experienced developers cannot handle issues that arise for large-scale projects.
• Flexibility Risk: Having flexibility and options to customize is always reasonable, but Vue offers too much flexibility. It is often perceived as a framework where too many options over-complicate a project leading to errors and code irregularities.
• Resource limitation: Though Vue’s ecosystem is wide, it still does not offer plugins and tools that are commonly compatible with most of the external tool sources and other frameworks. It also lacks support for most of the available resources.

How does Polymer stand out in terms of performance?

The performance of an application is naturally an important factor while building a web app. Keeping this necessity in mind, Polymer introduced lit-html v1.0 & LitElement v2.0. While lit-html serves as a fast and lightweight HTML templating library, LitElement is a JS library for creating lightweight web components. The key purpose of both libraries is to improve app performance with web components that can be used with or without a framework for app development.

At the Chrome Dev Summit 2016, Taylor Savage revealed how Jumia Travel, which functions as the travel division of Africa’s largest eCommerce site, used Polymer to maintain an exceptional performance,
“Thanks to the Polymer App Toolbox and web components, Jumia built a progressive web app that has twice as fast a page load on 2G, and uses six times less data than their native app to be able to deliver the same exact flow.”

How does Vue stand out in terms of performance?

With each new feature added or extension of a component, the condition of The Vue application becomes uncertain making it harder for the app to load faster. But luckily, this framework has a virtual DOM, which serves as the default tool that helps in optimizing the performance of an application. Lazy loading is one of the prominent features of Vue. It helps in improving the load time.

Vue manages a third-party library in an asynchronous manner by automatically handling the critical dependencies by segregating the libraries into the ones that require to be added in the main application bundle and the ones that can be leftover in routes away from the core bundle.

What kind of architecture does Polymer support?

Polymer does not require you to follow any particular structure as its primary function is to build web components for applications. Polymer’s architecture is divided into 4 interconnected layers:-

• Native consists of all essential features available natively on browsers
• Foundation includes polyfills which add features to browsers that are not natively added to these browsers
• Core provides the necessary infrastructure to explore the features offered by Native and Foundation layers
• Elements are a basic set of elements that act as building blocks for developers to create applications

This block structure is crucial as it enables repeated reuse in various other projects without the need to code from scratch. 

What kind of architecture does Polymer support?

Vue focuses on following the ViewModel approach and undertakes the pattern on MVVM especially in the cases of developing a large-scale application. The View part and the Model part are connected in a two-way binding approach. Here’s what M, V, VM stands for in this framework:

Model: Functions similar to the Model object of JavaScript. Once the data object enters the Model part, the data instance is transformed into reactive elements for creating appropriate storage layers discretely.

View: Actual management of the DOM instances takes place in the View part of Vue. It uses DOM-based templating to successfully create root elements and correspond with the required DOM components.

ViewModel: Handles the synching necessity between the Model and the View part of the code. This object is the primary part where developer interactions with the code take place.

The architecture of Vue and its DOM structures are abstracted into two parts, namely the Filters and the Directives. Unlike most technologies, Vue is not a full-blown framework, hence considering that it follows a View layer pattern, the handling of application development is made flexible and simple.

How easy is it to test Polymer apps?

The Polymer team has developed an end-to-end testing environment called the Web Component Tester. It is built with similar functionalities as third-party testing tools like Mocha, Chai, Sinon, Selenium, and more and eliminates the necessity to learn a new tool.

While discussing the benefits at the Polymer Summit 2015 of using the Web Component Tester, Chris Joel, software engineer at Polymer has explained the functionality in a simplified manner,
“WCT can drive multiple browsers with just one command and writing tests for WCT is as simple as creating an HTML. […] Not only are they (web components) easy to test, but web components can make the whole experience of testing just much better. And the Polymer team has built some great tools to make the whole experience even better than that.”

How easy is it to test Vue apps?

Vue is still a rising star, and its testing abilities are ordinary but straightforward yet efficient. It does not offer over-the-top luxurious tools as well as does not undermine the testing capacity of its code as well. Unit testing of Vue is significantly close to other frameworks and typically uses Jest, Mocha, or Chai. Some of the libraries officially recommended by Vue are Vue testing Library, Vue Test Utils. They provide access to the application and user-specific APIs, making refactoring and code debugging a breeze. Faster feedback loops are possible to achieve as this framework allows CI/CD and provides hot reloading features.

Is Polymer scalable?

With Polymer’s block structure, developers are at liberty to add new blocks of codes to the structure to scale up or down the app without changing any previous codes. Polymer is also supported by the majority of known browsers, and this improves the chances of app compatibility. To sum it up, building scalable frontend applications with Polymer is achievable.

YouTube is a notable example of adopting Polymer to build websites like YouTube Gaming and YouTube TV. The websites hosted a large user base and are popular for being the largest Polymer deployments in the world. Mikhail Sychev, at the Polymer Summit 2017, discussed the company’s achievements after choosing Polymer,

“We have about 400 components that are YouTube specific and more than 1000+ components across all the codebases […] Polymer played a major role helping us organize our internal workflow. Overall the site is faster, that’s up to 15% faster, depending on the page. We finally share components across our projects, and we’re using a standard stack instead of developing everything by ourselves.”

Is Vue scalable?

Since Vue is a lightweight framework, it is often preferred for developing small-time applications and not scalable applications despite its ability to extend an application with its flexible tools. It might be hard to believe that Vue can offer scalability to some extent. It can be made possible by forking a Vue application by breaking it down into multiple repositories to segregate the application for convenient scaling as per requirement. Since the architecture is a little dynamic, scalability is achieved using web packs and Mixin elements offered by Vue to override the code extending limitations.

Can you build complex apps with Polymer?

With the web standards-based web components APIs and custom elements, Polymer can be used for building high-performing complex apps. However, many developers have expressed concerns about insufficient information available on how to build enterprise apps with the Polymer.

Netflix’s Cloud Platform team leveraged Polymer and web components to rapidly build a set of intuitive tools for monitoring app performance, visualizations, and self-service tools for their team of engineers. With the help of these tools, the teams can efficiently operate Netflix systems that are distributed on a large scale across the cloud.

Can you build complex apps with Vue?

When it comes to developing complicated applications, it might be harder, and here is where the coding part gets a little bit serious. Building complicated applications requires a code that can interlink different underlying components and Vue makes it harder to standardize the order of components. But, with the help of Vuex, developing complex apps can be easily made possible without even having to write any spaghetti code. Vuex is a state management library of Vue which is specifically tuned for reducing complication by leveraging the reactivity power of Vue.

How security is handled in Polymer?

In the past few years, XSS vulnerabilities are the most frequent bugs in websites and make up 18% of the total bugs found. The JavaScript security model of Content Security Policy is a part of Polymer and prevents the apps from XSS and other attacks. Thus, it makes an app built with Polymer more secure for its users.

How security is handled in Vue?

Creator of Vue, Evan himself once stated that “built-in sanitizer would add extra bundle weight for a rare use case,” hence automatic protection of Vue codes against attacks like XSS or other vulnerability attacks is not possible. But with the help of external libraries or sanitizing the HTML codes before implementing the said code in the application database offers a fighting chance against security issues. However, Vue also can automatically inject necessary executable HTML, URL, JS codes to keep the application safe before and after rendering.

Polymer’s way of delivering the best user-experience

As Polymer is not a framework, developers use the many functions that the library offers while building web apps. For instance, the Shop is an e-commerce app that leverages Polymer’s App Toolbox that offers a component-based architecture, responsive UI elements, modular routing elements, and more to build a smooth user experience.

Vue’s way of delivering the best user-experience

For developing an interactive and eye-catchy web app UI, Vue might be an ideal choice considering the tech stack it offers. Virtual DOM ensures that changes made within the application do not directly reflect visually, which provides more scope and room for UI design experimentation. The data binding nature of this framework allows developers to easily set HTML attributes and values that can be modified anytime without influencing the existing code using a binding feature called v-bind. Templates, animations, and transitions can be customized as per the requirement with material components and UI tools like Cron generator, Chakra-ui-Vue, etc.

At what pace can Polymer applications be built?

Owing to the ‘lego block’ structure of Polymer, the reusable modules significantly reduce development time, and developers can attach modules as and when required without making major changes to the codes.

At what pace can Vue applications be built?

Building creative applications are tremendous but building them more quickly is even better. Given the lightweight nature and rendering feature of Vue, developing apps at a fast pace is easily achievable. However, using some more add-on tools like Bit, StoryBook, Vue dev-tools, and web packs like Vue loader, Single-File Components (SFCs) can be easily created. This makes the workflow faster and proves to provide opportunities for rapid development.

What is Polymer’s application size?

The size of a basic Polymer app is 127 kb, and when additional polyfills for browsers are attached to the app, the size extends up to 168 kb. Moreover, Polymer’s toolset provides functionality to help you reduce the download size of an app by minifying the code.

What is Vue’s application size?

As already mentioned, Vue is a lightweight framework and that by itself indicates that the application size might not be as heavy compared to other frameworks. A fundamental simple Vue application has a size of between 50kB to 100kB, which is not a lot. Vue CLI might make the application size appear large when it loads the code for the first time due, but upon implementing lazy loading components, codes can be broken up into smaller pieces and improve the load time. Tools like NuxtJS, Vuex, Bit, Vue-router avoids the need for writing code from scratch with effective state management that predicts unnecessary functions, codes, and eliminates them.

How convenient is it to maintain code in Polymer apps?

The build toolset by Polymer ensures that apps are compatible with old browsers. For example, while Polymer 2.0 was written in ES6 for more maintainable code, the toolset compiled it to ES5 for better compatibility with these old browsers.

How convenient is it to maintain code in Vue apps?

Vue is still ever-growing and it is not easy to predict how good it is going to be in the future. Will they resolve their community language issues and support limitations? Probably but as of today, Vue is rising in pace against most frameworks that have existed for a long time. This is a fact that might indicate that there is a good chance that maintaining Vue applications is not that hard. Since Vue lacks good support, creating conventional coding practices helps to overcome limitations and obstacles. Some of the reports from Stackoverflow or Github may even indicate that Vue is future-proof considering its effortless integration abilities and code grafting continuity onto existing DOM and HTML mark-up with zero prerequisites.

How easy is it to learn Polymer?

Polymer components can be written in ES5/ES6 Javascript, and even beginners with basic knowledge about the library can work with its easy-to-use syntax. Thus, the learning curve for Polymer is gentle, and any developer with an understanding of Javascript can use it in app development.

Comcast, the biggest entertainment platform in the US, chose Polymer to develop their website XFINITY Home for home security systems. The company successfully created 500+ components with Polymer while the website hosted half a million users daily. Talking about how the learning curve for their developers, John Riviello at the Polymer Summit 2016 explained,
“So the people we’ve brought on to work on Polymer projects at Comcast, probably only 20% had any experience with Polymer before working on these applications. And that really hasn’t been an issue. If you have engineers who have a solid understanding of html, CSS, and JavaScript, that’s all you really need.”

How easy is it to learn Vue?

Out of all the JavaScript frameworks, Vue is the easiest to learn and understand. It is said that it can be learned between a few hours and less than a week. Basic understanding of how ES6 functions and fundamental skills in JavaScript programming is all that is needed. Documentation of Vue is easily understandable as well though it might not be as rich as other frameworks. The community language issue does not make it any easier for learning or sharing repositories with the community but the official documents are more than enough for a novice to get jump-started with learning Vue and developing web apps.

How convenient is it to hire Polymer developers?

As Polymer developers are experienced in Javascript, you can hire Javascript developers at an average of $25-$30 per hour. However, the price range largely depends on the experience held by the developer.

How convenient is it to hire Vue developers?

Vue is easy to learn but when it comes to understanding the depth of Vue concepts, the availability of developers who are experienced with Vue might be relatively far less. This framework abstracts the inner code complexity with its simple architecture and flexibility in features. Thus, a team of a minimum of at least three or more would be required for a small project, and a group of five or more with at least one or two experienced developers is a must in the case of large-scale application development. Companies that provide team extension as opposed to hiring freelancers are a cost-effective way to hire Vue developers.

Now that we saw the differences between Polymer and React, let us take a look at how companies have leveraged them to build various applications:-

Choose Polymer if you:-

• Want to build an eCommerce web application like Net-A-Porter.
• Want to develop a news platform like Bloomberg LP.
• Want to create a website like FamilySearch
• Plan to build a cab hiring and sharing service like OlaCabs.

Choose Vue if:-

• Want to build progressive web apps and single-page applications.
• Want to get started on your project as soon as possible.
• Want to have a better separation of concerns in your project.
• Wish to extend the functionality of existing applications.