This is part 2 of the series: “Front-end Technology Selection for Fundbox.” Part 1 covers the current state of Fundbox technology and our motivation for redesigning it. Part 2 covered the considerations behind choosing a new framework: whether to migrate to React, Vue, or Angular. Part 3 describes how we migrated from Angular to Vue without compromising our product path.

Overview

Rethinking front-end technology selection requires a lot of thought, discussion, decision making, planning, management and implementation. One of the first decisions we had to make was to choose a front-end framework to redesign our product.

We studied it for months to make sure we came up with a better decision. Conduct discussions, establish proof-of-concept, interview colleagues with relevant experience at other companies, and read a lot of online material.

In this article, I will compare the finalists in the selection process. We decided to pick our next infrastructure from a list of frameworks: Angular, React, and Vue.

The target

Our goal is to build a new, modern, fast and reliable platform for all of our current and future front-end applications.

The candidate framework

  • React
  • Vue
  • Angular

Angular

Angular was abandoned early in our selection process for two main reasons (more detailed reasoning can be found in “Why Move Then? Read here) :

  1. Angular is our current framework, using version V1. Angular V2 introduces many improvements, but it is not backward compatible. This means that upgrading to the latest Angular is no different than switching to another framework. As a result, developers have lost confidence in the framework, and the idea of using Angular has dropped dramatically in Fundbox and the industry as a whole.

  2. Angular has evolved into a large framework that helps build complex systems, but is less useful for starting up rapidly changing UIs. React and Vue are more lightweight, and componentization means small, autonomous, packaged, and therefore easy to reuse. If we develop a new infrastructure from scratch (without migrating from the existing infrastructure), we can also consider using Angular. But in our case, it doesn’t fit.

In any case, we are rewriting important parts of our application, and this is a great opportunity for us to learn new technologies. In this way, we can broaden our knowledge and enrich our developers’ experience.

React VS Vue

React and Vue are the only choices left for us. We will compare these two frameworks in the following aspects:

  • Learning curve Is the learning framework simple enough for people with extensive development experience?
  • How readable and intuitive are the code and conventions of the code style framework?
  • How intuitive is it for individual file components to browse and maintain components in the framework?
  • Performance How does the application built using the framework perform? What is the size and running memory footprint of the framework?
  • How much functionality does the flexibility framework provide? How many features are mandatory? How easy is it to customize the framework?
  • What tools are available to the tool framework? How many stable plug-ins does the framework have?
  • Does the mobile support framework support more applications than the Web? Does it provide a way to build Native applications?
  • How big is the community of the community framework? Is the community united or fragmented?
  • How mature is the maturity framework? How long did it go through production validation? Is its future path clear?
  • How big is the team behind the supporting framework? Is there a company or organization responsible for the framework?
  • How easy is it to hire developers experienced with the framework?

The learning curve

React

The React documentation provides some well-written how-to guides and a walkthrough for beginners. Developers with some experience with front-end frameworks can understand the core principles of the framework in a matter of hours.

The official React documentation is detailed, but not as clear and organized as Vue’s official documentation. The documentation covers the necessary introductory tutorials and core concepts, but the boundaries of the framework are missing. As the project gets larger, these boundaries can turn into pain points.

React is not an all-in-one framework. Its core philosophy is lean, focusing only on core parts, and other functions are addressed by referencing third party solutions. This adds some complexity to the learning curve, as it varies depending on the choices you make about the framework along the way.

Vue

Vue can be loaded directly from an HTML page as a resource in a matter of minutes, and the entire library is ready to use without building. This allows us to write Vue applications at any time.

Editor: thank David Bismut noted to React as a separate JS files are added to the page, without having to build steps: https//reactjs.org/docs/add-react-to-a-website.html

Vue is easier for developers to learn because it borrows concepts from React and Angular. The official documentation for Vue is very well written and even covers issues that were accidentally discovered during the development of the Vue application.

Vue is more strictly defined than React; That also means it’s more stable. It is worth noting that in Vue, many questions are answered directly in its documentation, without having to search elsewhere.

Code style.

React

React introduced a set of concepts based on functional programming that simplified the process of developing UI-first applications. Most notably:

  1. JSX, which is a way of writing HTML in JavaScript. JSX complements React as a powerful enabler of functional programming and is significant.
  2. Its component lifecycle provides an intuitive way to connect specific events (creation, update, etc.) in the component “life”

Vue

As a younger framework than React and Angular, Vue absorbs good ideas from all sides, mixing functional and object-oriented programming (OOP).

By default, Vue’s coding style is somewhat similar to Angular’s in some respects, but removes most of Angular’s pain points. Vue separates HTML, JS, and CSS, just as Web developers have been accustomed to coding styles for years. But if you prefer the JSX style, it can also be used interchangeably. So it doesn’t force you to change your code style.

Vue’s consideration of the component lifecycle is more intuitive than React’s. In general, Vue’s API is broader but simpler than React’s.

Single file component

React

With JSX, the individual file components in React are written entirely as JavaScript modules, meaning React has a specific way of writing HTML, CSS, and JavaScript.

All functionality is written in JavaScript, which means fewer bugs because it relieves the burden of creating dynamic HTML inside components. Instead, with JSX we can generate templates using native JavaScript.

That said, React’s special syntax requires more learning and practice before you can write components in React.

Vue

The individual file components in Vue are divided into three separate parts:

As a progressive framework, Vue can be easily customized. For example, as a configurable item, you can use JSX instead of the

performance

Edit: It’s worth mentioning that performance is a bit harder to measure because it depends a lot on the particular application you’re building and even more on how you’re building it.

React

Library size (over network/uncompressed) : 32.5KB / 101.2KB

React’s overall performance is very good compared to DOM operations. It is much faster than Angular, but slower than Vue.

React provides support for out-of-the-box server-side rendering (SSR) and can be useful for certain types of implementations.

Built-in support for Bundling and tree-shaking minimizes the resource burden on end users.

Vue

Library size (over network/uncompressed) : 31KB / 84.4KB

In addition to being the fastest Vue, Vue is an incremental framework, built from the ground up for gradual adoption. The core library focuses only on the view layer and is easily accessible and integrated with other libraries or existing projects.

Like React, Vue has built-in support for Bundling and tree-shaking to minimize the resource burden on end users.

www.stefankrause.net/js-framewor…

flexibility

React

React focuses on the UI, so the most fundamental functionality we can derive from it is to build the user interface.

More advanced features, such as state management, are not included in the React library. Most React applications use Redux for state management, and MobX is getting a lot of attention as a React partner.

Even the React Router is not an official package, but a third-party package supported by the React team.

Vue

As an incremental framework, Vue only allows you to use its most basic capabilities to build applications, but it also gives you most of what you need out of the box: Vuex for state management, Vue router for application URL management, VUE-SSR for server-side rendering.

For better or worse, Vue is more solid than React.

tool

React

React has a third-party CLI tool called create-React-app to help build new applications and components in React projects.

CLI tools also support running end-to-end and unit tests, code reviews, and local development server capabilities.

React provides good official and community support for major ides.

Vue

Vue has an official CLI tool called Vue CLI. Much like React’s create-React -app, the Vue CLI tool provides a scaffold for new applications.

In addition, Vue has good support for all the important ides (not as good as React, but WebStorm and VSCode are supported).

Mobile support

React

React has a port for building Native mobile applications, called React Native, which is the current “write once (in JavaScript), use many (in Native iOS and Android)” solution.

There are a number of online applications built using React Native.

Vue

For Vue, there are many ways to build Mobile Native applications. Unlike React Native, there is no clear leader for building Native apps with Vue.

NativeScript is the leader of these options (it is also an Angular preferred solution), along with Weex and Quasar.

community

React

In StackOverflow, there are about 88,000 questions marked with #reactjs. There are over 40,000 NPM packages available for React developers to install.

In the latest front-end tools survey, more than 40 percent of respondents said they were happy with React.

On GitHub, React Repo has nearly 100,000 stars.

React does have a larger community, but the downside is that it’s more fragmented than Vue, and it’s hard to find direct answers to common questions.

Vue

In StackOverflow, there are 18,000 labeled # vUE and nearly 10,000 NPM packages available for installation.

In the latest survey, 17% of respondents said they were satisfied with using Vue. But in fact, the number of developers interested in learning Vue has doubled compared to React, so the market demand for Vue developers is likely to grow faster than React in the future.

The Vue project on GitHub has more than 100,000 starts, more than React.

Thanks to its excellent documentation, most of the answers to the questions in Vue development can be found immediately in the documentation and are generally consistent with community answers.

maturity

React

React was released in March 2013 (5 years at the time of this writing).

React is being used by 205,000 independent sites, growing 2.46% per month, according to SimilarTech.

React was well tested in production and surpassed Vue. React has built a large community, largely thanks to the maintenance of its owner, Facebook.

Vue

Vue was released in February 2014 (age 4 at the time of writing).

Vue is being used by 26,000 independent sites, according to SimilarTech. Monthly growth of 3.34%.

Vue became the industry benchmark a year and a half ago and has been widely used by some big companies, such as GitLab, Alibaba, Baidu, etc. Vue has proven to be stable in both operation and update.

support

React

React is a framework created and maintained by Facebook. At Facebook, there is a team that regularly supports React (React is also used for many projects within Facebook).

Facebook’s React team is said to include 10 dedicated developers. But it’s worth noting that Multiple teams in Facebook’s R&D department are using React for both internal and external projects, and each team can push change requests into the library.

React does not have an actual roadmap, which is based on RFC rules explained here.

Vue

Vue is a standalone library created by Evan You. He is also responsible for managing Vue maintenance and its roadmap.

The Vue team size includes 23 full-time developers.

The advanced roadmap for Vue can be viewed in their GitHub repository.

recruitment

React

React, by far the most popular framework in the React developer market, has the edge.

In addition, by learning React, developers’ resumes will shine because they can easily gain valuable experience with the popular framework.

Vue

Vue is the new “hot spot” in the front-end industry. There are some downsides to hype, of course, but Vue has long been gaining steady traction, and developers are eager to embrace Vue projects as part of FOMO. Right now, it’s not hard to find developers with Vue experience.

One’s own advantage

React

  • Industry standard.
  • There are more popular front-end development engineers skilled in using the framework.
  • It’s easier to recruit good engineers.
  • With a strong background of company support, a more secure future and stability.
  • Larger community, lots of tools and packages.
  • Web and mobile applications can share some code.

Vue

  • Built in core modules (Vuex, router, etc.) and works great.
  • Focus on the future, not the present.
  • More unique; Set trends instead of following them.
  • Faster to get started, FED(front-end development) and BED(back-end development) both feel natural and fast in Vue code.
  • Better full stack support; Allow cross-product development.

Their respective shortcomings

React

  • Maintain the boundary between FED and BED; React needs to learn a lot to become an expert.
  • Need more time to train developers.
  • Delivery is slow (at least for complex projects that start fresh).

Vue

  • Step into a more experimental land, no risk, but avant-garde.
  • It’s harder to find experienced Vue developers.
  • There are fewer plug-ins and tools available, and the community is smaller.
  • Unlike React, developers don’t have experience with the most popular frameworks.

More and more

React and Angular have been major players in frame games for a long time, and many (many!) Frame shows up every other day and tries unsuccessfully to get into the Hall of Fame; In addition to – Vue. The appeal and popularity of Vue can be seen in articles, tutorials, POCs, and references to the browser developer community.

React is a trendsetter and advanced skill in the industry. React is a clear leader today, both in terms of industry usage and community popularity. It’s very popular and, frankly, deserves its high status. React makes it easy to build complex and intuitive Web and mobile applications, but it has cost-framework complexity and sample complexity. The basics are relatively straightforward, but large React projects tend to get complicated. Fragmentation in the community is also one of its certainties. React introduced many new specifications that had some negative effects on its learning curve.

Vue is more streamlined, a straightforward and novel framework that deserves its place on the stage because it is very simple to learn, sample code is very simple, high performance, flexible and complete. Many web applications today can be built faster using Vue than React. Vue is fun and easy to develop.

The recent steady growth of discussions praising Vue within the front-end community means that Vue will soon become as popular as React.

The resources

  • How popular is VueJS in the industry? Will becoming a Vue expert be useful, career-wise? (Quora)
  • Comparison with Other Frameworks (in Vue’s documentation)
  • Vue.js or React? Which you would chose and why? (Reddit discussion)
  • Choosing the Right JavaScript Framework for Your Next Web Application (Progress)
  • Angular vs. React vs. Vue: A 2017 comparison (Medium article)
  • Can Vue Fight for the Throne with React? (RubyGarage blog)
  • React vs Vue.JS: Which Front-end Framework to Choose in 2018 (jetruby blog)
  • Angular 5 vs. React vs. Vue (ITNEXT blog)

Thank you for reading

React vs. Vue (vs. Angular)