Choosing a JavaScript Library for Web Apps: Vue.js [REVIEW]

vuejs-review

Vue.js is a lightweight JavaScript library that focuses on the view layer of user interfaces.

A JavaScript library is a collection of functions pre-written in JavaScript that can be used instead of writing code from scratch for common functions.

Here is a review of Vue.js and what makes it ideal for web development.

What problem does Vue.js solve?

Using a JavaScript library like Vue.js cuts the amount of code developers need to write. Vue specifically can be used to add interactivity to existing websites.

Benefits of Vue.js

  • Real time state management
  • Virtual DOM
  • Reactive/composable view components
  • Two-way data binding
  • Transition effects system

Strengths

Vue is only the interface layer. It can be used as a feature within a page rather than building a complete Single Page Application (SPA). Also, it can be dropped into an existing project to add a degree of interactivity.

New Vue.js are often surprised by how easy it is to learn. Vue is close to ordinary JavaScript, so those with a grasp of JS can pick it up almost immediately. Programmers spend less than half an hour studying it before being able to code something simple. That simplicity extends to building and troubleshooting, as well.

Large frameworks impose their own form of order on developers, but Vue has few opinions of its own. Programmers are free to approach challenges in their own way. There are a wide variety of options for adding templates definition libraries.

A lot of JavaScript goes into an app, which leads to slower load times. Vue has a work around for this problem through an async components feature, resulting in “lazy loading” where components are only loaded upon request. This provides high performance on older browsers or in low signal areas.

Weaknesses

Though many people compare Vue to Angular, Vue is a library and not a full framework. It primarily addresses the view layer. As a default it doesn’t come with necessary features such as a router. Creating fast, flexible SPAs with Vue.js is possible, but only in tandem with supporting libraries.

The developer community for Vue is still quite small. As a result there aren’t many stable components, and neophyte Vue users may have trouble telling which version of Vue a particular library was built for. This problem should gradually diminish as Vue’s popularity grows.

Unlike Angular, which is maintained by Google, Vue has a single creator in Evan You. Many of the plug-ins are written in his native language of Chinese.

There aren’t many examples of Vue’s scalability. It’s possible to write large-scale apps with Vue.js, but having so few examples of scalability can be a concern for some users.

How does it compare to React, Polymer, or Angular?

React: Vue employs a virtual DOM like React and is also a view layer library. However, Vue has a gentler learning curve than React.

Polymer: Vue’s components are very much like Polymer’s custom elements. The biggest difference is that because Polymer, unlike Vue, is based on Web Components. Many browsers aren’t yet compatible with Web Components, so Polymer requires polyfills to adapt to those browsers.

Angular: Both Angular and Vue share two-way data binding capabilities. The programs interact well with each other, too. View is a simpler tool for less complex projects that don’t require the full power of Angular.

Real-life application

GitLab incorporated Vue.js into its front end towards the end of 2016. Frontend lead Jacob Schatz describes Vue as having “the perfect balance of what it will do for you and what you need to do yourself”.

Reddit News, a browser extension that displays updates and new posts from Reddit, was built using Vue as were applications like Expedia, Alibaba, Baidu, Nintendo, and Facebook Newsfeed.

Conclusion

For simple projects that call for high performance, interactivity, and ease of maintenance, Vue.js can be a better fit than more robust full frameworks.

If you need highly experienced front-end developers who know Vue.js, share with us your challenges and we’ll help come up with the right solution tailored to fit your needs.

Request a Consultation

Choosing a JavaScript Library for Web Apps: Polymer [REVIEW]

polymer-javascript-review

Polymer is a JavaScript library for creating web components which are then used to build web pages and web apps.

A JavaScript library is a collection of functions pre-written in JavaScript that can be used instead of writing code from scratch for common functions.

Web components is the collective term for a set of features the W3C is adding to the HTML and DOM specifications. They allow for the creation of reusable, encapsulated cross-browser HTML elements to use when building web pages and web apps. Here’s a review of what makes Polymer such an excellent tool for front-end development.

What problem does Polymer solve?

Polymer helps build custom web components which are compliant with the latest standards from the W3C. Web components help reduce the complexity of tooling needed to build modern web applications. They allow for lighter libraries and faster apps by offloading much of the work to browsers.

Benefits of Polymer

  • Supports the creation of custom web components
  • Shadow DOM
  • Google Web Components (plus other element lines)
  • Polyfills (to bridge the gap left by browsers that aren’t yet equipped to handle web components)
  • Modular routing using elements
  • Supports local storage
  • Offline caching

Strengths

Polymer is forward compatible with upcoming W3C standards, providing longevity to apps. It’s easy to use, learn, and teach, so onboarding new team members is a breeze.

Almost any function that can be done with HTML, CSS, or JavaScript can be made into a portable, reusable web component. Using Polymer to compose web components simplifies the development process, making it both more streamlined for developers and less expensive for clients.

Polymer supports serving an app multiple ways: unbundled for delivery over HTTP/2 with server push or bundled for delivery over HTTP/1.

Apps built with web components are easy to break up into modular pieces, so they’re simple to understand, scale, and refactor.

Polymer connects well with third-party libraries. Integrating it into an app or page can be done at the developer’s own pace, starting with a single custom element and moving to as much or as little “Polymerization” as desired.

Above all, Polymer creates fast, responsive websites. It’s up to three times faster on Chrome and four times faster on Safari.

Weaknesses

Polymer is a tool of the future. With all the benefits implied by that status, there are drawbacks. It relies on browser features that aren’t yet standardized across browsers. Developers can work around this with polyfills, but that’s a fairly clunky solution. Fortunately, the need for polyfills is being eroded as browsers catch up to W3C standards.

In Polymer 1.0 there were some problems with dependency errors, though that seems to have been ironed out in Polymer 2.0.

Though Polymer is backed by Google and has an enthusiastic group of users, some components don’t have much existing documentation or examples. Finding experts may also be difficult, since many are still focused on React or Angular.

How does it compare to Angular or React?

Angular: Both Angular and Polymer support the creation of reusable web components. Angular is much more powerful as it’s a fully-fleshed framework. There are, however, two major areas where Polymer has the edge. It’s a third the size of Angular even with the webcomponents.js polyfill needed for non-compliant browsers (much smaller without that polyfill). Also, components created with Polymer are compatible with any application while Angular 2 components are limited to Angular 2 applications.

React: Polymer is much like React in that they’re both libraries, not complete frameworks. React is not compliant with the W3C’s web components standard, preferring to rely on its own component architecture. It’s ideal for projects with a lot of rapidly changing content within the view. However, Polymer has a better template engine and better forward compatibility than React.

Real-life application

In April of this year, McDonald’s used Polymer to upgrade the Menu Board software for their United States locations. Polymer fulfilled the restaurant’s requirement for completely modular software with the ability for layouts to shift based on an individual store’s needs. The app supports more than 10,000 product configurations in over 15,000 locations nationwide.

As expected of a Google tool, many Google properties employ Polymer. Google Earth’s redesigned site and app use Polymer-created web components. So do YouTube Web, Google Translate, and Google Music.

Other users of Polymer include Coca-Cola, Comcast, ING, Bloomberg, and USA Today.

Conclusion

Polymer 2.0 was released in May with increased interoperability, but it still has some browser limitations. It also faces skepticism from those who are loyal to React or Angular. With the growing popularity of web components, however, more developers are realizing how easy they are to create with Polymer. Features like forward compatibility, ease of learning and use, and compatibility with third party libraries are winning the skeptics over. It’s poised to become a well-accepted part of a developer’s toolkit.

If you need highly experienced front-end developers who know Polymer, share with us your challenges and we’ll help come up with the right solution tailored to fit your needs.

Request a Consultation