|
|
|
## YOHO!前端现状和待做事项
|
|
|
|
|
|
|
|
### 使用技术
|
|
|
|
|
|
|
|
#### 浏览器端
|
|
|
|
|
|
|
|
主要是指在浏览器里使用的技术。
|
|
|
|
|
|
|
|
|
|
|
|
##### vue（框架，视图层）
|
|
|
|
目前vue主要运用于，新版商户端和BLK，以及部分WAP的页面（地址管理，退换货），
|
|
|
|
目前这些项目全部使用了vue 2.x版本，商户端实现了SSR的实践。后续正在对BLK的SSR做对于的改造。vue提高的复杂页面（页面逻辑）的开发效率（完整的工具链），同时提高代码的可维护性，因为新版vue采用了Virtual Dom的技术，相对性能方面有较大提升[基准测试](https://github.com/krausest/js-framework-benchmark)。
|
|
|
|
但是，vue也有一些弊端，性能无法做到极致,服务端直出（SSR和模板渲染有一定差距），页面的（相对于原生JS处理），同时不支持IE8以及以下的浏览器，所以我们再运用中，PC端没有采用vue，同时，在WAP端的商品展示相关页面采用传统的方式来做（服务端直出HTML）。
|
|
|
|
|
|
|
|
##### jquery
|
|
|
|
目前主要运用于PC端和WAP端大部分页面，提升前端开发效率和浏览器的兼容性。
|
|
|
|
|
|
|
|
##### 前端模块化
|
|
|
|
目前主流的前端js开发方式，采用common.js的方式进行，代码的依赖，引用的组织，通过webpack加上各种加载器，进行前端代码的构建。服务端原生支持这种方式：
|
|
|
|
``` javascript
|
|
|
|
//moduleA
|
|
|
|
|
|
|
|
const funcA = ()=>{
|
|
|
|
return 'A';
|
|
|
|
}
|
|
|
|
|
|
|
|
module.exports = {
|
|
|
|
funcA
|
|
|
|
};
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
``` javascript
|
|
|
|
//use a module
|
|
|
|
|
|
|
|
const moduleA = require('./a');
|
|
|
|
|
|
|
|
moduleA.funcA();
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
##### 响应式布局
|
|
|
|
支持多个分辨率的适配，通过viewport，已经css的网格系统。目前主要运用要后台项目
|
|
|
|
|
|
|
|
##### bootstrap
|
|
|
|
现在平台端项目就是使用了bootstrap，用于快速构建页面，但不需要设计支持，完整的UI套件。缺点是组件不丰富，需要重复使用html。单独使用bootstrap，前端代码的维护性不高。
|
|
|
|
|
|
|
|
##### MIP（百度的移动端加速器）
|
|
|
|
现在主要改造了逛的详情页面，目前收录情况和百度官方的说明有差异。页面收入情况不佳，目前已暂停新的页面的开发工作。
|
|
|
|
|
|
|
|
### css， html，JavaScript
|
|
|
|
这个不多做说明，浏览器的主要使用的技术。
|
|
|
|
|
|
|
|
#### 服务端
|
|
|
|
|
|
|
|
##### express（web框架）
|
|
|
|
现在大部分线上的业务都是使用了这个web框架，有货（PC，WAP），BLK（PC，WAP），平台端，商户端，等。express本身很轻量，通过使用中间件来对框架扩展，如session，消息体解析，防xss等。目前使用的版本是4.x。
|
|
|
|
|
|
|
|
##### node
|
|
|
|
前端WEB服务都是使用node，相对于前端比较友好，使用了Javascript作为开发语言，同时是异步非阻塞的，相对于其他服务端脚本，性能还算可以。缺点是性能相对于Java，不算高，同时是单进程的服务，存在一个多线程行的灵活性，性能也无法发挥极致。
|
|
|
|
|
|
|
|
##### zookeeper
|
|
|
|
用于前端的一些开关配置，便于实时的修改配置无需重启服务。降级开个，以及一些功能开关。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
##### memcache
|
|
|
|
用于session和接口缓存，其他缓存，后续打算替换成redis，减少使用的服务种类。
|
|
|
|
|
|
|
|
##### redis
|
|
|
|
目前主要用于SEO的一些TDK的配置，用于快速读取，为什么没有使用memcache，是因为开发的数据结构不支持。
|
|
|
|
|
|
|
|
##### mysql
|
|
|
|
目前用于SEO的mysql，存储托词的数据，方便前端快速开发和推进SEO的页面增量，目前已经增加的10w+的页面，同时第三方搜索的索引量也逐步增加。
|
|
|
|
活动项目也使用了mysql的服务，存储活动数据。
|
|
|
|
|
|
|
|
##### pm2（node 进程管理器）
|
|
|
|
pm2是的node服务的进程管理工具，主要用于进程守护，进程状态监控和治理（启动，关闭，重启等操作），该工具是否可靠。
|
|
|
|
|
|
|
|
##### nginx
|
|
|
|
nginx是使用了openresty的版本。使用了proxy-cache，配合max-age做对应页面的pagecache，以及多台node服务器的负载均衡。
|
|
|
|
|
|
|
|
#### 工程化
|
|
|
|
|
|
|
|
##### 项目构建
|
|
|
|
|
|
|
|
项目构建主要使用以下工具链，主要实现js代码依赖，es语法转化，css编译，代码压缩，分页面打包，代码静态检查,代码调试。
|
|
|
|
|
|
|
|
* webpack（构建工具）
|
|
|
|
* babel（语法支持编译器）
|
|
|
|
* eslint（es静态检查）
|
|
|
|
* stylelint（样式静态检查）
|
|
|
|
* npm（依赖包管理）
|
|
|
|
* postcss（css后处理器）
|
|
|
|
* gulp（pc项目还在使用，需要后续去掉，其实gulp和webpack部分功能是重合的）
|
|
|
|
|
|
|
|
|
|
|
|
##### 项目集成
|
|
|
|
##### node-ci
|
|
|
|
仓库地址：http://git.yoho.cn/OPENTECH/yoho-node-ci，
|
|
|
|
这个项目涉及的功能比较多，集成部分，目前在用的是项目的构建，已发到灰度环境，发布正式的现在已经迁移到运维系统。
|
|
|
|
|
|
|
|
项目的代码静态检查，每天凌晨会完成一次集成和代码检查。
|
|
|
|
|
|
|
|
##### static-ci
|
|
|
|
仓库地址：http://git.yoho.cn/fe/static-ci/tree/master,静态文件构建部署到云存储(七牛)
|
|
|
|
|
|
|
|
|
|
|
|
##### 项目部署
|
|
|
|
在编写node-ci的时候主要使用了如下两个工具模块，pm2是一个进程管理工具，可以启动，重启，停止node进程，并且可以设置日志输出。shelljs可以在node中优雅的执行bash命令。
|
|
|
|
|
|
|
|
* pm2
|
|
|
|
* shelljs
|
|
|
|
|
|
|
|
##### 项目治理
|
|
|
|
* pm2-server-monit（pm2的一个插件，监控服务的资源使用情况）
|
|
|
|
* pm2-http-interface（pm2的一个插件，监控数据的api接口）
|
|
|
|
* 日志汇聚（目前是把日志写到/Data目录，运维使用工具汇聚到一个日志服务上）
|
|
|
|
* pm2-cli（pm2的命令行，方便其他的系统集成和控制node的服务进程）
|
|
|
|
|
|
|
|
##### 项目监控
|
|
|
|
* oneapm (web事务 APM，后面会停用这个服务，自己做指标记录web事务的各个指标，以及服务端异常记录 )
|
|
|
|
|
|
|
|
##### 异常监控
|
|
|
|
目前使用一下的工具进行服务监控，目前还缺少端到端的监控。
|
|
|
|
* Grafana（指标数据的可视化，目前主要是cpu和内存，异常次数）
|
|
|
|
* influxdb（作为上报的数据服务，记录指标）
|
|
|
|
* 错误日志监控告警（记录错误的次数，超过阈值会报警）
|
|
|
|
* 服务CPU/内存监控告警（超过阈值会报警）
|
|
|
|
* 浏览器端js脚本错误监控和处理（badjs，一个腾讯的开源浏览器端错误监控分析平台）
|
|
|
|
|
|
|
|
##### 版本管理
|
|
|
|
版本管理是使用git进行管理的，使用了修改过的git-flow，去掉了dev分支，每个开发版本分支都是基于master分支，同时master分支会有一个gray分支。当完成开发会合并到gray分支验证，验证OK会合并master分支，同时如果发现线上问题，使用hot-fix分支处理并合并master和gray。
|
|
|
|
|
|
|
|
* git
|
|
|
|
* git-flow(变种)
|
|
|
|
|
|
|
|
##### 依赖包仓库管理
|
|
|
|
npm是node端和浏览器端的依赖包管理服务，遵循common.js规范。代码依赖和模块版本都是使用npm进行管理的。主要会通过一个package.json的文件进行模块和项目的说明和依赖包注明。
|
|
|
|
如下是yoho-node-lib项目的package.json
|
|
|
|
```json
|
|
|
|
{
|
|
|
|
"name": "yoho-node-lib",
|
|
|
|
"version": "0.2.18",
|
|
|
|
"description": "some common library for yoho fe. http://git.yoho.cn/fe/yoho-node-lib",
|
|
|
|
"main": "index.js",
|
|
|
|
"scripts": {
|
|
|
|
"test": "node_modules/.bin/nyc node_modules/.bin/ava",
|
|
|
|
"posttest": "node_modules/.bin/nyc report --reporter=html"
|
|
|
|
},
|
|
|
|
"repository": {
|
|
|
|
"type": "git",
|
|
|
|
"url": "http://git.yoho.cn/fe/yoho-node-lib.git"
|
|
|
|
},
|
|
|
|
"keywords": [
|
|
|
|
"common",
|
|
|
|
"library",
|
|
|
|
"yoho",
|
|
|
|
"node"
|
|
|
|
],
|
|
|
|
"author": "jiangfeng <jeff.jiang@yoho.cn>",
|
|
|
|
"license": "ISC",
|
|
|
|
"ava": {
|
|
|
|
"tap": true
|
|
|
|
},
|
|
|
|
"dependencies": {
|
|
|
|
"bluebird": "^3.4.0",
|
|
|
|
"handlebars": "^4.0.5",
|
|
|
|
"lodash": "^4.13.1",
|
|
|
|
"lru-cache": "^4.1.1",
|
|
|
|
"md5": "^2.1.0",
|
|
|
|
"memcached": "^2.2.2",
|
|
|
|
"moment": "^2.13.0",
|
|
|
|
"request-promise": "^3.0.0",
|
|
|
|
"uuid": "^3.0.1",
|
|
|
|
"walk": "^2.3.9",
|
|
|
|
"winston": "^2.2.0",
|
|
|
|
"winston-daily-rotate-file": "^1.1.1",
|
|
|
|
"xss-filters": "^1.2.6"
|
|
|
|
},
|
|
|
|
"devDependencies": {
|
|
|
|
"ava": "^0.15.2",
|
|
|
|
"eslint": "^4.4.1",
|
|
|
|
"eslint-config-yoho": "^1.0.1",
|
|
|
|
"nyc": "^11.1.0",
|
|
|
|
"express": "^4.15.4"
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
```
|
|
|
|
##### 单元测试
|
|
|
|
目前只有yoho-node-lib使用了单元测试，使用了ava和nyc，ava是一个测试框架包含断言库，测试报告，等一系列的测试套件，nyc是代码覆盖率的统计工具。方便快速统计单元测试的覆盖率。
|
|
|
|
|
|
|
|
#### 系统架构
|
|
|
|
|
|
|
|
##### 有货WEB端（node+restful）
|
|
|
|
|
|
|
|
##### 缓存体系（有货WEB）
|
|
|
|
|
|
|
|
1. 接口缓存（通过memcache进行一级短时间的接口数据缓存，二级缓存默认缓存24h，用于容灾）
|
|
|
|
2. 进程缓存（缓存一些配置型热点数据，如导航，品牌，品类）
|
|
|
|
3. 页面缓存（缓存生产的页面，使用了nginx的能力进行缓存）
|
|
|
|
4. 浏览器端缓存（设置页面，已经，静态资源的缓存失效时间）
|
|
|
|
|
|
|
|
##### 爬虫体系
|
|
|
|
现在爬虫服务，主要使用了慢慢买接口和神箭手的爬虫服务，通过node进行封装和暴露web-hooks接口进行商品比价的爬取和上报。
|
|
|
|
|
|
|
|
爬虫代理服务
|
|
|
|
|
|
|
|
|
|
|
|
##### 防爬虫体系
|
|
|
|
1. 访问行为控制
|
|
|
|
* 一段时间内访问某类页面
|
|
|
|
* 判断是否出发页面内的Ajax请求
|
|
|
|
|
|
|
|
2. 访问频次控制
|
|
|
|
* 同一IP，访问同一类页面（不同的时间间隔，1m，5m）
|
|
|
|
3. 黑名单
|
|
|
|
* 禁止指定IP访问。
|
|
|
|
* 禁止指定UA访问。
|
|
|
|
|
|
|
|
##### SEO体系
|
|
|
|
1. tdk配置：可以动态针对商品，逛文章，店铺，特定链接设置TDK（title，keywords,description）
|
|
|
|
2. 托词配置（设置词根，通过词根获取第三方的搜索词）
|
|
|
|
3. 托词爬取（根据词根获取第三方相关的建议词）
|
|
|
|
4. 搜索词筛选（筛选出有效的搜索词）
|
|
|
|
4. 搜索词页面生成（根据获取到的词，匹配出有内容的商品列表页面，并生成）
|
|
|
|
5. 搜索词监控（监控搜索词的排名，并做出对应的调整）
|
|
|
|
|
|
|
|
##### 活动系统
|
|
|
|
1. 活动页模板化
|
|
|
|
2. 投票能力封装
|
|
|
|
3. 发布能力封装
|
|
|
|
|
|
|
|
#### 系统优化
|
|
|
|
|
|
|
|
##### 服务端优化
|
|
|
|
|
|
|
|
* 请求合并
|
|
|
|
* 全站https
|
|
|
|
* 接口缓存
|
|
|
|
* 进程级缓存
|
|
|
|
* page cache
|
|
|
|
* 减少接口调用次数
|
|
|
|
* 模板启动时预编译
|
|
|
|
* 功能降级
|
|
|
|
* 计算密集型操作使用原生实现
|
|
|
|
* 减少串行调用
|
|
|
|
|
|
|
|
##### 浏览器端优化
|
|
|
|
|
|
|
|
* 首屏直出优化
|
|
|
|
* 优化直出服务端处理时间
|
|
|
|
* 直出文档，简化dom结构
|
|
|
|
* 首屏去除dom的操作
|
|
|
|
* 首屏只加载所需样式
|
|
|
|
* 浏览器端缓存优化
|
|
|
|
* CDN缓存优化(max-age)
|
|
|
|
* 页面静态资源优化
|
|
|
|
* 页面只加载所需的css，js
|
|
|
|
* 加载图片优化
|
|
|
|
* 预加载优化
|
|
|
|
* 懒加载优化
|
|
|
|
* 图片质量和体积控制
|
|
|
|
* WEBP的运用
|
|
|
|
* 动画优化
|
|
|
|
* 减少重布局和重绘
|
|
|
|
* 减少图层
|
|
|
|
* DOM操作优化
|
|
|
|
|
|
|
|
#### 项目
|
|
|
|
|
|
|
|
##### 上线业务
|
|
|
|
* yohobuy-node（有货pc web端的项目）
|
|
|
|
* yohobuywap-node（有货wap web端的项目）
|
|
|
|
* yoho-blk（BLK PC端）
|
|
|
|
* yohoblk-wap（BLK wap端）
|
|
|
|
* yoho-shop-manage（商户端）
|
|
|
|
* yohobuy-portal-fe2（平台端）
|
|
|
|
* yohobuy-shop-fe2（老商户端）
|
|
|
|
* yoho-run-dashboard（大数据实时系统）
|
|
|
|
* mars-activity（mars的活动模块）
|
|
|
|
* yoho-activity-platform（有货活动平台）
|
|
|
|
* goods-value-server（商品价值模型）
|
|
|
|
* yoho-seo（SEO优化）
|
|
|
|
* doom-spider（比价爬虫）
|
|
|
|
|
|
|
|
##### 组件模块
|
|
|
|
|
|
|
|
* yoho-node-lib（web框架和工具集）
|
|
|
|
* eslint-config-yoho（js静态检查配置模块）
|
|
|
|
* stylelint-config-yoho（CSS静态检查配置模块）
|
|
|
|
* yoho-lint（静态检查封装）
|
|
|
|
* YAS-jssdk（前端用户行为数据采集上报）
|
|
|
|
* YOHO-NPM（依赖包）
|
|
|
|
* yoho-js-sdk（通用功能封装）
|
|
|
|
* yoho-node-zookeeper
|
|
|
|
* yo （web框架）
|
|
|
|
|
|
|
|
##### 工具
|
|
|
|
|
|
|
|
* yoho-node-ci（前端工具系统）
|
|
|
|
* static-ci（静态文件构建和发布）
|
|
|
|
|
|
|
|
|
|
|
|
##### 待做事项
|
|
|
|
|
|
|
|
##### 业务系统:
|
|
|
|
* 上下文改造优化：便于后续进行面向切面的信息传递和处理（全部改造完成）。
|
|
|
|
* 服务端业务模块性能优化：有性能问题的页面进行优化（APM上分析得到）
|
|
|
|
* 前端缓存体系优化（梳理缓存的页面，以及优化缓存更新的方式，实现主动更新缓存）
|
|
|
|
|
|
|
|
##### 可维护性方面：
|
|
|
|
* web事务上报和性能监控（不依赖第三方的服务）
|
|
|
|
* 开发时构建优化,开发时构建过程小于2s（提升开发效率）
|
|
|
|
* node服务docker化（提高node持续集成和部署能力，方便运维弹性伸缩）
|
|
|
|
* node服务升级到8.x(提升服务性能，开发效率)
|
|
|
|
|
|
|
|
##### 技术方面：
|
|
|
|
* SSR（VUE开发项目，支持服务端直出，先实现BLK的SSR）
|
|
|
|
* 浏览器端组件整理（优化和精简浏览器端用到的组件）
|
|
|
|
* PWA（研究性项目，可以从一些活动项目进行实践）
|
|
|
|
|
|
|
|
##### SEO方面
|
|
|
|
* 有货（PC，WAP）100w+级别的新增关键字页面，并完成收录
|
|
|
|
* 外链推广计划的实施（9-10月之间），实施后：30% UV上升
|
|
|
|
* 针对关键词优化文章：优化逛文章，媒体文章（有货商品链接），形成内链系统，提升流量和转化
|
|
|
|
* 商品商品详情页的增加收录，收录量增加10% |
|
|
\ No newline at end of file |
...
|
...
|
|
