者｜Tobias Merkle

譯者｜無明

判斷一個公司是否開始走下坡路，最可靠的一個方法是看看隨著時間推移，它的產(chǎn)品所提供的效用的變化情況。蘋果公司在發(fā)布 iPhone 時，它的平均產(chǎn)品效用大幅上升，這種趨勢持續(xù)了一段時間，但當他們開始取消 3.5mm 耳機插孔等重要功能時，這種趨勢進入了一種穩(wěn)定狀態(tài)。一般來說，大多數(shù)公司都會經(jīng)歷這種效用的 S 曲線或拋物線曲線：前者通常會找到自己的利基市場，并且在沒有創(chuàng)新的情況下獲得豐厚的利潤，而后者設(shè)法將事情搞砸，讓自己的產(chǎn)品陷入混亂。

Angular——慢慢念出這個單詞，你會感覺喉嚨都會因為這個單詞的可怕的形狀而發(fā)生扭曲，這種形狀代表了丑陋、尖銳和虛偽。

將這三個單詞與它們的形狀相對應(yīng)時，你會看到 Angular 是多么扭曲

在這篇文章里，我將告訴大家，這個惡魔是如何給我的心靈帶來各種不同的創(chuàng)傷的。這個惡魔就是谷歌的心血結(jié)晶：Angular。

文 檔

你是否也有過類似的經(jīng)歷：你有一個很好的想法，想要把它作為周末項目，你從周六下午開始，然后意識到這個項目至少需要六個月才能完全實現(xiàn)？在谷歌對 Angular 內(nèi)部工作進行文檔化時就經(jīng)歷了這樣的時刻。他們把這個工作交給了一個實習生，這個實習生在喝了幾個禮拜的濃縮咖啡后，終于搞出了一個 Hello World 代碼，并把它作為完整的項目文檔。

但這個文檔并沒有列出任何在使用 Angular 構(gòu)建 Web 項目時可能會遇到的錯誤。實際上，你需要的設(shè)計模式或核心概念很少出現(xiàn)在這個文檔中。如果你想要學會如何使用 Angular 構(gòu)建一個工具，不得不去購買在線課程，而這些課程會告訴你所有的真相。如果你天真地以為，你可以像 React 或 Vue 開發(fā)人員那樣，馬上就可以開始編寫簡單的 JavaScript，那就大錯特錯了！

Angular 的文檔看起來更像是一個函數(shù)，我可以使用下面的偽代碼來表示。

有沒有發(fā)現(xiàn)，在修復錯誤時，你必須將搜索關(guān)鍵字中的“angularjs”排除掉，你不能指望使用“Angular”就可以排除掉這個框架的第一個版本的內(nèi)容。

接下來，在你閱讀了足夠多的 Stack Overflow“解決方案”之后，你開始意識到，在你的代碼和運行在瀏覽器上的代碼之間，不僅存在被編譯器破壞的 CSS，當中還有一個黑盒，要求你以某種方式格式化你的應(yīng)用程序，否則整個項目就會失敗，或者更糟糕的是，出現(xiàn)不正確的錯誤信息。當 Angular 告訴你你做錯了什么，你卻不敢相信了，因為它甚至都不知道它自己的系統(tǒng)是如何工作的。

Angular 的開發(fā)體驗就是這樣的。你先是全速向前沖，在撞了幾次墻之后，你學會以蝸牛的速度爬行，慢慢摸索這個框架可能拋出的任何問題。在這個世界上，沒有什么比試圖操作這個世界上據(jù)稱最聰明的公司排泄出的這個可怕和喜怒無常的裝置更令人沮喪的了。

請想象一下一輛不能打開引擎蓋且只有一個儀表盤的汽車。要是汽車壞了都沒辦法修理，只能換新。汽車在沒有啟動的情況下也會往外噴氣。廠家也不提供服務(wù)手冊。如果你想知道它的工作原理，這里有一本 5,280 頁的裝配指南，拿去吧，祝好運！

架 構(gòu)

Angular 開發(fā)效率很低，開發(fā)一個應(yīng)用程序需要很長時間，而一旦你的應(yīng)用程序變得比“Hello World”更復雜時，開發(fā)速度就會變得更慢。如果 Angular 能夠為用戶或程序員帶來更多好處，例如在發(fā)生運行時錯誤時正常退出，或者更快的編譯速度，或者提高應(yīng)用程序安全性的，這些都是可接受的。但 Angular 并沒有這么做。事實上，只要一提到“Uncaught TypeError”，開發(fā)者們就會崩潰成堆。

基本上，想要知道 Angular 在做什么，唯一方法是閱讀 Angular 開發(fā)人員在 GitHub 上提供的數(shù)百萬行源代碼。因為沒有人會去這么做，所以 Angular 勉強提供了一兩種設(shè)計模式用來構(gòu)建完整的應(yīng)用程序。你唯一的另一個選擇就是讓自己沉浸在學習 Angular“工作原理”的狂熱之中。

我可以告訴你它的工作原理。組件與服務(wù)通信，通過應(yīng)用程序?qū)氲哪K將數(shù)據(jù)中繼到其他注入組件中。還有什么不清楚的？如果你需要進一步的解釋，請參考 Material Design 指南。它為你提供了所有必要的組件，而且請務(wù)必保證你的設(shè)計是像素完美的。這應(yīng)該很容易吧，因為 Material 和 Angular 都是由谷歌設(shè)計的，它們應(yīng)該可以很好地協(xié)同工作。當列表項的填充占據(jù)了網(wǎng)頁的三分之一，并且打開下拉菜單需要十六秒，這種感覺很棒吧？

Angular 的設(shè)計沒有哪一部分是為了讓你的代碼運行得更快。它只帶來了三個東西：膨脹的復雜性、完成一個簡單功能需要更長的時間，以及為你和團隊提供更好的工作保障（如果你們能夠日復一日地寫出意大利面代碼而不會發(fā)瘋）。

Angular 的 Web 開發(fā)體驗

打開你的 IDE，輸入 IntelliJ IDEA 許可密鑰，選擇用于“Lint”你的 TypeScript 代碼的“Linter”類型。Angular 使用的是 TypeScript，也就是帶有類型的 JavaScript。看到了嗎，你必須使用與 TypeScript 兼容的 IDE。TypeScript 會出新版本，會破壞你現(xiàn)有的代碼和依賴項中的代碼，這是預料之中的，而這就是生活！

如果你的依賴庫對你從未使用的類的某個屬性做了修改，造成了重大變更，請不要驚慌。你只需要為每個構(gòu)建過程添加手動文件編輯步驟即可，或者，你也可以停留在某個兼容版本，并放棄所有未來可能出現(xiàn)的改進。感謝你選擇 TypeScript 和 Angular。

Angular 可以幫你將假的 HTML 元素混合到真實的 HTML 元素中，他們用冒名頂替的東西污染了真正的規(guī)范。在創(chuàng)建 HTML 文件域時，請記得使用 Angular 的標記語言，其中包含的指令會讓你的代碼在調(diào)試時變得更加違和。你甚至可以編寫自己的指令。所有這些高級的 Angular 風格的 HTML 都讓跟蹤源錯誤變得比任何其他庫、框架或編碼環(huán)境都要難。它們會向你提供不正確的錯誤消息。在花了數(shù)天時間查找是否遺漏了某個標簽的結(jié)束標記之后，你才意識到錯誤實際上隱藏在條件和神秘的導入指令深處的某個地方。

此外，你還有足夠的時間考慮是否繼續(xù)使用這個漂亮的框架，因為每次你修改了任何一小部分 HTML 都需要重新編譯整個應(yīng)用程序。熱加載只是個嬰兒玩具，對于應(yīng)用程序中稍微復雜一點的東西，你都需要等上 60 到 300 秒，哪怕是在一個彈出窗口中為某個元素添加一個 HTML 類。你的很多時間消失在虛空之中。你的很多時間花在查看控制臺的消息：“92% chunk asset optimization”上。

被谷歌的悲觀編程思維奴役一年之后

Angular 讓我成為一個更好的程序員，因為它教會了我如何在站在火山口的同時還能開發(fā)出可運行的應(yīng)用程序。我所做的任何事情都需要走一大段彎路，它們比將數(shù)據(jù)對象 A 粘附到顯示元素 B 的最簡單的解決方案要復雜得多。你的 Angular 應(yīng)用程序中的任何一個錯誤都將導致其余部分出現(xiàn)意外的行為。我們最終實現(xiàn)了一個系統(tǒng)，應(yīng)用程序會在每次發(fā)現(xiàn)未捕獲的錯誤時重新加載頁面，因為這樣最簡單不過了，不需要去判斷這個錯誤是 Angular 本身的錯誤還是因為其他錯誤導致的。

Angular 知識將在我的余生與我如影隨形，我根本沒有辦法擺脫它，它就像強力膠一樣粘在我的身上，就像天然乳膠一樣徹底堵塞了我的腦洞。如果我要養(yǎng)活家人，我別無選擇，只能繼續(xù)作為一個 Angular 開發(fā)者。但仍然還有其他希望，有一天，我可能會加入其他使用其他框架的項目（如 React 或 Redux 或 Vue）。但是，現(xiàn)在我必須繼續(xù)戰(zhàn)斗，緊緊抓住記憶里尚未被谷歌入侵的領(lǐng)地，抵抗谷歌的進一步入侵。我們活著，為的是迎接新的一天。

我現(xiàn)在在 Whiteboard Dynamics 工作，不需要經(jīng)常花很多時間在拷貝 Angular 代碼上，也不需要經(jīng)常花時間開發(fā)每三個月就要重寫一次的代碼。但如果客戶提出要求，我們還是會用 Angular 開發(fā)一些東西——正如我所說的，我無法打破這個詛咒——但請相信我：你最好還是選擇人們會喜歡使用的開發(fā)庫。因為這些庫只會花費你更少的時間和金錢，而且可以保持你的靈魂永生。

英文原文

https://hackernoon.com/why-angular-made-me-quit-web-dev-f63b83a157af

本文簡單介紹了Angular的核心概念與演進過程，從七大核心概念看其背后的設(shè)計亮點，通過分析Angular 從框架到平臺演進的過程來觀察其發(fā)展趨勢。方便讀者對Angular有個直觀的全局認識。

核心概念

Angular 框架有七大核心概念，它們是Angular 的重要組成部分。

1. 模塊

在Web 開發(fā)中，通過依賴全局狀態(tài)或變量和保證JavaScript 文件引入順序來正確加載相應(yīng)的類庫。比如：$ 代表jQuery，在引入$.superAwesomeDatePicker 類庫來實現(xiàn)日期選擇控件前，需要確保jQuery 已經(jīng)正常載入。隨著項目中的程序越來越大、文件切分越來越細，就會需要一個成熟的模塊系統(tǒng)來幫助管理項目文件的依賴關(guān)系。在新的語言標準ES 6 中，提供了import 來導入在其他文件中定義的模塊，且用export 將諸如jQuery 或moment 這樣的依賴導出到業(yè)務(wù)代碼模塊中。

2 . 指令與組件

在Angular 中，指令是一個極其重要的概念。指令可以為特定DOM 元素添加新的行為特征，從而擴展元素的功能。指令與HTML 元素屬性的使用方式非常相似，但指令的可自定義特性在一定程度上彌補了HTML 元素屬性功能的不足，這也為多樣的Web前端開發(fā)創(chuàng)造了更多的可能性。

實際上，組件是指令的一種類型。以組件為基礎(chǔ)的架構(gòu)模式是現(xiàn)在Web 前端開發(fā)的主流方式。不僅僅在Angular 中，在類似的React、Ember 或Polymer 等框架中也是很常見的。這種開發(fā)方式就是構(gòu)建一個個小的組織代碼單元，每個代碼單元的職責定義清晰，并且可以在多個應(yīng)用中復用。例如：想使用Google 地圖組件，就在頁面引入<google-map pointer="46.471089,11.332816"></google-map> 這樣語義化的標簽。

Angular 全面支持這樣的開發(fā)方式，在Angular 中組件是“一等公民”。伴隨組件而來的是組件樹的概念。一般來說，每個Angular 應(yīng)用都有一棵組件樹，由應(yīng)用組件或者叫頂層的根組件和許多子組件及兄弟組件組成。組件樹是很重要的概念，后續(xù)章節(jié)還會繼續(xù)講解。它有很多作用，比如形象地勾勒出UI 界面的組成，這種樹形結(jié)構(gòu)也體現(xiàn)了從一個組件到另一個組件的數(shù)據(jù)流動，Angular 也依賴組件樹做出合適的變化監(jiān)測策略。

一個博客模塊的組件樹例子如下。

變化監(jiān)測是Angular 在應(yīng)用的數(shù)據(jù)變化后，用于決定哪個組件需要隨之刷新的機制。

3 . 模板和數(shù)據(jù)綁定

當使用組件標簽時，可以通過template 或templateUrl 屬性引入HTML 來描述讓Angular 渲染顯示的界面內(nèi)容。另外，需要數(shù)據(jù)綁定機制來實現(xiàn)把數(shù)據(jù)映射到模板上，或者從模板（如input 控件）中取回數(shù)據(jù)。

4 . 服務(wù)和依賴注入

在Angular 中，如果說組件是用于處理界面和交互相關(guān)的，那么服務(wù)就是開發(fā)者用于書寫和放置可重用的公共功能（如日志處理、權(quán)限管理等）和復雜的業(yè)務(wù)邏輯的地方。服務(wù)可以被共享，從而被多個組件復用。在Angular 中，一個服務(wù)就是一個簡單的類。通常在組件中引用服務(wù)來處理數(shù)據(jù)和實現(xiàn)邏輯。

依賴注入可以幫助應(yīng)用解耦，一般通過對實現(xiàn)服務(wù)的類加上@Injectable 裝飾器，同時把它注冊到Provider（可以在模塊、其他服務(wù)、根組件或需要注入服務(wù)的上層組件中實施），從而將服務(wù)提供給調(diào)用者使用。

平臺簡介

Angular 的項目經(jīng)理Brad 說過，Angular 現(xiàn)在更像是一個平臺，而不是簡單的類庫或者單一的框架。Angular 在技術(shù)架構(gòu)上傾向于平臺化設(shè)計，其跨平臺開發(fā)特性使得周邊生態(tài)圈變得更加繁榮興旺。

Angular 框架核心包含了以下內(nèi)容：

• 依賴注入
• 裝飾器支持
• Zones
• 編譯服務(wù)
• 變化監(jiān)測
• 渲染引擎

其中，Zones 可以獨立于Angular 使用在其他地方，并且已經(jīng)提交給TC39，TC39 也考慮將其納入ECMA 標準中。而渲染引擎也是平臺獨立的，從而可以方便地實施在桌面軟件和原生的移動客戶端中。

在此之上，還有不少其他的外部工具庫，類似于：

• Angular Material，Google 官方的Material 設(shè)計風格的UI 組件庫。
• Angular Mobile Toolkit，它提供工具和代碼技巧來協(xié)助開發(fā)高性能的移動應(yīng)用。
• Angular Universal，用它實現(xiàn)后端渲染，從而加速首屏渲染和實現(xiàn)搜索引擎優(yōu)化等。

除了這些，Angular 周邊也有完善的工具體系：

• Angular CLI 為開發(fā)者提供了工作流自動化解決方案。其功能涵蓋了創(chuàng)建項目、生成組件、配置路由、代碼格式化、啟動開發(fā)服務(wù)器、構(gòu)建測試、運行測試、預處理CSS 樣式和部署前的構(gòu)建，等等。
• 語言服務(wù)采用TypeScript 構(gòu)建，支持IDE 中的代碼補全、語法檢查報錯、定義跳轉(zhuǎn)和方法提示等功能，從而顯著提升了開發(fā)效率和編譯運行前的錯誤發(fā)現(xiàn)。
• Augury（之前叫Batarangle）用于調(diào)試、分析性能和可視化查看應(yīng)用組件樹，是幫助開發(fā)者快速定位問題和調(diào)優(yōu)的工具利器。

當然，為了開發(fā)強大的應(yīng)用，Angular 在功能開發(fā)上也提供了不少輔助模塊，例如：

• i18n 模塊，用于語言國際化、符號時間等本地化。
• 路由模塊，用于構(gòu)建多界面狀態(tài)的單頁應(yīng)用。
• 動畫模塊，提供了基于聲明式的書寫體驗和完善Hook 節(jié)點的功能。
• Upgrade 模塊，Angular 和AngularJS 1.x 不是孤立的，通過Upgrade 模塊（原ngUpgrade）能夠方便地將使用1.x 開發(fā)的應(yīng)用升級到2.0 以上，面向未來編碼。

平臺亮點

以上內(nèi)容先后介紹了Angular 核心概念和Angular 平臺提供的各種各樣的功能，那么Angular 相對于其他前端技術(shù)有什么特點呢？

它擁有超快的性能：

• 優(yōu)化渲染速度，更快地檢測變化，內(nèi)部擁有性能基準的測試框架。
• 對視圖進行緩存，從而實現(xiàn)列表流暢滾動和頁面切換如絲般順滑。
• 首屏加載更快，使用服務(wù)端渲染和小型啟動庫使網(wǎng)絡(luò)加載更快。
• 移動端響應(yīng)大幅度提升，原生支持各種手勢、觸摸等。

其中，Angular 服務(wù)端渲染（Server-Side-Render）會在后續(xù)章節(jié)中進行詳細講解和實踐介紹。

它支持完善流暢的開發(fā)體驗。除上面提到的CLI 工程化的命令行工具、Augury 審查工具和TypeScript 語言服務(wù)外，也包括：

• 官方支持的代碼風格指南和檢查（Lint / Style 工具）。
• 可以快速搭建項目的Yeoman Generator、Webpack Starter 等腳手架。
• 對不同技術(shù)背景的開發(fā)者提供如Dart、ES 5 等其他語言版本的選擇。

它的社區(qū)和周邊也強大多樣。除了上面提到的Material Design UI、Mobile Toolkit，還包括：

• Kendo UI、Onsen UI 2 等UI 庫，提供了多樣化的界面方案選擇。
• ionic2、NativeScript、React Native 等移動端技術(shù)，用來開發(fā)跨平臺的混合或原生應(yīng)用。
• Meteor 等框架，可以用來實現(xiàn)JavaScript 全棧式開發(fā)和高效整合。

不得不說，基于最新Angular 的ionic 變得越發(fā)強大，是用JavaScript 技術(shù)開發(fā)移動應(yīng)用的不錯選擇。同時，利用最新的PWA （Progressive Web App）Web 技術(shù)，能夠幫助我們很好地打造移動版網(wǎng)站。因此，在本書后面會用專門的章節(jié)來講解這兩個熱門話題。這就是你應(yīng)該立即使用Angular 的原因！

在實際項目中，我們可以使用Angular 提供的模塊、組件、模板數(shù)據(jù)綁定、服務(wù)、依賴注入和注解等特性來實施應(yīng)用開發(fā)，Angular 社區(qū)也提供了各種輔助周邊、功能模塊和開發(fā)工具等。這最終形成了性能強勁、開發(fā)體驗完善和社區(qū)周邊強大的Angular。

本文選自《揭秘Angular（第2版）》，獲取詳情點擊“了解更多”

√ 本書為谷歌開發(fā)者社區(qū)官方指定用書，由谷歌Angular技術(shù)開發(fā)團隊作序力薦。

√ 目前市面上*無僅有的基于Angular 4系統(tǒng)全面介紹這一技術(shù)方方面面的書籍。

√ 本書作者團隊從Angular早期版本問世以來即投入生產(chǎn)實踐，積累豐富實戰(zhàn)經(jīng)驗。

√ 首版問世后飽受好評，國內(nèi)一線前端團隊及技術(shù)社區(qū)資深專家集體亮相盛贊。