前端開發前景怎麼樣?物聯網世界的前端開發

萬維網不斷髮展和演變，至今已經有 27 年曆史。

 咱們如何展示內容和給內容添加樣式在萬維網發展的不一樣階段有不一樣的形式，最近新出現的形式是響應式網頁 —— 一個網頁可以適配多個瀏覽器和不一樣屏幕大小的設備。

當一個網站涉及到愈來愈多的「物聯網」（IoT）設備諸如樹莓派、智能手錶、語音私人助理以及其餘許多 —— 響應式網頁的潛力面臨挑戰。

IoT 意味着更多五花八門的設備從網頁加載內容。若是咱們想要避免早期的移動和 PC 桌面戰爭的歷史重演，咱們就須要確保在這些新設備下，網頁仍然可以像使用其餘經常使用設備那樣可訪問和可用。咱們最不肯意見到的事情是不得不爲 IoT 設計一個版本的網頁，而後爲移動和 PC Web 設計另一個版本。

 

 1   哪些IoT設備可能呈現網頁？

 

許多開發者不太意識到潛在的衆多設備在將來極可能嘗試展示網頁內容給用戶。

 

擁有小屏幕顯示器的計算設備

 

Adafruit 生產的配有一個 2.8 英寸觸屏的樹莓派

 

一些設備例如配有 2.4 英寸或者更大一些的微型顯示屏的樹莓派能使用 Wi-Fi、以太網甚至 3G/4G 網絡，使得它頗有可能用來展示網頁內容。這個內容多是來自萬維網的網站或者本地網頁例如嵌入式設備的說明書、基於網頁的設備控制頁面以及以網頁方式呈現的後臺系統儀表盤。

 

▼▼▼

智能手錶

 

Appfour 的 Android Wear 的 Web 瀏覽器

 

智能手錶擁有更小的顯示屏，與傳統的顯示屏在可顯示顏色範圍和屏幕分辨率上有明顯的區別。雖然 Apple Watch 尚未內置 Web 瀏覽器，Android 上有一個 Appfour 開發的 Android Wear 版的 Web 瀏覽器 ，而頗有可能隨着時間的推移，更多智能手錶的 Web 瀏覽器將問世（假設有人某天忽然領悟瞭如何爲手錶設計一款易於使用的 Web 瀏覽器！）。

至少，若是 Web 真正能在任何設備上作到適配和可用，咱們就能爲（大量手錶瀏覽器問世的）這一天作好準備。若是在未來，有人在他的智能手錶上讀 email，當他點擊郵件裏的連接，會發生什麼？一個簡單的 Web 瀏覽器出如今一個強大的智能手錶上的那一天不會太遙遠。

 

▼▼▼

語音私人助理

Amazon Echo

 

在計算機領域的一個新的趨勢是智能語音服務，例如 Apple 的 Siri、Amazon Echo 的 Alexa、Google Now 以及 Microsoft 的 Cortana。這些助理在家居生活中能夠起到的做用包括控制開關燈、設置鬧鐘、調節空調溫度等等。

✦這些服務響應語音控制，對提問進行在線數據檢索 —— 一般這涉及到匹配每一個公司的數據庫信息來找到詳細答案，而這些答案數據自己來自於用戶自身對這些服務的使用。對於這一有趣的領域，我以前在 SitePoint 這裏寫過如何上手創建你本身的簡單的人工智能助手的內容，其中一部分在「Five Simple Ways to Build Artificial Intelligence in 2016 以及一系列文章關於 「How to Build Your Own AI Assistant Using Api.ai」。

隨着時間的推移，隨着人工智能和機器學習的改進，這些智能助理可能會在網頁上尋找信息，將其中的一些內容反饋給咱們。

爲了讓這成爲可能，網頁須要保持可訪問性，讓機器人可讀取內容，而不只僅是將它視覺上展示出來。理想而言，網頁本該已經被結構化，以適合屏幕閱讀器閱讀，然而採用可訪問的標籤經常是過後纔有的想法。私人助理 AI 服務的出現，可能有助於改變這一現狀。

 

▼▼▼

全新的顯示設備

物聯網時代將來的計算機顯示，可以包含一系列新的和很是神奇的可能性。想一想一些設備例如智能鏡子、智能窗戶，智能汽車儀表盤 —— 這些變化將在咱們的生活中隨處發生，可是 Web 在這些新設備上展示的效果如何？一系列新的設計決策將產生 —— 在鏡子/窗戶上顯示內容，你可能須要有更多的顏色對比度。開發者開發鏡子/窗戶的顯示內容是否須要考慮限制使用的顏色範圍？將來將迎來全新的（和使人興奮）的世界。

梅賽德斯·奔馳的儀表盤原型

 

 2   讓咱們的CSS和標記語言適用於將來

 

如果咱們想擁有一個與新技術很好地相結合的 Web 將來，開發者須要密切關注幾個關鍵領域。

 

真正的響應式 CSS

網頁須要適配到微型顯示器，在它之上保持相對可讀。CSS將是適配很是小的顯示分辨率的關鍵。CSS 是否能像處理移動網站那樣處理微型屏幕？咱們是否須要建立新的規則和標準來以更大的字體顯示文本？是否須要新的相似於 Flexbox 的標準來爲微型屏幕調整佈局？是否須要新的標準來給微型顯示器的菜單增長樣式？時間會說明一切，可是一些選擇了使用 Web 的開發者可能會成爲這一領域的先驅，而社區將如何跟進會是一件很是吸引人的事。

 

picture 元素

<picture> 元素讓咱們可以指定多張圖片來根據不一樣的分辨率和設備類型決定加載哪一張圖。這一規範將是確保在相對低功率的設備和慢速鏈接設備，以及很是小的分辨率沒法顯示大圖的設備上平滑運行網頁的關鍵。

 

依賴 JavaScript 很危險

一些低功率設備和我的輔助設備將讀取網頁內容，但它們可能不須要運行 JavaScirpt 或者不能像智能手機和平板電腦那樣處理 JavaScript。若是你的網站依賴 JavaScript 來拉取數據又沒有任何向後兼容，較新的 IoT 設備極可能不能訪問你的網站。確保網頁在沒有 JavaScript 的時候能工做依然是一件值得作的事情！

 

WAI-ARIA 及其餘無障礙技術

現有技術已經可以讓 Web 被那些殘障人士無障礙使用，他們同樣可使用人工智能、私人助理和其餘基於語音的技術。用 WAI-ARIA 和其餘無障礙技術創建網站可能有助於減小將來的返工量，而且在當下也對殘障人士很是有幫助。咱們涵蓋了這個話題的一些細節內容在 「How to Use ARIA Effectively with HTML5」 以及 「Avoiding Redundancy with WAI-ARIA in HTML Pages」。

 

顏色和設計選擇

基於鏡子和窗戶的顯示可能須要從設計上提升顏色對比度來確保它在浴室、天空和其餘房間等有豐富背景色的場景下可以清晰顯示。

顯示設備諸如智能鏡子可能顯示內容的方式相似咱們今天的操做系統裏的 「高對比度模式」，這個模式反轉你的屏幕顏色來提升對比度。爲了在這樣不一樣形式的顯示設備上顯示內容，智能鏡子可能須要採用一樣的技術。若是你的網頁設計可以在高對比度模式下很好地展示而且讓你的網站主題在這樣的模式下有強烈的色彩對比，那麼這就不成爲問題了。

 

個人藝術家對高對比度 SitePoint 的印象：Max Braun’s concept smart mirror

 

 3   DOM 複雜度

 

盡管臺式機和智能手錶都能處理複雜的 DOM 結構以及大量嵌套元素和 CSS transitions，可是 IoT 設備和可穿戴設備在處理複雜 DOM 時出問題是徹底有可能的。保持一個簡潔的 DOM 元素結構可能對提高這些新設備的性能比以往任什麼時候候都重要。

 

 4   測試將變得艱難

 

在智能手機、桌面平板、智能電視和桌面操做系統上測試你的網站已經至關困難，由於物聯網和其餘技術不斷進步（虛擬和加強現實也來了！），充分測試每一種設備變得愈來愈困難。採用 Web 標準、無障礙標準以及上面提到的思路將有助於讓網頁設計儘量可用。

必定程度的遠見將成爲將來十年內專業的 Web 開發人員的必要技能，由於他們須要在不實際接觸每一個具體設備來進行測試的狀況下，想象網頁設計將如何在一系列設備上展示。

 

 5   通用的 API

 

響應式網頁將不會是物聯網上惟一的基於 Web 的信息源。響應式網頁將會有一個同伴，它與響應式網頁一樣重要，咱們以前討論過它 —— the Omnipresent API（通用的 API）。

這將是 server 端等同於 Web 的重要性的技術，它可以加快新技術的集成和適配，觸及 Web 瀏覽器自身達不到的領域。通用的 API 是指 API 可以以平臺無關的方式，爲一個應用或服務提供功能或數據訪問。

✦缺乏了通用 API，響應式網站就沒有了適應性，也致使新技術的每一部分彼此分離，不能融合到一塊兒。

 

▼▼▼

響應式 Web 和通用 API 都存在是相當重要的。

咱們的響應式 Web 將由能夠適用於各類技術的通用 API 來填充內容。沒有 Web 瀏覽器的設備應該有應用軟件能夠經過通用 API 來填充內容。

一旦一臺設備訪問了 Web 瀏覽器，內容也應該可以經過響應式 Web 來訪問。要了解通用 API 的更多內容，能夠讀一讀個人做品： 「[The Era of the Omnipresent API]」(https://devdiner.com/opinion/the-era-of-the-omnipresent-api)。

 

 6   結論

 

我們前端開發實踐者能夠不作上面這些改變來適應物聯網和其餘技術演變。然而，我相信若是咱們不去改變，Web 技術將被限制於桌面應用和少許移動應用，正如響應式 Web 的真正潛力被移動 App 的盛行所阻礙。

若是 Web 不適應，咱們可能會看到應用軟件分割爲可穿戴 App、IoT App、Alex App 等等，這些 App 成爲孤島 —— 而不是分享 Web 的共同生態圈。學習web前端選擇知海匠庫http://www.zhihaijiangku.com，課程系統完善，項目教學，就業指導，一站式幫你快速就業！