新世纪Nerv战士 – 京东首页补完计划

回想17年的京东首页改版,从上线到现在竟然已经过去了四个多月。这四个多月,除了不曾中断的日常维护需求,对首页孜孜不倦的优化工作,更多的是那些与拖延症抗争的日夜:是今天写,还是等好好休憩回味后再动手?很明显,在这几十上百个日夜里,我基本都选择了第三个选项:不折腾了,先休息吧。现在想起来,关于那一个月白加黑五加二加班生活的印象已经渐渐模糊。到现在依然能清晰记着的,大概是最为深刻的记忆了。 16版的京东首页,在性能、体验、灾备策略等各方面都做到了极致。站在如此高大的巨人肩上,除了满满的自信,我们心里更怕扑街。毫无疑问,我们在接到改版需求的那一刻,立马就敲定了新首页的技术选型:妥妥的jQuery + SeaJS! 但很快,我们就发现这样一点都不酷。jQuery是2006年的框架了,SeaJS停止维护也已经四年。这些项目的诞生都是为了解决当时业界的一些痛点:比如jQuery最开始是为了方便程序员在页面中操作DOM,绑定事件等;SeaJS则是为了在浏览器中实现CMD规范的模块开发和加载。但在各种VirtualDOM框架横飞的现在,程序员已经很少会直接操作DOM元素,而模块的开发和加载也有早已有了别的方案。 就在这时,Nerv项目的作者提出了建议:“不然用Nerv来一发?”我记得,当时他脸上洋溢着淳朴的笑,Nerv也仅仅是部门内部的一个小项目。我们回想了首页这个业务,技术栈已经好几年未曾更新过,开发流程也不够理想。如果再不做出改变,明年的这个时候我们依然会面对一堆陈年老代码头疼不已。抱着试一试的心态,我们接受了他的提议。没想到,这个决定让首页从此摆脱了落后的技术架构,而Nerv现在也已经成长为GitHub上3k+ Star的热门项目。 Q: 为什么不使用React/Preact/Vue? A: 这三者都是前端圈子中相当流行的项目。React有完善的体系和浓厚的社区氛围,Preact有着羞涩的体积,Vue则使用了先进的html模板和数据绑定机制。但是,上边这三者都 无法兼容IE8。我们在经过相关数据的论证后,发现IE8的用户还是有一定的价值,这才最终激发了我们团队内部自己造轮子的想法。当然,在造轮子的过程中,我们也不忘向上面这些优秀框架的看齐。最终,Nerv在完美兼容React语法的同时,具有着出众的性能表现,在Gzip后也只占用9Kb的体积。 整体架构 在这次的项目中,我们基于上一年久经考验的前端体系(详细介绍),进行了升级: Athena前端工程化工具:团队自研的前端工程化工具。除了自动化编译、代码处理、依赖分析、文件压缩等常规需求,2.0版本还支持 基于npm的依赖管理,更加先进的引入、导出机制,还有 最新的es语言特性。 Athena管理平台:新增了 针对Nerv的项目模板,另外还有针对H5项目的特色模板可选。 Athena基础库与组件库:新增了基于jQuery+SeaJS的组件重构,全新升级的Nerv组件。 Athena模拟接口:除了已有的mock接口数据的能力,还支持 接口文档生成,便于沉淀项目接口信息。 Athena兜底接口:可以定时抓取线上接口的数据 生成兜底数据,还支持 接口数据校验,评估接口健康度。 Athena前端监控:我们部署了一系列的监控服务,对页面上的素材以及页面的完整功能进行监控。一旦图片尺寸/体积超限,某些特定的操作出现异常,或者接口成功率降低等异常情况,就会触发告警推送,开发者可以 实时收到告警信息。 Athena可视化报表:Athena可视化报表平台上对上报的数据都有 直观的展示。 开发模式 Athena2.0 1.0版本的Athena,基于vinyl-fs的流操作,或者说是类似于gulp的压缩、编译等等操作的任务流。而到了2017年,webpack早已在前端圈中流行。同行们也早已经习惯在项目中直接基于最新的语言特性去开发,在webpack.config.js加上一个babel-loader就可以完美支持新语法并完成打包。Athena 1.0背着太沉重的历史包袱,已经很难快速实现对babel转译的支持。所以在首页的开发前,我们将Athena升级到了全新的2.0版本。 一如既往,Athena会为项目提供init(初始化),serve(实时预览),build(编译),publish(发布)等功能。除此之外,由于2.0版本的Athena是基于webpack的,所以项目中可以 统一用npm来管理依赖,也可以直接 使用最新的ES语言特性来进行开发。 使用Athena2.0开发时,建议的文件架构如下: 前后端协作 我们依然是采用了 前后端分离的协作模式,由后端给出json格式的数据,前端拉取json数据进行渲染。对于大部分的组件来说,都会在constructor中做好组件的初始化工作,在componentDidMount的生命周期中拉取数据写入组件的state,再通过render函数进行渲染。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 […]

Nerv – 京东高性能前端框架

Nerv是一款由京东凹凸实验室打造的类React前端框架。目前已广泛运用在京东商城(JD.COM)核心业务及TOPLIFE全站。 Nerv 基于React标准,使用 Virtual Dom 技术,拥有和 React 一致的 API 与生命周期,如果你已经对 React 使用非常熟悉,那么使用 Nerv 开发对你来说绝对是零学习成本。 与此同时,相比于 React 以及市面其他同类型框架,Nerv 更具体积轻量,性能高效的特点。并且,它符合当下国情,可以完美兼容 IE8 及以上浏览器。 官网:https://nerv.aotu.io/ 文档:https://nervjs.github.io/docs/ GitHub:https://github.com/NervJS/nerv 特性 更小的体积: Gzip 后仅有9k,不到 React 三分之一的体积,低性能设备也能高速地加载并解析执行。 更高的性能: 高效、同步的 diff 算法和诸多优化策略使得 Nerv 成为性能最高的前端框架之一。 完备的生态: 无需 nerv-compat,只需要在稍稍设置就能享受整个 React 生态的共同成果。 更一致的渲染: 不仅在浏览器上能高效地渲染,在服务器上 Nerv 同样能高效地运行。 更优的兼容: 和大多数现代框架不同,Nerv 将继续保持对 IE8 的兼容。 更具说服力的案例: 不管是京东首页的高流量,还是 Toplife 的复杂业务,Nerv 都经受住了来自于真实业务的考验。 性能 […]

© 2018 JDC. All Rights Reserved.