Loading
0

tx3论坛:京东首页改版设计Nerv实战

技术小学生微信公众号
腾讯云服务器大促销。
华为服务器

京东16版本首页

回想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的体积。

整体架构

在这次的项目中,我们基于上一年久经考验的前端体系,进行了升级:

tx3论坛:京东首页改版设计Nerv实战

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兜底接口:可以定时抓取线上接口的数据 生成兜底数据,还支持 接口数据校验,评估接口健康度。

技术小学生微信公众号
华为服务器
腾讯云服务器大促销。

声明:站长码字很辛苦啊,转载时请保留本声明及附带文章链接:https://blog.tag.gg/showinfo-36-24008-0.html
亲爱的:若该文章解决了您的问题,可否收藏+评论+分享呢?
上一篇:360信息流广告怎么把信息投放给目标人群
下一篇:Google Play Services出bug,大批华为手机8出现小问题