第 67 期 - 歡天喜地,東隆東隆鏹

本週專欄

The Great Suspender 不能用了怎麼辦?來找尋替代方案!

在 The Great Suspender 被 Google 下架後,有哪些使用方案,哪些方案是換湯不換藥。本篇文章帶大家探究各個替代方案的葫蘆裡是賣些甚麼藥,並且協助大家選擇最適合自己的方案。

前端開發

重新學習瀏覽器資源載入機制,這些年努力改善電商網站效能的旅程

當工程師聽到使用者反應網頁出現的速度很慢時,通常會從如何減少載入的 JavaScript 檔案下手(只下載該頁面必須的 JavaScript 檔案),但其實對使用者來說,他們感受速度最大的一部份是畫面呈現的速度,一起看看本篇文章的作者做了哪些事情,讓網頁載入的速度比以往更提高四倍之多吧!

React Vs Vue Vs Angular: What to Choose for Web Development

「該如何選擇 React、Vue 或是 Angular 呢?」這大概是從我第一次聽到,並開始學 React 開始就一直存在的問題,對許多初學者來說更不知道該從哪個下手投資報酬率比較高(其實可能都會選擇有中文文件的 Vue 開始 😂),但其實要學會框架的使用其實非常容易,也許只是一週就能夠建立一個簡單的網頁,重點在於能不能了解框架背後所實踐的原理及知識,應用各個框架自身的優缺點,而不是讓自己只停留在框架的應用層面上。

How the Question Mark (?) Operator Works in JavaScript

各位在寫 JavaScript 的時候,或多或少都會遇到需要去判斷 undefined 的情況,這時候最直覺的可能是用 value || 'default value',但在這麼寫的瞬間,通常就等於直接寫了一個 Bug,因為不只是 undefined,只要 value 還等於 null0 等有意義的值都會被設置成 default value。面對這種情況,JavaScript 創造了一些用來處理 undefined? 語法,看看文章中的範例,然後跟上吧!

React

React, Redux, and Context Behavior

上禮拜的推薦文章提到是否 Context API 可以搭配 custom hooks 取代 Redux,這禮拜推薦大家 Redux 作者寫的文章,接下來推薦的幾篇都會跟這些觀念環環相扣,首先要先了解 React、Redux、以及 Context 他們彼此的行為是什麼才能繼續往下深入研究。

Why React Context is Not a “State Management” Tool (and Why It Doesn’t Replace Redux)

首先 Context API 通常會寫成一個 Provider 元件把 value 往下 傳遞 給其他的元件使用,要特別注意粗體的 傳遞 二字,而 Redux 一開始使用也一樣要把 store 的物件藉由 Redux Provider 傳遞 下去,既然兩者都是藉由 Provider 傳遞那想必 Redux 一定可以被 Context API 可以搭配 custom hook 來取代 Redux 吧!但要記住 Context API 並不是一個 state machine,所以如果專案對於 state 會進行非常頻繁的更新,且這個 state 是需要提供給非常多元件使用的話就建議用 Redux 來管理吧!

Redux - Not Dead Yet!

所以 Redux 會不會因為大 hook 時代就消失呢?作者表明了說不會!因為 Redux 能做的事情很多,但目前大多數的專案都是走 SPA,頂多用 react-router-dom 改變一下 router 讓網站看起來很像 MPA,而 SPA 通常的設計都會是只取得該頁面需要的內容,基本上會讓每一個頁面彼此間不會有過多的關聯,這也符合網頁是 stateless 的設計,以往要取資料並且渲染無疑問一定是在 componentDidMount 的時候才去取資料,但這種設計模式已經被官方說是非常不好的設計模式,會讓使用者在 I/O 端等待過久,最好的設計方式是一開始非同步併發出去後再批次渲染,現在也非常多 custom hook 做到監聽資料是否有成功回傳的功能,例如 SWR,所以講了這麼多專案是否有需要 Redux 呢?我覺得最好的解答就是 Redux 作者說的不要 overuse Redux 比較好。

Rust

Rust lang Tips and Tricks

每個語言都會有自己的 Tips and Tricks,當然 Rust 也不意外,如果寫 Rust 已經寫了一陣子不知道該往哪前進,那就來看看他的小技巧吧~

Rust 不适合开发 Web API

前陣子在 FB 看到有人分享這篇「Rust 不適合開發 Web API」,以為大概又是來戰語言的,所以馬上點了進去看他要說什麼。但看了之後才發現文章並不是在說 Rust 不好,而是在說目前 Rust 的 Web API 生態系還不夠完整。譬如說 NodeJS 有 passport 來實作各種登入方式、如果需要連接 AWS 或 GCP 服務也有非常完整的官方 SDK,但 Rust 這邊就真的還不夠成熟,所以我看完也是部分同意這篇的觀點

Rust is a hard way to make a web API

如果看完上面那篇還覺得意猶未盡的話,Reddit 上針對上面文章的討論串有有將近三百則留言,而且因為是在 programming 而不是在 Rust 板,所以有各式各樣的觀點,如果對於 Rust 到底適不適合寫 Web 有興趣的話,可以來看看大家的想法

DevOps

Deep Dive into WebSockets

在一開始的網路世界裡,網路應用服務是由使用者所觸發的單純 HTTP 請求所組成,隨著科技的進步,兩方互相溝通即時傳輸資料的需求開始出現,有一些應用服務有低延遲的需求,譬如多人上遊戲,聊天軟體,即時更新的社群動態,線上運動計分板…等,而且這些需求的解決方案便是…WebSockets!隨著他被普遍接受之後,越來越多函式庫的出現後,簡化了他的整合使用,因此大部分的人在不了解內部原理的情況下開始使用該技術,進而導致效能低落,所以這篇文章嘗試涵蓋 WebSockets 重要的基本屬性,讓大家可以很清楚的知道該如何去使用它

Cloud Native Computing Foundation Announces Open Policy Agent Graduation

上週又有專案從 CNCF 畢業了,這次畢業的是自己一直有在關注的 Policy as Code 工具 Open Policy Agent (OPA),因為隨著越來越多人的採用,透明的管理流程,功能面的成熟度提升,對社群貢獻,專案維護,包容性都有高度的實體輸入,所以就順理成章的畢業啦~這邊不免俗的提一下 OPA 是什麼,它是一個開源的通用型 Policy Engine,整個架構每個層面的 Policy 都可以透過使用它來全部搞定,該專案於 2018 四月進到 CNCF Sandbox, 一年後晉升到 Incubation,有超過來自 30 個組織貢獻過 OPA,而主要四個維護者則來自於 Google, Microsoft, VMware 和 Styra,對於 Policy as Code 還沒有研究的人,推薦可以看看 OPA 這個工具

cert-checker

最後一樣來介紹一個小專案叫做 cert-checker,從名字就可以看出來,他是用來監控 Cerfiticate 的工具,而且把取得的資訊透過 Metric 輸出給 Prometheus,方便繪製成 Dashboard 觀看或是提前發出告警通知,畢竟在這個講究安全的資訊時代,SRE 所要管理的 Certificate 越來越多,而且有效期限還越來越短 T_T

StarBugs Weekly

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

Writers:

  • @HannahLin - 從台灣到矽谷,熱愛前端的工程師女孩。
  • @Kyle老莫 - 無法忍受自己一天不進步的熱血社會菜雞。
  • @Airwaves - Hi~我是 Airwaves,熱愛研究如何造輪子的前端工程師。
  • @Jenny - 我不寫 CSS。

Curators:

  • @Andy - 目標成為用嘴巴工作的工程師,專長為網頁開發以及 K8s。

Maintainers:

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

Feedback

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