國外前端開發的一周工作日程（擁有五年經驗）
譯文作者：核子可樂譯
我是一名前端開發者，所在公司: 一家物聯網連接與云廠商，坐標：美國。
【51CTO.com快譯】我是一名前端開發者，所在公司: 一家物聯網連接與云廠商，坐標：美國。
提要：
1.堆棧:
1. 前端：React、Redux與Webpack等。
2. 后端：Apache、PHP與SQL（所有前端內容皆靜態提供，不過API來自PHP）。
3. 后后端（云系統）：PHP、Python及C等。
2.主要工具:
IntelliJ、Slack、Phabricator(類似于JIRA與GitHub二合一)、Sketch (用于設計)。
3.需要解決的項目：
先來介紹背景，我們提供一項長期運行功能，允許用戶免費向物聯網設備直接發送短信。很多用戶喜歡這項功能，遺憾的是，有些人找不到原來的短信箱了，因為它被隱藏在一套下拉框當中。為了解決這個問題，我需要創建幾項標簽，讓大家在“云”或“短信”間做出選擇。
如果用戶看不到，那么功能將毫無意義。
***步是建立設計。我們的團隊使用Sketch。在初稿完成后，我交給UX負責人Kevin進行審查。他讓我調整一下顏色與頁邊空白，其實這項工作相當微不足道——只是進行了樣式與標記的輕微調整。經過一個小時的React JSX與.scss文件調整，再加上一不小心出現的瀏覽器死循環問題，我最終完成了任務。
這項成果將在下一次發布時推送，不過我需要確保其順利通過e2e測試。
解決任務的***天：
進行了e2e Selenium測試，但因為一些原因而不得不推遲（因為我必須構建一套Chrome擴展來進行測試記錄）。
那么今天就來搞定這些任務吧。前端開發面臨的一大挑戰在于，我們往往需要認真考慮工作的優先級。理想情況下，這個問題應該由項目經理在規劃會議上解決，但我們是一家初創企業且沒有多余的資源。因此，我決定通過以下問題進行考量：
哪項任務能夠為客戶創造***價值？
接下來就是選擇其中最簡單的任務。所以我挑了一項有意義且輕松的任務：
***步: 我們提供一項組織功能，用于創建能夠在物聯網設備上同他人協作的新“用戶”類型（類似于GitHub組織形式）。在組織環境中（由用戶切換至該組織），其中包含大量需要訪問的重要賬戶數據——特別是用于調用服務器API的“訪問令牌”，即個人API密鑰。我需要讓用戶看得到這些密鑰。
我做的其實就是為設置頁面的邊欄添加了一份列表。由于該目標頁已經存在，所以進度很快。
完成！用的時間比預期稍長……我被迫把兩個Submenu組件合并將結果提交至更高的“common component”文件夾中。如下所示：
解決任務的第二天：
我們打算在硬件/云服務中搞定大動靜。我目前正在進行“團隊百葉窗”項目，就是利用短信讓辦公室的百葉窗打開與關閉。此前我們曾經利用同樣的原理控制過臺燈，但這次需要引入一臺高扭電機。無論如何，這類活動只是為了證明前端開發者的生活也是豐富多彩的！
我今天的貢獻還包括構建了一款小型Web應用，允許大家隨時了解“百葉窗”項目的進展。這其實就是一套小型節點服務器，能夠調用我們的公共API。如此一來，我就有借口繼續鼓搗公共hologram-node npm軟件包了。從本質上講，這屬于一套基于我上周建立的原始HTTP端點的“小甜點”。
此前:
// annoying to have to build the url yourself... also you have to keep track of the apikey and orgid, which are essential for a call to succeed. request('https://dashboard.hologram.io/api/1/devices?limit=50&orgid=XXX&apikey=XXX', function(error, response) { if (!error && response.statusCode == 200) { cb() } else { cb(error, null); } });
此后: (非終版)
var HologramAPI = require('hologram-node')("APIKEY", { orgid: 123 }); returnHologramAPI.getDevices({limit: 1000}) .then((devices) => { return res.json(devices); }) .catch((e) => { return res.json(e); });
不錯吧？再來看看內部構造：
HoloClient.prototype.getDevices = function(options = {}) {returnnewPromise(function(resolve, reject) { options = _.pick(options, 'limit', 'startafter'); var path = `/devices`; var querystring = this.getQueryString(_.extend({}, options)); if (this.config.showDebug) console.log(`GET ${this.getBaseUrl()}${path}${querystring}`); needle.get(`${this.getBaseUrl()}${path}${querystring}`,this.responseHandler(resolve, reject)); }.bind(this)); };
以下是我們在測試當中發現的mocha測試集成錯誤：
給大家的小問題：
1.我們在哪套環境下進行測試？
2.我們該如何輕松對SQL服務器進行預測試與后測試？
3.這一切值得嗎（就人力投入而言）？
解決任務的第三天：
繼續處理Hologram NPM。昨天，我在代碼中發現了很多模式，我決定嘗試另一種架構策略，希望這能夠增加API功能并有助于維護。
今天的新策略是配置源代碼以支持Introspection。我首先建立了一套包含全部API方法及其HTTP屬性的JSON數組。而后，我編寫了一項“bootstrapping”方法，其能夠利用該JSON建立實際代碼。例如：
從這里開始：
{ name:"getAll", definition:"Get all devices in your account.", example:"https://hologram.io/api/i/devices?orgid=123&apikey=123123", path:"/devices", category:"Device", method:"get", params: [ { name:"limit", type:"string", required: false, location:"querystring" }, { name:"startafter", type:"string", required: false, location:"querystring" } ] }
...而后: buildAPIWithConfig(json)
...實現以下能力:
HologramAPI.Device.getAll({ limit: 0 }) .then((devices) => { assert(devices.length === 0, "No devices returned"); done(); })
該JSON可用于生成文檔、方法參數類型反饋、測試以及測試模擬。例如，我可以這樣運行：
generateDocs(json)
獲得的結果為：
METHODHologram.Device.getAll({options}): Get all devices in your account andreturns a Promise. Makes a raw GET request to /devices Example: https://hologram.io/api/i/devices?orgid=123&apikey=123123
為什么？構建良好的README.md而后再配置！
面向用戶的功能:
1. 用戶能夠獲得全部API文檔
2. 用戶能夠獲得***API文檔
3. 維護人員無需更新JSDoc等標簽
4. 維護人員能夠立足該JSON生成測試并模擬數據
弊端：犧牲了靈活性……因為代碼已經生成，因此當API返回的內容與標準模式不符時，很難再進行定制。
解決任務的第四天：
回顧路徑選擇流程的感覺不錯，至少比編寫代碼和說明文檔好多了。
這一天中的大部分時間用在添加JSON條目、為其編寫Mocha測試、構建README.md生成模板、編寫端點描述以及將README文檔鏈入正式文檔頁面當中。節奏不錯，再有一、兩天就能將其正式開放了。
展示回顧結果！
接著，編寫文檔……
運行測試……
解決任務的第五天：
我打算弄點快速見效的東西。
***步-在路由部分添加一些文檔鏈接。我已經在其它位置放置有文檔鏈接，所以直接粘貼即可。有些人將此稱為樣式優先級，我們應當將實現方式記錄在uikit/kitchen-sink項目中。
第二步-將一個圖標的源url配置為來自數據庫而非硬編碼。后端團隊承諾在API調用響應中提供url字符串，所以我需要將其納入現有配置。
完成！出人意料，這項工作挺費勁……我花了2個小時才搞定。剛開始基礎變更并未起效。我開始比較理論與實際顯示效果間的區別，快快速加以修復。另外，我們的CSS代碼形式非常靈活，這讓我相當頭痛——可能我們稍后需要進行重寫。暫時把這個加進待辦清單吧，還有更重要的功能等著完成呢。
終于能在Phabricator的Done列中加入幾項了。
接著，我在這里檢查代碼區別并進行提交。
好了，這就是我一周的工作日程，希望對大家有幫助~
【51CTO譯稿，合作站點轉載請注明原文譯者和出處為51CTO.com】
責任編輯：關崇
來源：
51CTO
