如何評價 Angular 2.0 Final Release 的發布?

9.15 中秋之際,Angular 2 官方博客正式宣告 Final Release,該最終版較之前的 Release Candidate 都有哪些改進?與 React, Vue 在渲染性能、尺寸與功能集等方面又孰優孰劣?相較於之前長時間的 rc,現在可能是評價 Angular 2.0 的最佳時機了。

傳送門: http://angularjs.blogspot.tw/2016/09/angular2-final.html?m=1


Angular 2 所犯的最直接的一個錯誤就是走向了「只有我完美了,別人才會喜歡我」這個誤區。。關於這個想法為什麼是錯誤的,可以參考 認為「只有我完美了,別人才會喜歡我」的想法有什麼錯誤,該怎麼解決? - 人際交往,不過這個並不是本問題的重點不多討論。

Angular 2 作為一個一體化解決方案試圖在每個方面做到完美,自宣布以來,Angular 2 用了兩年的時間,經歷了 55 個 Alpha、18 個 Beta、8 個 RC (我也不知道為什麼 Beta 和 RC 是從 0 開始的)來做這件事情,並且幾乎在 API 層面完全推翻了 API 層面的設計(雖然理念復用的很多,但很多用戶顯然還看不到這一層就看不下去了)。

所以這裡就簡單談一談 Angular 2 幾個較為致命的問題。(認真臉)

1. 過於追求性能優化

性能上不僅好過了 Angular 1.x,也(較為公認的場景下,不同人的測評結果可能不同)高於 React 和 Vue,這個在大量的跑分中都可以看得到,比如 dbmon,Table Report 等等。而且幾乎所有的跑分都是在沒用 Web Worker 的情況下,Angular 2 還能藉助 Web Worker 進一步加速。但問題是,React 和 Vue 的性能並不差,並且 Angular 2 雖然更好了一些也並沒有產生數量級的差距,已經用上 React 和 Vue 的童鞋自然也沒有必要因為這一丁點的性能就做遷移,反倒是 Angular 1 的性能被一直詬病,可能用戶早就因此遷移出去。

2. 過於追求跨平台

Angular 2 擁有幾乎卓越的跨平台性能,所有能支持的平台基本都支持了,不僅日常需要的 Web、Server Render、Hybrid(Ionic 2)、Native UI(NativeScript) ,還順帶連 React Native 也都一樣支持了,由於是 Google 的產品自然也少不了 Progressive Web App 的支持。

但實際上,真的有用戶需要同時跨那麼多平台么?絕大多數用戶的場景就只有 Web(可能為了 SEO 加上 Server-side Render),另外有一小部分用戶需要同時跨 Web 和 Mobile(不管是 Learn Once 還是 Write Once 還是 Whatever Once),對於絕大多數用戶而言那些額外的平台支持並不會作為太大的加分項。而且還出現像 NativeScript 和 React Native 這樣幾乎相同場景的選擇,給用戶增加不必要的選擇負擔,也為天秤座的童鞋帶來了極大的不便。

3. 過於追求先進性

Angular 2 雖然一直支持普通 ES5 的寫法,但為了主推結合 TypeScript 的所謂的最佳實踐,強行把文檔里的語言選擇下拉框藏在小角落裡,讓很多用戶一上來就直接看到 TypeScript 代碼以至於一片茫然,同時還故意拖延 ES5 版本的文檔進度讓用戶即便想用 ES5 也無從下手。

為了幫助淘汰老舊產品,也不提供 Bower 版本,當然同時也就反過來會被一部分 Bower 用戶淘汰。為了充分貫徹模塊化的理念也不直接提供 js 文件,只能靠用戶從 npm 下載發布版本(雖然 npm 也有 npmcdn 但是顯然麻煩也了很多)。

而且為了維護 Angular 的純潔性,也不在文檔里說明怎麼操作 DOM,怎麼結合 jQuery 這些接地氣的東西,即便做起來也非常容易。

對於 @angular/upgrade 這種 Angular 1.x 到 Angular 2 的無縫升級方案也幾乎完全不提及。

4. 過於追求設計模式

雖然提供了更加完備的依賴注入(除了構造函數注入外現在還有 @Input、@ViewChild 這些屬性注入),但實際上很多用戶壓根就不寫單元測試呀,提供這麼友好的測試環境又有什麼用呢,只會讓這些用戶覺得更為繁瑣,增加了不必要的學習和使用成本。

雖然又引入了靠 Decorator 模擬的 Annotation 來實現的純聲明式操作,但對於很多有斯德哥爾摩綜合症的童鞋來說這些都是明顯不需要的,就只是多寫一些代碼並且更不好維護而已為什麼要去就學習一個新語法呢?於是對很多童鞋造成了不必要的負擔。

同時還完全貫徹了單一職責,什麼 ChangeDetector、Differ 都分成了單獨的實體,明明很多人就是喜歡臃腫不堪的 Scope,這樣做完全是多此一舉。

5. 過於追求高大上

從 rc5 開始就把 Offline Compiler 的使用叫做 AOT 模式,反之叫做 JIT 模式。雖然對於搞 PL 的童鞋來說非常親切,但是又得讓很多沒有任何計算機相關基礎的童鞋一臉茫然了。

像 Change Detection 部分還用了 Hydration、Dehydration 這樣的純化學概念作為專有名詞,以挑戰用戶的英文水平。

最過分的居然把 Web Tracing Framework 一直以縮寫的形式使用,讓小朋友看到了想歪了怎麼辦?wtfCreateScope、wtfEndTimeRange、wtfLeave - ts、wtfStartTimeRange。

6. 過於追求生產力

為了杜絕用戶再進行諸如手動引入 js、靠 concat 來實現 js 打包這種低效的事情,強行對用戶洗腦能夠一勞永逸解放生產力的解決方案,比如 SystemJS、Webpack 等,當然我們的用戶也還是很聰明的,能夠馬上發現這種洗腦行為並快速逃離,回到自己幸福的男耕女織田園生活。

7. 過於相信品牌效應

就因為自己是 Google,還有一個叫 Microsoft 的合作夥伴,就開始忽視傳教的重要性。Angular 2 都正式發布了還有很大一票人連有 Angular 2 都不知道,剩下的還有很大一票人覺得 Angular 2 要跳票,再剩下的仍然有一大票人以為 Angular 2 還停留在 Early Alpha。連 NingJS 也不派人過來講個 Session 讓大家了解一下進度,就為了中秋節突然搞個大新聞讓大家都不能好好吃月餅。

8. 過於不照顧字母序在後面的童鞋

這樣按字母排的話字母靠後的童鞋不高亮誰能看得到。。(T_T)


總算出來了,作為1.x資深用戶,2.0初期的觀望者,一直到現在的使用者,感受很多,@Trotyl Yu 寫的大部分我是很認同的,總的就是覺得它出來太慢,考慮的事情太多了,而且過於在意跟其他框架對比,宣傳也做得差,直接導致自己的大量用戶流失。

我提一些自己的感受吧:

1. 從整體上講,ng2概念還是偏多的,但這不算問題,因為他面向的主要還是大型企業軟體用戶,這類群體根本不介意概念再多一些,也不怕設計模式,所以,如果是to C的場景,選擇它的可能性不會很大,但是在to B的場景中,或者一些內網應用,還是比較容易獲得一些認同的。

2. TypeScript。關於是不是要使用TS,不同的人有不同的見解,很多人覺得這是多此一舉,自找麻煩,但如果結合上面提到的它的目標受眾的話,還是有比較重要的價值的。這個群體普遍會覺得有類型約束會對生產力提高有幫助。

3. RxJS。它深度綁定的Rx,仍然是一個比較有爭議的東西,因為它概念上有一個接受門檻,對初學者並不友好,但仍然考慮它所面臨的群體,Rx在.net和Java開發者(尤其安卓開發者)中,普及程度要比在Web前端高多了,而且Rx本身帶來的很多優勢,能夠解決業務上的很多問題,尤其是大量的非同步過程組合的問題,此外,有了這麼個東西,也可以不需要別的平台里的redux這類東西,就能處理好數據的流動和組件之間的通訊問題。如果能接受這些,那就能夠理解前面提到的TS的問題。如果寫RxJS,但是不用TS,那就太為難自己了。多個流組合之後的結果,如果能直接看到類型,對生產力還是比較有幫助的。

4. 組件編寫的語法。在這個點上,是存在不少爭議的,比如說,組件類是否應當是class這種形態?組件的實例化過程,是否也能跟正常的constructor這類東西混合在一起,以增加更多的控制力?Decorator的寫法是不是分離出一些東西,讓主流程更清晰?我個人是比較傾向於class的寫法,所以,我們mobile版,用的是vue,但是用了ts和rxjs,也使用了一些decorator,不注意看的話,可能會以為寫的是ng2。

5. Directive。我之前看到某些問題的回答下面,有人提到幾個問題:

- ng1引入的directive概念是完全沒用的

- ng2是不能跟jq結合,對jq很不友好的

我來解釋一下我的觀點,後面提到的directive特指attr形態的directive,因為在ng2裡面,component還是一種directive。這種attr directive是必要的,它存在的價值是對普通components的補充。因為在組件化體系里,除了「組件」,還有「行為」,行為也是一種形式的組件。

舉例來說,如果是界面的組件化,普通人可能都很容易理解,無非就是按照功能切分界面塊,不管切得好不好,一般都能像模像樣。這時候我問你個問題,如果有一個行為:當滑鼠移動到某個組件上,這個組件就展示某種形態的邊框。這種應該在代碼中被定義成什麼東西?

所以,如果你從這個角度理解directive,就可以認識到,把這段東西封裝成一個directive,然後加到那些你想有特定行為的組件上,就可以完成想要的功能了。例如:

&

新舊交替VueJs到底好在哪?
webpack打包後的代碼,如何部署到伺服器上?
如何評價大漠窮秋的文章《Vue從Angular裡面抄了哪些東西?》?

TAG:前端開發 | 前端開發框架和庫 | Angular? |