新员工培训（前端）
一、产品技术架构
1、动静分离概念：静态网页直接访问Tengine（基于Nginx，反向代理），简单的来说是为了减少服务器的负载，静态网页直接访问nginx,而出现数据请求时才访问服务器，做到动静分离。
2、CDN：内容分发网络，使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。比如服务器在杭州，远在中国的另一头的地方要访问服务器，如果直接访问其响应速度会很慢，因此把项目不直接放在服务器上，而是放在CDN上。
3、前后台架构：有一个概念叫服务器渲染，将jsp页面请求提交，服务器会将页面渲染成html文件，缺点就是不能够局部刷新页面，因此出现了ajax。
4、SPA：单页面应用，浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说模块化 的开发和设计显得相当重要。传统的网站页面的跳转需要经过路由，单页面则不需要。如下图实现前后端完全分离，组件化开发。与后台通讯通过ajax
5、nodejs(包，npm,webpack)是开发环境，前端是生产环境。
二、技术栈
1、MVVM:Model-View-ViewModel
2、AngularJS
- 优点：推出最早，比较成熟
- 缺点：整体架构过于厚重，学习成本很高
3、ReactJs
- 优点：有REACT NATIVE加持，可以助力APP开发
- 缺点：函数式编程过于复杂，不利于推广使用
4、VueJs
- 优点：强大而简洁api，开发效率极高
- 缺点：使用者较少，生态不够繁荣
公司使用vue
5、vue技术栈：Vue.js，Vue-router，Vuex，webpack，es6
(1)、vue.js：
- API简洁高效，开发效率极高
- 完整的技术栈，支持完整的前端开发体验
- 优异的组件化机制，很容易编写自定义的组件
- 文档清晰，简单易学
(2)、Vue-router:
是基于vue.js的前端路由组件。使用 Vue.js 和 Vue-router 创建单页应用非常的简单，使用 Vue.js 开发，整个应用已经被拆分成了独立的组件。在使用 Vue-router 时，我们需要做的就是把路由映射到各个组件，Vue-router 会把各个组件渲染到正确的地方。
(3)、Vuex:
Vuex 是一个专门为 Vue.js 应用设计的状态管理架构类似于React的 flux是为了更好的解决在大型应用中共享状态的问题。
(4)、webpack：
Webpack是一款用户打包前端模块的工具。主要是用来打包在浏览器端使用的javascript的。同时也能转换、捆绑、打包其他的静态资源，包括css、image、font file、template等。它的优点就是易用，而且常用功能基本都有,另外可以通过自己开发loader和plugin来满足自己的需求。
(5)、ES6:
ES6是JavaScript语言最新一代版本，带来了很多强大的特性，能够助力前端人员以更加简便的方式完成功能的开发。
(6)、css3:
- Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
- http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html。
- 其他css3的特性使用：比如 calc(100% - 20px)等。
(7)、其他：
- vue-cli：vue初始化的工具。
- vux：前端vue组件。
- awesome-vue：https://github.com/vuejs/awesome-vue。
三、开发流程
1、基于Scrum的敏捷开发流程
2、前后台分离的开发模式
3、其他敏捷实践
- 重构
- 代码评审
四、工具
1、自主研发的集成开发测试平台
灵感
- 前后端分离后，加大了沟通成本，api变更后无法及时通知对方
- 联调非常困难，经常需要做大量修改才能调试通过
- 前端后端进度不一致，需要互相等待对方的开发成果
- 测试用例编写太痛苦，很难坚持
功能
- api定义
- 提供前台开发的mock结果(mock.js)
- 提供后台开发的调试工具
- 基于API的测试用例管理
- 测试管理维护
- 参数校验：前端API有效性的校验，如果API发生改变了，会出现错误警告。
- GIT集成：利用gitlab hook，每次提交git后，只要在comment中写上[deploykey:api_findbyid]关键字后，即会自动从GIT拉取代码并部署到测试平台，自动运行相应的测试用例。
- 每日自动测试：可以设定每天的触发时点，到点后自动全量运行所有测试用例。
- 邮件提醒：API会绑定相应的开发人员，任意人维护API后，会邮件通知相应的开发人员。
2、Scrum工具：Tapd
3、git工作流
Git版本分支管理
feature：每个功能开始后，开发人员新起一个特性开发分支，开发差不多的时候要合并回develop去。从不与master交互
develop：合并各开发人员的feature分支，发布到demo上进行测试。
release：总是基于develop，最后又合并回develop。当然对应的tag跑到master这边去了。生命周期很短，只是为了发布。
hotfix：总是基于master，并最后合并到master和develop。生命周期较短，用了修复bug或小粒度修改发布。
master：没有什么东西，仅是一些关联的tag，因从不在master上开发。
4、vue-devtools
强烈推荐安装vue devtools chrome插件，可以查看vue和vuex数据
5、sublime
- Package Control：Install Package，安装vue相关的插件
- 修改tab键为两个空格：
- 打开Preference-user，增加下面的配置项
{
“tab_size”: 2,
“translate_tabs_to_spaces”: true
}
