Angular 4发布以及与React的深度对比
jopen 7年前
<p style="text-align:center"><img alt="Angular 4发布以及与React的深度对比" src="https://simg.open-open.com/show/9cfe6ba3a7f07315a829f405362f55fb.png" /></p> <p><strong>前景</strong></p> <p><strong>Angular</strong></p> <p>就在 2017 年的 3 月，Angular 已经发布了 4.0 的版本（兼容 2.x 版本），关于为什么是 4.0，官方的解释是因为 Router 这个主要核心组件的版本已经是 4.0.0，如果 Angular 还用 3.0 会引起混淆，如下图：</p> <p style="text-align:center"><img alt="Angular 4发布以及与React的深度对比" src="https://simg.open-open.com/show/9f169d24d6a149680669917f47ce3035.png" /></p> <p>4. 0 版本中主要是大幅度的减小了代码体积（60%），同时提高了加载的速度（肉眼可查的程度），同时报错的信息更清晰了。根据官方的文档，Angular 的版本升级会以比较快的速度进行迭代</p> <p style="text-align:center"><img alt="Angular 4发布以及与React的深度对比" src="https://simg.open-open.com/show/dcec3cc6564c4efaa899b82277126af1.png" /></p> <p>无论是大版本的 6 个月迭代，还是每周的 hotfix，能看出 Angular 团队想用快速升级的策略迅速占领市场。</p> <p><strong>React</strong></p> <p>反观 React 的升级倒是非常谨慎的，这从最新的 v15.5.0 的发布新闻博客中就能看出</p> <p style="text-align:center"><img alt="Angular 4发布以及与React的深度对比" src="https://simg.open-open.com/show/e17463368242de1256620015b940f9f9.png" /></p> <p>不过，从博客中能看到 React 即将迎来 v16，不知道整个重写的 React 会给我们带来什么惊喜。不过，需要提一下的是 非死book 已经与去年底的时候发布了 <a href="/misc/goto?guid=4959007486147870536">React VR</a>，有兴趣的同学可以围观以下。</p> <p>如今，Angular 和 React 这两个 JavaScript 框架可谓红的发紫，同时针对这两个框架的选择变成了当下最容易被问及或者被架构设计者考虑的问题，本文或许无法告诉你哪个框架更优秀，但尽量从更多的角度去比较两者，尽可能的为你在选择时提供更多的参考意见。</p> <p><strong>选择的方法</strong></p> <p>在选择之前，我们尝试带着一些问题去审视你将要选择的框架（或者是任何工具），尝试用这些问题的答案来帮助我们更加了解框架，也更加让选择变得更容易</p> <p>框架本身的问题：</p> <ul> <li>是否成熟？谁在背后支持呢？</li> </ul> <ul> <li>具备的功能？</li> </ul> <ul> <li>采用什么架构和模式？</li> </ul> <ul> <li>生态系统是否丰富？</li> </ul> <p>需要自我反思的问题：</p> <ul> <li>我和我的团队能否轻松学习并掌握？</li> </ul> <ul> <li>是否适合我的项目？</li> </ul> <ul> <li>开发体验是否足够好？</li> </ul> <p>严格说来，Angular 和 React 的比较是不公平的，因为 Angular 是一个功能丰富的框架，而 React 是一个 UI 的组件库，所以我们在接下来的分析中会将一些经常和 React 在一起使用的类库放在一起讨论。</p> <p>OK，开始… …</p> <p><strong>成熟度</strong></p> <p>作为一名成熟的开发人员或者是能够决定架构及技术走向的人员，一项必备的技能就是能够在工作和项目中平衡成熟技术与最前沿框架之间的关系，既能保持人员及技术的前进，又能保证项目或产品的交付质量，所以，必须小心以下可能的风险：</p> <ul> <li>该框架可能是不稳定的。</li> </ul> <ul> <li>主要的开发方（赞助方）可能会突然的放弃。</li> </ul> <ul> <li>如果你需要帮助，可能没有大型知识库或社区可用。</li> </ul> <p>幸好，无论是 Angular 还是 React，似乎都不需要担心以上的风险</p> <p><strong>React</strong></p> <p>React 由 非死book 开发和维护，用于自己的产品，包括 Instagram 和 WhatsApp。现在已经有大约三年半的时间。 它也是 GitHub 最受欢迎的项目之一。</p> <p><strong>Angular</strong></p> <p>Angular 由 Google 进行维护，并用于 Google 的 Adwords 和 Fiber 项目。既然 AdWords 是 Goolge 重要的吸金利器，自然 Angular 不太可能突然夭折。</p> <p><strong>功能</strong></p> <p>如前文提到的，Angular 本身会比 React 自带很多的功能，当然，更丰富的功能对于一个框架来说，是优点也有可能是缺点。两个框架都具备一些相同的核心功能：组件化、数据绑定以及平台无关的 Render 机制。</p> <p><strong>Angular</strong></p> <p>Angular 除了提供一些需要最新浏览器支持的功能外，同时提供以下标准功能：</p> <ul> <li>依赖注入</li> </ul> <ul> <li>模板</li> </ul> <ul> <li>路由（@angular/router）</li> </ul> <ul> <li>AJAX（@angular/http）</li> </ul> <ul> <li>表单（@angular/forms）</li> </ul> <ul> <li>组件化 CSS 封装</li> </ul> <ul> <li>XSS 保护</li> </ul> <ul> <li>单元测试工具</li> </ul> <p>功能丰富的好处就是你不需要额外费精力去挑选第三方的类库，然而，这也同样让你没得选择，即使你并不需要这些功能（最新发布的 Angular4 貌似已经意识到了这个问题）</p> <p><strong>React</strong></p> <p>相对 Angular，React 本身提供的功能就相对“简约“：</p> <ul> <li>无依赖注入</li> </ul> <ul> <li>使用 JSX 代替传统的 HTML Templates</li> </ul> <ul> <li>XSS 保护</li> </ul> <ul> <li>单元测试工具</li> </ul> <p>相对 Angular，React 让你有很大的自由度去挑选第三方的类库，比如：</p> <ul> <li>路由（<a href="/misc/goto?guid=4959007486264929387">React-router</a>）</li> </ul> <ul> <li>AJAX（<a href="/misc/goto?guid=4959007486374489994">Fetch</a> or <a href="/misc/goto?guid=4959007486484251452">axios</a>）</li> </ul> <ul> <li>各种 CSS 封装（详见：<a href="/misc/goto?guid=4959007486588118873">https://github.com/MicheleBertoli/css-in-js</a>）</li> </ul> <ul> <li>更强大的单元测试（<a href="/misc/goto?guid=4959007486701147007">Enzyme</a>）</li> </ul> <p>可以根据自己的需求很自由（或者定制）需要的类库，同时这些第三方的类库都是很容易学习的。</p> <p><strong>语言与模式</strong></p> <p>随着两个框架的流行，一些概念和技术也随着浮出，如果想真正的用好或者说掌握这两个框架，了解随之而出的这些概念或者技术是非常必要的：</p> <p><strong>ReactJSX</strong></p> <p><a href="/misc/goto?guid=4959007486839303245">JSX</a> 是一个很有争议的话题：有些人喜欢它，而其他人认为这是一个很大的退步。React 决定使用一种类似 XML 的语言在组件中把标记和代码结合起来，直接在 JavaScript 代码中编写 HTML 标记。</p> <p>尽管混合标记与 JavaScript 的话题可能是有争议的，但它具有无可争议的优点：静态分析。如果在 JSX 标记中发生错误，编译器会立即报错而不是留待运行时出现莫名其妙的问题。这有助于开发人员快速排查错误以及避免其它愚蠢的错误，比如拼写错误。</p> <p><strong>Flow</strong></p> <p><a href="/misc/goto?guid=4959007486949310235">Flow</a> 是由 非死book 开发的 JavaScript 类型检查工具。它可以解析代码并检查常见的类型错误，如隐式转换或取消引用。</p> <p>与类似目的的 TypeScript 不同，它不需要开发人员迁移到新语言，并为你的代码注释类型检查工作。在流程中，类型注释是可选的，可用于向分析器提供其他提示。如果你想使用静态代码分析，同时避免重写现有的代码，Flow 是一个很好的选择。</p> <p><strong>Redux</strong></p> <p><a href="/misc/goto?guid=4958973395905045282">Redux</a> 是一个可以以清晰的方式管理状态变化的库。它的灵感来自 Flux，但是有一些简化。Redux 的关键思想在于，应用程序的整个状态由单个对象表示，该对象由名为 reducers 的函数进行突变。Reducers 本身是纯功能，与组件分开实现。这样可以更好地分离问题和测试。</p> <p>如果你正在开展一个简单的项目，那么引入 Redux 可能有点得不偿失，但对于中等和大型项目来说，这是一个很好的选择。</p> <p><strong>AngularTypeScript</strong></p> <p><a href="/misc/goto?guid=4958989889583944253">TypeScript</a> 是一种基于 JavaScript 开发并由 Microsoft 开发的新语言。它是 JavaScript ES2015 的超集，并包含较新版本的语言的功能。你可以使用它而不是 Babel 来编写最先进的 JavaScript。它还可以通过使用注释和类型推断的组合来静态分析你的代码。</p> <p>还有一个更微妙的好处。TypeScript 受到 Java 和 .NET 的严重影响，所以如果你的开发人员有这些语言之一的背景知识，他们可能会比简单的 JavaScript 更容易找到 TypeScript（请注意我们如何从工具切换到你的个人环境）。 虽然 Angular 是第一个积极采用 TypeScript 的主要框架，但它也可以与 React 一起使用。</p> <p><strong>RxJS</strong></p> <p><a href="/misc/goto?guid=4959007487147762984">RxJS</a> 是一个响应式编程库，可以灵活地处理异步操作和事件。它是将 Observer 和 Iterator 模式与功能编程相结合的组合。RxJS 允许您将任何东西视为连续的流，并对其进行各种操作，例如映射，过滤，拆分或合并。</p> <p>该类库已被 Angular 采用其 HTTP 模块以及一些内部使用。当您执行 HTTP 请求时，它返回一个 Observable，而不是通常的 Promise。 虽然这个类库非常强大，但也很复杂。要掌握它，您将需要了解不同类型的“可观察”，“主题”以及大约一百种方法和操作符 。</p> <p>当您使用连续数据流（如 Web 套接字）工作很多的情况下，RxJS 非常有用，但是对于其他任何东西来说似乎过于复杂。 无论如何，当你使用 Angular 时，您至少应该了解 RxJS 的基本知识。</p> <p>TypeScript 可以说是 Angular 中非常重要的特点，首先他给原本C#/Java 开发人员提供了很容易进入前端的机会，另外 TypeScript 也想比 JavaScript 更容易理解，尤其是代码量或者业务复杂的项目中。</p> <p><strong>生态系统</strong></p> <p>开源框架这么流行的原因之一，就是围绕着他们，会有无数的工具、类库、扩展来支撑整个框架，有时，这些工具可能比框架本身更有帮助，接下来我们就来看看相关这两个框架最流行的工具和类库。</p> <p><strong>AngularAngular CLI</strong></p> <p>现代框架的流行趋势是使用 CLI 工具，可以帮助您引导项目，而无需自行配置构建。Angular 有 <a href="/misc/goto?guid=4959007487269231953">Angular CLI</a>。它允许您仅使用几个命令来生成和运行项目。负责构建应用程序的所有脚本，启动开发服务器和运行测试都会在 node_modules 中隐藏。您也可以在开发过程中使用它来生成新的代码。这使得新项目的设置变得轻而易举。</p> <p><strong>Ionic 2</strong></p> <p><a href="/misc/goto?guid=4959007487388148819">Ionic 2</a> 是开发混合移动应用程序的流行框架的新版本。它提供了一个与 Angular 2 完美集成的 Cordova 容器，以及一个漂亮的材料组件库。 使用它，您可以轻松地设置和构建移动应用程序。 如果您喜欢使用混合应用程序，那么这是一个不错的选择。</p> <p><strong>Material design components</strong></p> <p>如果您热衷于设计 Material，您会很高兴听到 Angular 有一个 <a href="/misc/goto?guid=4959007487524979694">Material 组件库</a>。</p> <p><strong>Angular universal</strong></p> <p><a href="/misc/goto?guid=4959007487631277431">Angular universal</a> 是一个种子项目，可用于创建支持服务器端渲染的项目。</p> <p><strong>@ngrx/store</strong></p> <p><a href="/misc/goto?guid=4959007487760522033">@ngrx/store</a> 是由 Redux 启发的 Angular 的状态管理库，基于由 pure reducer 进行突变的状态。它与 RxJS 的集成允许您利用推送更改检测策略获得更好的性能。</p> <p>关于更多的有关 Angular 相关类库和工具可以参考：<a href="/misc/goto?guid=4959007487860510789">the Awesome Angular list</a></p> <p><strong>ReactCreate React App</strong></p> <p><a href="/misc/goto?guid=4958996917562467082">Create-react-app</a> 是一个 CLI 工具，用于快速创建新的 React 应用。可以生成一个新的工程，启动开发服务器并创建绑定。<a href="/misc/goto?guid=4958975144425874909">Jest</a>（来自 非死book 的一个单元测试工具）也同时集成在 Create-react-app 内部，更方便的让我们进行单元测试。</p> <p><strong>React Native</strong></p> <p><a href="/misc/goto?guid=4958964526934019463">React Native</a> 是 非死book 开发的基于 React 在移动端的开发平台，借助此平台，React 可以创建真正的 Native 的 UI。提供了一系列标准的 React 组件用于绑定。同时允许创建自己的组件并与 Objective-C、Java 或者 Swift 的代码进行绑定。</p> <p><strong>Material UI</strong></p> <p>还有一个可用于 React 的 <a href="/misc/goto?guid=4959007488104018325">Material Design Component</a>。与 Angular 的版本相比，这个版本比较成熟，可以使用更广泛的组件。</p> <p><strong>Next.js</strong></p> <p><a href="/misc/goto?guid=4959007488215072062">Next.js</a> 是 React 应用程序的服务器端呈现的框架。它提供了一种在服务器上完全或部分呈现应用程序的灵活方式，将结果返回给客户端并在浏览器中继续。它试图使创建通用应用程序的复杂任务尽可能简单，所以设置被设计为尽可能简单，最少量的新原语和对项目结构的要求。</p> <p><strong>MobX</strong></p> <p><a href="/misc/goto?guid=4958991392500314719">MobX</a> 是用于管理应用程序状态的替代库。不像 Redux 那样将状态保存在一个不可变的存储中，它鼓励您仅存储最低限度的必需状态，并从其中获取剩余的数据。它提供了一组装饰器来定义可观察和观察者，并将反应逻辑引入到你的状态管理代码中。</p> <p><strong>Storybook</strong></p> <p><a href="/misc/goto?guid=4959007488383776686">Storybook</a> 是 React 的组件开发环境。它允许您快速设置单独的应用程序来显示您的组件。除此之外，它提供了许多附加组件来记录，开发，测试和设计您的组件。</p> <p>同样的，可以从 <a href="/misc/goto?guid=4959007488510331713">Awesome React list</a> 了解更多的工具和类库。</p> <p><strong>学习曲线与开发体验</strong></p> <p>选择新技术的一个重要标准是学习它是否容易。当然，答案取决于广泛的因素，例如您以前的经验和对相关概念和模式的普遍了解。如果我们假设你已经知道 ES6 +，构建工具和所有这些，我们来看看你还需要了解什么。</p> <p><strong>React</strong></p> <p>有了 React，你会遇到的第一件事就是 JSX。对于一些开发人员来说似乎刚开始会觉得很别扭，但它并没有增加复杂性; 只是表达式，实际上还是 JavaScript，还有一个特殊的类似 HTML 的语法。您还需要学习如何编写组件，使用 props 进行配置和管理内部状态。不需要学习任何新的逻辑结构或循环，因为所有这些都是纯 JavaScript。</p> <p><a href="/misc/goto?guid=4959007488631183886">官方教程</a>是开始学习 React 的好地方。一旦完成了官方教程，接下来应该熟悉并掌握 React 的<a href="/misc/goto?guid=4959007486264929387">路由</a>机制 。React Router v4 版本可能稍微复杂和非常规，但也不许太过担心。</p> <p>使用 Redux 将需要一个范式的转变，<a href="/misc/goto?guid=4959007488744343835">免费入门 Redux 视频课程</a>可以快速介绍核心概念。根据项目的大小和复杂性，找到并学习一些额外的库，这可能是棘手的一部分，但之后，一切都应该变得顺利。</p> <p>其实，React 的上手非常容易，最难的部分可能是如何挑选合适你项目或产品的类库。</p> <p><strong>Angular</strong></p> <p>Angular 将向您介绍比 React 更多的新概念。首先，您需要使用 TypeScript。对于具有静态类型语言（如 Java 或 .NET）经验的开发人员，这可能比 JavaScript 更容易理解，但对于纯 JavaScript 开发人员，这可能需要一些额外的学习。</p> <p>框架本身丰富的技术主题可以从诸如模块，依赖注入、装饰器、组件、服务、管道、模板和指令等基础开始，到更高级的主题，如更改检测，区域，AoT 编译和 RxJS。这些都在文档中。RxJS 是一个很重的话题，在官方网站上有详细描述。虽然在基本功能层面上使用起来相对容易，但在转到高级应用时会变得更加复杂。</p> <p>总而言之，我们注意到 Angular 的进入壁垒高于 React。新概念的数量绝对令新来者感到困惑。又是碰到一些问题还不得不 Google 后才能找到答案，但是，就像之前说的，是否合适，还是取决于更多的因素。</p> <p><strong>契合度</strong></p> <p>无论是哪个框架，适合自己的才是“好“的，所以需要你从项目（产品）本身的角度去衡量，以下的问题列表可能并不全面，但至少可以作为一个开始</p> <ul> <li>该项目（产品）有多大规模？</li> </ul> <ul> <li>要维护多久？</li> </ul> <ul> <li>所有的功能是提前清楚地定义还是灵活的改变？</li> </ul> <ul> <li>域模型和业务逻辑是否复杂？</li> </ul> <ul> <li>你定位什么平台？ Web，手机，桌面？</li> </ul> <ul> <li>你需要服务器端渲染吗？ SEO 重要吗？</li> </ul> <ul> <li>你会处理很多实时事件流？</li> </ul> <ul> <li>你的团队有多大？</li> </ul> <ul> <li>你的开发人员有多丰富，他们的背景是什么？</li> </ul> <ul> <li>是否有任何您想要使用的现成的组件库？</li> </ul> <p>如果您正在开展一个大型项目，并希望尽可能减少错误选择的风险，请考虑先创建一个 demo 用于验证产品概念。选择项目的一些主要功能，并尝试使用其中一个框架以简单的方式实现它们。 Demo 通常不会（也不应该）花费很多时间，但会提供一些宝贵的经验，可以帮助您验证关键的技术要求。如果对结果感到满意，可以继续全面构建。如果没有，会给你充分的时间重新选择。在项目发开过程中，你还可以借助一些支持 Angular 和 React 的开发工具来提高开发效率，如 <a href="/misc/goto?guid=4958850799153394244">Wijmo</a>，这是一款为企业应用程序开发而推出的一系列包含 <a href="/misc/goto?guid=4959007489727723769">HTML5</a> 和 JavaScript 的开发控件集。无论你的应用程序是移动端、PC 端、还是必须要支持 IE6，Wijmo Enterprise 均能满足需求。</p> <p><strong>总结</strong></p> <p>通过以上的 6 个方面对比了 React 和 Angular 这两个目前最热的前端框架，希望能对你在选择时提供一些参考。但是否真的是合适自己的，或许真的需要用过才知道 Good luck。</p> <p> </p> <p>来自: <a href="/misc/goto?guid=4959007489860835127" id="link_source2">gcdn.gcpowertools.com.cn</a></p>