一個測試驅動的開源圖牀系統

時間 2019-11-06

標籤一個測試驅動開源系統简体版

原文原文鏈接

Motivation

於2019年初對於 TDD, BDD 產生了極濃厚的興趣, 可是測試驅動開發的模式形成了開發進度的嚴重脫緩, 致使沒法及時的交付. 以及業務中各方對於測試驅動開發也沒有多少興趣, 因此選擇從我的項目中嘗試測試驅動開發, 在找了不少方向, 發現不多有成熟的開源圖牀系統, 遂對這個方向產生了興趣, 這爲其一.html

從做者進入前端領域以來, 一直堅守 React 技術棧, 但其實在使用中對於 React 技術棧並無太深刻的研究, 由於業務須要的是及時交付, 而不是技術的深刻, 因此在將來極可能該系統會深刻的探索 React 的各類開發模式, 探索 React 的 Hook, Suspense, 服務端渲染, e2e 測試.前端

ant.design 是很是優秀的 React UI 庫 github.com/ant-design/…, 在當前業務線一直在使用, 一樣沒有深刻的探索和參與貢獻. 在該項目中也會使用該庫做爲 UI 庫.react

成熟的系統會提供 API 給第三方來集成, API 的格式也在發展, 可是在平時的開發都沒法嚴格遵循 RESTFul 風格, 可是會用這個風格來開發接口是很是重要的, 可讓你必須去熟悉 HTTP status code, 因此你不須要在面試以前去背這些 code 的語義了👍. 所以該系統會嚴格遵循 RESTFul 的接口風格, 將來也會淺嘗一下 GraphQL 🍻.webpack

CI/CD 持續集成, 持續部署是在敏捷開發中很是重要的一節, 保證你在提交代碼的時候能夠不破壞已有的功能. 在本地的開發環境不多本身手動去測試多種環境下的表現. 使用 Node.js 10 在本地開發, 可是有可能會部署至 Node.js 8 環境下, 這時候讓持續集成幫助你在 Node.js 8 下運行測試. 一樣, Mac 做爲開發機器, IE 的測試很麻煩, 讓持續集成去作吧. 持續部署能夠減小手動操做的麻煩, 讓機器去作. 採用了 Github 的 Action 來作持續集成和持續部署, 即便不算完善, 但也是足夠使用了, 而且提供 Windows 和 Mac 環境, 很棒 !!! 重要的是 free 噓~~nginx

試用 BFF 層, 該項目只使用了 bff 層託管 index.html, 這足夠了, 接口仍是交給後端去作.git

還有一些其餘能力, 項目的架構能力, 響應式設計 & Coding.程序員

項目架構

項目分爲前端, 後端, 數據庫和網關四個部分, 網關用的 nginx, 數據庫是 MongoDB. 體如今該倉庫之中的有兩個部分前端和後端.github

前端

瀏覽器層

底層 UI 庫爲 React, 上層 UI 庫爲 antd. 路由使用 react-router. 代碼打包器使用 webpack, css 預處理器 less. 代碼預處理器 babel, 測試框架 jest, 瀏覽器兼容測 karma+chai+mocha, 瀏覽器 e2e 測試 jest-puppeteer.web

靜態資源發佈策略?

在 github Action 中將資源打包而後發佈至 ALI OSS 中.

BFF 層

web 框架 express, 測試框架 jest

如何更新 index.html 至最新版本的?

index.html 會跟隨靜態資源的發佈發佈至 ALI OSS 中, 而後在部署完成以後從 oss 之中下載下來, 下載 index.html 會在 CD 中執行.

後端

web 框架 express, 測試框架 jest, 接口測試工具 supertest.

beta 環境和 production 環境

tuchuang.space 的環境分爲 beta 環境, 供給測試用戶進行使用, 該環境和 production 幾乎一致, 不過是用來測試最新版本的 tuchuang.space. production 環境爲最穩定的環境, 提供給全部的用戶.

功能

上傳文件至 cdn, 獲取文件的訪問地址. 支持 png, webp. gif, jpg, svg 格式的圖片
獲取移除文件的 key, 而後經過 DELETE 方法移除該圖片, 這裏使用 arc 工具做爲示例, 移除文件的接口文檔可見官網

Roadmap

還沒有肯定, 容易變化, 能夠去項目的 Backlog milestone 或 issue 查看

結語

測試驅動是很是棒的, 可是做者我的認爲測試驅動的學習曲線比較陡峭, 以及前端領域目前還都沒有一個完美的瀏覽器測試方案, 因此在使用測試驅動的時候開發項目是比較糾結的, 何時應該使用測試驅動而何時不適用測試驅動是一個比較難以判斷的問題, 做者也一直在學習, 對於測試驅動, 做者我的認爲對於程序員來言是必備技能.

因爲該項目並非產品驅動, 而是技術驅動, 因此能夠有更多的時間來深刻技術的探索, 只有當程序員對技術特別熟悉才能投入使用, 而且深刻探索這個技術究竟是解決了什麼問題, 若是有想要對技術深刻探索的能夠一塊兒👋.

也許該項目的複雜度達不到有些公司業務的複雜度, 可是能夠在該項目之上慢慢的探索, 最終也許能反饋給業務線之上, 很強的技術深度可讓你在業務線上有更多的話語權.

更多的東西能夠去閱讀源碼得到🧐.