當前位置:編程學習大全網 - 編程語言 - 作為前端,我為什麽選擇 Angular 2

作為前端,我為什麽選擇 Angular 2

ALL-IN-ONE

不管是1還是2,Angular最顯著的特征就是其整合性。它是由單壹項目組常年開發維護的壹體化框架,涵蓋了M、V、C/VM等各個層面,不需要組合、評估其它技術就能完成大部分前端開發任務。這樣可以有效降低決策成本,提高決策速度,對需要快速起步的團隊是非常有幫助的。

讓我們換壹種問法吧:妳想用樂高搭壹個客廳,還是買宜家套裝?

Angular 2就是前端開發領域的“宜家套裝”,它經過精心的前期設計,涵蓋了開發中的各個層面,層與層之間都經過了精心調適,是壹個“開箱即用”的框架。

當然,妳可能還記著Angular 1帶給妳的那些快樂以及……痛苦。這是有歷史原因的。由於它是從壹個用來做原型的框架演化而來的,加上誕生時間很早(2009年,作為對比,jQuery誕生於2006年),當時生態不完善,連模塊化機制都得自己實現(這就是angular.module的由來,也是Angular 2中拋棄它的理由)。在長達七年的演化過程中,各種進化的遺跡非常明顯,留下了不少“闌尾”。

但Angular 2就不同了,它的起點更高,整合了現代前端的各種先進理念,在框架、文檔、工具等各個層面提供了全方位的支持。比如它的“組件樣式”能讓妳在無需了解CSS Module的前提下獲得CSS Module的好處,它的Starter工程能讓妳在無需了解Webpack的前提下獲得Hot Module Replacement等先進特性,它能讓妳從Web Worker(妳知道這是什麽嗎?)中獲得顯著的性能提升。

妳只管在前臺秀肌肉吧!剩下的,讓Angular在幕後幫妳搞定!

模塊化的技術

雖然Angular是壹個ALL-IN-ONE的框架,但這並不妨礙它同時是壹個靈活的框架。還記得OCP(開閉原則)嗎?壹個好的設計,對擴展應該是開放的,對修改應該是關閉的。

Angular 2很好的踐行了OCP原則以及SoC(關註點分離)原則。

它非常有效的分離了渲染與交互邏輯,這就讓它可以很好的跟包括React在內的渲染引擎搭配使用,除此之外,它還可以使用內存渲染引擎,以實現服務端渲染;還可以使用Native渲染引擎,以編譯出真正的原生程序(NativeScript)。

它還分離了數據供應與變更檢測邏輯,從而讓它可以自由使用包括RxJS以及ImmutableJS在內的第三方數據框架/工具。

不僅如此。

在Angular 1和Angular 2中最具特色的應該算是依賴註入(DI)系統了,它把後端開發中用來解決復雜問題、實現高彈性設計的DI技術引入了前端。Angular 2中更是通過引入TypeScript賦予它更高的靈活性和便利性。

不過,Angular 2並沒有敝帚自珍,把它跟框架本身緊緊黏結在壹起,而是把它設計成了壹個獨立可用的模塊。這就意味著,無論妳正在使用什麽前端框架,甚至NodeJS後端框架,都可以自由使用它,並從中獲益。

全生命周期支持

除非妳打算寫壹個壹次性應用,否則軟件的生命周期會很長。宏觀來看,真正的挑戰來自多個方面,而且在不斷變化。

開始的階段,我們需要非常快速的建立原型,讓它跑起來,引入最終用戶來試用,這個時候,挑戰來自開發速度以及可復用資產。

之後,會建立壹個逐漸擴大的項目組,來完善這個原型的功能。主要的挑戰是讓這個原型通過重構不斷進行演化,特別是在演化的後半個階段,產品需要保持隨時可以上線的狀態。但技術上的挑戰那都不是事兒!關鍵是人。

如何讓新人快速融入項目組,貢獻生產力?這可沒那麽簡單。“妳先去學xxx 0.5、yyy 0.9、zzz 5.3...還要了解它們前後版本之間的差異,我再給妳講代碼”,這種話,我可說不出口。壹個優秀的框架需要對分工提供良好的支持,每個人都可以先從壹些簡單任務開始,逐步的從修改壹個文件擴大到修改壹個目錄再到獨立實現壹個特性。

有了這種分工,每個團隊成員就可以從壹個成功走向壹個更大的成功。這就需要框架在設計上具有良好的局部性:妳可以放心大膽的修改壹部分,而不用擔心影響另壹部分。妳可以只修改CSS,可以只修改HTML,可以只修改TS/js,而不用擔心自己的修改破壞了其他部分。而Angular 2通過聲明式界面、組件樣式以及獨立模板文件等對這種安全感提供了有力的保障。

再然後,如果妳的軟件順利的進入了線上維護階段,那麽恭喜妳,妳終於迎來真正的大Boss了!這個大Boss就是可維護性。Angular開發組有很多程序員來自Google,如果要問誰的軟件維護經驗最豐富,Google和微軟必然名列前茅。微軟通過TypeScript的強類型機制體現了自己的經驗,而Google則通過將OCP、SoC、SRP等壹系列軟件設計原則融入Angular體現了自己的經驗。具體技術上則體現為:DI、生命周期鉤子、組件等等。

最後,如果妳的軟件完成了歷史使命需要逐步退出,是不是就能松口氣了?不行,妳還得繼續留人維護它。如果妳選擇的是壹個閉源的或某個社區很羸弱的開源技術,妳就把以前的主力架構師、資深程序員留下來繼續維護它吧。或者妳就得鼓起勇氣跟用戶說:妳們玩兒,我先走了。而Angular是壹個大型開源項目,並得到了Google的鼎力支持。即使經歷過Angular 2項目組初期的公關失敗,它仍然有著其它競品無法企及的繁榮社區 —— 無論在全球還是在中國。顯然,無論是對傳統社區資源的繼承,還是對新社區資源的開拓,我們都有理由相信,Angular社區仍將壹如既往地繁榮。至少,如果妳不想讓自己的軟件建立在壹大堆由個人維護的核心庫上,那麽Angular毫無疑問是最好的選擇。

逃離“版本地獄”

如果是壹兩個人開發壹個預期壽命不到壹年的系統,那麽任何框架都可以勝任。但,現實中我們都把這種系統稱之為“坑”。作為壹個高度專業、高度工程化的開發組,我們不能把“坑”留給友軍。這些坑中,最明顯的就是“版本地獄”。

想象壹下,妳僅僅升級了庫的次版本號,原來的軟件就不能用了,損壞了N處單元測試以及M個E2E場景。這種情況對於開發組來說簡直是壹個噩夢 —— 畢竟,誰也不想做無用功,更何況是壹而再、再而三的。或者,它每次小的改動都會修改主版本號 —— 對,我就是不向後兼容,妳能咋地?妳所能做的就是每壹次決定升級都如臨大敵,不但要小心翼翼的升級這個庫本身還要升級與它協作的幾乎所有庫。

可見,亂標版本號可能會讓使用者付出巨大的代價。這不但體現在工作量上,還會體現在研發團隊的招募與培養上,想象壹下,對小版本之間都不兼容的框架,研發團隊都需要記住多少東西?那簡直是噩夢!

但是,版本號的問題在業內早就有了事實性標準,那就是SemVer語義化版本標準。唯壹的問題是,作為框架/庫的作者,遵循SemVer標準需要付出的努力是巨大的。是否願意付出這些代價,是壹個框架(及其開發組)是否成熟的重要標誌。

Angular就是這樣壹個框架,其開發組曾作出的努力是有目***睹的。如果妳是從Angular 1.2開始使用的,那麽妳為1.2所寫的代碼都可以毫無障礙的遷移到最新的1.5版,新的版本只是引入了新特性,而沒有破壞老特性。這是因為Angular開發組寫了大量單元測試和E2E測試,借助CI來保障這種平滑過渡。只有在從1.0到1.2的遷移過程中(1.1壹直是beta,忽略不計),出現了壹系列破壞性變更,這些變更被明確的記錄在文檔中,並且解釋了做出這些變更的理由 —— 大多數是因為提升前端代碼安全性。即使妳恰好遇到了這些破壞性變更,它也會給出明確的錯誤提示。

這些必要而無聊的工作,正是幫助我們逃離“版本地獄”的關鍵。是否願意做這些無聊而瑣碎的工作,是壹個框架的開發組是否成熟、專業的關鍵特征。而Angular的開發組已經證明了它值得妳信任!

遇見未來的標準

編程領域,創新無處不在。但對壹個工程團隊來說,最難得的是標準。標準意味著:

招人容易。因為標準的東西會的人最多,而且人們願意學它 —— 因為知道學了就不會浪費。

養人容易。因為網上有很多教程可用,即使不得已自己做教程,性價比也是最高的。

換人容易。標準就意味著不是私有技術,壹個人離開了,就能用另壹個人補上,而不會出現長期空缺,影響業務。

但是,標準永遠會比創新慢壹拍或N拍。這就意味著如果妳追新,那麽在獲得技術上的收益的同時,也要付出工程上的代價。固然,兩者不可兼得,但是還是有壹些策略能夠調和兩者的。最簡單的策略就是:遇見未來的標準。

所謂未來的標準,就是某個標準的草案,它很有希望成為未來的標準,這代表了業界對某項技術的認可,於是,即使它還不成熟,人們也願意為之投資。比如雖然Google曾經提出過N種自有技術,包括SPDY、Gears、OGG等,但卻並沒有把它們變成私有技術,而是對社區開放以及並入W3C的標準草案。

Angular 2采用的就是這種策略。它所參照的標準草案比較多,壹個是WebWorker,它借助WebWorker來把繁重的計算工作移入輔助線程,讓界面線程不受影響;另壹個是WebComponents,Angular 2的組件化體系就是對WebComponents的壹種實現;最後是CSS scoping,現在雖然市面上有了很多CSS模塊化技術,但事實上最終還是會被統壹到CSS Scoping標準上,屆時,如果:local等關鍵字無法進入標準,就會成為私有技術。而Angular 2選擇的方式是直接實現CSS scoping標準草案,比如:host、:host-context等。顯然,采用這種策略,“遇見未來的標準”的成功率會高得多。

可以看到,Angular 2的設計哲學中貫穿著對標準化的熱烈擁抱,這是我判斷它將贏得未來的另壹個信心來源。

速度與激情

Angular 2終於擺脫了舊的技術框架束縛,開始了對速度的極致追求。在Angular 1中,雖然絕大多數場景下性能都不是問題,不過還是因為其代碼中存在的壹個用來實現臟檢查的三重循環而飽受抨擊 —— 似乎真有人能感受到30毫秒和100毫秒的差異似的。

不過,有軟肋總是不太好。於是,在Angular 2中,通過重新設計和引入新技術,從原理上對速度進行了提升,據官方以前提供的壹個數據說是把“變更檢測”的效率提升了500%。

它在“變更檢測”算法上做了兩項主要的改進:

在設計上,把以前的“多輪檢查、直到穩定”策略改成了“壹輪檢查、直接穩定”策略。

當然,這會對自己的代碼產生壹定的限制,但實際上只在有限的少數幾個場景下才會遇到這個限制,而且官方文檔中也給出了明確的提示。

在實現上,把“變更檢測”算法移入了由WebWorker創建的輔助線程中執行。

現代的家用電腦很多都已經是多核超線程的,但是瀏覽網頁時實際上無法充分利用全部線程,而WebWorker提供了壹個新的機制,

讓壹些相對繁重的計算工作運行在輔助線程中,等執行完了再通知主線程。即使妳不明白WebWorker的工作原理,

至少也能知道Ajax請求是不會阻塞界面響應的,WebWorker也壹樣。

除此之外,Angular還對數據源進行了抽象,妳完全可以用ImmutableJS來作為Angular的數據源,獲得其在提升“變更檢測”速度方面的所有優勢。

除了“變更檢測”外,Angular以及所有前端SPA程序,都有壹個通病:首次加載太慢,要下載完所有js和css才能渲染出完整的界面來。react通過虛擬DOM解決了此問題,而Angular 2則通過獨立的服務端渲染引擎解決了這個問題。我們前面說過,Angular 2把渲染引擎獨立了出來,因此可以在NodeJS中實現服務端的內存渲染。所謂內存渲染就是在內存中把DOM結構渲染出來並發回給瀏覽器,這樣,客戶端不需要等JS代碼下載完就可以顯示出完整的界面了。這種分離還帶來了另壹個好處,那就是SEO。SEO同樣是傳統SPA的壹個難點,它和服務端渲染是同壹個問題的兩個方面,因此隨著服務端渲染的完成,SEO問題也被順便解決了。

讓妳無縫升級

Angular 2開發組在早期階段曾犯下壹個嚴重的公關錯誤:過早宣布不兼容Angular 1,也不提供從Angular 1到2的升級方案。

這讓Angular 2開發組付出了沈重的代價,可謂傷透了粉絲的心。作為技術人員,這種失誤固然是可以理解的,但卻需要付出更多的努力來彌補它。而Angular 2確實這麽做了。

在Angular 2中,開發組提供了壹個UpgradeAdapter類,這個升級適配器讓Angular 1.x的所有部件都能和Angular 2.x中的所有部件協同工作。

而最牛的地方在於,它讓妳可以壹個文件壹個文件的逐步升級到Angular 2,而在整個升級過程中,應用可以繼續在線上跑!看著神奇嗎?其實也算不了啥,Google做這種事早就是輕車熟路了。這只不過是對Angular開發組出色的工程化開發能力的壹點小小證明而已。

不過,既然如此,當初又何必急匆匆宣布不兼容呢?可見,再出色的工程團隊,如果缺少了和社區溝通的產品運營技巧,也會付出巨大代價。希望Angular開發組以後能謹言慎行,多用行動來平息質疑。

幕後 —— 當Google牽手微軟

當年的瀏覽器大戰,讓人記憶猶新,Chrome的出品商Google和IE的出品商微軟正是瀏覽器大戰的兩大主角。

俗話說:沒有永遠的朋友,也沒有永遠的敵人,只有永遠的…… 精益求精。

正是在這樣的“俗話”指導下,Google與微軟相逢壹笑泯恩仇,撤銷了很多針對彼此的訴訟,甚至在壹些領域開始合作。而實際上,在他們公開和解之前,就已經開始公開合作了,其契機就是Angular 2。

這就要扯出壹點小八卦了。

在Angular 2開發的早期階段,由於傳統JS(ES5)以及當時的ES6草案無法滿足項目組的開發需求,項目組有點煩。後來有人靈機壹動開發了壹種叫做AtScript的新語言,它是什麽呢?壹個帶類型支持和Annotation支持的升級版JS。其實在類型支持方面,TypeScript早就已經做了,而且那時候已經比較成熟,唯壹的遺憾是不支持Annotation,也就是像Java中那樣通過@符號定義元數據的方式。

Angular開發組就這樣孤獨的走過了壹小段兒時間,後來也不知道怎麽這兩個歡喜冤家就公然牽手了。總之,最後的結果是:TypeScript中加入了與Annotation相似的Decorator特性,而Angular放棄了AtScript改用TypeScript。

這次結合無論對兩大廠商還是對各自的粉絲,都是壹個皆大歡喜的結局,稱其為世紀聯手也不為過。此後,Google與微軟不再止於暗送秋波,而是開始了壹系列秀恩愛的動作。無論如何,對於開發者來說,這都是壹個好消息。

軟粉們可能還記得在6.1的微軟開發者大會上,微軟曾公開提及Angular 2。事實上,TypeScript目前雖然已經相當完備,但應用度仍然不高。就個人感覺來說,Angular 2將是TypeScript的壹個殺手級應用。TypeScript如果當選TIOBE年度語言,Angular 2的推出功不可沒。

為什麽我要特意插播這段兒故事呢?那是因為我認為壹個產品的未來最終取決於開發組的未來,而不是相反。軟件的本質是人!壹個心態開放、講究合作、勇於打破陳規陋習的開發組,才是框架給人信心的根本保障。

後端程序員的終南捷徑

前端程序員自不必說,因為有很多人就是靠Angular進入專業前端領域的。下面這段話主要寫給後端程序員。

不管是想學習新技術還是出於工作需要,都有很多後端程序員對前端技術躍躍欲試。但面對前端讓人眼花繚亂的大量候選技術以及未知的概念,他們往往感覺感覺無所適從。如果妳是其中的壹員,那麽Angular可以“治愈”妳的選擇恐懼癥。

正如前面所說,Angular是壹個“ALL-IN-ONE”的框架,這就意味著妳只要掌握了Angular就可以完成大量的前端工作了。

這首先得益於它對各種技術的封裝,讓妳不用關心它的實現細節。Angular隔離了瀏覽器的細節,大多數工作妳甚至都不需要知道DOM等前端知識就可以完成。

其次,Angular選擇了TypeScript作為主語言。如果妳是個C#程序員,壹定會對它的語法感覺似曾相識。沒錯,TypeScript和C#、Delphi有同壹個“爹” —— 傳奇人物Anders Hejlsberg。即使是Java程序員,也不會覺得陌生:強類型、類、接口、註解等等,無壹不是後端程序員們耳熟能詳的概念。說到底,並沒有什麽前端語言和後端語言,在語言領域耕耘多年的Anders太熟悉優秀語言的***性了,他所做的取舍值得妳信賴。

再次,Angular在前端實現了服務與依賴註入的概念。隨著前端需求的進壹步膨脹,即使只算邏輯代碼,其需求復雜度也即將甚至已經趕上了大部分後端程序。所以,後端遇到過的挑戰前端也遲早會遇到,這正是後端程序員彎道超車的好機會,而依賴註入正是後端程序員的看家本領。

最後,Angular對團隊作戰提供了良好的支持,比如模板與代碼的分離、樣式表的局部化、組件化的設計、服務與依賴註入體系等。這些特性讓後端程序員可以先專註於跟後端代碼最像的模型和交互邏輯部分,而把諸如樣式、模板等自己不擅長的部分交給隊友。

  • 上一篇:基於mfc的socket編程怎麽進行文件傳輸
  • 下一篇:家用儲物櫃價格是多少家用儲物櫃廠家有哪些
  • copyright 2024編程學習大全網