Join the DZone community and get the full member experience.Join For Free
Framework or Libraries
While frameworks are used by a developer to customize everything within the software/app/website by modifying the code in accordance with the framework rules, libraries, on the other hand, provide you with the functionality that can be directly used by you while coding.
Often called a universal framework, they have changed the way everything is done. The main motivation behind the framework was to optimize website loading times and streamline JS bundles. This was also the main reason behind its popularity.
When the concept of isomorphic libraries came into existence, developers started using these libraries. The isomorphic framework breaks the barrier between server and client-side. It allows developers to use components of the framework on both ends.
They provide you with a predefined environment and let you code. The declarative view makes the coding predictable, hence, the code becomes easy to debug. Using React will push you to make your own framework. Pairing it with a backend framework like Next.js will smoothen things on the server-side and all the heavy lifting will be done on the backend.
The React stack usually includes Redux, React.route, React.saga, and Node.js. Myntra, too, uses React, although they only use parts of it because such websites have minimal interaction between sibling components. React has a high rendering performance when there are complicated component changes with frequent UI changes. Some developers prefer Preact because it's smaller and provides greater speed. Ebay, on the other hand, spiced things up by using Angular and Ember along with the Preact library. That seems to be the trend in modern e-commerce websites.
npm is a trustworthy package manager. Several years ago, npm had too many issues to be of much use, as the packages were scattered. Thus, Yarn was introduced as a directory for npm. It is a godsend for developers. npm has vast community support and npm has become faster and almost equal to Yarn in terms of package management. React and Redux come in handy while handling the packages.
Angular is a framework rather than a library because it tells you how your code must be written. Build tools in Angular are complex to understand too. Almost everyone agrees that Angular is bloated as its size is about 150 kb gzipped. Unlike the virtual DOM of React and Vue, Angular has a fully fledged DOM that makes it hectic and bloated. Virtual DOMs are a new concept that has just started gaining ground but it is fast as, now, only changes have to be pushed.
Vue is simply the best of both worlds, meaning it lies somewhere between the dictatorship of Angular and democratic chaos of React. This young JS framework has gained some serious popularity without having been associated or backed by any giant. The framework is used by Alibaba, Nintendo, and GitLab. A team of 16 people made Vue into a very simple yet efficient JS framework.
Combining Vue 2.0 with server-side rendering (SSR), Vuex, and a GraphQL client like Apollo, you end up with a super light, fast, and robust application while providing a great user and developer experience too.
Google introduced Polymer to empower developers to fully take advantage of the latest web technologies. YouTube has renovated its game streaming using Polymer; it is indeed very fast. The most notable feature in Polymer is the ability to reuse custom elements to interoperate with a browser’s built-in elements. Polymer.dom was released with the intent to enable easier DOM manipulation for developers, which paved the way for new libraries and frameworks to be used with it.
Version 2 of Polymer also includes data system improvements resulting in easier debugging and making it easier for data to flow between elements. If you deal with array handling a lot, then you'll Polymer quite magical. Polymer version 3 has moved from using Bower and to using npm for version management.
Polymer App Toolbox helps you build and deliver cutting-edge Progressive Web Apps with minimal overhead and payload, by leveraging powerful web platform features like Web Components, Service Worker, and HTTP/2.
The Toolbox provides a component-based architecture, responsive layouts, a modular router, localization support, turnkey support for local storage and offline caching, and efficient delivery of unbundled app resources. Adopt these features individually, or use them together to build a full-featured Progressive Web App.
Most people are afraid of using React mainly because of its size and performance. Preact was introduced mainly due to the following reasons, and it is amazing how easily you can swap your React-based code with its Preact counterparts. Preact is known to have quite a reputation for enhancing the performance of mobile web applications. Use React and React DOM with Preact-compat paired with Webpack and boom, all your worries go out of the window.
Using Preact will reduce your main app bundle by at least one third (may vary depending on the app), the only catch being that testing gets complicated. The alternative to this may be using React for development and Preact for production. Enzyme, which is used in React, is Preact-compat integrable. Lyft and Uber used Preact and it improved the performance because it is simply faster and smaller. Like React, it also has a virtual DOM that acts as a reagent, thus enhancing its speed.
Maturity in JS is accepting the fact that there is no ‘best’ overall framework or library. In the end, it boils down to what your project requires, and it is always advisable to use more than one library.
If you have a big team, then Angular provides an extra edge because of its fixed procedures and syntax. Both Angular and Vue are great if you love using templates. If server-side rendering is the objective, then both React and Vue have potential to solve your problems, and the same will be the case if you are using it for startups.
Personally, though, I favor Vue out of all three. With Vue, you have enough functioning frameworks for you to start scripting, no additional libraries need to be connected. Most companies are switching from Angular to Vue just to bridge the gap between senior and junior developer.
Published at DZone with permission of Robin Jangu, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.