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

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

設(shè)計(jì)系統(tǒng)主要包含了各種設(shè)計(jì)模式、使用指南、文檔、所有權(quán)模型、溝通方法、以及產(chǎn)品路線圖等。我們可以簡(jiǎn)單地把它理解為一個(gè)根據(jù)可重用的構(gòu)建塊(building blocks)，來創(chuàng)建某個(gè)產(chǎn)品的組件庫(kù)。此處的構(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，以便您在整個(gè)應(yīng)用程序中都使用統(tǒng)一的構(gòu)件塊組件。
2. 設(shè)計(jì)系統(tǒng)通過提供一種可以在任何地方實(shí)現(xiàn)的通用模式，以方便設(shè)計(jì)師和軟件工程師加快開發(fā)的速度，而不必花費(fèi)數(shù)小時(shí)、甚至數(shù)天的時(shí)間去重構(gòu)模式。
3. 您可以使用一組共享的組件，來輕松地在整個(gè)應(yīng)用中一次性進(jìn)行模式的更改。例如：如果您需要更改某個(gè)應(yīng)用的按鈕樣式，那么就無需逐個(gè)進(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í)間，去逐個(gè)決定每個(gè)新功能的下拉菜單和模式該如何工作，而是只需在整體上，集中確保其合理性和用戶友好度即可。

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

編碼查看器

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

以上面提到的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)然，如果您不想花時(shí)間自己去挑選插件的話，也可以使用一些預(yù)設(shè)好的插件。例如：eslint-config-airbnb插件包，就預(yù)設(shè)好了一些由Airbnb推薦的ESLint配置項(xiàng)。

代碼格式化工具

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

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

我們來看一個(gè)例子。顯然，下面的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 <div className='HelloWorld' title={`You are visitor number ${ num }`} onMouseOver={onMouseOver}>        
    <strong>{ greeting.slice( 0, 1 ).toUpperCase() + greeting.slice(1).toLowerCase() }</strong>      
    {greeting.endsWith(",") ? " " : <span style={{color: '\grey'}}>", "</span> }      
    <em>      
    { greeted }      
    </em>      
    { (silent)      
      ? "."      
      : "!"}         
    </div>;         
}   

通過使用Prettier，代碼會(huì)變成如下的樣子：

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() * 1e7)      
    .toString()      
    .replace(/\.\d+/gi, '')         
  return (      
    <div      
      className="HelloWorld"      
      title={`You are visitor number ${num}`}      
      onMouseOver={onMouseOver}      
    >      
      <strong>      
        {greeting.slice(0, 1).toUpperCase() + greeting.slice(1).toLowerCase()}      
      </strong>      
      {greeting.endsWith(',') ? (      
        ' '      
      ) : (      
        <span style={{ color: 'grey' }}>", "</span>      
      )}      
      <em>{greeted}</em>      
      {silent ? '.' : '!'}      
    </div>     
  )      
}    

自動(dòng)化測(cè)試和持續(xù)集成

隨著應(yīng)用程序在復(fù)雜性和代碼體量上的增長(zhǎng)，我們?cè)僖矡o法單靠一己之力，手動(dòng)測(cè)試目標(biāo)應(yīng)用中涉及到的所有內(nèi)容。我們需要進(jìn)行動(dòng)作分解，通過自動(dòng)化測(cè)試來完成單元測(cè)試、集成測(cè)試、端到端(E2E)測(cè)試、以及回歸測(cè)試。

由DevOps理念帶來的持續(xù)集成(CI)實(shí)踐，則能夠確保您代碼的主分支在理論上，一直處于可執(zhí)行的狀態(tài)。為此，您可以使用Travis CI、CircleCI、GitLab CI/CD、以及Heroku CI之類的服務(wù)，來為存儲(chǔ)庫(kù)設(shè)置持續(xù)集成。在此基礎(chǔ)上，您可以通過配置CI管道，以便在每次提交后，運(yùn)行查看器和自動(dòng)化測(cè)試，進(jìn)而在滿足所有前續(xù)條件的基礎(chǔ)上，實(shí)現(xiàn)代碼合并。實(shí)踐證明，相對(duì)于手動(dòng)測(cè)試，自動(dòng)化測(cè)試和持續(xù)集成都能夠大幅減少整個(gè)開發(fā)周期的用時(shí)。

IaaS和PaaS平臺(tái)

在如今云服務(wù)盛行的時(shí)代，我們要學(xué)會(huì)善用基礎(chǔ)架構(gòu)即服務(wù)(IaaS)和平臺(tái)即服務(wù)(PaaS)，來管理應(yīng)用的基礎(chǔ)架構(gòu)。目前，常見的IaaS平臺(tái)包括Amazon Web Services、Google Cloud Platform。而常見的PaaS平臺(tái)包括：Heroku等解決方案。

同時(shí)，通過使用諸如Amazon Relational Database Service(RDS)之類的托管數(shù)據(jù)庫(kù)服務(wù)，您不必考慮數(shù)據(jù)庫(kù)的升級(jí)、以及安全補(bǔ)丁的安裝。而使用諸如Amazon Simple Notification Service(SNS，)之類的通知服務(wù)，您將不必自行構(gòu)建發(fā)送電子郵件或短信等服務(wù)。

此外，通過將應(yīng)用程序部署到Heroku平臺(tái)上，您的應(yīng)用程序?qū)㈦S著使用量的增加，而能夠?qū)崿F(xiàn)水平方向和垂直方向的自動(dòng)擴(kuò)展。

原文標(biāo)題：Productivity Tools and Practices for Software Engineers and Tech Companies，作者：Tyler Hawkins

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