Tx3论坛京东主页设计Nerv战斗

来源:未知 浏览 139次 时间 2021-05-25 02:12

回顾17年的京东主页修订自推出以来已有四个多月了。在过去的四个月中除了不间断的日常维护需求之外搜索引擎除了不间断的日常维护需求之外主页的不知疲倦的优化更多的是白天和晚上的战斗拖延:是今天写的还是等待好好休息再重新开始?显然在这几十几天的日子里我基本上都选择了

回顾17年的京东主页修订自推出以来已有四个多月了。在过去的四个月中除了不间断的日常维护需求之外主页的不知疲倦的优化更多的是白天和晚上的战斗拖延:是今天写的还是等待好好休息再重新开始?显然在这几十天几夜里我基本上选择了第三种选择:不要折腾让我们先休息吧。现在想一想那个月的印象和黑加五加二加班的工作已逐渐模糊。它仍然是迄今为止仍然可以清楚记住的最深刻的记忆。

第16届京东主页已经实现了最佳的性能体验和灾难恢复策略。站在这样一个高大的巨人的肩膀上除了充满信心我们更害怕街道。毫无疑问在我们收到修改需求的那一刻我们立即完成了新主页的技术选择:正确的jQuery + SeaJS!

但很快我们发现这并不酷。 jQuery是2006年的框架SeaJS已经停止了四年的维护。这些项目的诞生是为了解决当时行业的一些难点:例如jQuery最初旨在帮助程序员在页面中操作DOM绑定事件等; SeaJS是在浏览器中实现CMD规范模块开发和加载。但是在各种VirtualDOM框架中程序员很少直接操作DOM元素并且已经开发并加载了模块。

在这一点上Nerv项目的作者提出了一个建议:“或者用Nerv来获取它?”我记得他的脸上洋溢着一个简单的微笑而Nerv只是该部门内的一个小项目。我们回忆起主页业务技术堆栈已经好几年没有更新而且开发过程并不理想。如果我们不做任何更改明年的这个时候我们仍会面对一堆旧代码。凭着尝试的心态我们接受了他的提议。出乎意料的是这个决定让主页摆脱了落后的技术结构Nerv现在已经成长为GitHub上3G + Star的热门项目。

问:为什么不使用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模拟接口:除了模拟接口数据的现有容量外还支持接口文档生成方便用于生成项目接口信息。

Athena底部界面:可以定期捕获在线界面的数据生成底层数据并支持界面数据验证评估界面健康状况。

Athena前端监控:我们部署了一系列监控服务来监控页面上的资料和页面的全部功能。一旦图像尺寸/体积超过限制一些特定操作异常或者界面成功率降低触发警报推动并且开发者可以实时接收警报信息。

Athena Visual Report:Athena Visual Reporting Platform提供了报告数据的直观表示。

Athena前端工程工具:为团队自行开发的前端工程工具。除了自动编译代码处理依赖性分析文件压缩等常见要求之外2.0版还支持基于npm的依赖关系管理更高级的导入和导出机制以及最新的es语言功能。

Athena管理平台:增加了Nerv的新项目模板以及H5项目的功能模板。

Athena基础库和组件库:添加了基于jQuery + SeaJS的组件重构这是一个新升级的Nerv组件。

Athena模拟接口:除了模拟接口数据的现有容量外还支持接口文档生成方便用于生成项目接口信息。

Athena底部界面:可以定期捕获在线界面的数据生成底层数据并支持界面数据验证评估界面健康状况。

标签: 京东主页年的回顾NervTx3设计论坛战斗