文档结构  
翻译进度:已翻译     翻译赏金:0 元 (?)    ¥ 我要打赏

选择适合项目需求的js框架,将会提高你项目的生命力和竞争力。

因此,对于一个基于js的应用或网站你需要深思熟虑,选择合适的框架可能会显著的影响你项目的成功性,合适的框架能让你准时完成具有高维护性的代码,比如Angular.js, Ember.js和React.js等js框架,他们能够有组织的构建你的代码,让你更轻松的开发敏捷并且具有可扩展性的项目。

第 1 段(可获 1.29 积分)

Javascript 场景的开发

web应用发展得非常快,几乎每隔几个月就会出现一个新的javascript框架,同时现有的框架也会频繁的更新演进。由于这些框架通常是以一种开源的形式存在,世界范围内大量的交流无时无刻地丰富着它们。因此,要通晓每一个框架之间的优势和劣势并不是一件容易的事情。

Angular , React 和 Ember. Deep Dive的对比

许多开发者被大量可用的javascript框架所迷惑,因为这些框架的表现形式和功能实在是五花八门。

第 2 段(可获 1.18 积分)

让我们来比较一下应用于web的最流行三个js框架的优势:AngularJS,ReactJS 和EmberJS,详见下表格

框架

AngularJS

ReactJS

EmberJS

描述

主流 JavaScript MVW 框架

一个用于建立用户接口的js库,可以做到更多

一个用于创建健壮web应用的框架

成立时间

Miško Hevery创建于2009年

Jordan Walke所创建, 开源于 2013

最初作为SproutCore被Yehuda Katz创建于2007年,在2011年该项目被Facebook收购,改名为EmberJS

主页

https://angularjs.org/

https://reactjs.net/

http://emberjs.com/

Github

https://github.com/angular/angular.js

https://github.com/facebook/react

https://github.com/charlesjolley/node-ember

Bug 报告页

https://github.com/angular/angular.js/issues

https://github.com/facebook/react/issues

https://github.com/charlesjolley/node-ember/issues

版本许可

MIT

MIT

BSD-3-Clause

使用该技术的知名网站

Youtube, Vevo, Freelancer, Istockphoto, Weather, Sky Store

Facebook, Instagram, Khan Academy, New York Times, Airbnb, Flipkart, Sony Lifelog

Apple Music, Yahoo!, LinkedIn, TinderBox, Netflix, Groupon

理念

创建高活跃和频繁交互的web应用

数据频繁改变的大型web应用程序

动态SPAs应用

第 3 段(可获 2.36 积分)

AngularJS在框架空间的冠军地位

Angular.js是一个由Google维护的开源web应用框架,其中Angular 1是模型-视图-控制器(MVC)的结构,Anaular 2是模型-视图-视图模(MVVM)的结构。它是以上三个被提及的框架中最早发源的一个,正因如此它有着最为庞大的社区,Angular.js通过使用指令扩展HTML的功能突破SPA’s(单页面应用)的发展瓶颈,这个框架注重让你的应用跑得更快和更稳定

Angularjs的利与弊

第 4 段(可获 1.06 积分)

优势:

  • 对定制的文本对象模型(DOM)元素的创造
  • 直接的UI设计和变更
  • 当在HTML文本创建输入作用域时,会为每一个作用域创建一个独立的数据绑定,Angular 在重新渲染之前会检查每一个绑定在页面的作用域的任何改变
  • 独立的注入机制
  • 简单的路由
  • 易于测试的代码
  • 框架有利于HTML语法的扩展并且通过指令创建可复用的组件
  • 稳健的模板构建解决方案。在HTML属性中通过绑定表达式来提升模板功能。Angular的模板引擎对DOM有深刻的理解,而且其良好构建的模板减少了创建页面所需的整体代码量。
  • 为了使代码简单和易于测试,数据结构被限制成使用小规模的数据模型
  • 呈现静态数组十分快速
  • 伟大的代码复用(Angular库)
第 5 段(可获 1.76 积分)

痛点:

  • 复杂的指令API
  • 对于带有大量可交互元素的页面,Angular变慢
  • 原始设计倾向很慢
  • 很多DOM元素有性能上的忧虑
  • 复杂的第三方集成
  • 陡峭的学习曲线
  • Scopes很容易实用,但是很难调试
  • 路由被限制

注意:Angular 2的功能与以上所描述的Angular 1是不一样的,Angular 2不是对Angular 1的重新设计,而是完全地重写。这个框架两个版本间的巨大变动在开发者中引起了很大的争议。

第 6 段(可获 1.06 积分)

新生儿-ReactJS

ReactJS是一个Facebook所维护的用于创建高性能用户接口的开源js库,专注于出色的渲染表现,React聚焦于模型视图控制器结构中的视图部分。自从发布以来,它迅速获得挑剔的用户群体的青睐。它生来就是为了解决其他js框架普遍存在的问题:大数据集的高效渲染。

Reactjs的优点与缺点

优点:

  • 易于设计的接口和容易学习的API
  • 与其他框架相比,有着显著优异的性能表现
  • 更快的更新。React使用最新的数据创建虚拟的DOM和修补机制,与其以前的版本相比更加高效,这使得真实的DOM仅需要最小范围的更新就能达到同步,而不需为每个变化都要重新渲染整个网站
  • 服务器端渲染允许创建同构/通用的web应用
  • 尽管有着较少的依赖关系,组件很容易导入
  • 良好的代码复用
  • 便于javascript调试
  • 通过React ,完全有可能强化Angular以改善某些麻烦的组件的性能表现
  • 完整的基于体系架构的功能组件
  • JSX,一个javascript扩展语法,允许引用HTML和使用HTML标签来渲染子组件
  • React本地库
第 7 段(可获 2.59 积分)

痛点:

  • 它不是一个完整意义的框架,它是一个库
  • 在视图层非常复杂
  • 流式的体系架构与开发者过去一直习惯的范式是不一样的,
  • 很多人不喜欢JSX
  • 陡峭的学习曲线
  • 把React集成到传统的MVC框架,例如Rails,将会要求一些额外的配置

EmberJS 所有负起的重担

emberjs是一个开源的JavaScript应用程序框架,用于创建单页的客户端Web应用程序,它使用模型-视图-控制器(MVC)模式。该框架提供了通用的数据绑定,和基于网址驱动的方法,构建重在可扩展性的应用程序。

第 8 段(可获 1.15 积分)

Ember最初以SproutCore的面孔起源于2007年,在2011年,它被Facebook收购并改名为Ember。它结合了一些历经考验的本地框架的理念,例如具有轻敏感性的苹果的Cocoa

Embersjs的优点与缺点

优点:

  • 约定俗成的配置。并不需要为你的应用中不同的路由进行复杂的配置,Ember.js支持事后的命名规则,并且自动生成相应的代码,指定用途的配置仅仅出现在没有相应约定规则的场景中
  • 对可伸缩扩展的web应用具有超越视图层面的客户端渲染和结构
  • 支持URL
  • Ember的对象模型有利于键值对的观察
  • 嵌套的用户界面
  • 最小化的DOM
  • 在大型应用生态系统中工作良好
  • 强大的数据层与java的集成
  • 全面成熟的模版机制(Handlebars 模版引擎以流行的Mustache 模版引擎作为基础构建)减少了整体需要编写的代码量,它不关心DOM和依赖,直接的文本操作,动态地创建HTML文本
  • 使用观察者更新值,使得只需要渲染被改变的值
  • 通过使用配件避免“脏读”检查
  • 快速的加载和固有的稳定性
  • 关注性能
  • 友好的文档和API接口
第 9 段(可获 2.28 积分)

痛点:

  • Ember.js在控制器层面缺乏可重用的组件
  • 有大量过时的内容和例子
  • 陡峭的学习曲线
  • 为了保持模版与你的数据模型是同步的,Handlebars模版使用过多 <script>标签,这样会污染DOM
  • 超出其典型的应用场景会遇到麻烦
  • 在调试的时候,Ember对象模型的实现会增加Ember总体规模和调用堆栈
  • .最为顽固和笨重的框架
  • 对小项目不堪负荷
  • 测试用例模糊/不完整

Angularjs,Reactjs 和Emberjs 特性的比较

第 10 段(可获 1.21 积分)

特性

AngularJS

ReactJS

EmberJS

 UI 动态绑定

允许通过UI绑定普通对象甚至深入绑定到属性层次,多个绑定的模型对象能被即时更新,不需要耗费时间进行DOM更新

建立起指向UI的状态的简单联系,状态参数作为对象被传递,并且合并更新到你的React组件的内部状态

使用Handlebars预定义模版引擎,当Handlebars渲染你的页面时,你必须在你的模型使用特定的设置方法更新被绑定到UI视图的值,其他的绑定方法包括允许你的数据模型在视图和另外一个模型通过单向或者双向绑定模式进行绑定

可重用组件

Angular组件叫做指令, 明显的比部Ember 组件更强大,它允许你创建自定义可复用的HTML语法

在视图和控制器层面采用混合机制,以便组件不需要跟UI关联并且可以包含一些公用甚至复杂的程序逻辑

基于窗口的小部件叫做Ember 组件。Handlebars 布局和Ember的后台基础设施使你能够创建你自己的应用程序特定的HMLT标签,自定义元素可以在任何Handlebar模版使用

路由

需要模版和控制器来实现其路由配置,能够被手动管理

不处理路由跳转,但是它有很多路由模块可供使用,例如react-router,flow-router

牺牲复杂度以求获得更强大的路由机制

断言

灵活的断言机制。提供一些实现你自己客户端堆栈的自由度

较少考虑断言,这能简化开发,你不需要付出太多的认知开销

高度的断言机制。对你的应用应该怎么建立有很强的指导意见,对你的应用以及促使你的应用符合它的设计预期有大量的假设

数据绑定

双向

单向

双向

第 11 段(可获 3.81 积分)

考量你的需求并且选择最明智的框架

为了判断哪一个框架才是明智的选择,你需要评估你的应用需求和各个框架的优点。这要求你经过深思熟虑后,对各个框架有深刻的认知,明白它们在不同的使用场景下的竞争优势。所有的框架都有很多共同点:开源的,经过认证许可方可发布的,通过MVC设计模式创建单页面应用。它们都拥有视图,事件,数据模型和路由,但是不同的js框架都有其典型的应用场景。

第 12 段(可获 1.26 积分)

如果你正要准备开发一个web应用程序,那么Angular,React和Ember都是安全可靠的选择,因为它们都有长期的技术支持和活跃的社区。此外,Angular是三个框架中最为流行的,你使用它能得到一站式的服务支持,这个框架就是为了大型企业级应用量身订造的。对于哪些寻求包含所有工具的框架的开发者来说Ember会是最好的选择,Ember替你做了很多决策,你不需要在查找和聚合不同的库文件上花费精力。由于Ember易于学习的特点,它将会很适合开发一些长周期的项目。React 以上三个框架中最轻量级的,即使是相比于刚刚讨论的两个框架,它有一件事做得很好:渲染UI组件。如果你需要逐步实现现有的代码库,这是一个合适的选择。

第 13 段(可获 1.73 积分)

正如你所看到的,这些框架各有千秋,它们各适用于特定的项目。从成型、大小、依赖、交互、特性等不同的几个角度去审核你的项目,进而咨询专业的前端网络开发公司以建立最适合你业务需要的完美网站架构和设计。

第 14 段(可获 0.68 积分)

文章评论