新興技術(shù)來襲，Web開發(fā)如何抉擇？

將Web視為應(yīng)用平臺的概念，正前所未有的流行著。但用來創(chuàng)建這些所謂“Web應(yīng)用”的工具仍存在許多經(jīng)常被我們忽視或誤解的陷阱。單頁面Web應(yīng)用框架已得到極大關(guān)注，我們可以借助這些框架創(chuàng)建一些復(fù)雜的高性能應(yīng)用，與傳統(tǒng)網(wǎng)站相比，這些應(yīng)用更可靠且交互更加豐富。但所有的這些益處，以及隨之而來 的思維模式和開發(fā)方式的轉(zhuǎn)變，是以犧牲瀏覽器的基本功能為代價的，Web開發(fā)者們有時卻將其視為理所當(dāng)然。

JavaScript可能非常脆弱

隨 著各家廠商不斷地炒作這股熱浪，我們可能誤以為當(dāng)用戶的瀏覽器不能執(zhí)行JavaScript時，并不需要為他們提供回退方案。用戶的瀏覽器不能執(zhí)行 JavaScript一定事出有因，他們手動選擇禁用JavaScript只是眾多原因之一。維護(hù)英國政府網(wǎng)站的團(tuán)隊——政府?dāng)?shù)字服務(wù)（GDS）發(fā)現(xiàn)：每 500位訪問GOV.UK的用戶中，有5人沒有請求JavaScript，其中只有1人主動禁用了JavaScript，其他4人沒有請求可能因為以下幾 個原因：企業(yè)代理服務(wù)器限制過高；高延遲導(dǎo)致JavaScript請求超時；甚或是一個沒有被注意到的語法錯誤。

此外，CSS和HTML都 可以優(yōu)雅降級，而JavaScript卻做不到。這意味著，如果開發(fā)者使用一個單一的ES6語法特性，甚或是調(diào)用一個沒有經(jīng)過驗證的標(biāo)準(zhǔn)庫函數(shù)，他們的 JavaScript就很有可能在執(zhí)行過程中終斷或者根本就不執(zhí)行。如果你使用JavaScript來增強網(wǎng)站，上面提到的這些問題尚且可以忍受，畢竟訪 問者仍然可以訪問鏈接，可以提交表單，可以使用Web能提供的最原始功能；但如果JavaScript是網(wǎng)站必不可少的一部分時，無論是誰使用稍微過時的 瀏覽器都可能獲得一個空白頁面，自然也沒有人來解釋頁面為什么會變成空白。

語義結(jié)構(gòu)仍然非常重要

自1993年Tim Berners-Lee設(shè)計HTML以來，HTML為相互關(guān)聯(lián)的文檔網(wǎng)定義了一個通用結(jié)構(gòu)，也就是我們熟知的Web。滲透在這個通用結(jié)構(gòu)中的語義含義為 Web頁面中包含的信息提供了計算機(jī)可以處理的上下文。從實際的意義來說，這些額外的信息增強了用戶使用Web瀏覽器時的體驗。舉個例子，Web瀏覽器可 以實現(xiàn)一個向用戶的日歷中添加使用time元素定義的事件的方法；屏幕閱讀器可以用不同的方式通讀一個列表或一段文字，對于人類來說，文檔中的列表與段落 看起來明顯不一樣，HTML提供的通用框架讓計算機(jī)也能夠清晰分辨列表與段落。

HTML暗含的語義含義使Web與諸如Cocoa、WPF以 及Qt這樣的原生應(yīng)用環(huán)境有著不同的發(fā)展方向。結(jié)構(gòu)化的信息對Web來說非常重要，因為我們需要通過多種方式訪問Web信息。而當(dāng)我創(chuàng)建一個iPhone 應(yīng)用時，我可以穩(wěn)妥地假設(shè)每一個人都會用相同的方式去使用它。我的App總會以相同的方式呈現(xiàn)信息，并且我能夠完全掌控信息在應(yīng)用里的最終呈現(xiàn)。即使有些 人通過VoiceOver（Apple為視障人群提供的輔助技術(shù)）與我的App進(jìn)行交互，他們?nèi)匀豢梢耘c視力正常的用戶一樣：通過點擊屏幕進(jìn)行操作。唯一 的不同是他們需要聽文字而不是去閱讀。

而這種方法在Web上卻行不通。人們除了通過Web瀏覽器訪問網(wǎng)站，還會通過類似Pocket、 Instapaper這樣的應(yīng)用來消費網(wǎng)站內(nèi)容，這些應(yīng)用嘗試使用Web頁面的結(jié)構(gòu)化信息來提取網(wǎng)站的相關(guān)內(nèi)容。智能手表上的瀏覽器可能直接忽略你的布 局，然后通過更適合一英寸屏幕的方式展現(xiàn)你的信息。未來的設(shè)備也許能夠直接將網(wǎng)站提供的信息轉(zhuǎn)化為人類大腦中的思維，這誰又會知道呢？回過頭 看，VoiceOver的工作原理是按順序朗讀用戶指尖下排列的文字，然而Web屏幕閱讀器則通讀全部文檔，忽略布局，并且通過HTML標(biāo)簽的標(biāo)準(zhǔn)化語義 來推斷文檔含義。舉個例子，最近推出的main元素（譯者注：參考https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/main） 用來定義文檔的主體部分，Web屏幕閱讀器可以讀取并識別這樣的標(biāo)簽。對于一個視覺正常的用戶來說，通過Google Chrome訪問你的網(wǎng)站時，無論你使用<main>或者是<div id=”main”>基本沒有區(qū)別。但對于使用其它Web客戶端的人來說，例如使用屏幕閱讀器或Instapaper，main元素隱含的含義可以 讓軟件更好地幫助他們?yōu)g覽文檔。

所以，開發(fā)一款Web應(yīng)用不像為原生平臺開發(fā)那么簡單。在五個主流瀏覽器中確保應(yīng)用能按照我們的需求正常工 作并及時發(fā)布，對于Web平臺來說還遠(yuǎn)遠(yuǎn)不夠，我們需要在屏幕閱讀器中測試我們的工作成果，需要重審我們的標(biāo)記來確保應(yīng)用能提供盡可能多的語義元數(shù)據(jù)—— 不僅需要協(xié)調(diào)已有的Web客戶端，也要為將來可能出現(xiàn)的一切設(shè)備做準(zhǔn)備。

目前，開發(fā)者使用單頁面Web應(yīng)用框架需要針對加載JavaScript作出一個權(quán)衡。但在我看來，這些正是框架應(yīng)該去解決的問題。作為Web開發(fā) 者，我們有幸使用有史以來最通用的編程語言之一為Web編寫應(yīng)用代碼。如果框架開發(fā)者能夠夜以繼日（不可否認(rèn)任務(wù)非常艱辛）地使應(yīng)用像在瀏覽器中一樣地運 行在Node中，服務(wù)器就可以完成初始頁面渲染的任務(wù)，隨后所有的任務(wù)由瀏覽器負(fù)責(zé)處理。當(dāng)然，如果服務(wù)器可以將鏈接渲染成a標(biāo)簽的形式，就像Ember 目前在客戶端上實現(xiàn)的那樣，那么就可以允許沒有收到JavaScript的用戶（無論出于什么樣的原因）正常瀏覽網(wǎng)站。同樣也可以通過在服務(wù)器（而不是在 客戶端）上運行所有的驗證和子任務(wù)邏輯，使表單正常工作。如果框架維護(hù)者一開始就朝著這個方向努力，那么每一個使用該框架的開發(fā)者都可以立即將一個只能工 作在最新Web瀏覽器中的應(yīng)用轉(zhuǎn)換為一種漸進(jìn)增強的體驗，這樣做幾乎可以兼容任何Web客戶端——過去的、現(xiàn)在的、以及未來的。

漸進(jìn)增強對 于Web開發(fā)者來說早已是重要的一環(huán)，它使我們意識到對于Web體驗來說內(nèi)容是至關(guān)重要的一部分，任何針對用戶體驗的額外改進(jìn)不應(yīng)當(dāng)破壞任何一個客戶端訪 問Web頁面所包含的內(nèi)容。目前創(chuàng)建單頁面應(yīng)用的方法傾向于放棄這條準(zhǔn)則，然而漸進(jìn)增強和單頁面應(yīng)用從本質(zhì)上來講其實可以相互兼容。

事實 上，這個領(lǐng)域已經(jīng)有了不小的進(jìn)步，例如，一個Ember內(nèi)部的團(tuán)隊正在通過實現(xiàn)服務(wù)端渲染來改進(jìn)Ember與搜索引擎的兼容性。但是由單頁面Web應(yīng)用引 發(fā)的問題的解決方案并不能只依賴純技術(shù)角度：人們看待Web的方式已成為一個日益嚴(yán)重的問題。將Web視為另一個應(yīng)用平臺的做法已司空見慣，但是Web所 能做的比這多得多。無論訪問者通過2000美元的iMac還是50美元的安卓平板，甚至在我們無法想象的未來，花費5美元就可以購買的Web客戶端來訪 問，Web始終是一個通用信息平臺。事實上，不犧牲小部分用戶的體驗對我們來說非常重要，如此一來我們可以在這個過程中稍微改進(jìn)一下其余正在破壞Web普 適性的體驗。

作者：Ross Penman是一位來自蘇格蘭的web開發(fā)者和狂熱的技術(shù)專家。2014年度新型人才網(wǎng)絡(luò)獎決賽入圍選手。Ross經(jīng)常慶祝他的工作來促進(jìn)科技領(lǐng)域的年輕人。他的Twitter內(nèi)容與web開發(fā)和口袋怪獸訓(xùn)練有關(guān)。