美高梅官方网站66159

Web 应用程序的前10个 JavaScript 框架,前端迷思与React.js

作者:新闻公告    来源:未知    发布时间:2020-04-19 22:37    浏览量:

Widen是一家数字资产管理解决方案提供商。目前,其技术栈还非常传统,包括服务器端的Java、浏览器端的AngularJS、提供REST API支持的Jersey以及jQuery、 Underscore、lodash、jQuery UI和Bootstrap等各种库。近日,该公司的首席开发人员Ray Nicholus在一篇文章中提出了一个面向未来的Web开发技术栈,用于取代现有的工具。

多年来,业界已经发布了大量 JavaScript 框架,怎样进行选择可能是一个挑战。如果你感到困惑,不知道应该选哪个或者究竟哪个适合你,那么我已经帮你解决了问题。在本文中,我将列出用来构建 Web 应用程序的前10个 JavaScript 框架。

前端迷思与React.js

虽然他们已经习惯并信任现有的技术栈,但为了实现以下几个目标,Ray希望引入一个全新的技术集合:

  1. Aurelia

    前端技术这几年蓬勃发展, 这是当时某几个项目需要做前端技术选型时, 相关资料整理, 部分评论引用自社区。

  • 一种新的、闪亮的方法:作为一名开发人员,他希望通过采用一个全新的工具集获得全新的视角,并有所进步。

  • 简洁:他不喜欢 AngularJS 1.x 陡峭的学习曲线,更令他失望的是,AngularJS v2的学习曲线更加陡峭。Java也有这样的特点。另外,他希望能够尽可能地避免样板代码,应用程序可以快速投入应用而又无损可扩展性,前端很容易描述为 一组独立的专用组件的集合。他还希望用一种更好的方法取代难以维护和改进的传统REST API。

  • 高效:他希望可以消除由传统REST API所导致的不必要的请求和响应开销。

  • 优雅:他希望编写优雅、易读的代码。在用户界面上查找和修改数据要直观,最好是开发者只需要考虑自己的数据模型,而不用关心可用的API端点。

Aurelia 是一个开源的现代 JavaScript 模块工具箱,其有助于 Web 和移动应用程序的发展。它也被称为“下一代框架”。该框架自推出以来一直受到广泛认可。 Fileee、Freska、Ordami 和 BTEK Software 等公司以及800多个网站都使用了 Aurelia。

图片 1
开始吧:

放弃现有的技术栈意味着开发人员要走出自己的舒适区,部分人可能会抵触,认为新选择不必要或过于复杂。Ray也有类似的想法,但当他对React、 webpack、Falcor有了深入地了解之后,他改变了这种想法,认为这是一个面向未来的Web开发技术栈,Widen即将推出的部分软件产品将会使 用下面讨论的所有技术:

不要忘记,Aurelia 是唯一允许开发人员使用原生 TypeScript 或 JavaScript 构建组件的框架。

  • 目前, Web 开发技术框架选型为两种的占 80% 。这种戏剧性的变化持续了近 6 年。
  • 自 2013 年 5 月推出以来,ReactJS 在过去三年中已成为了 Web 开发领域的中坚力量。
  • React:Ray认为,React与Angular&Ember 的不同之处在于其有限的应用范围和空间占用。Angular&Ember的定位是框架,而React主要是作为应用程序“视图”。React不包含依赖注入或“服务”支持,不需要“jq-lite”,也不依赖于jQuery。开发人员可以直接使用JSX编写标记,而无需Ember Handlebars。React会维护一个“虚拟DOM”,并通过它更新真正的DOM,避免了不必要的重排与重绘。总之,他非常喜欢React这种用途相对专一的特性。而且,React让他可以将复杂的应用程序切分成更小的组件。

  • Falcor:这是一个由Netflix开源的、非常新的库。不同于传统REST API,它只提供唯一的一个端点。有了它,开发者不再需要向不同的服务器端点请求不同的数据,而是向同一个端点请求不同的模型数据。服务器端可以识别请求参数,并由Falcor Router调用恰当的router函数。也就是说,Falcor提供了一个更加直观的API,就是开发者的数据模型。这可以确保服务器永远不会返回不必要的模型数据, 节省了带宽。Falcor客户端还可以使用缓存数据为连续的请求提供服务,减少服务器响应时间。要了解更多关于Falcor的信息,可以查看Jafar Husain的视频。

  • webpack:作为一个模块绑定器,webpack可以为React组件模块化提供进一步的支持。它使开发者可以轻松压缩和连接CSS及JavaScript,并通过生成source map大大地简化调试工作。配置完成后,webpack会监控代码,每次代码发生变化,它就会生成新的bundles。客户端无需再导入大量的CSS或JS文件,而只需要导入bundles,减少了页面加载时的HTTP请求数。此外,webpack还提供了大量的插件,例如,使用jsx-loader可以将JSX转换成JavaScript,使用babel-loader 可以将ES6代码转换成兼容ES5的代码。

  • ES6:即ECMAScript 2015,是JavaScript的最新规范,定义了若干重要的新特性,比如胖箭头函数、类、字符串插值、块作用域等。更多信息,请查看Mozilla Developer Network上的ECMAScript 6参考指南。

下面我列出了 Aurelia 的一些主要功能:

任何组件与框架都有它的适用场景, 我们应该冷静分析与权衡, 先来看React.js

为了帮助读者更好地理解这些技术,Ray使用它们创建了一个单页应用程序,并详细解释了整个的创建过程及相关技术的工作原理。感兴趣的读者可以阅读原文,并从GitHub上下载该应用程序的源码。

多语言支持:Aurelia 的 API 经过精心设计,可以用于当今和未来最实用的 Web 编程语言。 Aurelia 支持 ES5、ES2015、ES2016 和 Typescript,它非常有用,并能够为你提供高度的灵活性。模块框架:Aurelia 不是采用单一框架的方式,而是由较小的、专注的模块组成。把它们放在一起可以组成功能齐全的框架,也可以通过自定义构建可选择的方案。整洁的文档:Aurelia 提供了一个非常详细并有用的文档集,可以帮助所有的开发人员。它以良好的文档维护而闻名。可扩展的 HTML:Aurelia 的可扩展 HTML 编译器允许你创建自定义 HTML 元素,可以向现有元素中添加自定义属性并控制模板生成,所有这些都完全支持动态加载、数据绑定和高性能批量渲染。9. Polymer

1 从功能开发角度说,React的思路很好。
2 从页面设计角度说,传统的HTML+CSS以及同样思路的模板更好。

转自:    

Polymer 是一个由 Google 维护的开源 JavaScript 库,用于使用 Web 组件构建 Web 应用。目前,有超过3000个网站正在使用聚合物,比如virustotal.com、rogers.com、zeplin.io等。

     大家开发前端的思路早已不是当年的 Web page,而是Application。大多数公司不是Facebook,没有那么多全栈高手。团队中擅长写业务的,未必擅长页面布局;擅长页面布局的,未必擅长写业务。这样在团队中必定会有分工,其中会有些人着重实现炫酷的页面效果,而React显然对这种分工不友好。

与其他 JavaScript 框架不同,Polymer 让开发人员构建组件时去利用 Web 中存在的功能。它是第一个利用 Web 组件来对应用进行交互式构建的库。

为什么需要 React,Why?

    我们需要技术栈提供好用的模块化方式,可以是Web Component,可以是非Web Component的某种机制,不管什么库或者框架,我们需要技术赋予我们完成一个抽象,一次构建,多处复用的能力,并且这个过程不能太麻烦,不能做个很日常的抽象翻半天文档。
    我们需要数据绑定,在各种粒度上真正实现事件驱动,因为这样我们就不用自己重复手写本质上并不依赖场景的从视图到数据从数据到视图的自动更新,否则我们就得自己操作DOM,优化DOM操作,还要自己维护状态,一自己维护状态,就要陷入状态同步的漩涡,浪费大量时间和精力。
    我们需要技术栈隐藏掉平台的微妙差异,写一段代码可以真正实现跨平台,而不用我们自己纠结于那些本不该应用开发纠结的事,我们需要持续稳定的跨平台支持,最好的移植就是不用移植,这在商业上有很大的价值。
我们需要库或者框架好学,好用,从第一天起就能快速开发,而不是不得不经历几个月的学习曲线那种,因为大多数团队的程序员水平都存在梯度,我们不希望因为一个技术栈把初学水平的人挡在门外很久,理想的状态是技术本身能对招聘工作完全透明,同样的工期,同样的项目,随时找人都可以,招人的时候不用写得过于具体,只要会JavaScript就能快速上手,我们需要概念负担尽量少的技术栈,真正理解了Simplicity的技术。
    我们希望技术栈有非常好的性能,性能的水平和垂直扩展性都很好,这样我们就不用项目写到一半回头去纠结应用开发团队很难解决的性能问题,我们需要在快速开发和基础性能之间平衡得很好的工具,而不是因为要强调某一方面而对另一方面关注太少的那些工具。
    我们需要使用的工具有专业的团队或者社区持续地跟进,最好这些团队和社区自己就把自己的东西投入生产使用的技术,这样至少对我们来说风险就有起码的控制。我们不需要那些心血来潮,永远不成熟因为永远没有专门投入的技术。
    我们需要那些普通人喜欢用,也用得好的技术。
    React满足上面的一些方面,不满足另一些方面,和其他工具一样。你需要React,是因为两点
    第一,你充分评估了你的项目,理解你要解决的问题是什么,是快速开发,性能,团队的人类工程学,多数情况下要解决的问题是多个要素的平衡
    第二,你充分评估了React这个栈,理解它是解决你的具体问题的最佳工具,你真的理解了自己的场景中非用React不可的那些事情

    如果你觉得React快所以需要,事实是React并没有那么快,尤其是大型应用,小型应用里快是不重要的,所有的框架都足够快。
    如果你觉得React开发快所以需要,事实是React并一定是最好用的,尤其是当你考虑了团队的构成。

    如果你觉得React是Facebook开发的所以需要,我的揣测是经历过一个社区adoption的高峰以后,Facebook未必能解决剩下的那1%的问题。
    如果你觉得React Native很火所以需要,这或许是一个理由,但RN也不是唯一选择,从各方面评估,NativeScript这样的栈并不比RN坏多少,也许还稍微好一点。如果是大预算的商业开发,RN甚至不应该成为首选。

    大部分人在用 React 的时候,用到的是两个特性:

    1. 虚拟 DOM

    2. 组件化

   至于其他的伪特性,我认为是有些同学「一瓶子不满,半瓶子咣当」,意淫出来的。这些伪特性包括:

    1. 跨平台。虽然 ReactNative 可以在多个平台上使用,但是 ReactNative 并没有封装不同系统的 API。从这方面来说,这货甚至连 weex 都不如。
    2. 更易于组织逻辑。这明显是 flux/redux 做的事情。而且 redux 已经明确说明了,不仅仅适用于 React,其他框架也可以用 redux。

Polymer 的关键特性:

我们真的需要上述的两个特性吗?

Web 组件:Polymer 构建在 Web 组件的思想之上。 Web 组件是一组 w3c 标准,由几种不同的 Web 技术组成,其中包括自定义元素。这些组件是浏览器的一部分,所以你不需要任何第三方工具和库,比如 jQuery。单向和双向数据绑定:它提供单向和双向数据绑定。Polymer 旨在支持在单向和双向流动的数据。本机浏览器:Polymer 使用本机浏览器技术,而不是依赖于自定义 JavaScript 库。Polymer 的 DOM 层最接近本机 JavaScript 层。自定义元素:它允许使用 HTML、CSS 和 JavaScript 轻松创建自定义元素,以便向元素添加交互。 Polymer.js 提供了创建自定义 HTML 元素的最简单方法,因为它的库是基于 Web 标准 API 构建的。8. Meteor

虚拟 DOM

虚拟 DOM 解决了频繁操作 DOM
产生的性能问题。那么下面几项事实必定会导致这一特性「没有前途」:

  1. 设备的硬件性能会越来越好,性能在将来不再是问题。
  2. 假如说我们要解决性能问题,相比虚拟 DOM,
    下面几个解决方案会更好:
  3. 浏览器实现虚拟 DOM。而且这也是虚拟 DOM 被应用的正确场景和姿势。
  4. 再操作数据的地方做 diff,而不是在虚拟 DOM 的基础上做 diff。这是才是 cache/diff 的正确用法。

Meteor 是一个用 NodeJS 编写的免费开源 JavaScript 框架。它允许进行快速原型设计并生成跨平台代码。它在市场上越来越受欢迎,超过 13,000 个网站使用了 Meteor。像mtv.com、meteofrance.com等网站利用 Meteor 来构建他们的用户界面。

组件化

组件化有一个很重要的目的是为了提高开发效率。再来看一下使用 React 开发效率高吗?

民间:想加班就用 React

为了说明 React 的开发效率,不妨点开两个链接看一下代码行数。下面两个链接都实现了一个聊天应用,完全一样的功能:

· React 版本:187 行

· Riot 版本:53 行

Meteor 的主要特性:

React的不足之处

纯净、不可变性和解决问题的意识形态

    不要误解,我其实很感激React所带给我们的纯净的函数编码方式和简洁的渲染手法,在实际应用中,这些都算得上好东西。我想说的是其它方面的东西。

    如果你的公司里有千人开发团队,而刚好你决定要为PHP里的静态类型开发自己的语法,又或者你正从Haskell转向JS,那么一定程度的严格和纯净是非常有用的。不过大部分公司不会有那么大规模的开发团队,也不会有Facebook那样的宏大目标。下面我会更详细地解释这一点。

JSX糟糕透了

    我知道,它“不过是具有特殊语法的javascript罢了”。我们的前端设计人员为了做出漂亮的表单,把表单元素放置在div里面,他们根本不关心什么纯净或ES6。设计React组件仍然需要耗费大量的时间,因为JSX的可读性太差。还有一个不好的地方,就是你无法在HTML代码里使用普通的IF语句。React的忠实用户会告诉你说,有了三元运算,就不需要再使用条件判断了。不过我向你们保证,当你再次阅读或编辑这些代码时,你会发现它们仍然是HTML和JS的混合体,尽管它们可以被编译成纯粹的JS。

<ul>

       {items.map(item =>

         <li key={item.id}>{item.name}</li>

       )}

</ul>

    很多开发者认为这种严格的限制可以帮助我们写出更加模块化的代码,因为我们必须把代码块放到工具函数里,并在render()方法里调用,就像这个人建议的那样:

    JSX甚至让我们不得不把15行的HTML代码分成3个组件,每个组件里包含5行代码。

    不要认为这种做法会让你成为更好的开发人员,你只是不得不这么做而已。

而事实其实是这样的:

    如果你正在开发一个相对复杂的组件,而你并不打算明天就把它发布到GitHub上,那么上述的方式只会拖你的后腿,特别是在你要解决真实的业务问题时。不过不要误会,我并不是说拆分成小组件就一定不好。

    你当然清楚通过拆分可以提升代码的可管理性和可重用性。但前提是,只有当业务逻辑实体可以被放到一个单独的组件里时才要这么做,而不是每写一个三元操作代码就要进行拆分!每次在创建新组件时都会让你和你的意识流付出一定的代价,因为你需要从业务思维(在你记住当前组件状态时,需要增加一些HTML代码让它运行起来)转换到“管理思维”——你需要为这个组件创建单独的文件,考虑如何给新组件添加属性,并把它们跟组件状态映射起来,还要考虑如何把回调函数传递进去,等等。

    你被迫使用这种过度且不成熟的组件模块化方式来编写代码,从而降低了编码速度,而从中得到的模块化可能并非你所需要的。在我看来,不成熟的模块化跟不成熟的优化没有什么两样。

    对于我来说,代码的可读性是非常重要的,不过是否能够从编码中获得乐趣也很重要。为了实现一个简单的计算器控件而去创建六个组件,这样的事情一点也不有趣。大多数情况下,这样做也不利于维护、修改或控件检修,因为你要在很多文件和函数间跳来跳去,逐个检查每一个HTML小代码块。再次强调,我并不是在建议使用单体,我只是建议在日常开发当中使用组件来替代微组件。这是常识性问题。

在React里使用表单和Redux会让你忙得停不下来

    还记得吗,React的设计在于它的纯净以及干净的单向数据流。这就是为什么LinkedStateMixin不受待见,你需要为10个输入创建10个函数,而80%这样的函数只包含了一行this.setState()代码,或者一次redux调用(或许你还需要为每个输入创建一个常量)。如果只要在脑子里想想就能自动生成这些代码的话,或许还是可以接受的,但现在还没有哪个IDE可以提供这样的功能。

    为什么要敲这么多的代码呢?因为双向绑定被认为是不安全的,特别是在大型应用里。我可以肯定地说,双向数据流的代码可读性确实不是很好,而Angular 1的双向绑定更是糟糕透顶。不过,这些还算不上大问题。

    Redux看起来更像是啰嗦的代名词。开发人员抱怨Mobx把React变成了Angular,就因为它使用了双向绑定——可以参见之前讲到的第一点。似乎很多聪明人只是让他们的代码看起来更纯净,但是并没有完成更多的事情(不过如果你没有截止期限或许问题不大)。

过度的工具绑定

    React有点乱糟糟的。如果离开了一大堆npm包和ES5编译器,要做出React应用简直是寸步难行。基于React官方基础包开发的一个简单应用在node_modules目录下包含了大约75MB的JS代码。

这不算什么大问题,它更像是JS世界的事情,不过使用React仍然只会增加我们的挫折感。

全栈:Meteor 为开发和部署 Web 应用提供了全栈解决方案。 Meteor 捆绑了几个内置功能,如反应式模板、自动 CSS 等。智能包:为你的应用开发登录系统可能会很麻烦。但 Meteor 不会。 Meteor 软件包可以轻松添加用户帐户,还有 React 之类的 JavaScript 库等。最好方便的是,添加这些类型的智能包很容易,只需在终端中敲几下键盘就可以了。实时网络应用:Meteor 是构建实时程序的完美解决方案。从数据库到模板所有的层都会自动更新。这意味着无需刷新页面即可查看更新。对文档的任何修改都会立即保存。这使得 Meteor 成为实时协作的完美解决方案。单一语言开发:Meteor 允许在前端和后端使用相同的代码,可用于移动和 Web 应用。它可以杜绝安装和配置不同的库、模块管理器、API、驱动程序等。这大大的节省了开发人员的时间,因为他们不需要在服务器语言和 JavaScript 之间执行上下文切换。7. Ember

当前状态

    v15.5.4 April 11, 2017

    Facebook正在以流行的JavaScript框架React为基础开发一个全新的架构。这个名为React Fiber的全新设计改变了检测变更的方法和时机,借此可改进浏览器端和其他渲染设备的响应速度。这一全新架构最初已于2016年7月公开发布,其中蕴含着过去多年来Facebook不断改进的工作成果。该架构可向后兼容,彻底重写了React的协调(Reconciliation)算法。该过程可用于确定出现变更的具体时间,并将变更传递给渲染器。

Ember是一个开源的 JavaScript Web 框架,它允许开发人员通过将最佳实践合并到框架中来构建可伸缩的单页面 Web 应用。 Ember 被评为最佳的 JavaScript 客户端框架,其主要竞争对手是 React 和 AngularJS。目前超过 6000 个网站正在使用 ember。仅举几例:nasa.gov、tutorialspoint.com 等。

最新动态

    2017年5月4日,Facebook开源团队技术作者Joel Marcey在Hacker News社区发布一则《Prepack帮助提高JavaScript代码的效率》,引起了社区的广泛讨论。

    官方宣称Prepack是一个优化JavaScript源代码的工具,实际上它是一个JavaScript的部分求值器(Partial Evaluator),可在编译时执行原本在运行时的计算过程,并通过重写JavaScript代码来提高其执行效率。Prepack用简单的赋值序列来等效替换JavaScript代码包中的全局代码,从而消除了中间计算过程以及对象分配的操作。对于重初始化的代码,Prepack可以有效缓存JavaScript解析的结果,优化效果最佳。

    React 16(正在开发中)是一次革新,但也使用了相同的公开API。对于Facebook所使用的超过30,000个(!)组件,其中只有少量需要改动,并且这少数组件主要被一些已经不再支持或没有正式记录在案的行为所使用。因此可以说完全可以保证99.9%的兼容性。这也让我们确信React 16基本上也可以直接适用于你的代码。

Ember 的一些主要特性:

AngularJS

    在富应用开发中,跟Angular完全没得比,在同等熟练条件下,Angular开发效率=五倍React=三倍backbone=十倍jquery,然而虚拟dom并没有什么乱用,二十一世纪,效率为王,Angular万岁,它代表了前端最先进的生产力,代表了前端先进文化的前进方向,代表了最广大前端的根本利益,然而一切抄袭angular造轮子的技术都将被历史的车轮碾压,粉身碎骨。

Angular很清晰的劣势

- Angular的Dependency Injection很丑,为了minify还要用array写两遍变量名

- Angular的module和es6 module兼容性很不好

- Scope chain只能让人越用越糊涂。Controller as也没改善太多

- Provider, Factory, Service其实是一样的东西

- 目前的最佳实践是页面上所有东西都用Directive,强制组件化(那为啥不直接用React?)

- 侵入性太强,需要学很多Angular特有的语法,track by, transclude, $开头的所有变量,scope, promise. http 都必须使用它提供的

Web开发的未来:在 Babel JavaScript 转换器的帮助下,Ember 允许开发人员使用未来的 JavaScript 标准并将其进行转换为目前浏览器支持的代码。不知道 Babel 是什么? Babel 是一个 JavaScript 转换器,允许开发人员现在使用下一代 JavaScript 代码。另外 Babel 受益于众多插件,并且与 Ember、Rails、Sails 和 Meteor 等框架兼容。Ember cli:Ember 和 Ember-CLI 完全是两个不同的东西,但如果没有另一个则两者都不完整。 Ember-CLI 是一个命令行实用程序,它与 Ember 框架的软件栈一起提供。 Ember-CLI 是一种强大的生产力工具,支持CoffeeScript、Handlebars、LESS 和 Sass 等。Ember 模板:Ember 的模板内置于 Ember 的 UI 中,这些模板使用 Handlebars 模板语言编写。 Handlebars 以其使用双花括号命名,它可以使开发人员写更少的代码。模板在 Ember 中提供了许多功能,例如组件、插口和表达式等。CoC:它的唯一目的是速度和“把事情搞定”的理念,这对于那些总是努力超越竞争对手的初创公司来说是一个巨大的推动力。Ember 有关于其结构的最佳实践,这意味着开发人员可以更专注于实现业务,而不是通过繁琐的代码重新发明轮子。有更多的成果,而不是蓝图。6. NodeJS

动态

    Angular 团队宣布发布 4.0.0 版本,该版本能够向后兼容绝大部分 2.x.x 应用。在 4.0.0 中,带来的主要改变包括应用更小并且速度更快、更新了视图引擎,减少了将近 60% 的生成代码、并且引入了动画库作为预置的核心库的一部分等。更多参考:

 

Angular 2搭配React Native

    Angular 2可以通过Angular Electron运行在桌面上,或者在微软的UWP上在移动设备端,Angular 2提供了一些选择项比如Ionic 2,NativeScript或者React Native。对于最后一个,有个库使得用React Native渲染Angular 2应用变得有可能。开发者可以调用所有React Native提供的API和polyfill来使用iOS和Android的原生功能,然后回调可以按需在Angular Zone中执行

    React和Angular 2有很多共同点,他们在处理应用框架和数据上使用了相似的原理。另一方面,每个功能的实现都使用了不同的方式(组件调用的生命周期还是完全一致的)。这些不同点并不意味着应用开发时的难度,每种方案都提供了足够完善的工具来开发一个大型、严谨、灵活的应用核心。

    当然React更小并且只涵盖view/component的操作–这是我这里要对比的。缺少向html的扩展机制无疑是React唯一不足的地方。

    Angular2则更加稳定、可扩展和更加完善。但是它仍然在beta阶段–并且相对对手具有优势因为无论相比angular1还是React的经历来看它具有更加优秀的合并思想。

Node.js 是一个基于 Google Chrome 的 JavaScript 引擎构建的开源服务器端平台。使用 NodeJS 的网站数量已超过 84,000 个。它是下载量最大的用于执行 JavaScript 代码的跨平台运行时环境之一。

Vue.js

     Vue.js是2016年发展最快的JS框架之一,而且我认为它的崛起并不是因为粉丝的过度追捧,也不是因为某个大公司的权威推动。

Vue.js的优势

    Vue.js在可读性、可维护性和趣味性之间做到了很好的平衡。Vue.js处在React和Angular 1之间,而且如果你有仔细看Vue的指南,就会发现Vue.js从其它框架借鉴了很多设计理念。Vue.js从React那里借鉴了组件化、prop、单向数据流、性能、虚拟渲染,并意识到状态管理的重要性。Vue.js从Angular那里借鉴了模板,并赋予了更好的语法,以及双向数据绑定(在单个组件里)。从我们团队使用Vue.js的情况来看,Vue.js使用起来很简单。它不强制使用某种编译器,所以你完全可以在遗留代码里使用Vue,并对之前乱糟糟的jQuery代码进行改造。

    Vue.js可以很好地与HTML和JS一起协作。你可以开发出非常复杂的模板,而不会影响你对业务的专注,而且这些模板一般都具有很好的可读性。当模板膨胀到很大的时候,说明你在业务实现方面已经取得进展,这个时候你或许想把模板拆分成更小的组件。相比项目启动之初,此时你对应用的整体“映像”会有更好的把握。

    这个跟在React里不太一样:Vue.js帮我节省了很多时间。在React里,在一开始就要把组件拆分成微组件和微函数,否则你会很容易迷失在乱糟糟的代码里。在React里,你需要花很多时间在一次又一次的整理prop和重构微组件(这些组件可能永远都不会被重用)上面,因为如果不这么做,在修改应用逻辑时就看不清方向。

    在Vue里面使用表单是件轻而易举的事情。这个时候双向绑定就会派上用场。就算是在复杂的场景里也不会出现问题,不过watcher乍一看会让人想起Angular 1。在你拆分组件的时候,会经常用到单向数据流和回调传递。

    如果你需要用到编译器的一些特性、lint、PostCSS和ES6,你会如愿以偿。在Vue.js 2里,Vue的扩展特性将会成为开发公共组件的默认方式。顺便提一下,开箱即用的组件CSS看起来是个好东西,它们可以减少对CSS层级命名和BEM的依赖。

    Vue.js的核心具有简单有效的状态和prop管理机制,它的data()和props()方法在实际当中可以有效地工作。通过Vuex可以实现更好的关注点分离(它跟React里的Mobx有点类似,都包含了部分可变状态)。

    大部分Vue.js场景都不需要Vuex提供的状态管理,不过多一个选择总不是坏事。

Vue.js的不足

  1. 最大的一个问题:模板的运行时错误描述不够直观,这个跟Angular 1有点类似。Vue.js为JS代码提供了很多有用的警告信息,例如当你试图改变prop或不恰当地使用data()方法时,它会给出警告。这也是从React借鉴过来的比较好的方面。但对模板的运行时错误处理仍然是Vue的一个弱项,它的异常堆栈信息总是指向Vue.js的内部方法,不够直观。

  2. 这个框架还很年轻,还没有稳定的社区组件。大部分组件是为Vue.js 1创建的,对于新手来说有时候难以区分它们的版本。不过你可以在不使用其它第三方库的前提下在Vue里面完成很多事情,你可能需要一些ajax库(如果你不关心同构应用,可以考虑vue-resource)或者vue-router,这在一定程度上平衡了Vue在组件方面存在的不足。

3. 社区软件包里的代码有很多中文注释,这一点也不奇怪,因为Vue.js在中国很流行(它的作者就是个中国人)。

4. Vue.js是由一个人维护的项目,这个也算不上大问题,不过还是要考虑其它一些因素。尤雨溪是Vue的作者,他曾经在Google和Meteor工作,在那之后他创建了Vue。Laravel也曾经是一个单人项目,不过后来也很成功,但谁知道呢……

Node.js 的主要特性:

比较

5 BEST JAVASCRIPT FRAMEWORKS IN 2017


React vs Angular 2: Comparison Guide for Beginners

Vue.js官方与其它框架的比较

· React: React与Angular & Ember的不同之处在于其有限的应用范围和空间占用。Angular & Ember的定位是框架,而React主要是作为应用程序“视图”。React不包含依赖注入或“服务”支持,不需要“jq-lite”,也不依赖于jQuery。开发人员可以直接使用JSX编写标记,而无需Ember Handlebars。React会维护一个“虚拟DOM”,并通过它更新真正的DOM,避免了不必要的重排与重绘。总之,他非常喜欢React这种用途相对专一的特性。而且,React让他可以将复杂的应用程序切分成更小的组件。

· Falcor:这是一个由Netflix开源的、非常新的库。不同于传统REST API,它只提供唯一的一个端点。有了它,开发者不再需要向不同的服务器端点请求不同的数据,而是向同一个端点请求不同的模型数据。服务器端可以识别请求参数,并由Falcor Router调用恰当的router函数。也就是说,Falcor提供了一个更加直观的API,就是开发者的数据模型。这可以确保服务器永远不会返回不必要的模型数据,节省了带宽。Falcor客户端还可以使用缓存数据为连续的请求提供服务,减少服务器响应时间。要了解更多关于Falcor的信息,可以查看Jafar Husain的视频。

· Webpack:作为一个模块绑定器,webpack可以为React组件模块化提供进一步的支持。它使开发者可以轻松压缩和连接CSS及JavaScript,并通过生成source map大大地简化调试工作。配置完成后,webpack会监控代码,每次代码发生变化,它就会生成新的bundles。客户端无需再导入大量的CSS或JS文件,而只需要导入bundles,减少了页面加载时的HTTP请求数。此外,webpack还提供了大量的插件,例如,使用jsx-loader可以将JSX转换成JavaScript,使用babel-loader可以将ES6代码转换成兼容ES5的代码。

· ES6: ECMAScript 2016,是JavaScript的最新规范,定义了若干重要的新特性,比如胖箭头函数、类、字符串插值、块作用域等。更多信息,请查看Mozilla Developer Network上的ECMAScript 6参考指南。

非阻塞:Node.js 库的所有API都是异步的,即非阻塞的。这意味着基于 Node.js 的服务器永远不会等待 API 返回数据。服务器在调用它之后移动到下一个 API,并且事件的通知机制帮助服务器从先前的 API 调用获得响应。单线程:Node.js 使用带有事件循环的单线程模型。事件机制可帮助服务器以非阻塞方式响应,从而使服务器具有高度可伸缩性,而传统服务器则创建有限的线程来处理请求。与 Apache HTTP Server 等传统服务器相比,Node.js 使用的单线程程序可以为更多的请求提供服务。快速:NodeJS 建立在Google Chrome 的 V8 引擎之上。 Google 的 V8 引擎确保 Node.js 库以极快的速度执行其代码。数据流:NodeJS 程序从不缓冲任何数据,它们只是以数据块的形式输出数据。这样 NodeJS 可以提供​​更快的服务。5. BackboneJS

WEB开发不应该这么复杂

系统的设计团队受其生产系统的约束,而生产系统又是根据设计团队的沟通结构决定的。

----康威定律

康威定律说,软件产品的结构就是其创造团队的组织结构的镜像。

    我们正在使用的客户端渲染框架,来自于 Google 和 Facebook ,这两家公司有数千开发者,这些开发者隶属于数十个团队,组织结构就像这样 :

图片 2

    你的团队面临的问题,很可能跟 Google 和 Facebook 所面临的不一样。使用那些客户端框架时,我们是为了追逐性能,我们做的每个决定都是对的,但是放在一起看看结果,我们获得了微小的性能提升,却在工程方面花费了惨重的代价。如果继续深入这条路,这条路就会变得越窄。

BackboneJS 是一个轻量级 JavaScript 库,用来开发和构建在 Web 浏览器中运行的客户端应用。与其他框架不同,Backbone 让开发人员负责选择最适合当前项目的工具。目前,超过50万个网站正在使用 Backbone,其中包括tumblr.com、espn.com、soundcloud.com等等。

开发WebSite

    要说现在用React做网站设置繁琐吗?当然繁琐,要设置eslint,babel,webpack,用boilerplate最终还是要了解各个不同的东西是干嘛的,不过把这些归罪React也不是太恰当,毕竟是整个前端生态圈都进化了。用Angular 2或者Ember你还是得用到这些。React的繁琐基本都在redux上,得creatStore还得加入middleware还得用connect()连接到store,而带来的高阶组建的概念不好懂也不容易用。
     React有它自己的缺点,毕竟我们上哪找完美的东西呢?Boilerplate过多,setState是异步的,context api很坑爹,server side render各种坑(设置hmr,哪些call在服务器做,哪些只能在浏览器运行等等),animation到现在都没什么太好的方案。

    不过React值得用吗?当然值得,它给你组件化页面,入门函数式,清晰的单向数据流(dispatch(action)->reducer->render),深入了还有高阶组件的compensability,能发现selector和reducer其实也是compostable的,顺带着各个工具的使用(eslint, babel, webpack),不小心还能入Elm和Clojurescript的坑。
还有一个经常被提起的好处是React redux做的网站,重构非常方便,在需求永远不固定的世界里也是一大优势。

关于React的问题,有几点要说:
1、React确实存在组件嵌套的性能问题,但是可以通过Redux去解耦以达到目的
2、对于引入immutable / reselect 对于大部分并不是必需品,组件粒度越细,state使用得越少,需要引入shouldComponentUpdate的情况越少,其实在项目中真正有用到它们的有多少呢?
3、React的中大型项目上的应用并不是太大的问题,国内有Ant.design已经在大量的蚂蚁金融平台和或各类内部平台上使用,尽管Vue也有,但只是实验版本,也并没有再去升级。 在国外:faceBook算大型应用吗?它本身已经就应用了React 16 Alpha 版本,以身试坑,这样算得上 React 在大型应用上有问题吗?
4、React是有门槛的,确实没有Mv**那么快让人容易接受,需要有一定的JS基础和开发经验。

Backbone 的主要特性:

前后端分离

我们不适合 前后端分离, 为什么?因为

1. 又增加了一个中间层(当然程序员通过增加中间层来解决问题),好处是有,职责明确;但是也有坏处:人为地拉长了战线。对比图一和图三你就会发现,结构变复杂了,一个人能做的事情变成需要两个人做了。

  1. 并没有实质变化。以前的后端结构也是存在调用 Service 逻辑的,现在只不过换成让前端用 Node.js 做。除了把本来就吃紧的前端人力耗费在他不擅长的领域,我没看到什么提升。这里唯一的好处就是前端是势力范围扩大了。

    认同的是「全栈工程师」。一个业务的前后为什么要分给两个人写?以表单提交为例,后端要对数据做校验,前端也要做。为什么要让两个人都写一次?前端说可以让后端也写 Node.js ,这样就可以服用代码了呀。后端写了三年的 Java 你现在告诉他要全部重来?后端肯定不愿意啊。矛盾就出在,分『后端』和『前端』两个职位上。大公司细分后端和前端,也是可以理解的。

    说前后端分离的缺点:

1. 大部分站点,不应该分前后端。除非你的前端,非常非常非常复杂。但是大部分站点的前端,根本没有那么复杂!
2. 分了前后端很容易出现各自为政的情况。推诿、邀功、互相鄙视,不一一列举了。
3. 有人问一个人怎么又学后端又学前端?我的建议是把前端做薄,如果没有必要,不要搞什么 Angular 、 React 。用原生 JS 或者 jQuery 能满足大部分网站。同时后端向 Rails 学习。局部交互复杂的地方,采用动态加载来做交互。

  1. 有人说你是前端的叛徒,你这么做前端还有什么前途。

其实真正主题是:前后端分离是前端不得志的必然结局。

难道前后端分离没有好处吗?
只有一个好处:好招聘。毕竟你要招一个优秀的全栈工程师是极其困难的。

思路

1. 保持前端简单,复杂了就用原生的方式封装,具体来说就是用自定义标签来封装复杂组件。这样一来,后端同事还是可以开发页面,因为只是多了一个自定义标签而已,本质还是 HTML

  1. 尽量不要在开发状态加 watcher ,目的也是让后端可以直接上手,不需要了解那么多工具。转译放到 Web 框架的开发者模式里面做,看到 less 请求加转义成 CSS 不是什么难事也不复杂。
  2. 前端只是辅助(这里说的是大多是网站,不包括重型 Web 应用),前端要做好服务化:健全的文档、友好的接口。
  3. 前端也要学后端知识,别在那自嗨。
  4. 小公司别搞前后端分离,徒增复杂度!

分离的业务和UI逻辑:Backbone 可以帮助你把自己的业务逻辑与用户界面分开,这是非常重要的一点。当两者纠缠在一起时,修改将会变得很难。当逻辑不依赖于 UI 时,你的界面会变得更加易用。事件驱动的通信:当项目不断增长时,jQuery 声明和回调将变得更加复杂,代码变得更加混乱。 Backbone.js 通过在视图和模型之间提供事件驱动的通信来克服这个问题。更少的代码:约定是引入通用编码风格的好方法,而无需提供大量的编码标准。你遵守的 backbone 约定越多,编写代码的次数就越少,反过来代码也会变得更加标准化,并具有可读性。与后端同步:由于其对 RESTful API 的出色支持,BackboneJS 中的模型可以轻松地与后端绑定。如果 API 设计正确,则 backbone 可以直接通过访问这些操作来进行读取、写入和删除操作。4. jQuery

单元测试

前后端分离后,意味着更多的业务逻辑将融入到前端程序中, 对应的我们需要前端工程师需要完成对应业务逻辑的单元测试, 以确保前端质量不会逐渐沦陷.

  • 基于 JavaScript 的单元测试被证明是一种高效的测试方法,其中 71% 的组织执行了 JavaScript 单元测试,而 84% 的组织则相信它是有益的!
  • Jasmine 和 Mocha 是最流行的 JavaScript 单元测试框架,Jasmine 主要配合 AngularJS 进行单元测试,而 Mocha 则与 ReactJS 配合使用。

目前前端自动化单元测试社区情况:

Jasmine & Protractor (72.4%),

Jasmine & Karma (67.7%),

Jasmine & Jest (58.3%),

Karma & Protractor (58.6%).

Jquery 是最古老的 JS 框架之一。这个框架已经存在了 13 年之久,而且它仍然很强大。那么什么是 jQuery?

服务端

组件化是我们基础设施之一, 服务端(.net, java)也想做更多通用组件.但往往项目或产品研发周期紧, 在一些组织没有足够时间研发通用组件.

jQuery 是一个快速而简洁的 JavaScript 库,由 John Resig 在2006年创建,它有一个很好宗旨:写得少,做得多。它是一个跨浏览器的 JavaScript 库,旨在简化 HTML 的客户端脚本。目前有超过 1900 万个网站正在使用jQuery!WordPress、Facebook、Google、IBM 和其他许多公司都依赖 jQuery 提供独一无二的网络浏览体验。

权衡

我们更多的时候,更应该思考的是平衡和最优组合:

什么情况下应该后台渲染,什么情况下应该前台渲染。
什么情况下应该用html+css控制页面,什么情况下应该用js控制页面。

    React.js里所谓的“页面组件”,并不是指一个checkbox,或一个input这样细粒度的组件,可以理解为对一个“功能单一的一个页面区域”的封装,粒度更大。虽然checkbox等也需要封装住成组件,但那是粒度更细Controls,和React.js的组件概念不是一个级别。 单纯使用react而不搭配其他类库是作死 真的还不如用jquery。

    工程化的需求也比前些年提高的无数倍,去年我用grunt,后来用gulp,然后browserify来了,2016年用webpack,babel,工具的更换意味着开发体验也是越来越好。另外JSX不是HTML,JSX不是HTML,JSX不是HTML。

    React满足上面的一些方面,不满足另一些方面,和其他工具一样。你需要React,是因为两点

    第一, 你充分评估了你的项目,理解你要解决的问题是什么,是快速开发,性能,团队的ergonomics,多数情况下要解决的问题是多个要素的平衡

    第二, 你充分评估了React这个栈,理解它是解决你的具体问题的最佳工具,你真的理解了自己的场景中非用React不可的那些事情
   只是一个营销类的推广页面,仅仅只有轮播、几个文本框的表单的极浅交互,我还是推荐大伙使用原生 / zepto / jQuery之流。假如您很在意体积,计较网络环境(2G/3G)等,可以使用服务器端渲染或者无阻塞UI(即添加占位符),使用带有GZIP的CDN,React各类库绝对能够在100K以内,假如超过,建议您使用按需加载。我相信您的服务器应该会添加有304/ETAG之类的缓存。

    对于中大型项目,React确实是优良之选,当然也可以尝试Vue去迭代中小型项目。flux/reflux/redux 不仅仅只能用在React,也能用在Vue/Angular等等框架,仅仅只是一个数据流思想,您选择性地使用。

    对于大型项目,推荐 Webpack 来构建业务代码, Rollup 来打包你的小轮子。使用Rx优化你的数据流。Typescript强健你的代码,提升你的开发效率(头一周可能会有些痛苦)。但在此之后的收益是非常高的。 对于中小型项目,推荐React/Redux/React-Router来构建你的代码

jQuery的主要特性:

总结

   因为没有完美的框架,只有适合的应用场景,选择我们自己更适合的。
      框架都只是为了开发效率良好地组织项目代码,并不完全是为性能而生。 注意IT时代在变, 任何技术都会演进, 凡是存在的, 都是合理的。
       服务端研发工程师也少有全栈工程师。React.js适合长期, 用户体验高的交互多的项目或信息系统产品。


今天先到这儿, 希望对您在团队管理, 项目管理, 产品管理, 系统架构 有参考作用 , 您可能感兴趣的文章:
前端工程师技能整理
精益IT组织与分享式领导
企业信息化与软件工程的迷思
企业项目化管理介绍
软件项目成功之要素
人际沟通风格介绍一
精益IT组织与分享式领导
学习型组织与企业
企业创新文化与等级观念
组织目标与个人目标
初创公司人才招聘与管理
人才公司环境与企业文化
企业文化、团队文化与知识共享
高效能的团队建设
项目管理沟通计划
构建高效的研发与自动化运维
某大型电商云平台实践
互联网数据库架构设计思路
IT基础架构规划方案一(网络系统规划)
餐饮行业解决方案之客户分析流程
餐饮行业解决方案之采购战略制定与实施流程
餐饮行业解决方案之业务设计流程
供应链需求调研CheckList
企业应用之性能实时度量系统演变

如有想了解更多软件设计与架构, 系统IT,企业信息化, 团队管理 资讯,请关注我的微信订阅号:

图片 3

作者:Petter Liu
出处:
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
该文章也同时发布在我的独立博客中-Petter Liu Blog。

DOM操作:它使对 DOM 的操作变得非常容易,使开发人员可以通过易于学习的API充分利用他们的创造力来创建令人惊叹的东西。大型社区:其贡献者的社区比任何其他 JavaScript 库更加庞大和多样化。它有广泛而全面的文档支持,不要忘记,它会不断得到维护,并且会越来越强大。AJAX支持:简而言之,AJAX是关于在后台加载数据并将其显示在网页上,而无需重新加载整个页面的技术。 jQuery 为 AJAX 功能提供了好几种方法。通过 jQuery AJAX,你可以用 HTTP Get 和 HTTP Post 从远程服务器请求文本、HTML、XML或JSON。跨浏览器支持:jQuery 具有跨浏览器支持特性,适用于 IE 6.0 +,FF 2.0 +,Safari 3.0 +,Chrome 和 Opera 9.0+等。3. Vue

Vue是一个用于构建 UI 的开源 JavaScript 框架。由于它的设计具有适应性,Vue 简化了与其他 JavaScript 库的项目集成。目前超过 36,000 个网站正在使用 Vue。像 stackoverflow、playstation 等公司依赖 Vue 开发他们的网站界面。

VueJS的主要特性:

模板:Vue.js 提供基于 HTML 的模板,将 DOM 与 Vue.js 实例数据绑定。 Vue.js 将模板编译为虚拟 DOM 渲染函数。 Web 开发人员可以使用渲染函数的模板,并可以使用渲染函数替换模板。体积小:JavaScript 框架的成功取决于它的大小。个头越小用的人越多。 Vue.js 最大的优势之一是体积小。该框架的大小为 18-21 KB。适应性:Vue 允许用户用虚拟节点把模版写在 HTML 文件、JavaScript 文件和纯 JavaScript 文件中。这种灵活性还容易让使用 React.js,Angular.js 和任何其他新 JavaScript 框架的开发人员理解。它基于 JavaScript 框架,可以集成到基于 JavaScript 构建的其他程序中。详细的文档:开发人员总是喜欢使用带有详细文档的框架,因为他们总是很容易编写自己的第一个应用程序。Vue.js 的文档非常全面,任何对 JavaScript 和 HTML 有所了解的用户都可以用它开发自己的应用或网页。2. ReactJS

React 是 Facebook 维护的另一个 JavaScript 库,用于构建交互式和复杂的 UI。它是最热门的框架之一,有超过 3 万个网站使用 React 实现 UI。举几个网站:Microsoft.com、yahoo.com 等。

ReactJS 的主要特性:

Virtual DOM:在React中,对于每个 DOM 对象,都有一个对应的“虚拟 DOM 对象”。虚拟 DOM 对象创建原始 DOM 的虚拟副本。这是一种单向数据绑定,由于修改时不需要实时向屏幕渲染,因此操作虚拟 DOM 比更新原始 DOM 快很多。JSX:React 使用了 JSX,这是一个使用 HTML 引用的简单 JavaScript,而不是用于模板的 JavaScript。你也可以使用 HTML 语法来渲染子组件,或使用老式的 JavaScript 编写,这意味着无论采用哪种方式,你都可以灵活地进行编码。单向数据流:React.js 的设计方式使其只支持在一个流程中向下游传递的数据。如果数据必须向另一个方向流动,则需要其他功能支持。组件:在React中,所有内容都被视为组件,因此你可以轻松导入 React 支持的组件,而不是编码或构建整个功能,你可以方便的导入并使用它。1. AngularJS

Angular 是最强大、最高效、最开源的 JavaScript 框架之一。在这个列表中不可能不提及 Angular。该框架由Google 运营,用于开发单页应用。这个开发框架之所以出名,主要是因为它为开发人员提供了将JavaScript 与 HTML 和 CSS 结合起来的最佳条件。有超过五十万个网站如 google.com、youtube.com 等正在使用 Angular。

Angular 的主要特性:

MVC 架构:AngularJS 最重要的特性之一是 MVC 架构。 MVC 架构分为三个元素,即模型、视图和控制器。

Model:它是 MVC 架构的最低层级,用来存储数据。View:负责向用户展示你的所有数据。控制器:它基本上是用来控制模型与视图之间整个交互的代码。双向绑定:这是一个令人惊叹的功能,它将 AngularJS 与其他 JavaScript 框架区分开来。 Angular Data-Binding 在模型和视图之间建立链接。在双向数据绑定过程中,视图会显示在模型中所做的更改,反过来模型反映了在视图中所做的更改。单页应用:使用 AngularJS 框架,你可以构建完全响应式的单页应用,可以轻松完美地适应不同的屏幕尺寸。与其他网络应用相比,它还能改善用户体验。由于基于 AngularJS 的单页应用是在客户端渲染的,因此它们通过减少 Web 服务器上压力来减少网络流量。HTML UI:AngularJS 的另一个重要特性是它使用 HTML 语言来构建用户界面。 HTML 语言是一种常见的声明性语言,标签很短,易于理解。这导致了更简单、更有条理的UI。 JavaScript 接口通常更难以开发和组织。如果你正在寻找一种快速,简单且易于使用的解决方案,那么应该就是它了。

下一篇:没有了

更多新闻推荐

Copyright © 2015-2019 http://www.77zhth.net. 美高梅官方网站66159有限公司 版权所有