Angular 2.0 的設計方法和原則

jobbole發表於2014-03-20

  在開始實現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等工具對模板進行分析和驗證

  對上面的這些內容,我們非常激動,以至於迫不及待地炫耀它們。有太多優秀的東西而不能都在這篇概要中摘錄,所以請直接跳到設計文件來檢視更多內容。

 更強大的功能

  觸控動畫(設計

  使用者們已經習慣於一些特定的觸控行為模式。比如,使用手指來滾動一個列表,迴圈檢視輪播中的照片,通過滑動來刪除一個列表項。然而:

  • 目前的對於輪播、無限滾動等的實現,都沒有共享通用的核心程式碼,因此有一堆各種各樣的冗餘和差異。
  • 目前的大多數的實現對原生的滾動事件都不提供可選的支援,因為老的瀏覽器甚至一些現代的瀏覽器對它們支援不好。然而,這些實現,也就不能在新裝置上達到本來可以有的最佳效能。

  我們想給這些場景以最一流的支援,來讓你的應用盡可能達到最佳的使用者體驗。

  路由(設計

  初始的Angular路由只為一些簡單的用例而設計的。隨著Angular的成長,我們已經漸漸的加入了一些新的功能。然而,底層的設計始終不適合做更多深層次的擴充套件。

  我們非常關注一些已知的用例以及其他很多應用框架的路由的實現,這樣我們才能交付一個簡單而又可擴充套件的路由,能夠廣泛地適用於各種應用。

  我們特別熱衷於支援的一些用例包括:

  • 基於狀態(State-based)的路由
  • 整合授權和認證
  • 選擇性地保留一些檢視的狀態,移動端尤其需要。

  持久化(設計

  在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的人享用到相同的好處。我們的目標是根據你選擇的語言都會有一個單一的框架。

 其他有趣的文件

  原文連結: AngularJS   翻譯: 伯樂線上 - 陳 鑫偉

相關文章