回想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可视化报表平台上对上报的数据都有 直观的展示。

Athena前端工程化工具：团队自研的前端工程化工具。除了自动化编译、代码处理、依赖分析、文件压缩等常规需求，2.0版本还支持 基于npm的依赖管理，更加先进的引入、导出机制，还有 最新的es语言特性。

Athena管理平台：新增了 针对Nerv的项目模板，另外还有针对H5项目的特色模板可选。

Athena基础库与组件库：新增了基于 jQuery + SeaJS的组件重构，全新升级的Nerv组件。

Athena模拟接口：除了已有的mock接口数据的能力，还支持 接口文档生成，便于沉淀项目接口信息。

Athena兜底接口：可以定时抓取线上接口的数据 生成兜底数据，还支持 接口数据校验，评估接口健康度。