2012年12月23日 星期日

在 2013 年會改變 Web 的五個 API

原文網址:http://blog.alexmaccaw.com/the-next-web

本篇沒有很講究翻譯上的精確度,可能會有漏字 or 自行腦補。另外原文有對一些字設定 style,並沒有完整一一對應到譯文中。

看 Web 的發展實在讓人興奮爆了,即將到來的 2013 年會有更多的進步。在接下來的一年中,有許多可能會從本質上改變我們開發與使用 Web 方式的技術會陸續出現。


CSS 自訂 Filter

CSS filter 在 Chrome 跟 Safari 已經可以用了,允許你作一些進階的效果例如:模糊、扭曲、改變色彩飽和度。不過這只是開頭暖身而已。CSS 自訂 Filter 讓你可以用 GLSL(過去十年中,在傳統 3D rendering 領域必備的語言)撰寫你自己的片段與 vertex shadow。

在實戰中這代表什麼呢?就是你可以創造出令人難以置信的效果。跟 CSS transition 一起用,從頁面捲動到 folding element,你都可以製作出很好的轉場效果。唯一的限制就是你想像力的極限!
什麼時候可以開使用咧?Adobe 已經開始拓展這項技術了,自訂 Filter 已經是 Chrome 的一個 flag 了。預計明年出就可以看到。現在你可以在 Canary 版的 Chrome 玩玩這些效果

Autocomplete API

這個 API 有可能完全改變網路上的註冊與付費行為。Autocomplete 設計來讓填表單變得更容易一點,而且甚至還有一個規格來提示輸入的相關資料。

然而,Autocomplete 是在處理症狀而不是治療疾病。早在今年六月,我提出了一個 API 的構想,可以用程式去取得儲存在 browser 的 autofill 資料。這表示在實戰當中,我們可以把很多註冊或付費的表單改成一鍵完成,會大幅度地改進使用率以及轉換率。

Chrome 的團隊一直致力於這個想法,在 10 月時提交了企劃書WebKit 的 patch。這真的讓人非常興奮,如果與 Mozilla Persona 結合,可能會徹底改變網路上的註冊與付費行為。

所以什麼時候可以在野外(譯註:原文是 wild [逃])看到這玩意?這個嘛... 幕後的工作已經完成,Chrome 仍然需要實作 UI 來整合這個功能。我認為明年年底會看到。

Google Chrome Apps

我告訴你:Google 偷偷做了一個 OS 涵蓋你所有設備,包含 Laptop 跟手機。Google 不是用另一個 OS 來跟 M$、Apple 對抗,而是決定在既有的 OS 上建立一個自己的平台——就是 Chrome。

所以第一步就是散佈程式,Chrome 已經有三億五千萬個使用者。第二步是拓展 Chrome 的 API,讓開發人員更能夠存取 OS 然後取代傳統桌面應用程式的需求。

幾個月前,Google 悄悄發佈了 Chrome Packaged Apps,這可以讓開發人員利用 Chrome 建立桌面應用程式。這些應用程式可以從 Chrome Web Store 中僅按下一個按鍵就安裝完畢,並透過系統 API 來存取 USB、藍牙、UDP socket,以及可以用桌面捷徑來開啟。對於沒有受過專業訓練的人來說,這些 application 都是完全跨平台、獨立運作、而且是原生的應用程式。就各方面而言,這混合了 web 與桌面應用程式最棒的部份。

So what's the catch? (譯註:翻譯不能... Orz)這個嘛... Chrome App 還沒完全做好上場的準備,API 仍在改變。舉例來說,自訂一個可以拖曳的區塊仍然很麻煩。我覺得還要幾個月才會達到產品等級的標準。

ECMAScript 6

ECMAScript 6(ES6)是下一個 JavaScript 的版本,新增的部份著實令人興奮:修正一些語言中噁爛的部份,並且提供像預設參數、restructuring 等新功能。

有完整 inheritance 與 maxin 的 class 也在這個版本的規劃。Rather than emulating modules with CommonJS or AMD, ES6 makes them a first class citizen, inspired by a pythonesque import system. (譯註:翻譯不能... Orz)

ES6 的 proxies 我特別感興趣,這沒辦法用 CoffeeScript 這類的 abstraction 來模擬。ES6 proxies 讓我們可以在執行期動態地搜尋 function 名稱、允許像 Ruby 的 method_missing 功能。這個跟 getter/setter 搭配服用,讓各種有趣的 DSL(譯註:應該是 Domain Specific Language)跟 API 變得可能。

ES6 的 generator 將會改變我們寫 asynchronous JavaScript 的方式。有別於我們已經慣用的 callback 可怕程式碼,我們可以透過 yield 這個關鍵字在 synchronous API 中呼叫 asynchronous function。你可以在 task.js 發現這個例子:

spawn(function*() {
  var data = yield $.get(url);
  $('#result').html(data);
});

你可能已經在用了 Fibers 的 Ruby 當中看到類似的 API。對我來說,在寫 MVC Node application 時,callback 十分困擾我,所以我必須 playing around with Node continuation with a library called Ace(譯註:翻譯不能... Orz)。所以我十分高興這變成語言的原生功能。

大部分的 ES6 功能已經可以用了,包含在 Chrome 的 Experimental JavaScript 這個 flag 底下。它會在明年年初發佈。你也可以透過下 --harmony 參數的方式在 Node 當中使用 ES6。

Web Component

Web Component 跟 Shadow DOM 展示了在 browser 內怎麼創建原生的 element。用這個 API,你可以定義自己的 HTML element(包含 sytle 跟行為)。就像原生的 HTML element 一樣,它們可以包成單一的 tag。

Web Component 將會轉變 JavaScript library 撰寫以及散佈的方式。它們可以完全解除耦合、容易整合,而這正式為甚麼 Jacob 跟我寫 package 管理員 Bower 的原因。

舉例來說,我可以寫一個很有用的 map 元件、把它加到 package 管理員當中,然後另一個開發人員可以用一個 tag 就整合進他的 application 當中。元件之間就沒有耦合度了,而內部的 HTML、CSS 跟 JavaScript 也會被藏在自訂的 tag 裡頭。

web component 現在也是 Chrome 的一個 flag 了(Enable experimental WebKit features)。現在你可以透過 x-tag 這個 polyfill 在 Mozilla 當中使用 Web Component。

未來......

在所有新版 Web API 的討論當中有一個共同的反應:抱怨不知道多久以後才能真正用到這些東西。不過我對未來卻很樂觀。

雖然這些 API 當中有很多需要一些時間才能在其他 browser 上使用,不過 WebKit 的市場佔有率會迫使其他 browser 供應商開始提供各自的實作。事實上,HTML 的功能變成實際產品也沒有花很久的時間。為了向下相容,這些 API 可能會是 polyfill 或是逐漸退化。

為甚麼前途一片光明呢?因為 browser 都是在背景下自動更新的。將 Chrome Canary 的一個新功能發送給三億五千萬個使用者只要大概 18 週的時間。這是相當可怕的接收率,革新正在以前所未有的速度進行中。

2013 將會是 Web 很重要的一年!

沒有留言:

張貼留言