新興技術(shù)來(lái)襲，Web開(kāi)發(fā)如何抉擇？
將Web視為應(yīng)用平臺(tái)的概念，正前所未有的流行著。但用來(lái)創(chuàng)建這些所謂“Web應(yīng)用”的工具仍存在許多經(jīng)常被我們忽視或誤解的陷阱。單頁(yè)面Web應(yīng)用框架已得到極大關(guān)注，我們可以借助這些框架創(chuàng)建一些復(fù)雜的高性能應(yīng)用，與傳統(tǒng)網(wǎng)站相比，這些應(yīng)用更可靠且交互更加豐富。但所有的這些益處，以及隨之而來(lái) 的思維模式和開(kāi)發(fā)方式的轉(zhuǎn)變，是以犧牲瀏覽器的基本功能為代價(jià)的，Web開(kāi)發(fā)者們有時(shí)卻將其視為理所當(dāng)然。
JavaScript可能非常脆弱
隨 著各家廠(chǎng)商不斷地炒作這股熱浪，我們可能誤以為當(dāng)用戶(hù)的瀏覽器不能執(zhí)行JavaScript時(shí)，并不需要為他們提供回退方案。用戶(hù)的瀏覽器不能執(zhí)行 JavaScript一定事出有因，他們手動(dòng)選擇禁用JavaScript只是眾多原因之一。維護(hù)英國(guó)政府網(wǎng)站的團(tuán)隊(duì)——政府?dāng)?shù)字服務(wù)（GDS）發(fā)現(xiàn)：每 500位訪(fǎng)問(wèn)GOV.UK的用戶(hù)中，有5人沒(méi)有請(qǐng)求JavaScript，其中只有1人主動(dòng)禁用了JavaScript，其他4人沒(méi)有請(qǐng)求可能因?yàn)橐韵聨?個(gè)原因：企業(yè)代理服務(wù)器限制過(guò)高；高延遲導(dǎo)致JavaScript請(qǐng)求超時(shí)；甚或是一個(gè)沒(méi)有被注意到的語(yǔ)法錯(cuò)誤。
此外，CSS和HTML都 可以?xún)?yōu)雅降級(jí)，而JavaScript卻做不到。這意味著，如果開(kāi)發(fā)者使用一個(gè)單一的ES6語(yǔ)法特性，甚或是調(diào)用一個(gè)沒(méi)有經(jīng)過(guò)驗(yàn)證的標(biāo)準(zhǔn)庫(kù)函數(shù)，他們的 JavaScript就很有可能在執(zhí)行過(guò)程中終斷或者根本就不執(zhí)行。如果你使用JavaScript來(lái)增強(qiáng)網(wǎng)站，上面提到的這些問(wèn)題尚且可以忍受，畢竟訪(fǎng) 問(wèn)者仍然可以訪(fǎng)問(wèn)鏈接，可以提交表單，可以使用Web能提供的最原始功能；但如果JavaScript是網(wǎng)站必不可少的一部分時(shí)，無(wú)論是誰(shuí)使用稍微過(guò)時(shí)的 瀏覽器都可能獲得一個(gè)空白頁(yè)面，自然也沒(méi)有人來(lái)解釋頁(yè)面為什么會(huì)變成空白。
語(yǔ)義結(jié)構(gòu)仍然非常重要
自1993年Tim Berners-Lee設(shè)計(jì)HTML以來(lái)，HTML為相互關(guān)聯(lián)的文檔網(wǎng)定義了一個(gè)通用結(jié)構(gòu)，也就是我們熟知的Web。滲透在這個(gè)通用結(jié)構(gòu)中的語(yǔ)義含義為 Web頁(yè)面中包含的信息提供了計(jì)算機(jī)可以處理的上下文。從實(shí)際的意義來(lái)說(shuō)，這些額外的信息增強(qiáng)了用戶(hù)使用Web瀏覽器時(shí)的體驗(yàn)。舉個(gè)例子，Web瀏覽器可 以實(shí)現(xiàn)一個(gè)向用戶(hù)的日歷中添加使用time元素定義的事件的方法；屏幕閱讀器可以用不同的方式通讀一個(gè)列表或一段文字，對(duì)于人類(lèi)來(lái)說(shuō)，文檔中的列表與段落 看起來(lái)明顯不一樣，HTML提供的通用框架讓計(jì)算機(jī)也能夠清晰分辨列表與段落。
HTML暗含的語(yǔ)義含義使Web與諸如Cocoa、WPF以 及Qt這樣的原生應(yīng)用環(huán)境有著不同的發(fā)展方向。結(jié)構(gòu)化的信息對(duì)Web來(lái)說(shuō)非常重要，因?yàn)槲覀冃枰ㄟ^(guò)多種方式訪(fǎng)問(wèn)Web信息。而當(dāng)我創(chuàng)建一個(gè)iPhone 應(yīng)用時(shí)，我可以穩(wěn)妥地假設(shè)每一個(gè)人都會(huì)用相同的方式去使用它。我的App總會(huì)以相同的方式呈現(xiàn)信息，并且我能夠完全掌控信息在應(yīng)用里的最終呈現(xiàn)。即使有些 人通過(guò)VoiceOver（Apple為視障人群提供的輔助技術(shù)）與我的App進(jìn)行交互，他們?nèi)匀豢梢耘c視力正常的用戶(hù)一樣：通過(guò)點(diǎn)擊屏幕進(jìn)行操作。唯一 的不同是他們需要聽(tīng)文字而不是去閱讀。
而這種方法在Web上卻行不通。人們除了通過(guò)Web瀏覽器訪(fǎng)問(wèn)網(wǎng)站，還會(huì)通過(guò)類(lèi)似Pocket、 Instapaper這樣的應(yīng)用來(lái)消費(fèi)網(wǎng)站內(nèi)容，這些應(yīng)用嘗試使用Web頁(yè)面的結(jié)構(gòu)化信息來(lái)提取網(wǎng)站的相關(guān)內(nèi)容。智能手表上的瀏覽器可能直接忽略你的布 局，然后通過(guò)更適合一英寸屏幕的方式展現(xiàn)你的信息。未來(lái)的設(shè)備也許能夠直接將網(wǎng)站提供的信息轉(zhuǎn)化為人類(lèi)大腦中的思維，這誰(shuí)又會(huì)知道呢？回過(guò)頭 看，VoiceOver的工作原理是按順序朗讀用戶(hù)指尖下排列的文字，然而Web屏幕閱讀器則通讀全部文檔，忽略布局，并且通過(guò)HTML標(biāo)簽的標(biāo)準(zhǔn)化語(yǔ)義 來(lái)推斷文檔含義。舉個(gè)例子，最近推出的main元素（譯者注：參考https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/main） 用來(lái)定義文檔的主體部分，Web屏幕閱讀器可以讀取并識(shí)別這樣的標(biāo)簽。對(duì)于一個(gè)視覺(jué)正常的用戶(hù)來(lái)說(shuō)，通過(guò)Google Chrome訪(fǎng)問(wèn)你的網(wǎng)站時(shí)，無(wú)論你使用<main>或者是<div id=”main”>基本沒(méi)有區(qū)別。但對(duì)于使用其它Web客戶(hù)端的人來(lái)說(shuō)，例如使用屏幕閱讀器或Instapaper，main元素隱含的含義可以 讓軟件更好地幫助他們?yōu)g覽文檔。
所以，開(kāi)發(fā)一款Web應(yīng)用不像為原生平臺(tái)開(kāi)發(fā)那么簡(jiǎn)單。在五個(gè)主流瀏覽器中確保應(yīng)用能按照我們的需求正常工 作并及時(shí)發(fā)布，對(duì)于Web平臺(tái)來(lái)說(shuō)還遠(yuǎn)遠(yuǎn)不夠，我們需要在屏幕閱讀器中測(cè)試我們的工作成果，需要重審我們的標(biāo)記來(lái)確保應(yīng)用能提供盡可能多的語(yǔ)義元數(shù)據(jù)—— 不僅需要協(xié)調(diào)已有的Web客戶(hù)端，也要為將來(lái)可能出現(xiàn)的一切設(shè)備做準(zhǔn)備。
目前，開(kāi)發(fā)者使用單頁(yè)面Web應(yīng)用框架需要針對(duì)加載JavaScript作出一個(gè)權(quán)衡。但在我看來(lái)，這些正是框架應(yīng)該去解決的問(wèn)題。作為Web開(kāi)發(fā) 者，我們有幸使用有史以來(lái)最通用的編程語(yǔ)言之一為Web編寫(xiě)應(yīng)用代碼。如果框架開(kāi)發(fā)者能夠夜以繼日（不可否認(rèn)任務(wù)非常艱辛）地使應(yīng)用像在瀏覽器中一樣地運(yùn) 行在Node中，服務(wù)器就可以完成初始頁(yè)面渲染的任務(wù)，隨后所有的任務(wù)由瀏覽器負(fù)責(zé)處理。當(dāng)然，如果服務(wù)器可以將鏈接渲染成a標(biāo)簽的形式，就像Ember 目前在客戶(hù)端上實(shí)現(xiàn)的那樣，那么就可以允許沒(méi)有收到JavaScript的用戶(hù)（無(wú)論出于什么樣的原因）正常瀏覽網(wǎng)站。同樣也可以通過(guò)在服務(wù)器（而不是在 客戶(hù)端）上運(yùn)行所有的驗(yàn)證和子任務(wù)邏輯，使表單正常工作。如果框架維護(hù)者一開(kāi)始就朝著這個(gè)方向努力，那么每一個(gè)使用該框架的開(kāi)發(fā)者都可以立即將一個(gè)只能工 作在最新Web瀏覽器中的應(yīng)用轉(zhuǎn)換為一種漸進(jìn)增強(qiáng)的體驗(yàn)，這樣做幾乎可以兼容任何Web客戶(hù)端——過(guò)去的、現(xiàn)在的、以及未來(lái)的。
漸進(jìn)增強(qiáng)對(duì) 于Web開(kāi)發(fā)者來(lái)說(shuō)早已是重要的一環(huán)，它使我們意識(shí)到對(duì)于Web體驗(yàn)來(lái)說(shuō)內(nèi)容是至關(guān)重要的一部分，任何針對(duì)用戶(hù)體驗(yàn)的額外改進(jìn)不應(yīng)當(dāng)破壞任何一個(gè)客戶(hù)端訪(fǎng) 問(wèn)Web頁(yè)面所包含的內(nèi)容。目前創(chuàng)建單頁(yè)面應(yīng)用的方法傾向于放棄這條準(zhǔn)則，然而漸進(jìn)增強(qiáng)和單頁(yè)面應(yīng)用從本質(zhì)上來(lái)講其實(shí)可以相互兼容。
事實(shí) 上，這個(gè)領(lǐng)域已經(jīng)有了不小的進(jìn)步，例如，一個(gè)Ember內(nèi)部的團(tuán)隊(duì)正在通過(guò)實(shí)現(xiàn)服務(wù)端渲染來(lái)改進(jìn)Ember與搜索引擎的兼容性。但是由單頁(yè)面Web應(yīng)用引 發(fā)的問(wèn)題的解決方案并不能只依賴(lài)純技術(shù)角度：人們看待Web的方式已成為一個(gè)日益嚴(yán)重的問(wèn)題。將Web視為另一個(gè)應(yīng)用平臺(tái)的做法已司空見(jiàn)慣，但是Web所 能做的比這多得多。無(wú)論訪(fǎng)問(wèn)者通過(guò)2000美元的iMac還是50美元的安卓平板，甚至在我們無(wú)法想象的未來(lái)，花費(fèi)5美元就可以購(gòu)買(mǎi)的Web客戶(hù)端來(lái)訪(fǎng) 問(wèn)，Web始終是一個(gè)通用信息平臺(tái)。事實(shí)上，不犧牲小部分用戶(hù)的體驗(yàn)對(duì)我們來(lái)說(shuō)非常重要，如此一來(lái)我們可以在這個(gè)過(guò)程中稍微改進(jìn)一下其余正在破壞Web普 適性的體驗(yàn)。
作者：Ross Penman是一位來(lái)自蘇格蘭的web開(kāi)發(fā)者和狂熱的技術(shù)專(zhuān)家。2014年度新型人才網(wǎng)絡(luò)獎(jiǎng)決賽入圍選手。Ross經(jīng)常慶祝他的工作來(lái)促進(jìn)科技領(lǐng)域的年輕人。他的Twitter內(nèi)容與web開(kāi)發(fā)和口袋怪獸訓(xùn)練有關(guān)。
