《Web全棧工程師的自我修養》讀書筆記

爲何我會選擇讀這本書？兩個緣由，一是自己對於全棧的技術很感興趣。倒並非認爲全棧工程師懂的東西多就牛逼哄哄，而是在當前這種先後端分離的大勢之下，先後端開發人員都愈來愈聚焦於本身的領域，而缺少對整站或者整個系統的瞭解，以全棧的視野更容易瞭解技術的全貌。二是由於書評分還不錯，做者是騰訊社交用戶體驗設計部高級UI工程師餘果。

這本書是由做者從連載專欄中整理出來的。按照做者的定義是「輕鬆的技術雜文集」。讀完兩遍以後的總體感受是：提高視野，拓展思惟。

什麼是全棧工程師

一專多長。工程師首先有一個精專的方向，在這個方向上足夠精通以後（高級工程師級別），以此爲突破點去學習更多的知識，增長本身的長處。

在技術上，我一直提倡的是十字型的成長方式，即從水平和垂直兩個方向提高本身的能力。好比我擅長的是javascript，我會去學習jquery、angular等這些有用的js庫，這屬於垂直方向。同時我繼續對node.js、mongodb這類後端技術進行學習，這屬於水平方向。

雖然我以爲這是一個好的學習方法，可是並不能做爲衡量一個全棧工程師的標準。全棧工程師應該是在先後端都有必定專業知識，能獨立開發的程序員，有沒有專精的方向並不重要。即便像下面的被稱做「野生程序員」的開發者，能力模型每項都得60分就應該算合格。

對於那些達不到一專多長，雖然知識面比較廣，可是各方面都只知其一;不知其二的開發者，做者給了一個特殊的稱號：野生程序員。

這個能力模型居然把JQuery單獨列出來了，AngularJS、Zepto.js、Vue.js…都表示很失望~

老闆僱傭一個員工，不是由於他能寫程序，而是由於他能幫助本身賺錢。賺錢的方法有兩種：減小成本，或者增長收入。程序員若是能加快內部系統的運行效率，讓產品製做流程更加順暢，就是減小成本。若是能讓用戶更容易一地購買產品，或者提升服務質量吸引更多用戶，就能增長收入。

嗯，這一點我以爲很重要，使用技術知其然還要知其因此然~

爲何要用JQuery？它的選擇器很強大，操做dom方便。

爲何要用Angular？它的雙向數據綁定再也不須要選擇器，對於CRUD操做頗有優點。

爲何要用Vue.js？它實現雙向數據綁定的同時又是一個輕量級的框架。

技術只是手段，最合適的技術便是最好的技術。不迷信於某個技術，本末倒置，而是爲了解決某類問題而去選擇最低成本的技術，這纔是一個成熟的開發者應有的思惟。

全棧工程師涉及的一些重要技術

HTTP

前端須要關注

• 發出的請求列表

• 每一個請求的開始時間

• 每一個請求從剛開始到結束花費的時間

• 每一個請求的類型

• 每一個請求的狀態嗎

• 每一個請求產生的流量消耗

• 每一個請求gzip壓縮前的體積，以及在本地gzip解壓後的體積

這裏推薦一本書《圖解HTTP》，通俗易懂。

優化策略

• 儘可能減小同一域下的HTTP請求數。域名散列等

• 儘可能減小每個資源的體積。壓縮合並等

HTTP2.0下這種優化就變得沒意義了，不過預估HTTP1.1還將用10年。

後端須要關注

• 提升服務器的請求處理能力。利用nginx等服務器作負載均衡等

• 預防DDoS攻擊。生成靜態頁，利用cdn等

BigPipe是Facebook公司科學家Changhao Jiang發明的一種非阻塞式模型，這種模型能解決兩個問題：

• HTTP3次握手消耗的時間

• 現有阻塞模型中，服務器計算生成頁面須要時間，等服務器徹底生成好整個頁面，纔開始網絡傳輸，網絡傳輸也須要時間。

緩存

服務器緩存

• 使用數據庫緩存和緩存工具，如memcached，注意提升緩存的命中率。

• 再加一層文件緩存。做爲內存緩存的補充，查找優先級：內存緩存 ——> 文件緩存 ——> 數據庫

• 頁面靜態化

瀏覽器緩存

• Expires

• Last-Modified

• Cache-Control

持續集成

版本控制

• SVN。適合企業內部使用

• Git。多用於開源軟件

最佳實踐

• 鼓勵頻繁的提交

• 肯定分支流程

• 定義主幹原則，而且堅守它

• 不要把邏輯的修改和代碼格式化操做混在一塊兒

• 不相干的代碼分開提交

• 保持工做代碼庫的「乾淨」

根據Semver的規範，版本號用小數點分割爲三個數字。好比v3.2.1中3是主要版本號，2是次要版本號，1是補丁。

• 主要版本號：有API變動致使不兼容舊版本的時候使用

• 次要版本號：新增功能，可是向前兼容的狀況下使用

• 補丁：修復向前兼容的bug時使用

全棧工程師的成長途徑

做品集的積累。程序員和設計師的做品集每每是本身的在線我的網站。對於程序員來講，成本最低的一種做品展現方式就是把本身的代碼發佈到GitHub上。

初級前端知識體系

• 對瀏覽器兼容性的瞭解

• 對HTML/CSS/Javascript語法和原理的理解

• 對編輯器和插件的熟悉程度

• 對調試工具的瞭解程度

• 對版本管理軟件的熟悉和應用經驗

• 對前端庫/框架的使用

• 標準/規範

• 中級前端知識體系

• 對代碼質量、代碼規範的理解

• 對Javascript單元測試的熟悉

• 對性能優化的應用和理解

• 對SEO的應用和理解

• 代碼部署

• 移動Web

• 高級前端知識體系

• 代碼架構

• 安全

• 對自動化測試的理解

雖然VPS對於我的開發者來講比較昂貴，但我仍是推薦全棧工程師買一臺VPS，本身玩一玩。理由以下：

• 對於網站的全貌有所瞭解

• 服務器穩定

• 能夠部署本身的環境

• 能夠學習Linux

• 幫助理解HTTP

VPS選擇

• 內存通常是主要瓶頸，建議選擇最少512MB

• CPU是相對沒那麼重要的性能指標

• 硬盤的大小和讀寫速度是關鍵

• 服務商的客戶服務

本身搭建網站是個很費時費力的事，途中會碰到不少問題，確實能夠學到不少東西，適合有精力有興趣的同窗。

全棧工程師擴展技能

設計模式

• 建立型模式。用來建立對象的模式，它對實例化的過程進行了抽象。如單例模式

• 結構型模式。主要解決類、對象、模塊之間的耦合關係。如適配器模式

• 行爲型模式。用來識別對象之間的經常使用腳力模式並加以實現。如觀察者模式

設計原則

• Don’t Repeat Yourself

• 慣例優於設置。開發人員僅需規定應用中不符約定的部分。

• Keep it simple，stupid

• 最少知道原則。減小耦合。

推薦一本書《大話設計模式》

提升工做效率方式

• 閱讀英文資料。英文的技術資料更多。Google的搜索能力很是強。英語世界的語言風格比較嚴謹

• 時間管理四象限。若是您平時沒有作重要的事情，就會發現本身經常在作緊急的事情。

• 消除重複工做。使用工具來無縫銜接已有流程

• 給本身留出不被打擾的時間

• 番茄工做法

• 跨界思考

• 紙上頭腦風暴

• 使用版本控制工具和構建系統

拿工做時長來拼，這仍是體力勞動時代打工者的心態在做祟。

架構模式

• MVC模式（Model-View-Controller）是最有名的一種架構模式。

前端有一種MVVM的模式，熟悉Angular的人都知道~

學習設計

設計的四大基本理論：

• 親密。關係親密的元素要放在一塊兒，關係疏遠的元素則要分開。位置的親密性直接表現出意義的相關性。

• 對其。

• 重複。視覺上使用重複的圖形和元素、線條、顏色等。

• 對比。若是兩個元素不同，就讓它徹底不同，產生視覺衝擊力。

設計工具

• Axure

• Sketch

• Quartz Composer

學習管理

• 在項目最開始作出合理的時間評估

• 根據人員的強項來安排任務

• 喚起團隊對項目成功的渴望

• 保障溝通。理想溝通頻率每週至少兩次。