新員工培訓（前端）

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　　　　}