Nerv - 京東高性能前端框架
Nerv 是一款由京東凹凸實驗室打造的類 React 前端框架。目前已廣泛運用在 京東商城 （JD.COM）核心業務及 TOPLIFE 全站。Nerv 基于React標準，使用 Virtual Dom 技術，擁有和 React 一致的 API 與生命周期，如果你已經對 React 使用非常熟悉，那么使用 Nerv 開發對你來說絕對是零學習成本。
與此同時，相比于 React 以及市面其他同類型框架，Nerv 更具體積輕量，性能高效的特點。并且，它符合當下國情，可以完美兼容 IE8 及以上瀏覽器。
特性
-
更小的體積：
Gzip 后僅有9k，不到 React 三分之一的體積，低性能設備也能高速地加載并解析執行。
-
更高的性能：
高效、同步的 diff 算法和諸多優化策略使得 Nerv 成為性能最高的前端框架之一。
-
完備的生態：
無需 nerv-compat，只需要在稍稍設置就能享受整個 React 生態的共同成果。
-
更一致的渲染：
不僅在瀏覽器上能高效地渲染，在服務器上 Nerv 同樣能高效地運行。
-
更優的兼容：
和大多數現代框架不同，Nerv 將繼續保持對 IE8 的兼容。
-
更具說服力的案例：
不管是京東首頁的高流量，還是 Toplife 的復雜業務，Nerv 都經受住了來自于真實業務的考驗。
性能
在 Nerv 開發過程中，我們針對虛擬 Dom 算法做了一次升級，將并行的虛擬 Dom diff 過程替換成同步的，邊 diff 邊 patch ，這樣大幅度提升了虛擬 Dom 更新的速度。同時我們還對diff算法進行了探索升級，參照目前市面上最快的虛擬 Dom 算法對我們的代碼進行了改造。
經過重構升級后，我們的框架性能大幅提升，如下可見。
更多性能數據詳見官網。
項目背景
是的，我們又造了一個輪子，也是一次拋離傳統開發模式的技術革新。同行們或許有疑問，目前市面上已經有非常多的同類型技術框架，為什么我們還要不厭其煩地打造一個呢？這當然不是在做無用功。
日常開發中，相對于 Vue ，我們更傾向于選擇 React 模式作為我們的開發標準，因為 React 天生組件化且函數式編程的方式，更加靈活且便于維護。
然而，React 仍然有一些不能滿足我們需求的地方：
- IE8 瀏覽器兼容性：當前環境所限，即便很不情愿，我們仍然要支持 IE8。
- 體積：React 大概 130kb 的體積。在低網速 / 低版本瀏覽器 / 低配置設備的加載速度和解析速度都不能讓我們滿意。
- 性能：React 的 Virtual Dom 算法（React 自己叫 Reconciler）并沒有做太多的優化。
而我們的新輪子 —— 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 了解。
來自：https://aotu.io/notes/2018/03/22/nerv/