2019的Angular

寫在前面

做者：Giancarlo Buomprisco
原文地址：The State of Angular in 2019
說明：本人水平有限，在翻譯過程當中不免有理解翻譯不許確的地方，爲避免錯誤引導你們，但願可以指，向你們傳遞正確的觀點和知識。

正文

從最新的特性到您可能錯過的最熱門的主題和趨勢，對當前的Angular作一個詳細的概述

Photo by Guillermo Ferla on Unsplash

每一年的這個時候，世界各地都在舉行會議和活動，咱們被大量的信息轟炸，這些信息很難被消化。
前端世界是一臺永不中止的機器，咱們都知道保持不落後是多麼困難。要看全部的會議內容會花費大量時間，因此，大多數人更偏向在一天的工做以後在辦公室裏看Netflix就變得能夠理解了。
所以，我但願幫你分析大量的信息並在一篇文章中給你一個2019年Angular的概述。
下面就是咱們在這篇文章中要討論的內容：

• Angular的現狀
• 框架的最新特性
• 最新的觀點和趨勢
• 理解一些你在不少地方都看到過卻尚未徹底理解的詞
  提示：使用Bit輕鬆地在項目中共享和重用Angular組件、建議更新、同步更改並做爲一個團隊更快地構建。

  

Angular的使用量不斷增加

根據Angular當前工程經理Brad Green在NG Conf 2019上提供的統計數據，自去年以來，Angular的採用率增長了大約50%！
不能否認的是從老版本Angular1.x升級的工程誇大了這一數據，但這還是一個讓人印象深入的增加。
Angular並不像Svelte 或 Vue那樣增加迅速，也不像React那樣被普遍使用，但可能與你在Reddit和Twitter上看到的相反，Angular正處在一個很是健康的狀態，正在被數以百萬的開發者和團隊使用。

Angular的生態很是龐大和興旺

儘管框架附帶了Angular團隊提供的大量現成工具，但社區仍然提供了很是龐大以及高質量的生態系統。
咱們有不少東西能夠結合Angular一塊兒使用：

• 與不少優秀的工具（例如： Typescript和RxJS）高度集成，隨着這些工具的快速發展，使得Angular也間接受益。
• 不一樣風格的狀態管理庫。
• 代碼質量工具，例如 Codelyzer
• UI庫、組件、指令、管道等等
• 巨大的IDE插件庫
• 測試框架和實用工具庫
• 最後，社區和Angular 團隊提供了關於最佳實踐、引導、事例、書籍、視頻課程等等的豐富文檔。
  在下一部分，咱們將看到咱們在Angular項目中可使用的一些最佳工具的詳細概述。

Angular CLI

升級比之前更容易了

根據 Mart Ganzevles最近的描述，每一年爲5億用戶提供服務的Blueweb項目在一天的工做時間內就從版本7升級到版本8，而當初從版本2升級到版本4則花費了30天。
這進一步證實了Angular CLI是一個多麼偉大的工具，它能夠將咱們的生產力提高到我我的從未體驗過的水平。 很難想象若是咱們如今的工做沒有它會有多困難。

Schematics

Angular Schematics 是一個你天天都在用的特性。好比：我確信你常用ng generate component my-component,這就是被整合在CLI中的一個Schematics。 不過，您可能不知道的是，您能夠經過爲常常重複的代碼片斷建立本身的Schematics來提升工做效率。

Builders

生成器容許您擴展或擴充現有命令。例如：您能夠建立一個構建器來使用Jest和Cypress而不是Jasmine和Protractor來執行測試，或者使用不一樣的Linter。

新的使人興奮的功能

在寫這篇文章的時候，Angular最近發佈的版本8具備各類改進和功能。
沒有什麼能影響咱們如何使用框架，這在大多數時候都是好消息，可是框架的不斷改進，使Angular的項目愈來愈小愈來愈塊，改善了原本就已經很優秀的開發體驗，以及幾乎完整的新渲染器。

差分加載

差分加載的概念比它的名字所表示的要簡單。簡單來講，編譯器會生成兩個打包文件：一種支持擁有全部現代功能特性的瀏覽器，不須要任何polyfill；另外一種支持舊版本的瀏覽器。
最新版本的瀏覽器會加載先進版本的打包文件，須要polyfill的舊版本瀏覽器加載另外一種舊版打包文件。
由於大多數用戶傾向於使用最新的瀏覽器，因此這是一種很大的勝利，咱們只須要將舊版本的打包文件發送給一小部分用戶。

Web Workers

你可能已經據說過Web Workers，因此咱們會省略這部分的介紹。不過，您可能不知道的是，因爲最新版本的發佈，將Web Workers與Angular集成變得多麼容易。能夠查看一下這個文檔。

CDK

CDK是Angular組件團隊發佈的一組工具。他們使用 Angular Material提供了一部分摘要，但在樣式方面不是顯性的。
例如你能夠直接使用：

• Drag and Drop
• Auto-resizable text area
• Overlay for your popups
• Virtual Scrolling

CDK是很是有用的，由於大多數應用程序可使用完成得很好的經常使用功能，而沒必要使用完整、膨脹、特別的組件。Angular Material i很是棒，但你能夠實現你本身的組件只是使用由CDK提供的積木。

Ivy渲染器

Ivy是一個很是使人興奮的新進展中的開發，將做爲第三渲染器被集成在Angular中。如今還沒法使用，由於尚未默認啓用，可是你能夠在版本7中選擇引入並使用它。它將在版本9中默認啓用。
咱們能夠對Ivy期待些什麼？

• 更小的體積
• 可調式模版
• 更快的打包速度，更快的測試
• 不少bug修復 下面是我在Chrome控制檯中放置斷點時的屏幕截圖：

如您所見，ngforof指令爲咱們提供了做爲值傳遞的信息。

移動端的Angular

Ionic

Ionic是一個移動應用框架，但它的核心組件確是用Stencil寫的，它提供了你可使用Angular或者其餘框架開發的文檔。

NativeScript

NativeScript 是一個相似於React Native的框架，用於構建移動應用。儘管它們也爲Vue和純JavaScript提供支持，但它仍是爲Angular提供了深度的集成。我並無不少的使用經驗，並且相對於同等水平的React Native，我我的並不推薦它，但若是你是一個移動開發這，能夠嘗試一下。

測試

Jasmine & Protractor

他們並不須要介紹，Jasmine & Protractor和測試框架默認集成在Angular中。他們測試、更新，在Angulaer中效率驚人。

Jest & Cypress

因爲Angular CLI提供了新的自定義構建器，所以可使用Jest和Cypress測試Angular。 Jest是一個基於Jasmine的單元測試框架，在Facebook上開發。它其實是用於測試React項目的框架，而且因其速度而廣受歡迎。總的來講，不少人喜歡它而不是Jasmine，因此若是是你，你如今就可使用它了！
Cypress是一個備受推崇的E2E測試框架，它獲得了不少人的喜好，這是有充分理由的。它不依賴於Selenium或WebDriver，容許在命令日誌中傳輸時間，容許網絡流量控制，並保證不會隨機失敗的結果更加一致。

Angular測試庫

Angular測試庫是以用戶爲中心的方式測試UI組件的一組實用程序。
這意味着該庫鼓勵您永遠不要以編程方式使用組件，並經過執行用戶將要執行的操做來測試行爲。
例如你永遠不會寫：

myComponent.onClick();
複製代碼

可是，您將模擬用戶天然會進行的單擊操做。

const { getByText, click } = await render(CounterComponent, {
    componentProperties: { counter: 5 }
});
click(getByText('+'));
複製代碼

狀態管理

NgRx

NgRx是一個以Redux爲靈感的狀態管理器，並常常在Angular社區中使用。就像它的名字表示的，它嚴重依賴於RXJS流。

NGXS

NGXS是一個可選的庫，它還將相似Redux的狀態管理引入到Angular中。相對於NgRx，NGXS爲了減小樣板文件，NGXS大量使用類和裝飾器，而且若是類是你的事情，這方面多是影響你二選一的重要因素。

Akita

Akita是由Datorama 公司提供的一個給予Rxjs的狀態管理庫，相比於前兩個，它還能夠被用在非Angular項目中，這使得你的代碼有很高的複用性。

Just… RxJS?

根據您是否喜歡Redux庫或者您的項目是否須要狀態管理庫，您仍能夠構建用RxJS存儲狀態的服務！

UI組件庫

Storybook

Storybook並非一個UI組件庫，而是一個工具，它支持你建立相互隔離的UI組件，並用很簡單的方式展現全部的組件和他們的變化。
這是一個很棒的工具，我很長一段時間以來都很羨慕React開發人員，但如今咱們可使用它，很難不推薦使用它。

Angular Material

著名的 Angular Material 迴歸，並在新版本的Angular中帶來一系列精美的UI組件設置。

Angular的後端相關

Firebase

FireBase是Google擁有的應用程序開發平臺。最後，基於流數據的RXJS觀測數據的強大功能發佈了一個類庫 Angular Fire ,使之與Angular無縫融合。

GraphQL

你可能認爲只有在reatc社區纔會對GraphQL很歡迎...你多是錯的。 Apollo library 也能夠在Angualr中使用，若是你但願使用GraphQL，它能夠很好的替代Firebase。

NestJs

NestJs是一個構建服務端應用的node web框架。就像你在例子中看到的，它受到Angular不少核心概念的啓發，好比：Modules、Controllers、Pipes等等。若是你喜歡Angular，你也會喜歡NestJs。
若是你使用 Nx Workspaces，使用angular和nestjs設置完整的堆棧應用程序只須要一個命令了！

最後

總的來講，Angular擁有難以置信的高質量以及豐富的生態。
固然，我尚未提到我欣賞的幾十個庫和工具，然而，這個文章已經到結尾了。我但願這篇文章能夠給你一個Angular當前狀態的歸納，以及可能爲你的下一個項目提供動力的可能性。
若是您須要任何說明，或者您認爲有什麼不清楚或錯誤，請留言！
若是您喜歡這篇文章，請在Medium 或Twitter上關注我，瞭解更多關於Angular、RXJS、TypeScript等的文章！