【Angular開發】Angular在2023年之前不是很好

  • 做一個簡單介紹,年近48 ,有20多年IT工作經歷,目前在一家500強做企業架構.因為工作需要,另外也因為興趣涉獵比較廣,為了自己學習建立了三個博客,分別是【全球IT瞭望】,【架構師酒館】和【開發者開聊】.
  • 企業架構師需要比較廣泛的知識面,了解一個企業的整體的業務,應用,技術,數據,治理和合規。之前4年主要負責企業整體的技術規劃,標準的建立和項目治理。最近一年主要負責數據,涉及到數據平臺,數據戰略,數據分析,數據建模,數據治理,還涉及到數據主權,隱私保護和數據經濟。 因為需要,最近在學習財務,金融和法律。打算先備考CPA,然后CFA,如果可能可以學習法律,備戰律考。
  • 歡迎愛學習的同學和朋友關注,也歡迎大家交流。微信小號【ca_cea】

你可能經常聽到有人這么說

Angular在3年后等你。

Angular更適合大型或企業項目

Angular提供了出色的更新體驗

在這篇文章中,我將向您展示為什么我認為Angular不如您在2023 Angular 15、16之前聽到的那么好。

當然,在將Angular與其他框架/lib進行比較時,我不可能做到100%公平。此外,因為我試圖在2023年之前演示Angular并不是那么好,所以我會過多地關注缺點。這對Angular來說是不公平的。2023年之后,Angular變得更好了,但我將在其他文章中介紹這些部分。

公平地說,我將在2023/8/15創建兩個項目,一個用于Angular,另一個用于Vue。

For Angular, I’m creating with?ng new my-app-angular?with?@angular/cli@16.2.0.
For Vue, I’m creating with?npm create vue@latest?with?create-vue@3.7.2.

我將一步一步地演示它。

創建新項目時模板過于簡單

使用Angular CLI創建新項目時,我有兩個選項

  • 需要路由
  • CSS格式

While with Vue CLI,

除了2個選項,我還有4個以上的選項

  • state-management lib
  • e2e test lib
  • ESLint
  • Prettier?for code formatting
  • ……

老實說,在我看來,對于一個大型或企業項目來說,配置以上4個選項很重要。

如果開發人員不是高級或專業的前端工程師,或者只是想節省一些時間,而CLI不提供這些選項,那么它們很容易丟失。

如果他們不是在一個大項目開始時建立的,那么讓所有團隊成員就一個特定的解決方案達成一致并不容易。有些人喜歡這個國家管理庫,而另一些人則喜歡另一個。有些人喜歡半成品,而另一些人則不…

即使幸運的是,開發人員在迭代中設置了它,仍然有一些遺留代碼需要遷移。

順便說一句,Angular直到現在還沒有官方的狀態管理解決方案。由于這個問題,Angular在2022年將此功能添加到了積壓工作中。到目前為止,Angular最出色的狀態管理解決方案是ngrx。還有許多人將自己設計的狀態管理庫與RxJs和DI一起使用。

默認項目文件夾結構過于簡單

對于Angular,在找到CodingStyleGuide一章之前,我甚至不知道如何使用模板進行編碼。

  • 路由器視圖放在哪里?
  • 將共享代碼放在哪里?

而對于Vue,我認為開發人員可以立即編寫代碼。

無論如何,我將按照Angular樣式指南創建一個英雄特性模塊。

演示代碼是從Angular主頁演示中復制的。

這是UI:

默認更改檢測策略是性能殺手

你有沒有注意到當頁面被加載時,這個函數在控制臺被調用了多少次?6*9=54次!這是代碼

And if you move your mouse from top to bottom, the function will be triggered?2*9*9 times!

在這種情況下,我們可以使用OnPush策略。

isSensitiveHeroName?will be triggered?9?times in the first time and?9*9?times for?mouseenter?event.

因此,使用OnPush策略,性能提高了1200%。事實上,如果我們想將默認策略更改為OnPush,我們需要應用更多的更改,而不僅僅是這個演示中的一行。

對于這種情況,Angular有一個更好的解決方案。

現在,我們有了更好的表現,也許是最好的表現。這就是為什么你經常可以在Angular社區中看到這一點。

從不調用模板中的函數

好的。這是我關心的問題

避免在模板中使用函數真的好嗎?

為了獲得更好的性能,我們定義了一個派生狀態isSensitive。所以,每次我們更改英雄的名字時,我們都需要更新isSensitive。

在實際應用程序中,會有許多派生狀態依賴于2個或多個其他狀態。因此,我們需要添加越來越多的代碼來保持當前的性能,這將很快帶來錯誤和維護問題。

可能還有其他方法可以在不編寫更多代碼的情況下保持性能。但這是我關心的問題

Angular開發人員編寫高性能、易于維護的代碼需要多長時間?1個月還是1年?

幸運的是,Angular在2023年推出了Signals,目前正在開發者預覽中。Signals允許您編寫高性能且易于維護的代碼。

復雜的NgModule

現在,讓我們假設我想使用HeroesModule之外的HeroListComponent。我需要將其從HeroesModule導出,然后將HeroesMode導入另一個模塊(假設為AppModule)。

我只能看到一個優點。如果我想使用從HeroesModule導出的組件,我不需要再次將組件導入AppModule。

然而,我看到了許多缺點。

對于開發人員來說,要知道AppModule從HeroesModule導入了多少東西并不容易。只有Angular知道。

因為組件必須在模塊中聲明,所以開發人員很難知道組件在模塊中依賴于多少東西。例如,HeroListComponent是否依賴于CommonModule和HeroesRoutingModule?我們需要檢查一下。

因此,如果您將組件從一個模塊移動到另一個模塊,但它不起作用,這是很常見的,因為您需要找出組件需要什么依賴項,并移動依賴項。因為依賴項沒有在組件中聲明。

總之,一個組件本身無法工作,如果你來自其他框架,這很難想象。

幸運的是,我們在中獲得了獨立組件angular@15到2022年底。Angular團隊甚至為您提供了一個從NgModule遷移到獨立組件的工具。

與RxJs深度綁定

許多Angular API都是通過Observable公開的,甚至是HttpClient。然而,對于初學者來說,用RxJs編寫bug較少的代碼并不容易。

RxJs聲明風格中需要注意的事項

例如,以前的HeroListComponent是用聲明性樣式實現的。如果我們刪除模板中的英雄$|async,那么service.getHeroes將永遠不會被再次調用。如果你是Angular或RxJs的新手,這可能會讓你大吃一驚。

此外,如果service.getHeroes拋出一次錯誤,該函數將不再工作。這就是為什么您經常可以在聲明性代碼中看到catchError(() => EMPTY)?。

RxJs命令式風格中需要謹慎的事情

事實上,許多開發人員都在使用命令式編程。在這種情況下,HeroListComponent會像

在模板中,需要將heroes$|async更改為heroes。

然而,它有錯誤。就像我們在addEventListener之后需要removeEventListener一樣,我們也需要取消訂閱或使用takeUntilDestroyed。

然而,直到現在,takeUntilDestroyed還在開發者預覽中。在2023年之前,我們需要添加更多的代碼。還有一點,這種方式對OnPush策略不友好。

簡短結論

正如您所看到的,與RxJs的深度綁定使開發人員更容易出錯或編寫性能較差的代碼。

我確實認為RxJs功能強大,特別適合邊緣情況。然而,擁有強大的工具并不意味著我們需要在所有情況下都使用它。許多沒有RxJ的框架/libs/項目都運行得很好。

此外,我沒有提到開發人員需要從RxJ中了解的內容以及它帶來的非常侵入性的代碼風格。

Angular的當前狀態

正如您所看到的,Angular帶來了許多新的解決方案。這是一件好事,但如果他們不及時指出建議的解決方案,那可能是一件壞事。社區可能會比以前更加分裂。

  • 聲明式或命令式編程
  • 更少或更多RxJ
  • 默認或OnPush
  • NgModule或獨立
  • zone.js或Singals

在它們之間進行選擇將導致不同的樣式,這也使得代碼難以維護。

前兩個選擇已經使社區分裂。現在我們有更多。

在我看來,

  • 獨立+Singals是Angular的未來。
  • RxJs對于Angular是可選的。
  • 將提供官方的國家管理解決方案。
  • Angular將更像其他框架/lib。

Angular已經做出了很好的選擇,比如選擇typescript,但選擇NgModule和zone.js可能并沒有那么成功。即使是內置的RxJs API也可能不是一個好的解決方案。

Angular在3年內不會等待其他框架/lib。

他正在做出進步和選擇。許多框架和開發人員沒有選擇的一些解決方案往往意味著它們可能不太適合前端開發。在這些情況下,Angular也在向其他框架/lib學習,而不是等待并堅持自己的方向是正確的。

實際上,框架/lib都在相互學習。學習和提高自己比認為我是最好的要好得多。

  • Issue
  • Source

文章鏈接

【Angular開發】Angular在2023年之前不是很好 | 程序員云開發,云時代的程序員.

歡迎收藏【架構師酒館】或者【開發者開聊】

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/211662.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/211662.shtml
英文地址,請注明出處:http://en.pswp.cn/news/211662.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

SSL證書更新

首先,我們需要理解為什么需要更新SSL證書。SSL證書的有效期通常為一年。一旦證書過期,瀏覽器會顯示警告,提示用戶該網站的SSL證書已經過期,這可能會導致用戶對網站的信任度下降,甚至直接離開網站。此外,一些…

【Python】手把手教你用tkinter設計圖書管理登錄UI界面(一)

下一篇: 本項目將分段設計“圖書管理登錄UI界面”的用戶登錄、用戶注冊、用戶賬號找回等。主要圍繞GUI標準庫tkinter、以及類的繼承(重點)來設計本項目。 首先新建一個文件夾命名為“圖書管理系統項目”,并在其目錄下新建文件夾…

【分治】最接近點對Python實現

文章目錄 [toc]問題描述一維最接近點對算法Python實現 二維最接近點對算法分治算法時間復雜性Python實現 問題描述 給定平面上 n n n個點,找其中的一對點,使得在 n n n個點組成的所有點對中,該點對的距離最小 一維最接近點對算法 Python實…

LED透鏡粘接UV膠是一種特殊的UV固化膠,用于固定和粘合LED透鏡。

LED透鏡粘接UV膠是一種特殊的UV固化膠,用于固定和粘合LED透鏡。 它具有以下特點: 1. 高透明度:LED透鏡粘接UV膠具有高透明度,可以確保光線的透過性,不影響LED的亮度和效果。 2. 快速固化:經過UV紫外線照射…

CPU、MCU、MPU、DSP、FPGA各是什么?有什么區別?

1、CPU 中央處理器,簡稱 CPU(Central Processing Unit),中央處理器主要包括兩個部分,即控制器、運算器,其中還包括高速緩沖存儲器及實現它們之間聯系的數據、控制的總線。 電子計算機三大核心部件就是CPU…

力扣257. 二叉樹的所有路徑(遞歸回溯與迭代)

題目: 給你一個二叉樹的根節點 root ,按 任意順序 ,返回所有從根節點到葉子節點的路徑。 葉子節點 是指沒有子節點的節點。 示例 1: 輸入:root [1,2,3,null,5] 輸出:["1->2->5","…

[隴劍杯 2021]簡單日志分析

[隴劍杯 2021]簡單日志分析 題目做法及思路解析(個人分享) 問一:某應用程序被攻擊,請分析日志后作答: 黑客攻擊的參數是______。(如有字母請全部使用小寫)。 題目思路: 分析…

C++牛客知識點2

提示:接上文 文章目錄 前言一、pandas是什么?二、使用步驟 1.引入庫2.讀入數據總結 前言 提示:這里可以添加本文要記錄的大概內容: 例如:隨著人工智能的不斷發展,機器學習這門技術也越來越重要&#xff0…

http與https的區別,以及生產環境配置https的幾種方式

http HTTP(超文本傳輸協議)是一種用于傳輸和處理超文本文檔的協議。HTTP使用客戶端-服務器模型。客戶端通過HTTP請求協議向服務器發送請求,服務器則使用HTTP響應協議返回響應。HTTP協議通常使用TCP/IP作為底層傳輸協議,但它也可以使用其他傳輸協議。 H…

sql注入學習

基礎查詢語句: 給指定字段添加數據 insert into 表名(字段名1,字段名2,.....) values(值1,值2,......); 給全部字段添加數據 insert into 表名 values (值1,值2,.....);--無限制條件的修改,會修改整張表 update 表名 set 字段 值; --有限制條件的修改,只修改特定記…

軟件設計師——計算機網絡(二)

📑前言 本文主要是【計算機網絡】——軟件設計師——計算機網絡的文章,如果有什么需要改進的地方還請大佬指出?? 🎬作者簡介:大家好,我是聽風與他🥇 ??博客首頁:CSDN主頁聽風與他 &#x1…

Promise介紹和使用

Promise Promise是一門新的技術(ES6規范),JS中進行異步編程的新解決方案。(舊的方案是使用回調函數,比如AJAX請求)。 從語法上來說Promise是一個構造函數。 從功能上來說Promise對象用來封裝一個異步操作并…

生成式AI賦能千行百業加速創新,2023亞馬遜云科技re:Invent行業盤點

2023亞馬遜云科技re:Invent全球大會已于上周圓滿閉幕,在本次大會中,亞馬遜云科技又為大家帶來了很多功能/項目迭代更新,也重磅發布了很多全新的功能。今天從行業視角來盤點回顧哪些重磅發布適用于垂直行業客戶,以及面向汽車、制造…

ChatGLM3-6B和langchain阿里云部署

提示:文章寫完后,目錄可以自動生成,如何生成可參考右邊的幫助文檔 文章目錄 前言一、ChatGLM3-6B部署搭建環境部署GLM3 二、Chatglm2-6blangchain部署三、Tips四、總結 前言 提示:這里可以添加本文要記錄的大概內容: …

ffmpeg之ffprobe.c源碼分析一---大流程及核心代碼分析

文章目錄 前言為什么學習ffprobe源碼源碼調試main()函數重要流程函數分析open_input_file函數分析avformat_match_stream_specifier函數分析read_packets函數分析本篇文章帶你打通ffprobe源碼的脈絡。 關注公眾號免費看: 前言 注:本文章全憑個人經驗以及平時學習所記錄,由…

gdal合成多個波段

def synthesis_bands(dst_list, outfile):"""將多光譜波段合成一個tif:param dst_list: 輸入待合成文件的列表:param outfile: 影像的輸出文件夾"""dataset_init gdal.Open(dst_list[0])# 創建待輸出的圖tiff_driver gdal.GetDriverByName(GTi…

【MySQL進階】索引使用

一、索引使用 1.驗證索引效率 tb_sku 這張表中準備了 1000w 的記錄。 我用夸克網盤分享了「1000w的模擬數據」鏈接:https://pan.quark.cn/s/15cf665202b2 這張表中id為主鍵,有主鍵索引,而其他字段是沒有建立索引的。 我們先來查詢其中的…

JS基礎之原型原型鏈

JS基礎之原型&原型鏈 原型&原型鏈構造函數創建對象prototypeprotoconstructor實例與原型原型的原型原型鏈其他constructorproto繼承 原型&原型鏈 構造函數創建對象 我們先使用構造函數創建一個對象: function Person(){ } var person new Person();…

多窗口文件管理工具Q-Dir安裝以及使用教程

軟件介紹 Q-Dir 是一款功能強大的Windows資源管理器,可以非常方便的管理你的各種文件。Q-Dir有4 個窗口,特別適用于頻繁在各個目錄間跳躍復制粘貼的情況,每個窗口都可以方便的切換目錄,以不同顏色區分不同類型的文件,…

(企業項目)微服務項目解決跨域問題:

前后端分離項目中前端出現了跨域的問題 在網關模塊配置文件中添加 配置 application.properties # 允許請求來源(老版本叫allowedOrigin) spring.cloud.gateway.globalcors.cors-configurations.[/**].allowedOriginPatterns* # 允許攜帶的頭信息 spri…