工程化即系統化、子產品化、規範化的一個過程。
如果說計算機科學要解決的是系統的某個具體問題，或者更通俗點說是面向編碼的，那麼工程化要解決的是如何提高整個系統生産效率。
與其說軟體工程是一門科學，不如說它更偏向于管理學和方法論。
工程化解決的問題是，如何提高編碼、測試、維護階段的生産效率。
前端Front-end和後端back-end是描述程序開始和結束的通用詞彙。
前端作用于采集輸入資訊，後端進行處理。計算機程式的界面樣式，視覺呈現屬于前端。
前端對于網站來說，通常是指，網站的前台部分包括網站的表現層和結構層。
是以前端技術一般分為前端設計和前端開發，前端設計一般可以了解為網站的視覺設計，
前端開發則是網站的前台代碼實作，包括基本的HTML和CSS以及JavaScript/ajax，現在最新的進階版本HTML5、CSS3，以及SVG等。
__
适合小項目，不分前後端，頁面由JSP、PHP等在服務端生成，浏覽器負責展現。
為了降低複雜度，以後端為出發點，有了Web Server層的架構更新，比如Structs、Spring MVC等。
前端開發重度依賴開發環境。
前後端職責依舊糾纏不清，可維護性越來越差。
2005年Ajax正式提出，前端開發進入SPA（Single Page Application 單頁面應用）時代。
前後端接口的約定。
前端開發的複雜度控制。SPA應用大多以功能互動型為主，大量 JS 代碼的組織，與 View 層的綁定等，都不是容易的事情。
為了降低前端開發複雜度，Backbone、EmberJS、KnockoutJS、AngularJS、React、Vue等大量前端架構湧現。
随着Node.js的興起，為前端開發帶來一種新的開發模式。
業界比較出名的實踐是，阿裡巴巴的中途島計劃。
前後端職責很清晰。
前端開發的複雜度可控，通過合理的分層，讓項目更可維護。
部署相對獨立，産品體驗可以快速改進。
統一團隊成員的編碼規範，便于團隊協作和代碼維護
目錄結構，檔案命名規範
編碼規範：eslint, stylelint
開發流程的規範
使用靈活，增強開發進度管理和控制
應對各項風險，需求變更等
code review 機制
UAT 提升釋出的需求的品質
前後端接口規範，其他文檔規範
使用 git 版本控制工具
Git分支管理
Commit描述規範，例如：task-number + task 描述
建立 merge request，code review 完畢之後方可合并代碼
目标： 職責分離、降低耦合，增強代碼的可讀性、維護性和測試性。
采用子產品化的方式組織代碼
JS 子產品化：AMD、CommonJS、UMD、ES6 Module
CSS 子產品化：less、sass、stylus、postCSS、css module
采用元件化的程式設計思想，處理 UI 層
react、vue、angular
将資料層分離管理
redux、mbox
使用面向對象或者函數程式設計的方式組織架構
js設計之初，主要用于處理簡單的頁面效果和邏輯驗證之類的簡單工作。
被過于随意的設計，缺乏子產品化一直是其缺陷之一。
随着單頁應用與富用戶端的流行，不斷增長的代碼庫也急需合理的代碼分割與依賴管理的解決方案，這就是我們在軟體工程領域所熟悉的子產品化。
子產品化主要解決的問題：解決代碼分割、增強維護性、提高代碼重用、作用域隔離、子產品之間的依賴管理、釋出的自動化打包與處理等多個方面。
直接聲明依賴（Directly Defined Dependences）
命名空間（Namespace Pattern）
子產品模式（Module Pattern）
依賴分離定義（Detached Dependency Definitions）
沙盒（Sandbox）
依賴注入（Dependency Injection）
标簽化子產品（Labeled Modules）
CommonJS、AMD、UMD、ES 2015 Modules
除了備注描述，什麼問題都沒解決
命名空間模式始于2002年，使用特殊的約定命名，用于避免命名沖突和全局作用域污染。
缺點：大型項目可維護性較差，沒有解決子產品間依賴管理的問題。
封裝了變量和function，和全局的namaspace不接觸，松耦合
隻暴露可用public的方法，其它私有方法全部隐藏
2009年 Angular 引入 Java 世界的依賴注入思想。
核心思想：某個子產品不需要手動初始化某個依賴對象，隻需要聲明該依賴，并由外部架構自動執行個體化該對象，并傳遞到子產品内。
伺服器端 javascript 子產品化解決方案，适用于同步子產品加載。
浏覽器端 javascript 子產品化解決方案，适用于異步子產品加載。
UMD 允許在環境中同時使用 AMD 與 CommonJS 規範。
ES2015 Modules 作為 JavaScript 官方标準，日漸成為了開發者的主流選擇。
采用tdd的程式設計思想，引入單元測試
karma + mocha + chai、jest、ava
使用各種調試工具
web devtools、finddle
使用前端建構工具
gulp、grunt、Broccoli
javascript 編譯工具
Babel、Browserify、Webpack
開發輔助工具
資料 mock、livereload
使用CI內建工具
jenkins、Travis CI
使用腳手架工具
yeoman、create-app
統一公司前端技術棧，根據職責建立不同項目。
kryfe-boilerplate 腳手架項目
kryfe-tools 通用工具庫
kryfe-lib 通用類庫
kryfe-component 公共元件庫
eslint-config-kryfe eslint規範
stylelint-config-kryfe stylelint規範
kryfe-docs 各種規範文檔
kryfe-style PC端樣式庫
<a href="http://www.cnblogs.com/ihardcoder/p/5378290.html">淺析前端工程化</a>
<a href="https://github.com/fouber/blog/issues/10">前端工程——基礎篇</a>
<a href="https://blog.coding.net/blog/frontend-engineering">前端開發工程化探讨--基礎篇</a>
<a href="http://www.cnblogs.com/lhb25/p/web-development-mode-evolve.html">前端文摘：Web 開發模式演變曆史和趨勢</a>
<a href="http://mp.weixin.qq.com/s/3eiK4liZY_BvncNqyLTgnA">JavaScript 子產品演化簡史</a>