【0～1】新业务线开发上线｜项目复盘

前言

有人说对于一个新人来说做业务是能让其最快成长的一种方式。但对于工作有一定年限的同学来说，单纯做业务可能会出现疲倦感。

作为一个毕业快2年的前端开发，下面我将带你一起回忆复盘我的前端小白业务开发学习成长之路中的其中一个小小历程。

简单介绍一下自己：我司所属在线旅游行业，而我所属部门是公司的一个创新业务团队。针对用户群体：来华外国友人～，为其提供订机票、火车票、酒店服务。 将要复盘的是：2019年8月中旬～9月中下旬，我刚毕业时接手完成的第一个相对bigger且完整的全新项目。emmm～

一、项目简介：

前言中提到了，所属部门是创新业务团队，作为一名前端开发自然是完成业务功能迭代的开发啦？

项目功能&作用

M站点（所指h5）火车票业务全流程包含：车次搜索、用户下单、常旅信息、改签、退票、订单等等等等。

补全站点业务，开拓一条新路径，方便市场推广。

承担角色

一个条完整到业务线到开发涉及到人员配备：

• 1PM
• 1后端开发
• 1设计
• 2前端
• 1测试

承蒙当时leader的厚爱，SM有意锻炼培养我，于是鼓励并由我去主导推动这次业务线的前端开发。前期经过项目分析、功能模块划分、子模块划分、页面数、接口数等的摸清给出了第一版开发排期。因特殊原因上线时间节点被卡死，时间只剩一个月，在进入开发阶段前，协调人力又给此业务多配备了一名前端开发。

在多方人员协作下完成了这个项目的开发上线。

我主要负责的：

• 前期业务分析对接，功能模块划分
• 框架搭建（VueSSR + Webpack + Vuei8n）
• 公共模块组件抽离
• 数据存储方式Vuex模块化
• 业务功能模块开发
• 进度把控

主要贡献

• 新项目前端框架搭建
  • 项目环境配置
  • 服务器申请
  • 二级域名申请，对接公司运维
• 业务条线功能模块划分
• 业务组件封装
• 分工业务模块开发

二、项目背景：

国际业务M站点前期为了快速打烊，只接入了机票项目资源提供在线订票。为了后期市场更好的推广，需要将M站业务线补齐。

需要更好的SEO、为团队后期市场推广添砖加瓦。

三、实践过程：

技术选型

• 前端框架搭建
  • VueSSR
  • Webpack
• 多语言支持
  • vue-i18n
• 服务端
  • Nodejs Express
• 数据分析
  • 公司自由的一套
  • Facebook Pixel
  • Google Analytics

为什么是VueSSR？

为了市场同事更好的推广投放，以及做好SEO。所以采用 服务端渲染基本可以保证用户看到的内容已经是直接渲染好的，白屏时间虽然相比CSR会增加，但是利用好已渲染好的页面喷出，用户可以立即看到数据页面从而减少实际用户的等待时间进而提高用户体验。

• 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
• 更快的内容到达时间 (time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备。无需等待所有的 JavaScript 都完成下载并执行，才显示服务器渲染的标记，所以你的用户将会更快速地看到完整渲染的页面。通常可以产生更好的用户体验，并且对于那些「内容到达时间(time-to-content) 与转化率直接相关」的应用程序而言，服务器端渲染 (SSR) 至关重要

vue的服务端渲染的优缺点及选型，官网都描述等很清楚（以上摘自官网，不再赘述）。

支持多语言

vue项目中首选vue-i18n

统一本地化语言标准：

国际化和本地化区别，简单来说，国际化仅代表语言，比如：英语、英国人和美国人看到的都是相同的内容，而本地化，则是在语言的基础上区分地区。如英语分：英国英语，美国英语，德国英语，香港英语等。

本地化呈现的内容更贴合当地用户思维和习惯，更容易让用户理解。

语言标识

当时部门正在推的语言包管理的翻译系统专项正在推进还未完成，暂时将前端涉及的语言包.json放置于项目本地直接引用。

谈谈数据分析

说到数据分析， 数据的重要性对于产品，对于公司都是必不可缺的。 来看看产品大佬们所描述的数据埋点所带来的一系列流程：

数据生产-数据采集-数据处理-数据分析和挖掘-数据驱动/用户反馈-产品优化/迭代

对于开发来说（浅层次）：数据采集流程； 就是要确保把产品要求节点多埋点及页面埋点埋入统计到位， 保证埋点数据正确的传入，并在后台中能查询到。

对于数据分析方面，同时接入了三套

• 公司自由的一套埋点
• Facebook Pixel
• Google Analytics

做好SEO所下的功夫

关于Vue的SEO详细的可以查看我的另一篇：VUE开发的SEO优化方案

问题点点点

• 开发环境配置
  • 申请服务器，创建项目后，首先要调试同部署预发环境和线上环境是否通，接口，及打包文件文件上传等。
• 业务组件抽离开发
  • 杂乱多
  • 统一化
• Vue-SSR中兼容遇到都各种小问题
  • 浏览器特定的代码（缓存操作，DOM操作，BOM等操作）只能放在某些生命周期钩子函数中使用；
• 数据缓存
  • Vuex管理数据存储，获取数据只记录一次等问题
• 业务功能复杂等
  • 前端过滤处理火车票车次列表信息（逻辑复杂，需要对业务熟悉，数据量大的过滤筛选排序等）
  • 订单XXX

提升

补缺补漏，因为不懂所以踩坑，因为踩坑所以成长

• 项目评估能力
• 项目管理规划
• 团队协调能力
• 对Vue-SSR有更深的了解
• SEO相关知识补全
• 数据分析重要性意识养成

四、总结思考

一年前的复盘总结

回首过往，这已是自己一年多前的项目了。翻出有道云笔记，还能看到当时完成这个项目后的复盘文件，感触比较深的还是对于新手而言开发业务时候需要注意的流程点等（复制当时复盘笔记部分内容如下，稚嫩的我啊～）

• 开发前环节
  • 前期需求功能模块分析
  • 沟通：有经验的开发&此项目产品 沟通确认是否存在认知理解方面的差异
  • 确认后：给出需求开发排期估时
  • 细化每个功能模块开发周期
  • 给定最终上线时间（新人开发考虑预留突发情况问题的时间）
• 进入开发，
  • 发现问题，及时修改，完善后进入下个周期进行review
• 开发中环节
  • 进入实现功能code环节
  • 定期对进度review及功能代码review
• 开发中后期
  • UI验收
  • PM验收
  • UI&PM验收后提测QA
• 测试环节
  • 提测前准备好所有预发环境
  • 缺陷问题跟进解决，尽可能做到bug不过夜
  • QA测试OK，确认上线时间
  • 上线前提前做好准备，同步各方

针对这条业务前端技术方面还可以做以下改进点提升：

• 多语言接入翻译后台，便于管理修改维护
• 公共组件管理
• webpack优化
  • webpack4 splitchunksplugin分包 公共组件单独采用webpack4分包，组件代码变动频次小，将单独提取出来就可实现与业务代码分开缓存。
• 编译阶段性能优化：
  • 时间依赖清理
  • 产物大小、依赖清理、摇树、图片压缩
• 加载阶段性能优化：
  • 首屏渲染 懒加载
  • wallterfull时间优化 图片资源数&大小、请求数
  • JS报错修复（安全组件）

最后balabala~

洋洋洒洒以为自己写了好多，回忆一下，与同事后端、产品、设计、QA、还有一个前端小哥等等，一起开发完成了这条业务线并上线。可以算是从零到一的开发了一条新业务。一路磕磕碰碰也遇到许多坑，不仅仅是技术难点或是流程还有服务器及域名映射等， 在与同事沟通及跨部门同事沟通帮助下，终得到解决。 业务成长：对火车票业务线的熟悉，业务细节等，摸的透透的，业务细节不便多说[闭嘴]。

回忆录：

完成这个项目后，自己收获也颇多，项目体验也好，与同事沟通协作也好，有苦有甜。最后还是得到leader的认可，当季度绩效获得S（ps：我们的公司绩效5个等级：S>A>B>C>D）。及之后三个月参与公司晋升，因为有这次项目的经历，有幸成为同批实习生中第一个晋升成功的童鞋。

跟着团队一起努力～越努力越幸运～ hhh依稀记得部门团队 火车票业务项目获得公司创新类的奖项，跟着部门一同努力也分得一杯羹～迎来自己人生第一次出国旅游，得益于与部门团队小伙伴一起努力收获的结果呀！

作为一个新人小白，在不断学习巩固提升自己的技术面的同时，善于沟通，与同事合作交流也是必不可少，要更加勇敢挑战自己勇于承担责任，对待工作我是认真的！！！

巴啦啦小魔仙，变！！！

写到这里，不知自己离题否！也不知是否呈现了重点没有！

当然也感谢能看到最后的小伙伴们～欢迎多多交流

本文正在参与「掘金 2021 春招闯关活动」, 点击查看 活动详情