第 121 期 - 這場雨會不會下不完

Created on 2022-02-22

本週專欄

原來程式碼品質也可以被檢測：初探 SonarQube

Hi 大家好我是 Andy，隨著專案結構越來越複雜，程式碼的品質就變成是一項非常重要的指標，然而現在就有一個平台專門在做這件事，這個平台就叫做 SonarQube，究竟這個平台到底好不好用，就讓我們跟著這篇文章一起看下去吧！

前端開發

SOLID Principles in TypeScript

作者用 TypeScript 寫範例程式碼，列出在 SOLID 原則下，我們應該要避免的幾種寫法，以及該如何正確的實作。

浏览器渲染机制、重绘、重排

你還記得瀏覽器載入 HTML 後的渲染流程嗎？在文章中作者介紹了渲染機制中的重排（Reflow）和重繪（Replant），並且提供建議以減少 Reflow 和 Replant 所產生的效能消耗。

9 JavaScript Design Patterns You Will Love

這是一篇滿長的文章，作者詳細的介紹了 JavaScript 內的幾個特性，又介紹了 Design Patterns 的各種種類後才開始列出他要推薦的 9 個 Pattern，如果想要了解在 JavaScript 的語言特性下，該如何使用 Design Patterns 的話，可以花一些時間閱讀！ 🙌

State management

Jotai vs. Recoil: What are the differences?

Jotai 以及 Recoil 可以說是兩個相當新的 state management，這兩個 state management 的用法可以說是相當接近，這篇文章比較了這兩種 state management，有興趣的讀者可以參考這篇文章來決定要使用哪種 state management。

Managing React State with Zustand

Zustand 是一套基於 Flux 設計模式而設計出來的 state management，跟 Redux 一樣都是用這種設計模式，如果讀者想用一些比較新穎的 state management 但是又不想跳脫 Flux 的設計模式，不妨也可以試試看 Zustand 喔～

Intro to XState — a true state management library for react

XState 是一套基於 finite state machine 的設計理念所產出的 state management，也因為 finite state machine 需要考慮的 flow 相當多，所以 XState 也可以對於一個很操作邏輯相當複雜的網站可以說是相當完整的一套 state management，如果讀者目前有遇到這種情形不妨也可以利用 Xstate 進行 state 管理喔～

DevOps

Introducing Opta: Terraform on Rails

Opta 是一個 IaC Framework，讓你可以使用高階語法來建構雲端架構，而不會迷失在低階的雲端設定組態當中，它提供使用者大量的函式庫來建立出理想中的架構，而且更棒的是他的底層使用 Terraform，所以使用者不會被鎖定在某個平台上，使用者永遠可以撰寫客製化的 Terraform，甚至是將 Opta 直接整合 Terraform 來使用

而它主要目標是希望除了業務邏輯跟 Unit Testing 由 Developer 去負責之外，其他諸如 Provision, Deployment, Observatility, Multiple Envs, Security 都由他來完成， Opta 目前支援三大主要公有雲 (AWS, GCP 跟 Azure)，現在主要有底下幾個 Module:

Microservices (powered by Kubernetes)
Databases - Postgres, MySQL, Redis
Serverless workloads
Networking - VPCs, Subnets, Load balancers
CDN (Content Delivery Network)
Object storage (S3, GCS)

除此之外他也將一些 Best Practice 融合近來，例如：

Observability (Datadog, LogDNA)
SOC2 compliance
Continuous Deployment
Hardened network and security configurations (AWS, GCP, Azure)
Auto-scaling and high availability (HA)

Introducing a Google Cloud architecture diagramming tool

相較於上面的 Opta 使用 YAML 檔案格式來描述雲端架構，GCP 這邊則是推出了 Google 雲端架構繪圖工具，讓使用者可以再將想要的雲端架構圖透過該工具繪製完成後，透過指標點一下，就直接將該架構在 GCP 內給部署出來，看來以後在 IaC 的世界裡，搞不好畫圖比寫 Code 來得重要了 😂

HashiCorp Terraform AWS Provider Introduces Significant Changes to Amazon S3 Bucket Resource

看完高階的 IaC，接著來看低階一些的，HashiCorp 最近釋出 Terraform AWS Provider 4.0，在這個更新版當中，在 S3 Bucket 這個資源中包含了巨大且不可向下相容的變更，因此沒有鎖定 AWS Provider 版本的人，在最近使用的時候要注意一下，假如發生不意外的錯誤，就有可能是因為這次的更新所造成的，看是要降板，或是捲起袖子來修改一番了💪

Include diagrams in your Markdown files with Mermaid

上週情人節時 GitHub 宣佈一個新功能，就是以後可以在 Markdown 檔案格式中透過 Mermaid 來增加圖像了！這樣一來以後想要在 Markdown 檔案中加入流程圖的話就可以不用特地畫一張圖，然後再把圖片轉成 JPG/PNG 檔之後加到 Repository 中，然後再讓 Markdown 去引用他，可以省下不少時間 🕒

StarBugs Weekly

StarBugs Weekly 由一群不寫文章就會想要亂花錢，但是又沒有那麼多錢，只好繼續寫文章的開發者所創立。
內容包含 Web 前端、中端、後端、DevOps、產品開發、精實創業，一切跟產品有關的知識，都是我們的守備範圍！

Writers:

@HannahLin - 從台灣到矽谷，熱愛前端的工程師女孩。
@KyleMo - 雜食性軟體工程師，喜歡的技術我都想學。
@Airwaves - Hi~我是 Airwaves，熱愛研究如何造輪子的前端工程師。
@Jenny - 我不寫 CSS。
@Andy - 目標成為用嘴巴工作的工程師，專長為網頁開發以及 K8s。

Maintainers:

@GQSM - Hi！我是神 Q 超人，一個先衝再說的男人。
@LarryLu - 我是 Larry，傳說中的 0.1 倍工程師！
@LukaTW - 一名全身都是死角的工程師。
@smalltown - 熱愛鑽研各種可以提升雲端服務品質及增進團隊開發效率的開源技術。

Feedback

本週呈現主題方式做了一些改變，希望讓讀者能夠更快速精準的找到自己要的資訊。也加入社群活動這個區塊，每週更新社群活動的資訊。如果有任何建議，歡迎私訊星巴哥技術週刊 FB 粉絲專頁與我們聯繫。