在如今全球疫情持續(xù)蔓延的情況下，人們往往希望通過各種生產(chǎn)力的增強(qiáng)方式，來替代當(dāng)前無法面對面開展高效協(xié)作的狀況。在本文中，我們將和您討論五種有助于軟件工程師和技術(shù)公司提高工作效率的實(shí)用方式，其中包括：設(shè)計(jì)系統(tǒng)(Design systems)、代碼查詢器(code linters)，代碼格式工具(code formatters)、持續(xù)集成(continuous integration)、以及IaaS/PaaS平臺(IaaS/PaaS providers)。它們能夠幫助您在不犧牲軟件產(chǎn)品質(zhì)量的情況下，加快整個開發(fā)周期和交付進(jìn)程。

成都創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的東至網(wǎng)站設(shè)計(jì)、移動媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

設(shè)計(jì)系統(tǒng)

設(shè)計(jì)系統(tǒng)主要包含了各種設(shè)計(jì)模式、使用指南、文檔、所有權(quán)模型、溝通方法、以及產(chǎn)品路線圖等。我們可以簡單地把它理解為一個根據(jù)可重用的構(gòu)建塊(building blocks)，來創(chuàng)建某個產(chǎn)品的組件庫。此處的構(gòu)建塊主要包括：圖標(biāo)生成器(avatars)、標(biāo)志、按鈕、下拉菜單、輸入表單、圖標(biāo)、鏈接、模式、進(jìn)度指示器、以及工具提示等組件。就像樂高積木一樣，這些組件可以被組合起來，以創(chuàng)建應(yīng)用程序必需的所有頁面和功能。

為了使軟件產(chǎn)品的用戶界面(UI)能夠隨著業(yè)務(wù)與功能不斷擴(kuò)展，設(shè)計(jì)系統(tǒng)能夠給用戶帶來如下好處：

1. 設(shè)計(jì)系統(tǒng)可幫助您創(chuàng)建一致性的UI，以便您在整個應(yīng)用程序中都使用統(tǒng)一的構(gòu)件塊組件。
2. 設(shè)計(jì)系統(tǒng)通過提供一種可以在任何地方實(shí)現(xiàn)的通用模式，以方便設(shè)計(jì)師和軟件工程師加快開發(fā)的速度，而不必花費(fèi)數(shù)小時、甚至數(shù)天的時間去重構(gòu)模式。
3. 您可以使用一組共享的組件，來輕松地在整個應(yīng)用中一次性進(jìn)行模式的更改。例如：如果您需要更改某個應(yīng)用的按鈕樣式，那么就無需逐個進(jìn)行調(diào)整，而只需在設(shè)計(jì)系統(tǒng)中統(tǒng)一更改，以便直觀地應(yīng)用到任何使用相關(guān)按鈕的地方。
4. 設(shè)計(jì)系統(tǒng)使您更加專注于提升用戶體驗(yàn)(UX)。用戶體驗(yàn)設(shè)計(jì)師無需花費(fèi)時間，去逐個決定每個新功能的下拉菜單和模式該如何工作，而是只需在整體上，集中確保其合理性和用戶友好度即可。

目前，市場上有許多設(shè)計(jì)系統(tǒng)類工具可供選用，其中包括：Google的Material-UI、Adobe的Spectrum、以及Ant Design等。當(dāng)然，如果您有足夠的時間和資源的話，也可以自行構(gòu)建設(shè)計(jì)系統(tǒng)。

編碼查看器

上圖是針對JavaScript的ESLint的截圖。它通過對代碼進(jìn)行靜態(tài)分析，協(xié)助自動捕獲各種語法錯誤，以及潛在的運(yùn)行問題。此類查看器不但短小精悍，并且能夠直接被包含在您的構(gòu)建過程或git hook中。畢竟，它們最擅長的，便是通過自動化執(zhí)行，在海量代碼中發(fā)現(xiàn)各種語法上、以及邏輯上的錯誤。

以上面提到的ESLint為例，它不但具有高度可配置性，并且具有廣泛的插件生態(tài)系統(tǒng)。您可以通過安裝eslint -plugin-jsx-a11y之類的ESLint插件，來協(xié)助捕獲應(yīng)用程序中的違規(guī)訪問行為;或者是通過安裝eslint-plugin-react，來協(xié)助實(shí)現(xiàn)React的各種優(yōu)秀實(shí)踐。當(dāng)然，如果您不想花時間自己去挑選插件的話，也可以使用一些預(yù)設(shè)好的插件。例如：eslint-config-airbnb插件包，就預(yù)設(shè)好了一些由Airbnb推薦的ESLint配置項(xiàng)。

代碼格式化工具

諸如Prettier之類的格式化工具，可以對您的JavaScript、HTML、CSS、乃至各種Markdown文件，進(jìn)行格式化與規(guī)范化。與代碼查看器類似，代碼格式化工具可以自動化執(zhí)行，各種原本需要軟件工程師手動完成的任務(wù)。

通過預(yù)先配置，Prettier能夠?qū)?yīng)該使用的空格、制表符、分號、逗號等各種代碼格式予以自動規(guī)范化。在節(jié)省代碼審查時間的同時，團(tuán)隊(duì)不但可以在整個存儲庫中保持一致性和標(biāo)準(zhǔn)化，還能夠騰出更多的時間，專注于代碼本身的功能、以及可維護(hù)性。

如下Java代碼是Prettier配置的示例：

 
 
 
 

  
  
  
  
{     
  
  
  
  
  "tabWidth": 2,      
  
  
  
  
  "useTabs": false,     
  
  
  
  
  "printWidth": 80,      
  
  
  
  
  "semi": false,      
  
  
  
  
  "singleQuote": true,      
  
  
  
  
  "trailingComma": "es5",      
  
  
  
  
  "quoteProps": "as-needed",      
  
  
  
  
  "jsxSingleQuote": false,      
  
  
  
  
  "jsxBracketSameLine": false,      
  
  
  
  
  "bracketSpacing": true,      
  
  
  
  
  "arrowParens": "avoid",      
  
  
  
  
  "endOfLine": "auto",      
  
  
  
  
  "proseWrap": "preserve",      
  
  
  
  
  "htmlWhitespaceSensitivity": "css"      
  
  
  
  
}   
 
 
 
 

我們來看一個例子。顯然，下面的Java程序代碼，看上去十分雜亂無章：

 
 
 
 

  
  
  
  
function HelloWorld({greeting = "hello", greeted = '"World"', silent = false, onMouseOver,}) {         
  
  
  
  
  if(!greeting){return null};         
  
  
  
  
     // TODO: Don't use random in render      
  
  
  
  
  let num = Math.floor (Math.random() * 1E+7).toString().replace(/\.\d+/ig, "")       
  
  
  
  
  return         
  
  
  
  
    { greeting.slice( 0, 1 ).toUpperCase() + greeting.slice(1).toLowerCase() }      
  
  
  
  
    {greeting.endsWith(",") ? " " : ", " }      
  
  
  
  
          
  
  
  
  
    { greeted }      
  
  
  
  
          
  
  
  
  
    { (silent)      
  
  
  
  
      ? "."      
  
  
  
  
      : "!"}