Comparison on major front-end frame works

Ge Zhang
3 min readJun 15, 2020

As learning more about Vue.js these days, I started to know more about the other frameworks (/library) that are popular to front end development which are React and Angular. I would like to compare some key features on these major frameworks and explore more in respect to choosing a framework, maybe for the future.

When learning one of the frameworks or libraries, we are not just learning one specific technology, but more importantly, the shared technologies and concepts. Here is a good resource that provides definitions on the basic concepts on web development technologies such as distinguishing on front-end vs back-end, brief introductions on HTML, CSS, DOM and JavaScript, main frameworks and libraries to know, and communication between front end and back end, What is Front-End Development: Key Technologies and Concepts [1]. This article provides a good general idea on the front-end development and can help on planning for the self-learning process.

React [2] is an open-source library for building dynamic user interfaces, created by Facebook [1]. React provides lightweight component creation, functional stateless components. Component templates are written using JSX, not HTML, which may take some time to learn. More depth information about React can be found here at The Good and the Bad of ReactJS and React Native [3].

Agular [4] is a front-end framework developed by Google that can work for dynamic, single-page web applications (SPAs), and progressive web-apps, and is cited to be one of the most popular front-end frameworks [1]. However, Angular code can be more complex compared to React and Vue.js, according to the one of the online posts, the Angular has the deep learning curve of the three frameworks [5].

Vue.js [6], the progressive JavaScript Framework, is another open-source framework for SPAs. According to the previous online post [1], “Vue.js is an example of a library that is more of a framework”. For front-end development with Vue.js, skills on HTML and CSS are the must. Comment that “Vue.js is primarily recognized for the small size of documents and HTML-based syntax” was made for this framework by this post, which I think makes it a popular choice for beginners. Vue.js also allows developers to elaborate the HTML and CSS skills and it’s known for its well-written documentations. Vue.js is newer than both React and Angular, so while the community is growing, it’s not as established or big as the others. Further analysis on this framework focuses on the data-binding and scale of project when it comes to the pros and cons about this newer framework [7].

All three frameworks provides CLI(Command Line Interface)s, which make it easier to support local development, and prepare for deployment. All three frameworks have great support within code editors, such as VSC and so on.

React and Vue.js have the core focused on building user interfaces, while Angular is on building applications. Because of this, Angular is bigger, or more complex and has a steeper learning curve. While the project is small or less complex at the beginning, the more developer extends the framework, the more of size and complexity will grow.

Choosing a Framework

When choosing the framework to use, the situation and requirement matter to some extend. After talking with some friends in the IT field in different areas, I collected some of the advices:

1) Looking for a job as a developer

Position yourself in the job market as to the start-up organizations or more established enterprise;

Requirements from the local employers;

Survey on job openings, and get chance to talk to the HR。。

2) Selecting a framework for the next project

Know well on the skillset of the team;

JavaScript knowledge;

Timeline of the project (learning curve differs);

Most important features in the project…

Not sure if I would switch to another technology for web development in the future, but those key technologies and concepts should definitely be focused on.

References

[1]

“What is Front-End Development: Key Technologies and Concepts,” [Online]. Available: https://www.altexsoft.com/blog/front-end-development-technologies-concepts/.

[2]

“React Official Website,” [Online]. Available: https://reactjs.org/.

[3]

“Pros and Cons about React,” [Online]. Available: https://www.altexsoft.com/blog/engineering/the-good-and-the-bad-of-reactjs-and-react-native/.

[4]

“Angular Official Website,” [Online]. Available: https://angular.io/.

[5]

“Pros and Cons about Angular,” [Online]. Available: https://www.altexsoft.com/blog/engineering/the-good-and-the-bad-of-angular-development/#angular%202%20and%20angular%202+.

[6]

“Vue Official Website,” [Online]. Available: https://vuejs.org/.

[7]

“Pros and Cons about Vue.js,” [Online]. Available: https://www.altexsoft.com/blog/engineering/pros-and-cons-of-vue-js/.

--

--