search
HomeWeb Front-endJS TutorialReact Vs ArgularJs comparison usage examples summary

                                                                                                                                                                                                                                                                                                                 

Nowadays, the two JavaScript frameworks Angular and React are very popular, and the choice of these two frameworks has become the most common question nowadays. And or issues considered by architecture designers, this article may not be able to tell you which framework is better, but try to compare the two from more angles and provide you with more reference opinions when making your choice.

Method of selection

Before choosing, we try to look at the framework (or any tool) you are going to choose with some questions, and try to use the answers to these questions to help us understand more The framework also makes the choice easier.

Questions about the framework itself:

  • Is it mature? Who is behind it?

  • What functions does it have?

  • What architecture and model are used?

  • Is the ecosystem rich?

Questions for self-reflection:

  • Can my team and I learn and master easily? Is

  • suitable for my project?

  • Is the development experience good enough?

Strictly speaking, the comparison between Angular and React is unfair, because Angular is a feature-rich framework, while React is a UI component library, so we will In the analysis, some class libraries that are often used with React will be discussed together.

OK, let’s start... …

MATURITY

As a mature developer or a person who can decide the architecture and technology direction, a An essential skill is to be able to balance the relationship between mature technologies and cutting-edge frameworks in work and projects, which can not only maintain the advancement of personnel and technology, but also ensure the delivery quality of projects or products. Therefore, you must be careful of the following possible Risks:

  • The framework may be unstable.

  • The main developer (sponsor) may suddenly give up.

  • If you need help, there may not be a large knowledge base or community available.

Fortunately, whether it is Angular or React, there seems to be no need to worry about the above risks

React

React is developed and maintained by Facebook for own products, including Instagram and WhatsApp. It's been about three and a half years now. It is also one of GitHub's most popular projects.

Angular

Angular is maintained by Google and used in Google's Adwords and Fiber projects. Since AdWords is an important money-making tool for Google, it is natural that Angular is unlikely to die suddenly.

Function

As mentioned earlier, Angular itself has many more functions than React. Of course, richer functions are an advantage for a framework. It may also be a shortcoming. Both frameworks have some of the same core features: Componentization, data binding, and platform-independent Render mechanism.

Angular

In addition to providing some features that require the latest browser support, Angular also provides the following standard features:

  • Dependency Injection

  • Template

  • Routing (@angular/router)

  • AJAX (@angular/http)

  • Form (@angular/forms)

  • Componentized CSS encapsulation

  • XSS protection

  • Unit testing tool

The advantage of rich functions is that you don’t need to spend extra energy to select third-party class libraries. However, this also leaves you with no choice. You have to choose, even if you don’t need these functions (the latest release of Angular4 seems to have realized this problem)

React

Compared with Angular, the functions provided by React itself are relatively "simple":

  • No Dependency Injection

  • Use JSX instead of traditional HTML Templates

  • XSS Protection

  • Unit testing tools

Compared with Angular, React gives you a lot of freedom to choose third-party class libraries, such as:

  • Routing (React-router)

  • AJAX (Fetch or axios)

  • Various CSS packages (details See: https://github.com/MicheleBertoli/css-in-js)

  • More powerful unit testing (Enzyme)

You can freely (or customize) the required class libraries according to your own needs, and these third-party class libraries are easy to learn.

Language and Pattern

With the popularity of the two frameworks, some concepts and technologies have also emerged. If you want to really use or master these two frameworks, A framework, it is very necessary to understand the concepts or technologies that come out:

React

#JSX

JSX is a very controversial topic: some people like It, while others see it as a big step back. React decided to use an XML-like language to combine markup and code in components, writing HTML markup directly in JavaScript code.

While the topic of mixing markup with JavaScript may be controversial, it has an indisputable advantage: static analysis. If an error occurs in JSX markup, the compiler will report an error immediately instead of leaving it to have inexplicable problems at runtime. This helps developers quickly troubleshoot errors and avoid other silly mistakes, such as typos.

Flow

Flow is a JavaScript type checking tool developed by Facebook. It can parse code and check for common type errors such as implicit conversions or dereferences.

Unlike the similarly-purposed TypeScript, it doesn't require developers to migrate to a new language and makes type checking work for your code annotations. Type annotations are optional during the process and can be used to provide additional hints to the analyzer. If you want to use static code analysis while avoiding rewriting existing code, Flow is a great choice.

Redux

Redux is a library that can manage state changes in a clear way. It is inspired by Flux, but with some simplifications. The key idea of ​​Redux is that the entire state of an application is represented by a single object, which is mutated by functions called reducers. Reducers themselves are purely functional and implemented separately from components. This allows for better separation of problems and tests.

If you are working on a simple project, introducing Redux may be a bit out of balance, but for medium and large projects, it is a good choice.

Angular

TypeScript

TypeScript is a new language based on JavaScript and developed by Microsoft. it is javascript A superset of ES2015 and includes features of newer versions of the language. You can use it instead of Babel to write state-of-the-art JavaScript. It can also statically analyze your code by using a combination of annotations and type inference.

There is a more subtle benefit. TypeScript is heavily influenced by Java and .NET, so if your developers have background knowledge in one of these languages, they may have an easier time finding TypeScript than plain JavaScript (note how we switched from tools to your personal environment) . While Angular was the first major framework to actively adopt TypeScript, it can also be used with React.

RxJS

RxJS is a reactive programming library that can flexibly handle asynchronous operations and events. It is a combination of Observer and Iterator patterns combined with functional programming. RxJS allows you to treat anything as a continuous stream and perform various operations on it, such as mapping, filtering, splitting or merging.

This library has been adopted by Angular for its HTTP module and for some internal use. When you perform an HTTP request, it returns an Observable instead of the usual Promise. Although this library is very powerful, it is also complex. To master it, you will need to know the different types of "observables", "subjects" and about a hundred methods and operators.

RxJS is useful when you're working a lot with continuous data streams (like web sockets), but seems overly complex for anything else. Regardless, when you use Angular, you should at least know the basics of RxJS.

TypeScript can be said to be a very important feature in Angular. First of all, it provides original C#/Java developers with the opportunity to easily enter the front end. In addition, TypeScript also wants to be easier to understand than JavaScript. , especially in projects with a large amount of code or complex business.

Ecosystem

One of the reasons why open source frameworks are so popular is that around them, there are countless tools, class libraries, and extensions to support the entire framework. Sometimes , these tools may be more helpful than the framework itself, so let’s take a look at the most popular tools and libraries related to these two frameworks.

Angular

Angular CLI

A popular trend among modern frameworks is the use of CLI tools that can help you bootstrap your project without having to configure the build yourself. Angular has Angular CLI. It allows you to build and run projects using only a few commands. All scripts responsible for building the application, starting the development server and running tests are hidden in node_modules. You can also use it to generate new code during development. This makes setting up new projects a breeze.

Ionic 2

Ionic 2 is the new version of the popular framework for developing hybrid mobile applications. It provides a Cordova container that integrates perfectly with Angular 2, as well as a beautiful library of material components. Using it, you can easily set up and build mobile applications. If you like working with hybrid apps, this is a great option.

Material design components

If you are passionate about designing Material, you will be happy to hear that Angular has a Material component library.

Angular universal

Angular universal is a seed project that can be used to create projects that support server-side rendering.

@ngrx/store

@ngrx/store is a state management library for Angular inspired by Redux, based on state mutated by pure reducers. Its integration with RxJS allows you to leverage push change detection strategies for better performance.

For more information about Angular related class libraries and tools, please refer to: the Awesome Angular list

React

Create React App

Create-react- app is a CLI tool for quickly creating new React applications. You can generate a new project, start the development server and create bindings. Jest (a unit testing tool from Facebook) is also integrated into Create-react-app, making it more convenient for us to perform unit testing.

React Native

React Native is a mobile development platform based on React developed by Facebook. With this platform, React can create a truly Native UI. A series of standard React components are provided for binding. It also allows you to create your own components and bind them to Objective-C, Java or Swift code.

Material UI

There is also a Material Design Component available for React. Compared with Angular's version, this version is more mature and can use a wider range of components.

Next.js

Next.js is a framework for server-side rendering of React applications. It provides a flexible way to fully or partially render an application on the server, return the results to the client and continue in the browser. It attempts to make the complex task of creating universal applications as simple as possible, so the setup is designed to be as simple as possible, with a minimum number of new primitives and requirements on the project structure.

MobX

MobX is an alternative library for managing application state. Unlike Redux, which keeps state in an immutable store, it encourages you to store only the minimum necessary state and get the rest of the data from it. It provides a set of decorators to define Observables and Observers and introduce reactive logic into your state management code.

Storybook

Storybook is a component development environment for React. It allows you to quickly set up a separate application to display your components. Apart from this, it provides many add-ons to document, develop, test and design your components.

Similarly, you can learn more about tools and libraries from the Awesome React list.

Learning Curve and Development Experience

An important criterion for choosing a new technology is whether it is easy to learn it. Of course, the answer depends on a wide range of factors, such as your previous experience and general knowledge of relevant concepts and patterns. If we assume you already know ES6+, build tools and all that, let's see what else you need to know.

React

With React, the first thing you will encounter is JSX. It may seem awkward at first to some developers, but it doesn't add complexity; It's just an expression, it's actually JavaScript, and it has a special HTML-like syntax. You also need to learn how to write components, use props for configuration and manage internal state. There's no need to learn any new logic structures or loops because it's all pure JavaScript.

The official tutorial is a great place to start learning React. Once you have completed the official tutorial, you should next familiarize yourself with and master React's routing mechanism. React Router v4 may be a little more complex and unconventional, but don't worry too much.

Using Redux will require a paradigm shift, and the free introductory Redux video course can quickly introduce core concepts. Depending on the size and complexity of the project, finding and learning a few additional libraries can be the tricky part, but after that, everything should go smoothly.

In fact, it is very easy to get started with React. The most difficult part may be how to choose a class library that is suitable for your project or product.

Angular

Angular will introduce you to more new concepts than React. First, you need to use TypeScript. For developers with experience in statically typed languages ​​such as Java or .NET, this may be easier to understand than JavaScript, but for pure JavaScript developers, this may require some additional learning.

The rich technical topics of the framework itself can start from the basics such as modules, dependency injection, decorators, components, services, pipelines, templates and directives, to more advanced topics such as change detection, zones, AoT compilation and RxJS. These are all in the documentation. RxJS is a heavy topic and is described in detail on the official website. While it's relatively easy to use at a basic functional level, it gets more complicated when moving to advanced applications.

In summary, we note that Angular has a higher barrier to entry than React. The number of new concepts can definitely be confusing to newcomers. Once again, I encountered some questions and had to Google to find the answer. However, as mentioned before, whether it is suitable or not depends on more factors.

Prospect

Angular

Just in March 2017, Angular has released version 4.0 (compatible with version 2.x). As for why it is 4.0, the official explanation is because The version of Router, the main core component, is already 4.0.0. If Angular still uses 3.0, it will cause confusion, as shown below:

The 4.0 version mainly has a significant reduction The code size is reduced (60%), the loading speed is improved (to the extent visible to the naked eye), and the error message is clearer. According to the official documentation, Angular's version upgrade will be iterated at a relatively fast speed

Whether it is a 6-month iteration of a major version or a weekly hotfix, you can see The Angular team wants to quickly occupy the market with a rapid upgrade strategy.

React

On the other hand, React upgrades are very cautious, which can be seen from the latest v15.5.0 release news blog

However, it can be seen from the blog that React is about to usher in v16. I wonder what surprises the entire rewritten React will bring us. However, it should be mentioned that Facebook has released React VR at the end of last year. Interested students can take a look below.

Fitness

No matter which framework it is, the one that suits you is "good", so you need to measure it from the perspective of the project (product) itself, as follows The list of questions may not be comprehensive, but it can at least serve as a start

  • How large is the project (product)?

  • How long does it take to maintain?

  • Are all functions clearly defined in advance or can they be changed flexibly?

  • Are the domain model and business logic complex?

  • What platform are you targeting? Web, mobile, desktop?

  • Do you need server-side rendering? Is SEO important?

  • Do you handle a lot of real-time event streams?

  • How big is your team?

  • How experienced are your developers and what are their backgrounds?

  • Are there any ready-made component libraries that you would like to use?

If you are working on a large project and want to minimize the risk of wrong choices, consider first creating a demo to verify the product concept. Choose some main features of your project and try to implement them in a simple way using one of the frameworks. Demos usually don't (and shouldn't) take a lot of time, but they provide some valuable experience that can help you validate key technical requirements. If you're happy with the results, you can move on to a full build. If not, you will be given ample time to choose again. During the project development process, you can also use some development tools that support Angular and React to improve development efficiency, such as Wijmo, which is a series of development control sets including HTML5 and JavaScript launched for enterprise application development. Whether your application is mobile, PC, or must support IE6, Wijmo Enterprise can meet your needs.

Summary

Through the above 6 aspects, we compared React and Angular, the two hottest front-end frameworks at present, and hope to provide you with some reference when making your choice. . But whether it is really suitable for you, you may not know until you try it.

The above is the detailed content of React Vs ArgularJs comparison usage examples summary. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
react中canvas的用法是什么react中canvas的用法是什么Apr 27, 2022 pm 03:12 PM

在react中,canvas用于绘制各种图表、动画等;可以利用“react-konva”插件使用canvas,该插件是一个canvas第三方库,用于使用React操作canvas绘制复杂的画布图形,并提供了元素的事件机制和拖放操作的支持。

react中antd和dva是什么意思react中antd和dva是什么意思Apr 21, 2022 pm 03:25 PM

在react中,antd是基于Ant Design的React UI组件库,主要用于研发企业级中后台产品;dva是一个基于redux和“redux-saga”的数据流方案,内置了“react-router”和fetch,可理解为应用框架。

React是双向数据流吗React是双向数据流吗Apr 21, 2022 am 11:18 AM

React不是双向数据流,而是单向数据流。单向数据流是指数据在某个节点被改动后,只会影响一个方向上的其他节点;React中的表现就是数据主要通过props从父节点传递到子节点,若父级的某个props改变了,React会重渲染所有子节点。

react中为什么使用nodereact中为什么使用nodeApr 21, 2022 am 10:34 AM

因为在react中需要利用到webpack,而webpack依赖nodejs;webpack是一个模块打包机,在执行打包压缩的时候是依赖nodejs的,没有nodejs就不能使用webpack,所以react需要使用nodejs。

react中forceupdate的用法是什么react中forceupdate的用法是什么Apr 19, 2022 pm 12:03 PM

在react中,forceupdate()用于强制使组件跳过shouldComponentUpdate(),直接调用render(),可以触发组件的正常生命周期方法,语法为“component.forceUpdate(callback)”。

react与vue的虚拟dom有什么区别react与vue的虚拟dom有什么区别Apr 22, 2022 am 11:11 AM

react与vue的虚拟dom没有区别;react和vue的虚拟dom都是用js对象来模拟真实DOM,用虚拟DOM的diff来最小化更新真实DOM,可以减小不必要的性能损耗,按颗粒度分为不同的类型比较同层级dom节点,进行增、删、移的操作。

react和reactdom有什么区别react和reactdom有什么区别Apr 27, 2022 am 10:26 AM

react和reactdom的区别是:ReactDom只做和浏览器或DOM相关的操作,例如“ReactDOM.findDOMNode()”操作;而react负责除浏览器和DOM以外的相关操作,ReactDom是React的一部分。

react是组件化开发吗react是组件化开发吗Apr 22, 2022 am 10:44 AM

react是组件化开发;组件化是React的核心思想,可以开发出一个个独立可复用的小组件来构造应用,任何的应用都会被抽象成一颗组件树,组件化开发也就是将一个页面拆分成一个个小的功能模块,每个功能完成自己这部分独立功能。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.