【51CTO.com快譯】Grommet自2016年問(wèn)世以來(lái)，不是***的開源開發(fā)工具之一。這個(gè)可重用UI組件庫(kù)可以幫助開發(fā)人員開發(fā)Web應(yīng)用程序。本文介紹了Grommet的功能、它解決的問(wèn)題及誘人之處。 

[[239936]] 

讓W(xué)eb應(yīng)用程序美觀且實(shí)用費(fèi)時(shí)又困難。程序員成功構(gòu)建應(yīng)用程序后端的技能并不總能保證良好的用戶界面（UI）設(shè)計(jì)或理想的用戶體驗(yàn)（UX）。即使開發(fā)人員從設(shè)計(jì)專家那里得到UI幫助，創(chuàng)建代碼來(lái)控制軟件的外觀（對(duì)話框、信息布局及應(yīng)用程序功能的安排）有時(shí)也如同魔法。試圖在每個(gè)設(shè)備上做到外觀一致的漂亮頁(yè)面幾乎不可能。

通常，開發(fā)人員依賴編程庫(kù)來(lái)簡(jiǎn)化UI元素的創(chuàng)建并確保UX一致性。其中一個(gè)庫(kù)是Grommet（http://grommet.io/），它是采用Apache 2.0許可證的開源軟件。

UI工具構(gòu)建的想法并不新穎。其他庫(kù)和工具集的支持者提出了同樣的主張，尤其是jQuery（UX）和jQuery UI（UI）的組合。就在不久前，這個(gè)jQuery組合還是***，但正如JavaScript Scene表明的那樣，它們提供了太多功能，這使得庫(kù)太過(guò)復(fù)雜而無(wú)法有效使用。一個(gè)結(jié)果是，由于要加載的代碼過(guò)多，應(yīng)用程序運(yùn)行緩慢。此外，隨著軟件開發(fā)轉(zhuǎn)向微服務(wù)方法，開發(fā)人員需要特定的工具，而不是一些功能用不著的通用工具。

Grommet等更新穎、更有針對(duì)性的庫(kù)舍棄了大部分功能，提供了快速的頁(yè)面布局方法。

Grommet的取舍

然而沒有免費(fèi)的午餐。這些新庫(kù)需要在速度與功能之間取舍。你有時(shí)需要做決定：想要網(wǎng)站速度快，還是想要***的功能？與任何一種自動(dòng)化和工具依賴項(xiàng)一樣，舍棄大部分功能也意味著你得接受UI和UX方面的限制。這些限制可能影響你想用應(yīng)用程序完成的工作，比如以某種方式顯示數(shù)據(jù)或允許用戶執(zhí)行某些任務(wù)。

你之前可能不太了解Grommet，但它問(wèn)世已有幾年，2.0版即將上市。如今幾家知名公司使用Grommet開發(fā)實(shí)際的應(yīng)用程序，包括Netflix、GE、IBM和Micro Focus。力推Grommet的公司主要是惠普企業(yè)（HPE），當(dāng)然它也使用Grommet。

如果你想先試用Grommet 2.0，可以在https://v2.grommet.io/try-no試一試演示版，無(wú)需編程。該演示版幫助你了解功能，還可以使用Grommet版本2新的主題系統(tǒng)來(lái)創(chuàng)建自定義的可下載模板。

Grommet的基礎(chǔ)

今天很少有軟件開發(fā)庫(kù)是孤島。它們依賴其他服務(wù)，因?yàn)閹?kù)的開發(fā)人員希望盡量簡(jiǎn)單、一致的體驗(yàn)，沒人想要重新發(fā)明輪子。

以Grommet為例，React.js用于底層UI，Sketch用于底層UX。需要這兩個(gè)庫(kù)的原因是，UI影響讀者與應(yīng)用程序交互的方式，而UX決定了用戶可以執(zhí)行的任務(wù)，比如以某種方式訪問(wèn)數(shù)據(jù)或確保特定類型的更新簡(jiǎn)單方便。

下面這些詳細(xì)信息可幫助你了解它是否有用：

• 采用移動(dòng)優(yōu)先策略。你的應(yīng)用程序在如今用戶依賴的大多數(shù)移動(dòng)平臺(tái)上運(yùn)行順暢。你在探究包括jQuery在內(nèi)的選項(xiàng)時(shí)，要檢查使用你依賴的Web瀏覽器所面臨的潛在問(wèn)題。
• 盡量減少了視覺效果。用Grommet開發(fā)的應(yīng)用程序可根據(jù)需要自動(dòng)調(diào)整屏幕大小，以適應(yīng)客戶端設(shè)備。
• 注重可訪問(wèn)性。Grommet提供A11Y支持，以便應(yīng)用程序一開始就可以訪問(wèn)。比如說(shuō)，你可以使用跳過(guò)鏈接，以便屏幕讀者和鍵盤用戶以視力好的鼠標(biāo)用戶習(xí)以為常的方式來(lái)瀏覽網(wǎng)站內(nèi)容。

諸如此類的功能減少了編程工作量。如果你使用jQuery和jQuery UI，需要為這種支持的大部分手動(dòng)編程。舉例說(shuō)明這種復(fù)雜性及由此帶來(lái)的煩惱：使用jQuery的傳統(tǒng)JavaScript開發(fā)人員通過(guò)找到div ID或類，不斷地處理HTML DOM。React和Grommet在HTML環(huán)境中提供了變量的無(wú)縫顯示，沒有無(wú)關(guān)的DOM操作代碼。

好了，現(xiàn)在看看Grommet的工作原理。

使用CodeSandbox

除非你上手用一下，否則很難知道產(chǎn)品是否符合要求，這通常意味著要安裝一大堆東西。你可以使用Node.js程序包管理器來(lái)安裝Grommet，但發(fā)現(xiàn)Grommet的最簡(jiǎn)單方法是選擇一個(gè)組件、實(shí)際試用一下。

組件列表可能看起來(lái)很眼熟，因?yàn)樗c另外大多數(shù)UI庫(kù)提供的列表相匹配。但如果你細(xì)究一下，會(huì)發(fā)現(xiàn)有點(diǎn)不一樣。

我使用Box布局組件作為起點(diǎn)。這個(gè)極其籠統(tǒng)的例子演示了工具的使用情況，你可以創(chuàng)建優(yōu)雅得多的UI。 

圖1

每個(gè)組件都有說(shuō)明文檔，如Box組件所示。它顯示了該組件的示例以及影響外觀的屬性。

注意頂部附近CodeSandbox按鈕上的Edit。想在線使用組件，請(qǐng)點(diǎn)擊該按鈕。然后不必安裝任何東西就可以試用Grommet，實(shí)際項(xiàng)目需要時(shí)再安裝相關(guān)內(nèi)容。 

圖2

點(diǎn)擊CodeSandbox上的Edit將顯示三個(gè)窗格。左側(cè)窗格包含示例列表，稍后會(huì)分析。中間窗格包含生成右側(cè)窗格中所示畫面所需要的代碼。更改代碼后，你會(huì)看到輸出有相應(yīng)的變化。比如說(shuō)，試著將pad ='xlarge'改成pad ='large'，框的大小會(huì)變化。同樣，將color: 'brand' 改成color: 'blue'，會(huì)看到相應(yīng)的變化。 

圖3

并不僅限于單個(gè)組件。在中間窗格的頂部，試著輸入import { Button } from 'grommet'。

請(qǐng)注意：CodeSandbox的行為與任何其他IDE無(wú)異，為你提供建議的輸入。你現(xiàn)在可以在框中添加按鈕。更改框代碼，讓它看起來(lái)像這樣：

<Box border={{ color: 'blue', size: 'large' }} pad='large' >  
  <Button label='Submit' onClick={() => { }} />  
</Box> 

CodeSandbox現(xiàn)在顯示框里面的按鈕。 

圖4

該按鈕尚未執(zhí)行任何操作，但你可以根據(jù)需要點(diǎn)擊它。想看看按鈕執(zhí)行操作，添加一些代碼，讓它看起來(lái)像這樣： 

onClick={() => {alert('Hello') }} 

請(qǐng)注意，即使你使用純粹的JavaScript，CodeSandbox也會(huì)提供輸入。alert()函數(shù)標(biāo)以顏色，表明它是一個(gè)函數(shù)。現(xiàn)在，你點(diǎn)擊該按鈕時(shí)，會(huì)看到一條消息顯示“Hello”。 

圖5

你搗鼓代碼一段時(shí)間后，可以點(diǎn)擊編輯器頂部的“下載”按鈕（圖標(biāo)），以便在獨(dú)立的應(yīng)用程序中使用它。你還可以與他人共享代碼。點(diǎn)擊“保存”將代碼副本保存在網(wǎng)上；使用地址欄中的URL即可下次訪問(wèn)你的會(huì)話。

當(dāng)然，這是極其簡(jiǎn)單的示例，但你可以繼續(xù)添加，想擴(kuò)展成多大就能擴(kuò)展成多大。這個(gè)交互式環(huán)境是你用jQuery和jQuery UI無(wú)法實(shí)現(xiàn)的。

關(guān)鍵是你不必在單個(gè)會(huì)話中停止搗鼓代碼。你可以繼續(xù)處理它，探究Grommet的工作原理。如果你決定采取進(jìn)一步的措施，可以從GitHub將Grommet下載到開發(fā)計(jì)算機(jī)（https://github.com/grommet/grommet/tree/NEXT）。一旦你搞出了簡(jiǎn)單的應(yīng)用程序，下一步就是在服務(wù)器上試一下。

Grommet開源項(xiàng)目

Grommet不是新工具，即使它還沒有備受人們的關(guān)注。它有一個(gè)充滿活力的社區(qū)。Grommet吸引了開發(fā)人員的積極參與，已有100個(gè)貢獻(xiàn)者提交了代碼。此外，它目前在Slack上有約1800個(gè)成員。

你還可以通過(guò)該項(xiàng)目的統(tǒng)計(jì)數(shù)據(jù)了解將獲得的支持級(jí)別：Grommet在2017年的GitHub下載量有140000人次，2018年已經(jīng)超過(guò)99000人次，有3200多顆GitHub星標(biāo)。***版本是2.0，增加了一些新功能。

獲得幫助

Grommet擁有大多數(shù)新開源庫(kù)常見的在線文檔和支持功能，但通常這不足以回答每個(gè)人的問(wèn)題。一個(gè)缺點(diǎn)是缺少?gòu)V泛的說(shuō)明文檔，在一些情況下***。

由于HPE在Grommet貢獻(xiàn)方面扮演***的角色，它通過(guò)HPE開發(fā)人員社區(qū)計(jì)劃以及Dory等其他開源項(xiàng)目和該公司的專有應(yīng)用軟件為開發(fā)人員提供支持。YouTube訪談解釋了HPE開發(fā)人員支持計(jì)劃及未來(lái)愿景。

Grommet：說(shuō)給***聽的經(jīng)驗(yàn)

Grommet及其他類似的工具正在為一種新的UX軟件開發(fā)庫(kù)鋪平道路。但是沒有***的解決方案，所以你在探究時(shí)應(yīng)牢記以下問(wèn)題：

• 選擇Grommet之類的產(chǎn)品時(shí)，你拿開發(fā)速度來(lái)?yè)Q取應(yīng)用程序的功能。在許多情況下UX很簡(jiǎn)單時(shí)，這完全沒問(wèn)題。
• 你可以使用在線沙箱來(lái)縮短試用期間花費(fèi)的時(shí)間。
• 完整的解決方案始終將UI與UX結(jié)合在一起，通常涉及兩個(gè)獨(dú)立的庫(kù)。

原文標(biāo)題：Getting to know Grommet, an open source UI dev tool，作者：John Paul Mueller 

【51CTO譯稿，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文譯者和出處為51CTO.com】