新员工培训（前端）

1、产品技术架构

一、动静分离概念：静态网页直接访问Tengine（基于Nginx，反向代理），简单的来讲是为了减小服务器的负载，静态网页直接访问nginx,而出现数据请求时才访问服务器，作到动静分离。

二、CDN：内容分发网络，使用户可就近取得所需内容，解决 Internet网络拥挤的情况，提升用户访问网站的响应速度。好比服务器在杭州，远在中国的另外一头的地方要访问服务器，若是直接访问其响应速度会很慢，所以把项目不直接放在服务器上，而是放在CDN上。

三、先后台架构：有一个概念叫服务器渲染，将jsp页面请求提交，服务器会将页面渲染成html文件，缺点就是不可以局部刷新页面，所以出现了ajax。

 

四、SPA：单页面应用，浏览器一开始会加载必需的HTML、CSS和JavaScript，全部的操做都在这张页面上完成，都由JavaScript来控制。所以，对单页应用来讲模块化 的开发和设计显得至关重要。传统的网站页面的跳转须要通过路由，单页面则不须要。以下图实现先后端彻底分离，组件化开发。与后台通信经过ajax

 

五、nodejs(包，npm,webpack)是开发环境，前端是生产环境。

2、技术栈

一、MVVM:Model-View-ViewModel

二、AngularJS

• 优势：推出最先，比较成熟
• 缺点：总体架构过于厚重，学习成本很高

三、ReactJs

• 优势：有REACT NATIVE加持，能够助力APP开发
• 缺点：函数式编程过于复杂，不利于推广使用

四、VueJs

• 优势：强大而简洁api，开发效率极高
• 缺点：使用者较少，生态不够繁荣

公司使用vue

五、vue技术栈：Vue.js，Vue-router，Vuex，webpack，es6

(1)、vue.js：

1. API简洁高效，开发效率极高
2. 完整的技术栈，支持完整的前端开发体验
3. 优异的组件化机制，很容易编写自定义的组件
4. 文档清晰，简单易学

(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。

3、开发流程

一、基于Scrum的敏捷开发流程

二、先后台分离的开发模式

三、其余敏捷实践

• 重构
• 代码评审

4、工具
一、自主研发的集成开发测试平台

灵感

• 先后端分离后，加大了沟通成本，api变动后没法及时通知对方
• 联调很是困难，常常须要作大量修改才能调试经过
• 前端后端进度不一致，须要互相等待对方的开发成果
• 测试用例编写太痛苦，很难坚持

功能

• api定义
• 提供前台开发的mock结果(mock.js)
• 提供后台开发的调试工具
• 基于API的测试用例管理
• 测试管理维护
• 参数校验：前端API有效性的校验，若是API发生改变了，会出现错误警告。
• GIT集成：利用gitlab hook，每次提交git后，只要在comment中写上[deploykey:api_findbyid]关键字后，即会自动从GIT拉取代码并部署到测试平台，自动运行相应的测试用例。
• 每日自动测试：能够设定天天的触发时点，到点后自动全量运行全部测试用例。
• 邮件提醒：API会绑定相应的开发人员，任意人维护API后，会邮件通知相应的开发人员。

二、Scrum工具：Tapd

三、git工做流

Git版本分支管理

feature：每一个功能开始后，开发人员新起一个特性开发分支，开发差很少的时候要合并回develop去。从不与master交互

develop：合并各开发人员的feature分支，发布到demo上进行测试。

release：老是基于develop，最后又合并回develop。固然对应的tag跑到master这边去了。生命周期很短，只是为了发布。

hotfix：老是基于master，并最后合并到master和develop。生命周期较短，用了修复bug或小粒度修改发布。

master：没有什么东西，仅是一些关联的tag，因从不在master上开发。

四、vue-devtools

强烈推荐安装vue devtools chrome插件，能够查看vue和vuex数据
五、sublime

• Package Control：Install Package，安装vue相关的插件
• 修改tab键为两个空格：
• 打开Preference-user，增长下面的配置项

　　　　{        　　　　“tab_size”: 2,        　　　　“translate_tabs_to_spaces”: true　　　　}