《前端技術架構與工程》初次筆記
前幾天買的書昨天到了，今天閒來看看。發現內容很對我口味。
購書原因
它山之石可以攻玉，書本是每一個大佬的心血（灌水的那些除外），值得反覆閱讀。
補充：買書的時候也像是撿漏，說不定撿到金子，也說不定買到不合意的。不過如果能買到一本稱心的書，其他都是值得的。
所以我學習的時候不僅自己寫筆記還看牛逼的人寫的筆記。因爲自己寫筆記是探索，雖然學得很深刻，但是就像是走迷霧模式的地圖，要把所有的路都走遍了，才能找到正確的路。而看牛逼的人寫的筆記就像是跟着人走地圖，也許不太懂，但是走着走着就走到終點了。
我買書前一般都是衝着學以致用的目的買書，買這本書之前我想着把前端的相關部分都彙總一下，然後哪些地方需要深入瞭解再深入瞭解。可是彙總的過程有許多細節，如響應式、安全、優化、閉包等等都沒彙總滿意（前後因果關係沒捋順），而且這個過程還是未知、不繫統的。
遂趁着我買書的時候，看看前端相關的書，如前端架構、前端面試、前端入門。然後借鑑別人寫好的內容補充自己的內容，免得自己在網上慢慢找。
購書過程
買書的關鍵點：書的目錄（可以看出書的大致內容）、書的作者或名氣（厲害的作者大概率寫的 是好書）、書的出版時間（防止書的內容過時）
理論書、基礎書的購買偏向於買老書，老書的好處是思想經得起考驗，缺點是有些內容可能過時。不過用來入門以及溫故很好。
實戰書和前沿的書偏向於買新書，新書的好處是最新的，缺點是質量沒有保障。用來參考很好。
我買的是新書。內容是前端架構、前端面試之類的書，這些書會全面把前端的東西彙總。
首先在淘寶上搜“前端”，然後就有書推薦。
接着看看書的目錄、作者、出版時間、購買數就可以確定買哪些書。書的目錄可以大致瞭解書的內容，書的作者可以大致從側面體現書的質量，熟讀出版時間和購買數則是看書過時嚴不嚴重。
最後搜索這些書，選擇價格合適的就下單。
目錄結構：不算特別能理解，但是裏面有我想要了解的點；
作者：前端工程師，現就職與騰訊；
出版日期：2020年1月第一版
閱讀體驗
購書之前不知道內容，都是看目錄結構、作者和購買數來下的單，不過三本中還好有兩本我滿意，最滿意的就是這本。裏面把前端開發整個流程的每個細節都點到了，而且還講明白了前因後果。
閱讀筆記
不一定按照書的目錄來，會把自己覺得重要的點和理解的知識結構來寫。有些地方還會加以補充。
前置知識：軟件工程（需求分析、系統設計、系統開發、系統測試、系統運維）
沒有什麼知識是沒有無中生有的，前端架構我覺得脫胎於軟件工程，或者說工程思想貫穿着每一種開發（無論是軟件開發、網站開發、土木建設），前端架構中有工程思想。
這本書可以補充自己對架構師的認識。雖然自己水平不夠，但是可以瞭解瞭解，對於開發也是十分有幫助的。而且自己單獨做小項目的時候，用架構師的知識去設計架構，更有利於自己開發。
這本書的核心：以業務爲出發點，架構聚焦於代碼，工程聚焦於流程。
第一章 緒論
說起前端，我就覺得很有必要說一下前端的發展史，下面這段發展史是我之前寫過的一篇文章的一部分：
前端發展史
網頁的開始
（靜態網頁時代）：最初的網頁是歐洲粒子物理研究所的科學家爲了方便查看共享文檔和論文，而基於XML語言開發的（我之前還以爲先有HTML後又XML，XML是對HTML的補充）。所以前端開發的全局對象是document。當時網頁只具備文本圖片的顯示以及頁面的相互跳轉hyper link（注意沒有表單，因爲表單涉及交互）。最初的web，功能單一，開發不復雜。科普：1990推出HTML；
侷限性：有時候只是一部分內容需要改變也需要重新準備一個文檔，而且還不能交互。
（動態網頁時代）：這個時候PHP、jsp等閃亮登場，使前端網頁從靜態走向動態。這個時候網頁就可以後端腳本語言修改HTML文檔的內容，避免哪怕是一點內容改變就需要新建一個網頁。同時也實現了交互。
科普：1995年推出PHP；1996年推出CSS；1997年推出JS；
侷限性：哪怕改變網頁的一小塊內容，瀏覽器也需要重新請求和渲染整個頁面。這就導致頁面重載巨卡；體驗十分扎心。
網頁的少年時期
（ajax網頁時期）：從1999年開始，ActiveX和XMLHttpRequest的陸續問世，ajax閃亮登場。ajax（異步JavaScript和XML）通過XMLHTTPRequest對象，可以在不重載頁面的情況下與web服務器交互數據，再JavaScript的document對象，開發者就可以通過ajax實現網頁頁面局部內容刷新。這使得網頁修改一小塊內容，（由於是異步）瀏覽器響應更快，比之前的體驗happy些；科普：2005年ajax開始流行；
侷限性：雖然沒有巨卡，但是前後端沒分開，每個程序員都是全棧工程師，即搞業務邏輯又搞頁面表現；新的問題就是開發效率。頁面的 HTML還是通過套模板的方式生成：美工生成HTML模板，程序員用jsp等技術把動態內容添加上去；
（模塊化開發）：2011~2014年，模塊化思想佔主導。2011年，阿里有一款TMS的產品，可以用模塊化搭建的思路解決了頁面批量生產的問題，當時淘寶商城的雙11的活動頁面用這款大殺器搭建完成。當時比較流行的模塊化協議有KMD（以Kissy爲主）、CMD（sea.js爲代表），KMD主導了淘寶天貓、Kissy應用，CMD主導了支付寶及外部社區。玉伯在當時前端圈名氣高；
還有許多細節，我就不一一贅述了。
網頁的現在
（前端工程化）：2009基於Google v8引擎創建的web服務器node.js誕生；npm、webpack；（前後端分離）：2013年5月，react推出。隨着大家對瀏覽器頁面的視覺和交互要求越來越高，套模板的方式已經無法滿足需求，表現層開始慢慢遷移到瀏覽器中，一大批react.js、vue.js的框架崛起，前後端分離了。後端工程師只負責提供接口和數據，專注業務邏輯的實現。前端取到數據後就在瀏覽器中展示。
科普：ajax實現了無刷新的數據交互、前端路由實現了無刷新的頁面跳轉。ajax將web page發展成web app，而前端路由給web app增加了更多可能，如單頁面應用。
（終端碎片化）：移動端瀏覽器的發展；小程序；
（領域細分）：小前臺（面向消費者端的web與輕APP業務場景）、中後臺（面向企業OA等業務場景）、數據可視化、web新的衍生（AR、VR、3D、網友、直播、富導購等）；
網頁的未來五年
我也不知道啊，但是肯定是效率上、功能上或者安全上的提升。往性能更好、開發運維更簡便的方向上走。同時前端的發展不能只關注網站，其他硬件領域的（量子計算機、5G等）、軟件方面的（VR、AI、大數據）都需要關注，畢竟都是相互聯繫的。
瞭解前端發展史，然後瞭解一下軟件工程的必要性。
軟件工程
軟件工程出現的初衷是爲了解決軟件危機，即1已完成”的軟件，不滿足用戶的需求；2進度不能保障；3開發成本難測；4質量沒有保證。
在大學裏學習軟件工程這門課的時候，我更關注軟件工程的生命週期即分析、設計、開發、測試、運維。結果我在做畢業設計的時候就把上述的四個軟件危機全犯了，於是才更深地理解軟件工程重要的不是設計，而是落實。所以在這裏也重申一下。
解決軟件危機的方法就是將系統化的、規範的、可度量的方法應用於軟件的開發、運行和維護過程。同時做到①用分階段的生命週期計劃嚴格管理②堅持進行階段評審③實行嚴格的產品控制④採用現代程序設計技術⑤結果應能清楚地審查⑥開發小組的人員應該少而精⑦承認不斷改進軟件工程實踐的必要性。
軟件架構
軟件架構和軟件工程的概念是有區別的。架構強調的是強調軟件系統的設計方法論和實施模式，具體到做一個網站的時候，架構師做的是一個組長的角色，做的工作是把框架搭好，組織其他人員做架構以內的細節部分 ，如前端、後端、測試、運維。
工程學的核心是結合實際情況建立科學的、規範的設計和生產流程，降低生產成本，把這理念帶入軟件開發領域便形成了軟件工程。
這本書的核心：以業務爲出發點，架構聚焦於代碼，工程聚焦於流程。
代碼和流程是軟件工程的核心關注點。從代碼的角度考慮，工程的模板是保證軟件的高可用性、可擴展性、可伸縮性、性能以及安全，這些要素共用組成了軟件的技術架構；在架構之外，工程從更宏觀的角度完善開發和運維流程的管控，強調項目迭代的規範性、有序性、可控性和高效性，並更加架構特徵提供額外的輔助功能，也就是說，架構是工程的子集，其關係是（工程（架構（業務）））。
爲了便於區分和理解，本書將前端工程化中架構之外的部分稱爲前端工程服務體系。如此得出前端工程化的定義：前端工程化=前端技術架構+前端工程服務體系。
開發Dev與運維Ops
在前幾年，許多公司在技術團隊的組織架構劃分秉承研發與運維分離的原則，即負責業務設計（產品經理、設計師）、開發（工程師）、測試（測試員）的崗位組成應用研發團隊，而負責部署和發佈（運維師）的崗位獨立爲線上保障團隊。
項目經過需求設計、交互設計、開發以及測試後，開發人員將項目代碼遞交給運維人員，遞交方式是將壓縮包通過QQ或郵件直接交付。運維人員收到代碼的時候將項目文件進行部署和發佈，同時還負責服務器預警處理以及版本回滾。
將開放與運維分離的目的是保證線上的穩定性，開發人員不直接接觸生產環境，可以減少很多人爲失誤導致的低級錯誤。同時可以建立固定的上線週期。但是缺點是影響迭代的自由度。
故DevOps模式開始崛起，目標是實現軟件開發、測試和發佈的敏捷性和持續化。
前端架構師的職責
根據前面對前端工程化的定義，前端架構師的職責可以概括爲兩方面：
- 根據業務特徵設計合理的前端技術架構。
- 根據架構特徵搭建高效的前端工程服務體系
這本書的核心：以業務爲出發點，架構聚焦於代碼，工程聚焦於流程。
技術架構方面從五個部分講：編程語言、技術規範、組件化、前後端分離、性能；
工程服務體系方面從五方面將：開發、構建、測試、部署、持續化、監控與統計
成本控制（時間成本、生產成本）是工程的核心關注點。具體到實際工作中，成本細分爲人力成本和溝通成本。前端工程服務體系的目標是：降低開發本身所消耗的人力成本；降低跨團隊協作消耗的溝通成本。
初次閱讀的總結
此篇博客未完結，其後面還有兩篇，一篇講技術架構的（編程語言、技術規範、組件化、前後端分離、性能）；一篇講工程服務體系（工程思維與服務支撐、DevOps與Serverless）
本人才疏學淺，許多內容請辯證理解。後期會不斷迭代更新。
更新地址：GitHub