2020 JSDC 主年會 下半場 術場

學習Blog
Oct 18, 2020

--

JavaScript 開發者年會下半場是「術場」,著重於技術方面、開發經驗、不同應用情境等方面的分享與討論;由於筆者自己接觸程式時間相當資淺,所以在這邊只記錄自己比較了解的項目。

Lerna 的套件管理術 — Fong

在開發上,當程式碼規模越來越大、分散在各個repo的時候,管理上越來越繁雜,要怎麼管理、重用、維持DRY(Do not repeat yourself)原則?

問題

  • 重複使用的程式在各個地方到處使用,更動程式時卻沒有一併更改
  • 更新舊 npm package困難,有些package可能過時便不更新了
  • 程式碼散布在各個repo,難以追蹤修改
  • github repos/microservices 中 CI/CD 依賴性難管理

MonoRepo

在一個Repository中放入很多專案或套件
左邊傳統作法,複數repo而且互相依賴;右邊則只有一個Repo,用資料夾方式管理

MonoRepo優點:

  • 提升對於整體軟體架構理解力
  • 重用性 & single sources of truth
  • 簡化依賴性管理,清楚知道程式碼之間的關係
  • 跨專案模組的重構 & Debug只要在一個Repo進行
  • 每個專案都有一致的 CI/CD pipeline 設定

MonoRepo缺點:

  • 各子專案設定的彈性比較少(因為追求統一)
  • 沒辦法對各個子專案作 Read/Write 權限管理
  • 程式碼 Size 直線上升
  • 導入時的設定較複雜

Lerna

  • 用於CI、CD的進行、Version的管理,把 JS 專案當作 Multiple package 來管理的工具
  • 在一個 Repo 中,可以獨立地測試、建置 Image、部屬、發佈各個 Package
  • 可以在隔離的環境中重構並開發
  • 根據Package有無被修改來觸發
一般CI流程
使用Lerna則可以針對更改的package做測試、部屬

Definitions

Lerna Package:

  • 被管理的 JS Package 單位
  • 可以做完一個獨立的專案、套件
  • Lerna Package 間可以互相依賴

Lerna Workspace:

  • 放置、分類 Lerna Packages 的地方

JavaScript 中鼓勵用非同步的 API,但用了就會提升效能避免阻塞嗎?- 陳柏融(PJCHENder)

Single Threaded Language:

JavaScript是單執行緒程式語言(single threaded language),一次只能做一件事情

Event Loop

JavaScript使用Event Loop機制,讓瀏覽器與Server不會卡住
  • Stack:執行與撰寫程式碼的地方
  • WebAPIs:瀏覽器所提供的API,同時負責解決非同步API,將處裡的結果傳給Queue,經由Event Loop再回傳給Stack

耗能的I/O操作

  • 例子:加密與解密、讀取、覆寫檔案
  • Node.js藉由Event Loop來進行程式碼,而Event Loop由C++進行多執行緒來處理,最後藉由callback傳回給Node.js
Node.js提供FileSystem(fs) 有同步與非同步方法 使用非同步能確保程式流暢進行

有了非同步、Event Loop,還需要擔心Javascript single thread問題嗎?

  • 情況1:將程式碼放到Promise的then之中
  • 情況2:使用SetTimeout
  • 情況3:程式碼放到Async/Await中

即使使用上述方法,還是會造成程式碼的阻塞,大部分看得到的程式碼都會回到single thread中執行

使用Node.js 的 multi-thread (mdn web worker)

App.js
Worker.js (所謂的大神 負責解決前面提到的single thread問題)

用不用 TypeScript 隨便你,反正我是用了- Will 保哥(多奇教育訓練)

JavaScript是個"弱型別"的程式語言

  • JS設計不是個嚴謹的程式語言,可以隨意設計物件內容
  • 對於變數的型別並沒有特地去限制,所以宣告變數/常數的當下無法知道型別
  • 由於這個特性,當函式帶有參數時並不會知道是什麼內容,相對的需要各種檢查(record忘記加上s,所以得到undefined)

TypeScript彌補JS的缺點

  • TS提供型別的定義跟規範,幫助建立中、大型應用程式
  • 宣告變數/常數的當下就可以設計型別
  • 能根據定義做提示,減少出錯
  • 如果沒有單元測試或TS的處理,JS很容易出錯
TS除了定義型別外也能定義賦值內容(Union)
使用Partial可以讓型別限制在IUser內但不用四個型別資料都要傳入
可以指定不能更改的型別
英文官方網站(連結)
演講者親自撰寫的TS介紹網站(連結)

使用TypeScript的理由:

  • 強型別
  • 更著重設計
  • 適合多人開發的專案
  • 與現有專案無縫整合
  • 非常完整的開發工具支援
  • 持續發展的社群

採用 TypeScript 前你該考慮的十件事 — Jeremy Lu

TypeScript的優點:

  • 可以視為永遠update to date的文件
  • tooling — autocomplete 、jump to definition、 quick access to documentation 、refactoring 、renaming
  • type check
  • 業界流行

雖然前面說了TypeScript的優點,但缺點也是不少的:

  • 需要更多時間寫正確 type
  • 為了 compile 過,常常需要改變寫法
  • 閱讀code變更慢(code 變多),每次閱讀要再花更多時間
  • 需要更多時間維護,typing會因程式變動而過時
  • 3rd party library 是否支援?(eg. day.js, moment)
  • 平均增加 30~50 % 開發時間!
  • 不安全 - non-soundness 可能造成 runtime 出現無法預期的錯誤
  • 用 any 等於沒使用TypeScript
  • 錯誤的安全假象 - 還是需要大量的tests,等於用人工智慧實現completeness
  • If it compiles, it runs → 不適用於TypeScript

替代方案:

  • flowtype - JS世界最友善的strong type系統(soundness優先)
  • 降維打擊 - 乾脆不用,但調整 mindset,採用FP手法 (OO -> FP),第一步可採用ramda、sanctuary等FP library,第二步學習正統FP手法
  • 換開工法 - 使用狀態機、xstate
  • 換語言 - AltJS -> Elm、PureScript、ReScript ;to WASM -> Haskell、Rust

--

--

學習Blog
學習Blog

No responses yet