歡迎光臨
每天分享高質量文章

AngularJS的未來

第一次瞭解Angular JS的時候,讓曾經使用GWT(Google Web Toolkit)的我豁然開朗,看著我們的大型應用被精簡了90%的程式碼,這簡直是一種難以置信的體驗。於是我開始轉向AngularJS,因為我意識到了以前的方式有多低效。

從那時開始,我與AngularJS結緣,瞭解AngularJS如何使用資料系結、模板、路由、單元測試等等,它使問題變得極為簡單。但是,有些事情並不合理,比如命名和一些概念。我在學習使用的過程中,同樣也無法喜歡如此複雜的指令,而且內建路由方式也有一些限制。

AngularJS雖然能使編寫應用程式簡單化,但如果你不懂工作原理,也同樣會使你的程式設計速度減慢,程式碼又難以維護。

隨著AngularJS和相關檔案的逐步更新,情況開始變好。

  • 資料系結效能隨著版本的演進得到提升

  • AngularJS檔案進行了重大的變革,使其更容易使用和理解

  • 路由選擇變成了可選模組

  • 在社群中,人們建立了一些模組和外掛來提高效能,從本地化/轉換(angular 轉換)到更好用的路由(ui-router)再到你可能需要的其他任何東西。

AngularJS 從1.0版本到1.3版本已經經歷了許多重大變化,改善了AngularJS幾乎每一個部分。很明顯,它已經從一個實驗性MVC框架發展成為一個穩定且支援良好的框架,被大量使用。我去年在 workshops on AngularJS 做的工作比之前加起來的總和還多。

但是AngularJS的核心團隊(同時也在成長)並沒有止步不前。在1.3版本之後,不僅僅是改進,他們的團隊準備解決的問題被稱為AngularJS 2.0,考慮到開發人員的反饋,和來自其他出色框架的靈感,AngularJS 2.0的標的是邁出從AngularJS 1.0釋出以來的革命性的一步。和上次不同的是,社群已經充斥著相關設計檔案(design docs available)的討論。這就是為什麼你應該期待AngularJS 2.0的原因(當然,它釋出的時候還會有任何可能的改變)。

前瞻性

AngularJS 1.3已經放棄支援IE8,AngularJS 2.0看上去也會繼續這個趨勢,專註於桌面端更快更新的瀏覽器(IE10/11, Chrome, Firefox, Opera & Safari) ,和Android, iOS6+, Windows Phone 8+ 上的Chrome & Firefox 手機端。這樣會使AngularJS程式碼庫是短而簡潔的(不需要hacks老版本瀏覽器),同時也使AngularJS能支援最新的和最好的功能,而不用擔心向後相容性和polyfills。希望在AngularJS 2.0推出的時候,它能相容大多數瀏覽器的標準,使得開發人員可以更加專註於開發應用。

ECMAScript 6 + 傳回依賴註入

ECMAScript 6將會是近幾年JavaScript的新標準:一個有著原生js類支援的真正面向物件的語言、優秀的類模型和AMD(非同步模組依賴關係),大量語法的改進使它更簡潔,程式碼更具有宣告性。整個AngularJS 2.0程式碼將基於ES6而寫,但是你可能會想,現在還沒有瀏覽器支援所有的ES6的特性——這對我們開發者而言意味著什麼?

不要擔心,儘管整個AngularJS會基於ES6而寫,但是使用 Traceur compiler能編譯出ES5標準(ES5我們現在也稱為Javascript)。AngularJS同樣也增加了對Traceur compiler註釋和斷言的支援。透過新增註釋來替代糟糕的語法(就是目前的依賴註入,還能有什麼呢?),會使你寫的AngularJS的應用更具有宣告性。所以這樣寫AngularJS程式碼的速度會非常快(儘管不一定是最後的語法)。

@Inject(CoffeeMaker, Microwave)

class Pantry {

constructor(coffeeMaker, microwave) {

this.coffeeMaker = coffeeMaker;

this.microwave = microwave;

}

makeCoffee(finishedCb) {

this.coffeeMaker.turnOn();

this.coffeeMaker.makeCoffee(finishedCb);

}

}

AngularJS 2.0 將與ES5完全向後相容(必須這樣),如果你想,你可以繼續寫等效語法,而不用考慮ES6的語法。And AngularJS 2.0 will be fully backwards compatible with ES5 (it has to be), so you can continue writing an equivalent syntax without ever having to deal with ES6 syntax, if you so decide.

更快,平滑流暢

現在,所有東西都需要變得更快,如60幀讀取時間要小於400ms等等。在2.0版本中,同樣也將專註於速度。UI更新到底能有多快?如何加快資料系結?一種方法就是使用Object.observe替換AngularJS現在的臟檢查機制(dirty-checking),這是一個為模型更改監聽器新增原生支援以及資料系結的方案。AngularJS 2.0將完全使用這個以更好的加快資料系結和更新週期。

但是Object.observe現在只被Chrome canaries 支援,離Chrome canaries 成為所有瀏覽器的預設標準似乎還有很長一段時間。感謝AngularJS工作人員一直在努力改善檢測功能,併在瀏覽器沒有Object.observe支援的情況下,顯著改善了物件和陣列的臟檢查機制(dirty-checking)。他們的標的是能在1ms內處理數千的系結,設計檔案(design doc)上有AngularJS 2.0將如何處理這個問題。

靈活路由

路由是AngularJS 1.0版本的核心功能,併在1.2版本(ngRoute)中成為可選模組。其中的一部分來源於開源社群的一些適用於多樣需求的優秀作品,這就像孩子和兄弟那樣。UI-Router進一步處理了這些優秀的特點,並提供與ngRoute相似的語法。

2.0版本的標的是將某些功能(巢狀狀態、同級檢視)加入AngularJS核心路由。在此同時,AngularJS路由還有很多不容易解決的問題:

  • 基於狀態的轉換: UI-Router支援基於狀態的轉換,但 UI-Router並不是AngularJS的核心路由模型的一部分,所以不同的URL/應用的響應檢視部分的上級狀態和同級狀態,將會具有宣告性以及成為AngularJS 2.0路由的一部分。

  • 身份驗證和授權:這個已經在 AngularJS中解決了,但AngularJS 2.0將引入一個更通用的和容易理解的陳述句來支援授權和身份驗證,並能夠進行如下狀態請求:

  • 使用者請求登入

  • 只有管理員可以訪問某個頁面

  • 只有某一管理組的成員可以操作管理部分

  • 狀態保留:在AngularJS當前版本中,如果使用者迅速切換UI中的來迴路徑中的前進和後退,這些路徑的控制器和檢視每次都被銷毀並重新建立。這或許不是最優的解決方案,因此,AngularJS 2.0將設法解決儲存狀態之間的轉換(透過一個LRU快取或類似的東西),從而實現使用者視角上更快、更優的狀態轉換。

資料永續性

AngularJS 2.0最後一個難題就是永續性問題。AngularJS是純XHR請求支援,(透過 $http 和 $resource)套接字要透過第三方服務和整合包使用,並透過基礎應用的本地儲存實現線下支援。這些已經成為應用中再普通不過的事了,所以現在看來,增加AngularJS核心的通訊和永續性功能是必須的。以下是擴充套件計劃:

  • 第一階段,將在每個基礎專案的可選模組中支援Http通訊(使用 ngHttp), 本地儲存,會話儲存,索引資料庫訪問(透過 ngstore)和網路套接字API(透過ngWebSocket)。

  • 第二階段將在此基礎上構建線下優先的應用,能夠檢查連線狀態,離線快取資料等等。

  • 第三階段的最終標的是建造ngData模型,讓開發者能建立表現資料的模型類,並將其作為第一階段和第二階段模組之上的一個抽象層。因此,它需要能夠處理離線訪問、查詢網路,抓取頁面等等。

資料永續性的目的是提供給開發者能夠宣告式的建立api和正規化的工具和語言,以獲取他們的資料模型和訪問方式並展示給使用者。構建線下優先(offline-first)或實時多使用者存在應用的功能現在可能只有AngularJS核心模組才能實現。

總結

本文粗略地介紹了AngularJS 2.0承諾或試圖做的錶面上的重要改革。雖然我們距離AngularJS 2.0首個不穩定版本的釋出都還要幾個月,但對所有開發者的而言,AngularJS 2.0的未來都是令人興奮的。

編者按:想瞭解AngularJS詳細情況並如何構建結構化的web應用程式,需要看下“AngularJS:啟動並執行”這本書(“AngularJS: Up and Running” 作者:Shyam Seshadri 、 Brad Green)


原文出處:radar.oreilly.com

譯文出處:伯樂線上 – kinolee

贊(0)

分享創造快樂