β

Nerv – 京东高性能前端框架

JDC | 京东设计中心 411 阅读

Nerv是一款由京东凹凸实验室打造的类React前端框架。目前已广泛运用在 京东商城 (JD.COM)核心业务及 TOPLIFE 全站。 Nerv 基于React标准,使用 Virtual Dom 技术,拥有和 React 一致的 API 与生命周期,如果你已经对 React 使用非常熟悉,那么使用 Nerv 开发对你来说绝对是零学习成本。

与此同时,相比于 React 以及市面其他同类型框架,Nerv 更具体积轻量,性能高效的特点。并且,它符合当下国情,可以完美兼容 IE8 及以上浏览器。

特性

性能

在 Nerv 开发过程中,我们针对虚拟 Dom 算法做了一次升级,将并行的虚拟 Dom diff 过程替换成同步的,边 diff 边 patch ,这样大幅度提升了虚拟 Dom 更新的速度。同时我们还对diff算法进行了探索升级,参照目前市面上最快的虚拟 Dom 算法对我们的代码进行了改造。

经过重构升级后,我们的框架性能大幅提升,如下可见。

image

更多性能数据详见 官网

项目背景

是的,我们又造了一个轮子,也是一次抛离传统开发模式的技术革新。同行们或许有疑问,目前市面上已经有非常多的同类型技术框架,为什么我们还要不厌其烦地打造一个呢?这当然不是在做无用功。

日常开发中,相对于 Vue ,我们更倾向于选择 React 模式作为我们的开发标准,因为 React 天生组件化且函数式编程的方式,更加灵活且便于维护。
然而,React 仍然有一些不能满足我们需求的地方:

而我们的新轮子 —— Nerv,它完全能提供上述 React 的所有优点,并且它也能完全满足我们自己的需求:更好的兼容性、更小的体积、更高的性能。

安装

推荐使用 npm 的方式进行开发,享受 Node 生态圈和 Webpack 工具链带来的便利。

npm install nervjs --save

简单示例

下面是一个计时器的例子。

import Nerv from 'nervjs'

class Counter extends Nerv.Component {
setTime = () => {
const date = new Date()
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDay()
const hour = date.getHours()
const minute = date.getMinutes()
const sec = date.getSeconds()
this.setState({
year,
month,
day,
hour,
minute,
sec
})
}

componentWillMount () {
this.setTime()
}

componentWillUnmount () {
clearInterval(this.interval)
}

componentDidMount () {
this.interval = setInterval(this.setTime, 1000)
}

componentWillReceiveProps () {
this.setTime()
}

render () {
const { year, month, day, hour, minute, sec } = this.state
return (
<div className='counter'>
<span>The time is</span>{year}-{month}-{day} {hour}:{minute}:{sec}
</div>
)
}
}

export default Counter

更多详细例子可阅读文档 NervJs 了解。

写在最后

秉承万维网的开放精神,以及开源世界的信条,我们接受各种评价和讨论,最终目标是为开源世界贡献我们的一份力,感恩!
欢迎各位同行使用 Nerv ,如果你在使用过程中遇到问题,或者有好的建议,欢迎给我们提 Issue 或者 Pull Request

结尾小彩蛋>> 一个视频带你看懂Nerv

作者:JDC | 京东设计中心
京东设计中心
原文地址:Nerv – 京东高性能前端框架, 感谢原作者分享。

发表评论