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

[[239936]] 

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

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

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

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

Grommet的取舍

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

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

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

Grommet的基礎

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

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

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

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

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

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

使用CodeSandbox

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

組件列表可能看起來很眼熟，因為它與另外大多數(shù)UI庫提供的列表相匹配。但如果你細究一下，會發(fā)現(xiàn)有點不一樣。

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

圖1

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

注意頂部附近CodeSandbox按鈕上的Edit。想在線使用組件，請點擊該按鈕。然后不必安裝任何東西就可以試用Grommet，實際項目需要時再安裝相關內容。 

圖2

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

圖3

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

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

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

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

圖4

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

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

請注意，即使你使用純粹的JavaScript，CodeSandbox也會提供輸入。alert()函數(shù)標以顏色，表明它是一個函數(shù)?，F(xiàn)在，你點擊該按鈕時，會看到一條消息顯示“Hello”。 

圖5

你搗鼓代碼一段時間后，可以點擊編輯器頂部的“下載”按鈕（圖標），以便在獨立的應用程序中使用它。你還可以與他人共享代碼。點擊“保存”將代碼副本保存在網上；使用地址欄中的URL即可下次訪問你的會話。

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

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

Grommet開源項目

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

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

獲得幫助

Grommet擁有大多數(shù)新開源庫常見的在線文檔和支持功能，但通常這不足以回答每個人的問題。一個缺點是缺少廣泛的說明文檔，在一些情況下***。

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

Grommet：說給***聽的經驗

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

• 選擇Grommet之類的產品時，你拿開發(fā)速度來換取應用程序的功能。在許多情況下UX很簡單時，這完全沒問題。
• 你可以使用在線沙箱來縮短試用期間花費的時間。
• 完整的解決方案始終將UI與UX結合在一起，通常涉及兩個獨立的庫。

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

【51CTO譯稿，合作站點轉載請注明原文譯者和出處為51CTO.com】