Angular 2.0 的設計方法和原則
在開始實現Angular 2.0版本之際,我們認為應該著手寫一些東西,告訴大家我們在設計上的考慮,以及為什么做這樣的改變。現在把這些和大家一起分享,從而有助我們做出正確選擇。
Angular 2 是一個針對移動應用的框架。它同時也支持桌面環境,但是移動端是難點,我們把它放在第一位。你了解并且喜愛的Angular還在那里,數據綁定,可擴展的HTML,以及專注可測試開發。
Angular 2 所有的設計文檔都公開在Google Drive上。而這篇文檔概括了我們的方法和設計原則,文中的一些鏈接指向特定的設計文檔。
警告:我們仍然在Angular 2 的設計和原型開發階段。所以這篇文中的有些東西可能會跟我們的最終產品不一樣,甚至完全不存在。
為未來而設計
我們基于未來人們的使用方式而設計Angular 2。尤其,這意味著我們的針對是現代瀏覽器以及使用ECMAScript 6.
現代瀏覽器
現代瀏覽器是指那些“永遠綠色”或者總是能自動更新到最新版本的瀏覽器。針對這些瀏覽器的開發讓我們扔掉了很多深入篡改和變通方案,而這些正是讓Angular的使用和開發更加困難的罪魁禍首。
目前這些瀏覽器包括Chrome、FireFox、Opera、Safari和IE 11。在移動端,我們的支持列表包括Android、IOS6+、Windows Phone 8+上的Chrome,FireFox移動版等。我們在研究對Android老版本的支持,但是還沒有決定下來。
是的,現在仍然有很多老的瀏覽器在被使用,但是當Angular 2準備好的時候,我們現在針對的這些瀏覽器將會是主流,而且如你一樣優秀的開發人員肯定已經在上面開發過一段時間的應用了。
ECMAScript 6+(設計)
所有的Angular 2的代碼都已經是基于ES6寫的。由于現在ES6還沒有在瀏覽器上運行,我們使用 Traceur編譯器來生成能夠在任何地方良好運行的ES5代碼。我們正在和 Traceur 團隊一起工作,實現對一些擴展的支持,比如標注(annotation)和斷言(assertion)。
不用擔心,盡管Angular會基于ES6,但是如果你不想移植的話,你仍然可以使用ES5來寫。編譯器會生成可讀性很強的JS代碼,針對擴展也有可以理解的模擬實現。閱讀設計文檔來查看更多信息。
更快
更快的更新監測(設計)
Angular應用是在DOM和JS對象的數據綁定的基礎上構建的。Angular應用的速度很大程度上取決于我們底層使用的更新監測機制。當Object.observe()在Chrome M35上能用的時候,我們已經反復地說過我們多么希望能夠使用它來加速我們的更新監測機制。當然我們會這么做!
然而,經過了非常細致的分析(細節見文檔),我們還發現即使在瀏覽器還未支持原生更新監測的情況下,我們已經能夠很大程度上提高Angular速度和內存使用效率。所以,極度平滑順暢的應用指日可待。
儀表化(設計)
性能杠桿的另一半就是你寫的代碼。為了這,我們會提供高精細度的計時細節來還顯示你的應用中的時間花銷。你可以把這個看成更新監測設計的一個目標,但是我們會通過一個名叫diary.js的新的Angular日志服務的來為計時提供直接的支持。
模塊化
當我們發布 Angular 1.0 的時候,所有的功能是在一個“要么接受要么放棄的”單獨包里。不管你用不用它,你都得承擔每個部分的下載開銷。盡管整個Angular對于桌面應用來說是非常小的,但是在移動設備上卻是完全不同的情景。
我們注意到一件很有意思的事情是,當我們吧$resource分離成一個單獨的庫的時候,冒出了好幾個非常有創意的替代品。
為了性能和提倡創新,我們的目標是將Angular幾乎所有的部分都做成可選的,可替代的,甚至是可以在其他的非Angular框架中使用。你可以挑選和使用你喜歡的部分,另外的部分你可以自己實現或者使用其他你更喜歡的方案。
其他性能話題
盡管目前還沒有設計,我們還會涉及很多Angular其他方面的性能優化。從使用預編譯的模板來改進第一次加載時間到保證60幀每秒的順滑動畫,我們會在用戶體驗上做非常深度的調研。請幫助我們,告知我們應該關注的點,并在解決方案中給予我們技術上的支持。
更簡單化
依賴注入(設計)
依賴注入依然是 Angular 區別于客戶端框架的關鍵所在,它幫你消除了很多應用中的連接性代碼,并且使默認的可測試性變成了現實。盡管在我們開發應用的時候已經很享受依賴注入帶來的好處,但我們對目前的實現仍然不滿意。我們可以讓他變的更簡單且功能更強大。
我們會看到一個更加簡化的依賴注入,移除了配置階段,使用聲明式的ES6+標注取代命令式的代碼來簡化語法。通過依賴注入和ES6模塊化的模塊加載的集成而獲得更加強大的功能。我們還會看到使用子注入器(child injector)的方式來實現模塊延時加載的特性。
上面文檔鏈接中是我們的初步設想,但是它是Angular 2中你現在就可以嘗試的部分。你可以在這個代碼倉庫中看到目前實現的細節。
模板和指令(設計)
能夠直接使用HTML來定義模板,以及擴展HTML的語法,這些都是Angular賴以生存的東西。我們對Angular 2 的模板編譯器新增了很多高級的改進:
簡化指令的API
支持與其他標準Web框架的集成
提高性能
允許IDE等工具對模板進行分析和驗證
</ul>
目前的對于輪播、無限滾動等的實現,都沒有共享通用的核心代碼,因此有一堆各種各樣的冗余和差異。
目前的大多數的實現對原生的滾動事件都不提供可選的支持,因為老的瀏覽器甚至一些現代的瀏覽器對它們支持不好。然而,這些實現,也就不能在新設備上達到本來可以有的最佳性能。
</ul>
基于狀態(State-based)的路由
集成授權和認證
選擇性地保留一些視圖的狀態,移動端尤其需要。
</ul>
對上面的這些內容,我們非常激動,以至于迫不及待地炫耀它們。有太多優秀的東西而不能都在這篇概要中摘錄,所以請直接跳到設計文檔來查看更多內容。
更強大的功能
觸摸動畫(設計)
用戶們已經習慣于一些特定的觸摸行為模式。比如,使用手指來滾動一個列表,循環查看輪播中的照片,通過滑動來刪除一個列表項。然而:
我們想給這些場景以最一流的支持,來讓你的應用盡可能達到最佳的用戶體驗。
路由(設計)
初始的Angular路由只為一些簡單的用例而設計的。隨著Angular的成長,我們已經漸漸的加入了一些新的功能。然而,底層的設計始終不適合做更多深層次的擴展。
我們非常關注一些已知的用例以及其他很多應用框架的路由的實現,這樣我們才能交付一個簡單而又可擴展的路由,能夠廣泛地適用于各種應用。
我們特別熱衷于支持的一些用例包括:
持久化(設計)
在Angular簡陋的 $http 之上,很多開發者渴望一個更高層次的抽象來處理來自服務器端的數據以及瀏覽器的本地持久化存儲。
移動應用需要在一個“一直離線”的模式下工作,通過同步與服務器端保持一致。RESTful服務需要的遠比我們$resource提供的更多。有些數據需要能夠批量更新,而有些需要持續的流連接。
在這個新的持久化層,我們會為這些情景提供干凈的架構,如果需要的話會從當前的樣板文件中剔除更多。
問答
什么時候能做完?
如果你和我們一起經歷了 1.2 版本的發布,你應該知道我們也不知道答案。:)盡管我們現在才發表設計文檔,但我們已經為很多模塊做過了原型。依賴注入和Zone.js甚至已經可以使用了。所有的工作都會在GitHub上完成,我們也會繼續發布每周會議記錄,你可以一直關注。
Angular 1.x 到 Angular 2 的移植過程將是怎樣的?
Angular 2 目前仍然在開發中,老實說我們也不知道。在我們的想象中,移植將會非常直接和簡單,但是也不是不勞而獲的。如何使用ES6的優勢將是最大的工作重心。模板 的更新幾乎就是機械的查找和替換的練習。如果你的控制器中包含的是你的業務邏輯,而沒有使用太多現有的Angular API的話,升級將會非常簡單。最需要考慮的部分會是你對模塊和指令的使用。
Angualr 2 會是 PhoneGap 或 Ionic框架等移動技術的替代品嗎?
不是,Angular依然只是核心模塊。你仍然需要使用其他的庫,比如 Ionic框架來提供移動優化的 CSS/JS組件,PhoneGap之類的工具來打包和訪問原生API。
Angular 2 和 AngularDart的關系是怎樣的?
在將AngularJS向Dart語言移植的時候,我們運用所有我們學到的東西創建了一個新的Angular版本。這篇文檔中討論的很多改進已經在那里了,比如改良的指令的概念和語法,以及類和基于標注的依賴注入。
盡管這不是我們在 2 中要實現的目標,但它是對未來的一個很好的預覽。
我們在打造AngularJS 2的同時,我們也會不斷升級 AngularDart,這樣喜歡Dart語言的人可以和喜歡JS的人享用到相同的好處。我們的目標是根據你選擇的語言都會有一個單一的框架。