如何利用Firefox OS現有的Components打造自己的Web App

Web這幾年最夯的主題之一就是Web Components [1][3]。透過它,我們能使用其他人開發好的Widgests來提高開發效率,不過風險是目前有些瀏覽器支援並不完全或必須手動開啟支援[6],而我相信不久後所有瀏覽器就會完全支援囉[2]!

 

今天,小弟想跟各位簡介如何使用Firefox OS的Gaia Team所開發的gaia components [4][5],來打造你的Web App。(註一、二)

 

Gaia Components主要用bower來管理相關套件[4],因此要先在自己的開發環境裝bower。

 

接著將以一個相當簡單的demo app為例,它使用gaia components來快速做出分享心得到FB的web app的外觀。透過bower安裝以下gaia components(註三)。

當成功安裝後,bower_components資料夾下將有已安裝的套件,以我的環境為例。

接著只需透過習慣的<script> tag引用即可使用該gaia components。

我們在這app中先透過<gaia-sub-header>標示出這區塊是給user輸入要分享的內容。

接著使用<gaia-text-input><gaia-button>來快速建立輸入欄位與分享按鈕。

只需這樣,就能快速做出一個帶有Firefox OS風格的標題、輸入欄位與按鈕的web app, 並將時間專注於功能與邏輯上囉。

fb

 

  • 註一:Gaia Components目前只有部分封裝成Web Components,其他陸續開發中。
  • 註二:Firefox OS在接下來幾個版本才會支援Web Components,因此開發而成的web app目前只能在支援的瀏覽器上執行。
  • 註三:有哪些gaia components可以使用,可以追蹤MDN的Firefox OS Building Blocks[4],或者直接找github[5]。

 

[1] W3C introduction: http://www.w3.org/TR/components-intro/

[2] Current Status: http://www.w3.org/standards/techs/components#w3c_all

[3] https://developer.mozilla.org/en-US/docs/Web/Web_Components

[4] https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks

[5] https://github.com/gaia-components

[6] https://developer.mozilla.org/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox

您可能也會喜歡

目前找不到相關文章

共 1 則讀者回應

對此文章發表回應

你的電子郵件位址並不會被公開。 必要欄位標記為 *