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

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)

分享創造快樂