所謂全棧 - 《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

　　學習管理

• 在專案最開始做出合理的時間評估
• 根據人員的強項來安排任務
• 喚起團隊對專案成功的渴望
• 保障溝通。理想溝通頻率每週至少兩次。

　　via：yalishizhude.github.io