技术选型与前端流行框架大比拼
发布于 9 年前 作者 i5ting 9777 次浏览 最后一次编辑是 8 年前 来自 分享

技术选型与前端流行框架大比拼

技术选型

这是一个语言之争一样的话题

有人提fibjs，说性能如何如何，但我并不看好，原因很简单，一门语言或者框架，好或者不好，不只是框架本身和作者的魅力，更多的是社区，或者说是生态

我们就以js来讲，著名的jQuery的插件机制，才是jq最好的地方，什么这个ui那个ui的，大部分都是构建这些插件机制之上的。

比如nodejs的包管理器，npm，它的出现解决了包管理依赖问题，于是n多人写了m个包，于是nodejs就火了，各种社区，比如cnodejs.org等。fibjs即使再nb，也无法和node来比较的。这是绝对性的优势

这东西有多重要？

如果各位熟悉go，其实go最大的诟病就是缺少npm一样的包管理器，因为go get实在是太恶心了

如果有npm一样的go的包管理器，我也会像tj一样转向go的

但要辩证的看待这个问题，实际上go的并发非常稳定，非常强大，虽然美中不足，还是有很多人用的，并且长期看好。就好比当年的cocoapod，最开始的时候我真的觉得这货就一个ruby写玩具，各种问题，但随着ios开发的火爆以及各种生态的完善，pod竟然成了ios开发里的必备技能，虽然有无数坑，可是“痛，并快乐着”

人生就是这么贱，那大家就都这么贱贱的玩下去吧，哈哈，回到正题，看一下技术选项和我们现在比较流行的框架做一个比拼

前端流行框架大比拼

  • angular
  • vue
  • react
  • ant-design

angularjs

angular是个MVVM的框架。针对的是MVVM这整个事。angular的最主要的场景就是单页应用，或是有大量数据绑定的情况。

特性

  • 双向数据绑定
  • ioc依赖注入
  • 指令

上面这几点用起来确实很爽，随便指定个区域，配一个controller，然后里面的东西就都在scrope里了，确实很方便

如果各位想看，参加 https://github.com/i5ting/ionic_ninja/blob/master/angularjs/angularjs_sang.md

其实angular最好的实践是ionicframework的，读读ionic源码，才知道啥叫规范

vue

vue是尤同学写的一个MVVM中ViewModel中的库。是针对MVVM中的一层。应用的场景比较广，只想用vue功能的话就用。

  • Extendable Data bindings
  • Plain JS object models
  • API that simply makes sense
  • Build UI by composing components
  • Mix & matching small libraries

这个项目是非常活跃的，90后同学的精力很旺盛啊。

从最初的ViewModel做到今天的各种功能，做加法还真是挺可怕的事儿。

它的guide上说可以做Building Larger Apps，见http://vuejs.org/guide/application.html

各种路由，组件啥的都有，的确很强大

但是很多人都搞不定的，首先这么多概念就玩死一票人了，其次，它有太多东西需要自己去实现，就是可以复用的东西太少了，如果是小项目玩玩无所谓，如果是大的项目，水平一般的程序员是很难hold住的。

这就好比react出来，很好，但没有啥可复用的东西，写来是非常痛苦，所以在下面我介绍了react之后，给出了一个更好的基于react的解决方案。

reactjs

https://github.com/facebook/react

Virtual DOM

Virtual DOM是reactjs的最核心概念，我拷贝一段来说明它

在Web开发中，我们总需要将变化的数据实时反应到UI上，这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因（如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标）。React为此引入了虚拟DOM（Virtual DOM）的机制：在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并，例如你连续的先将节点内容从A变成B，然后又从B变成A，React会认为UI不发生任何变化，而如果通过手动控制，这种逻辑通常是极其复杂的。尽管每一次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操作的仅仅是Diff部分，因而能达到提高性能的目的。这样，在保证性能的同时，开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素，而只需要关心在任意一个数据状态下，整个界面是如何Render的。

说那么多你可能都没明白，上例子

helloworld

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

React.render(
  <HelloMessage name="John" />,
  document.getElementById('container')
);

首先，这是一种 HTML-like 的语法，叫jsx，可以理解成coffee，typescript之类的，需要编译

核心就是React.render，说明这个组件放在什么地方，比如上面的例子就是

<div id='container'>
  ...
</div>

这样页面就可以拆分成n个小块，每块各自为政，即所谓的组件化（也就积木一样）

再来个复杂点的，下面给出的是带有状态的组件

var Input = React.createClass({
  getInitialState: function() {
    return {value: 'Hello!'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function () {
    var value = this.state.value;
    return (
      <div>
        <input type="text" value={value} onChange={this.handleChange} />
        <p>{value}</p>
      </div>
    );
  }
});

React.render(<Input/>, document.body);

视图相关的3个概念

  • Props（属性，就是element上的attrs，换个名字property，变成复数，即props）
  • State（写过view组件的基本都会知道，按钮有三态，Normal，Highlight，Selected，包括extjs，jquery里的大部分ui框架都是有状态的。）
  • Event（其实还应该算一个就是dom事件，上面的例子就把onChange的handler编译后的handleChange方法，这要感谢jsx）

了解了上面这些，就可以写代码了，因为

  • 属性，解决了view的定义问题，即语义描述
  • 状态，是view的有穷状态机，根据状态决定ui和行为
  • 事件，是view里元素的行为

单独的view的话，实际上上面的东西已经足够了，但是往往我们用的时候是view和viewController一起用的。

但reactjs里并没有却分这个，也就是说view和controller都在组件里，比如ios的但是往往我们用的时候是view和viewController里就有很多生命周期方法，这些在reackjs里也被实现了

组件的生命周期

组件的生命周期，另外的名字是状态回调，和上面讲的状态的唯一差别，上面的状态是它里面的元素，而组件的生命周期是它自己

组件的生命周期分成三个状态：

  • Mounting：已插入真实 DOM
  • Updating：正在被重新渲染
  • Unmounting：已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

  • componentWillMount()
  • componentDidMount()
  • componentWillUpdate(object nextProps, object nextState)
  • componentDidUpdate(object prevProps, object prevState)
  • componentWillUnmount()

此外，React 还提供两种特殊状态的处理函数。

  • componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
  • shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

FAQ

1）很多人最常问的问题：比如和jQuery集成可以吗？

reactjs很小，并没有jq提供的功能，可以说它们是互补的，可以结合着使用

2）react比angular好用吗？

reactjs是组件化的最佳实践，但angularjs的mvvm等好用功能，它是没有的，所以更好用说不上，姑且可以认为各有千秋吧

总结

总结一下，关于reactjs，我没有讲virtual dom，而是主要讲了4个概念

  • 属性
  • 状态
  • 事件
  • 生命周期

如果你掌握了这4点，实际上就已经可以很好的使用reactjs了，比如一般view是要和ajax放到一起用的，这时候，只要在组件的生命周期里处理即可，实际上也还是上面的东西，此处就不罗嗦了。

todo（reactjs高级篇）

  • 加点 路由和 数据单向流的 东西吧
  • 或者 是服务器端渲染的 数据请求逻辑 什么的
  • 如果能用redux 和express做个例子 那就更好了

ant-design

https://github.com/ant-design

特性

  • 提炼自企业级后台产品的交互语言和视觉风格。
  • 丰富实用的 React UI 组件。
  • 基于 React 的组件化开发模式。
  • 背靠 npm 生态圈。
  • 基于 webpack 的调试构建方案，支持 ES6。

我们来换一种说法

  • 基于react组件化
  • 代码在npm里，做到模块化
  • 通过webpack构建，更灵活

至于说es几，那只是噱头而已

通过npm，可以更好的和nodejs结合，利用node的生态来扩展，其实bower等也类似，但对package.json不友好，所以我是很看好这种方式的。

以后js大一统，npm就不在只是nodejs package manager的，而是js package manager

另外它的界面设计的很好，模块化的做的也很好，我非常喜欢，唯一的缺点是它对nodejs的版本要求太高了，会让一小部分人不适应的。

全栈之路

  • js是首选
  • rails也不错
  • 其他，要折腾很久

总结

大家可能都有的疑问，这么技术非常好，我的项目要不要上呢？

先从项目维度看

  • 小项目，无所谓，可以尝鲜，填坑和重写一样简单
  • 大项目，伤不起啊，如果不成熟或者无良好生态，当慎重，经得起诱惑

从人的维度看

  • 牛人，无所谓，反正时间和能力都能挤出来，能学到很多东西，但也也要打进去很多夜晚
  • 其他人，量力而行

我不会在公司项目里使用vue，但我赞成evan的做法，虽然不提倡造轮子，但问题反过来看，它又何尝不是一个技术人的热爱呢？

生命不息，折腾又怎会停止,前端或者说js领域的变化越来越快，大家准备好迎接可能是机遇也可能是灾难的明天吧，加油！

全文完

欢迎关注我的公众号【node全栈】

node全栈.png

7 回复

Ant-design 拿出来跟其他比, 也是醉了~

@magicdawn vue也不配和angular比呀。哈哈，ant做为react的实践，是不错的

以后js大一统，npm就不在只是nodejs package manager的，而是js package manager

赞同

ant-design 不能算框架，只能算是react的一个ui组件库吧。 vue很简洁，轻量，但是问题和fibjs的问题是一样的，小团队/个人维护，生态圈小。

@Lobos 是的

mark

你这不是大比拼吧，全篇其实就着重讲了 React -。 -

倒像是软文。

回到顶部