规范目的

为提升前后端工程师个人价值， 为提高团队整体工作效率， 前端技术中心尝试制定基于JavaScript语言的Web全桟开发规范， 全栈工程师必须按本规范进行前台页面和后台服务开发。本文档如有不对或者不合适的地方请及时提出，经讨论决定后方可更改。

规范适用人员

本规范主要适合Web前端和后台工程师阅读，当然也不排除对全桟开发及这一开发模式感兴趣的其它开发人员、项目管理人员，甚至产品经理阅读。

规范声明范围

本规范圈定的开发范围主要适用于里利用HTML(5)标签、CSS(3)样式表、JavaScript(4\5\6)脚本语言在浏览器上展现的界面开发，以及用ECMAScript2015(ES6)从事后台服务开发，分前端规范和后端规范两部分进行描述。

前端规范

本部分规范主要针对利用HTML(5)标签、CSS(3)样式表、JavaScript(4\5\6)脚本语言在浏览器上展现的界面开发进行描述。

由于前端技术相关类库繁多，每个类库都有各自擅长的领域，所以我们先对前端的领域进行细分，我们尽量做到细分来避免类库的缺点，充分利用其优点。我们拿做一款互联网产品就拿网易云阅读来说，前端技术应用领域细分为官网、系统管理后台、开放平台、手机端WebView内嵌页、活动广告、直邮等页面，从这个系统可总结以下五类应用场景：

  1. 官网： 大众用户， 需要适配主流浏览器，界面变化快而丰富；

  2. 类似管理后台：内部用户，选定浏览器，界面变化较少；

  3. 类似开放平台：外部少量用户，需要适配主流浏览器，界面变化少；

  4. 类似WebView内嵌页：大众用户，需要适配移动主流浏览器，界面变化快而丰富;

  5. 类似活动广告、直邮：大众用户，需要适配主流浏览器，界面不变。

  • 针对第一种使用场景：

    • CSS采用NEC: 样式分类方式、命名规范、代码格式主要参考该网站。由于该场景要适配主流浏览器，CSS3部分各浏览器支持不广泛的尽量少用，尽量用户自定制。

    • JS库采用：NEJ或NEJ与RegularJS组合

    • HTML标签: HTML5(部分标签各浏览器支持不广泛的尽量少用)

    • 布局：采用固定布局

    • 前端打包工具采用: NEJ-BUILD

  • 针对第二种使用场景

    同第一种场景的选择。

  • 针对第二种使用场景

    同第一种场景的选择。

  • 针对第四种应用场景

    • CSS采用NEC: 样式分类方式、命名规范、代码格式主要参考该网站。由于该场景主要针对手机高级浏览器，CSS3特性充分利用。

    • JS库采用：ReactJS

    • HTML标签: HTML5标签充分利用

    • 布局：柔性伸缩布局

    • 前端打包工具采用: Webpack

  • 针对第五种使用场景

后端规范

本部分规范主要针对利用Node.JS编写后台服务代码的规范作出说明。由于ES6已2015年6月正式发布，我们强烈建议用ES6来代替ES5来编写代码，建议理由最主要有以下两点：

  1. ES6与ES5就好比C与C++的区别，编码效率相差巨大；

  2. Babel作为一款优秀的转码器能将ES6代码转为ES5代码。

所以我们在此特别强调能用JS实现的就用JS实现，JS实现的应用必用ES6来实现。

依赖包描述

由于Node.JS最出色的是它的模块和依赖包管理，通过管理依赖包可以把全人类代码聚集一起，我们经过大量的实践已经找出优秀的依赖包，本规范接下来对这些优秀出色的依赖包做说明。

框架类包

  • koa
  • koa-body
  • koa-compress
  • koa-router
  • koa-validator
  • koa-rt
  • koa-csrf
  • koa-redis
  • koa-static
  • koa-route
  • koa-generic-session
  • koa-memcached
  • koa-qs

语言类包

  • babel
  • bluebird
  • co
  • thunkify

模板类包

  • ejs
  • jade
  • mustache

工具类包

  • loads
  • md5
  • moment
  • uuid
  • xml2js
  • xlsx
  • superagent
  • urlencode
  • pinyin
  • archiver
  • iconv-lite
  • babel-fs
  • babel-runtime
  • co-fs
  • co-multipart
  • co-redis
  • date-utils
  • node-uuid
  • opened
  • string
  • request
  • underscore

存储类包

  • ioredis
  • mongoose
  • mysql
  • sequelize
  • generic-pool
  • mutt
  • nenos
  • knex

测试类包

  • chai
  • co-mocha
  • colors
  • mocha
  • progress
  • supertest

打包类

  • gulp

调试类包

  • debug

基于蜂巢的最佳全桟开发流程与实践

我们把以上优秀的依赖库有机整合在了一个名叫EasyNode的框架，您在开发过程中可阅读它的使用帮助手册EasyNode Docs。

构建本地开发环境

  • 安装Docker Engine

具体参考

Installation on Mac OS X

Installation on Debian

不建议在Windows上开发。

  • 拉取基础开发镜像

docker pull registry.hz.netease.com/easynode:0.0.2

easynode:0.0.2基础镜像Dockerfile文件内容为：

FROM registry.hz.netease.com/node:5.1.0

RUN npm install -g cnpm --registry=https://r.cnpmjs.org

RUN cnpm install babel@6.1.18 -g

  • 拉取开发模版工程

      mkdir yourproject

  cd yourprorject

  git clone https://github.com/hujb2000/easynode-template.git

  PROJECTNAME=yourproject sh init_project.sh 通过此命令定制你的项目名称[通过sed命令文件批量变量制成]

  • 创建PC端的开发环境

    由于docker-compose目前来编排多容器的服务并不成熟，故推荐直接用脚本来启动环境服务，在这里我们准备了常用服务，陆续我们将加入更多，供您选配。

    docker_devOps

    git clone https://github.com/hujb2000/docker_op.git

    通过修改scripts/start_all.sh的内容，可以选择相应的服务，由于/home/hjb/是我的的目录，请你检查你的目录修改它。

通过以上四个步骤，我们有了基于容器的开发和运行环境，接下来我们可以进入功能性开发。

开发阶段

把本地开发环境通过环境变量注入，通过以下命令开启应用服务：

MYSQL_URL=“远程或本地的mysql配置文件参数” docker run —-name projectName -p 6005:6005 —v .:/usr/src/app –workdir=/usr/src/app/bin easynode:0.0.2 start.sh

打开 http://localhost:6005进行开发。

开发提交镜像给QA

  • 开发制作镜像

开发提交代码，在代码仓库打好TAG，通过.dockerignore文件来清除运行时不需要的文件，并提交到蜂巢镜像库。

具体操作步骤如下：

项目根目录下运行以下命令生成镜像：

docker build -t project:version .

注意：这里version通过MAJOR.MINOR.PATCH，每次运行该命令版本往上加。

根目录下Dockerfile文件默认内容如下：

FROM registry.hz.netease.com:0.0.2

MAINTAINER hujb

RUN mkdir -p /usr/src/app

COPY . /usr/src/app

WORKDIR /usr/src/app

RUN cnpm install

cnpm install babel-preset-es2015

WORKDIR /usr/src/app/bin

CMD ["./start.sh"]

根目录下.dockerignore文件的默认内容如下：

datas
logs/*
node_modules/
test/
*.md
README.md
docker-compose.yml
docker-compose.override.yml2
Dockerfile*
install.sh
.gitignore
.dockerignore
LICENSE
JS_FIlE_TEMPLATE.webstorm10

如果有其它在开发过程中添加的文件或目录，不需要打包在发布镜像里的请在.dockerignore文件里修改。

  • 开发推送镜像到蜂巢

  1. 镜像打标签

    docker tag project.version registry.hz.netease.com/project.version

  2. 推送镜像到蜂巢

    docker push registry.hz.netease.com/project.version

目前只杭州办公区域开放权限。

  • 开发在蜂巢运行镜像

  1. 开发在蜂巢创建自定义镜像

    选择镜像仓库，填写镜像名称： project，镜像标签： verion， 选择Dockerfile文件

    这里的Dockerfile文件内容很简单，一条语句：

         FROM project:version

  2. 开发创建服务

    开发在蜂巢选择『创建服务』，选择对应的生产镜像，通过环境变量注入测试用的RDS连接配置文件，日志挂载目录等，由蜂巢完成负载均衡和集群的部署。

  • 开发通知QA进行测试

开发通知QA相关测试地址后，QA进行测试。

发布上线

QA测试通过后，开发在蜂巢选择『创建服务』，选择对应的生产镜像，通过环境变量注入生产用的RDS连接配置文件，日志挂载目录等，由蜂巢完成负载均衡和集群的部署。

更新运行环境

假如升级Node或babel的版本:

运行环境的基础镜像的Dockerfile如下:

FROM registry.hz.netease.com/node:6.1.0

RUN npm install -g cnpm --registry=https://r.cnpmjs.org

RUN cnpm install babel@7.1.18 -g

生成新镜像:

docker build -t easynode:0.0.3  .

推送新镜像到蜂巢:

docker tag registry.hz.netease.com/easynode:0.0.3 easynode:0.0.3

docker push registry.hz.netease.com/easynode:0.0.3

开发重做[拉取开发基础镜像][开发制作镜像][开发推送镜像到蜂巢][发布上线]四步，就能在蜂巢一键更新测试、生产环境至最新镜像，各环境做到不停服.

扩容

开发在蜂巢选择『扩容』指定扩容目标，自动完成扩容

发布回滚

开发选择过去某个版本的生产镜像即可，先开启老版本镜像服务，再停止新镜像服务，不停服，

将来

  • 镜像提交权限管控
  1. 提交镜像需要用户登陆，镜像和用户绑定
  2. 提交镜像对外部用户开放
  • 一键部署功能
  1. easynode deploy project:version config.json 发布到蜂巢并运行
  • 弹性服务

根据系统负载能够实现自动扩缩容