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