Angular 2.0 的設計方法和原則

時間 2019-11-16

標籤 angular 2.0 設計方法原則欄目 AngularJS 简体版

原文原文鏈接

轉載自：Angular 2.0 的設計方法和原則html

在開始實現Angular 2.0版本之際，咱們認爲應該着手寫一些東西，告訴你們咱們在設計上的考慮，以及爲何作這樣的改變。如今把這些和你們一塊兒分享，從而有助咱們作出正確選擇。html5

Angular 2 是一個針對移動應用的框架。它同時也支持桌面環境，可是移動端是難點，咱們把它放在第一位。你瞭解而且喜好的Angular還在那裏，數據綁定，可擴展的HTML，以及專一可測試開發。git

Angular 2 全部的設計文檔都公開在Google Drive上。而這篇文檔歸納了咱們的方法和設計原則，文中的一些連接指向特定的設計文檔。github

警告：咱們仍然在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的話，升級將會很是簡單。最須要考慮的部分會是你對模塊和指令的使用。