摘要:客戶端框架的個痛點我們早知道會面臨很多的困難,但是不知道會有這么難。這是對的,但是總體上來說,客戶端框架降低了遲緩的開銷。但是,這些問題加在一起就是另一回事了,可以說,客戶端框架成為了我們開發工作的一大負擔。
更新: 本文原本的標題是“為何我們棄用AngularJS:……”,現在把它去掉了。因為這些痛點主要是針對單頁JS應用框架的。有些人認為本文是專門批判AngularJS的,這可不是我的本意。-- Quinn
幾個月前我們的Sourcegraph網站向公眾開放,它是一個富AngularJS應用。服務器傳輸原始的HTML頁面和JSON端點,剩下的就交給Angular來處理。這是一個創建Sourcegraph的簡易方式,當時我們不知道Sourcegraph會變成什么樣。
但是單頁JavaScript框架并不適用于每一個站點。Sourcegraph是一個內容為主的站點,我們漸漸發現富js應用弊大于利。富js應用的好處眾所周知,下面是我們體會到的一些意料之外的困難。希望對面臨類似選擇的開發人員能有一些幫助。
客戶端JS框架的5個痛點我們早知道會面臨很多的困難,但是不知道會有這么難。
1. 糟糕的搜索排名和Twitter/Facebook預覽搜索引擎爬蟲和社交網站的預覽抓取器不能加載純Javascript站點,提供替代版本又慢又復雜。
有兩種方式可以允許爬蟲閱讀你的站點。你可以在服務器端運行一個瀏覽器實例來執行你的應用里的Javascript,然后從DOM中卸下HTML(使用PlantomJS或者WebLoop)。或者你可以創建一個服務端生成的專供爬蟲的替代性HTML版本。
第一個方法需要你為每一個頁面加載建立一個headless瀏覽器(或者tab),比起直接產出HTML,這樣會花費很多的時間和系統資源。取決于你使用的框架,需要不少精力來決定什么時候頁面已經準備好了。 你可以緩存頁面,但是如果頁面經常改變,那么緩存只能起到非常有限的優化作用,而且會增大復雜度。這個方法會將你的頁面加載速度拖慢好幾秒,對搜索引擎排名也不利。
第二個方法(創建一個替代性的服務器端站點)對簡單站點而言足夠了,但是如果頁面很多,這將是一個噩夢。況且如果Google認為你的服務器版本站點跟你的主站版本有很大的不同,那他就會狠狠的懲罰你。糟糕的是,直到你的訪問量直線下降的時候你才會意識到你已經過界了。
2. 不可靠的統計和監控很多分析工具需要使用易于出錯、手工集成的HTML5 history API(pushState)來導航。這是因為它們無法自動檢測到你的應用使用pushState導航到了新的頁面。即使可以做到,它們仍然需要等待你應用的信號來收集新頁面的其他信息(例如頁面標題和其他頁面特定的指標)。
你如何解決這個問題?同時取決于你的客戶端路由庫和你集成的分析工具。用Google分析和Backbone.js?嘗試一下backbone.analytics。用Heap(順便說一下,Heap很棒)和UI-Router?設置你自己的$stateChangeSuccess鉤子然后調用heap.track
還沒完!你想追蹤起始頁面加載?也許你重復跟蹤了?你會跟蹤失敗的頁面加載嗎?如果你使用replaceState代替pushState呢?即使要獲知你是否錯誤地配置了分析鉤子——或者是否依賴升級搞亂了系統——也是相當困難的,除非交叉檢查分析。當你發現問題后,很難去恢復你錯過的分析數據(或者消除重復數據)。
3. 緩慢、復雜的構建工具前端JavaScript構建工具,例如Grunt,需要復雜的配置而且會很慢。還好我們有像ng-boilerplate這樣出色的項目來幫忙,但是它們很慢。并且如果你想添加一個自定義的步驟的話你還是無法避免復雜性。(我為什么說Grunt復雜,看看這個配置文件就知道了。)
一旦你配置好了你的應用,包括Gruntfiles等等。你仍然要忍受漫長的JavaScript構建時間。你可以把dev和production構建通道分開來提高開發速度,但是你終將深受其苦。用AngularJS尤其如此,他需要在壓縮代碼前使用ngmin(如果你用了特定功能)。事實上,我們有幾次就是因為這些壓縮的JavaScript和開發時的代碼表現不同而把SourceGraph搞砸了。
事情正在改善,Gulp是一個巨大的提升。
4. 慢,不可靠的測試測試JavaScript-only的站點需要使用基于瀏覽器的測試框架,比如Selenium,PhantomJS,或者WebLoop。安裝這些(除了PhantomJS)通常意味著安裝WebKit和Java依賴,配置Xvfb(雖然新版的PhantomJS移除了這些依賴),也許運行一個本地的VNC客戶端和服務器來測試。最后,你還需要在持續集成服務器上配置這些東西。
相反,測試服務器端生成的頁面通常只需要類庫來獲取URL和解析HTML,安裝和配置要簡單許多。
一旦你開始編寫瀏覽器測試,你必須處理異步加載。你不能在頁面還沒有加載的時候就測試頁面上的元素,但是如果在一個特定時間段里沒有加載,你的測試就會失敗。瀏覽器測試類庫提供了一些幫助函數來處理這種情況,但是對于復雜頁面它們只能幫上一點小忙。
你想組合很重的瀏覽器測試工具(Selenium,加上Firefox或者Webkit)和很大的測試復雜度(由于瀏覽器測試的異步本性)?你的測試需要很多配置,很長的時間來運行,而且很不可靠。
5. 被掩蓋的未根除的緩慢在富JavaScript應用中,頁面轉換幾乎是瞬間發生,然后所有的特定元素異步加載。服務器端應用恰恰相反:頁面在服務器端加載完成前不會發送到客戶端。
聽起來似乎是客戶端應用勝利了,但是也許這不過是一個偽裝的詛咒。
考慮客戶端JS應用,當用戶點擊一個鏈接,頁面會立刻加載并呈現。如果用戶導航到一個側邊欄需要5秒鐘才可以加載的頁面,第一眼感覺很快,但是如果用戶需要的信息在側邊欄里,對用戶來說就太慢了。即使你需要的特定內容能立即加載,你仍需要忍受轉動的加載指示器和頁面填充時的抖動。
現在考慮一下這樣的情況:如果開發人員想在那個頁面添加新功能。很難確定這個功能是否必須快速加載——因為一切都是異步的,所以誰會在意頁面底部過了幾秒才加載呢?如此反復幾次,整個站點就會讓人覺察到遲緩和抖動。
在服務器端應用中,如果一個API調用很慢,整個頁面就會阻塞直到頁面完成。服務器端的緩慢不可能被忽視,因為這很容易被測量,并且會公平地影響每一個人。但是在客戶端應用中這很容易被忽略。
你可以爭論說,一個好的開發團隊應該避免這些錯誤,并且客戶端 JS 框架不是罪魁禍首。這是對的,但是總體上來說,客戶端JS框架降低了遲緩的開銷。這一點觸動了開發團隊的激勵機制。
接下來怎么辦?上面說的問題,本身都不算大問題。我們可以做很多工作來減輕上述情況(事實上我們確實做了很多)。但是,這些問題加在一起就是另一回事了,可以說,客戶端JS框架成為了我們開發工作的一大負擔。
同時要牢記,每一個站點都是不同的。例如,Sourcegraph是一個內容站點,這意味著頁面在加載后不會有太多的變化(和富應用相比)。我們依然喜愛這些技術,但是它們不是構建我們的主站的合適工具。
原文 5 surprisingly painful things about client-side JS
翻譯 SegmentFault
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/87491.html
摘要:前端單元測試,推薦淘寶開源的工具,簡單易用,支持眾多測試框架,也支持調試。這些也是設計前端框架時需要權衡的重要方面。最后,其實大型網站不一定要設計自己的前端框架,完全可以選用現有的框架。 有人在知乎上提問如何設計大型網站的前端 JavaScript 框架,有不少回答,其中得贊較多的兩個回答如下: 相對大型的項目在前端 JS 方面有幾個需要達成的目標: 1. 代碼邏輯分層 ...
摘要:縱觀年的發展,年企業云及現代數據中心將面臨機遇與挑戰共存的格局。總體來看,五大技術發展趨勢,值得重點關注。總之,到年,必將成為云和本地應用的最佳系統。云成本可控性,成為重要關注點提到云計算,許多企業并沒有意識到轉型的代價有多大。 縱觀2018年的發展,2019年企業云及現代數據中心將面臨機遇與挑戰共存的格局。總體來看,五大技術發展趨勢,值得重點關注。showImg(https://se...
摘要:我們隊年的預測基本正確,當中有些預測趨勢也可以用于新的一年,下面繼續看到對年數據科學機器學習和人工智能領域的預測。 showImg(https://segmentfault.com/img/bVbnqYV?w=1024&h=512); 作者:William VorhiesCDA數據分析研究院原創作品, 轉載需授權? 2018年剛剛結束,在2019年到來之際,讓我們一起展望在今年數據科學...
摘要:遠程醫療這一概念被提出后,已經被廣泛應用。但是,如何提高視頻傳輸性能,如何確保家庭基層醫療機構和戶外應急的遠程醫療快速接入,是當前的遠程醫療業務系統面臨的主要挑戰。 編者按:近日,Gartner最新發布了一份《Five Key Essentials for the New Generation of Intelligent Video Cloud》白皮書報告,報告中針對各行業在視頻應用...
閱讀 3066·2023-04-25 18:54
閱讀 2591·2021-11-02 14:40
閱讀 3176·2021-09-23 11:58
閱讀 2424·2019-08-30 13:50
閱讀 1231·2019-08-29 12:46
閱讀 3117·2019-08-28 17:51
閱讀 679·2019-08-26 11:47
閱讀 897·2019-08-23 16:17