JSDC2020 - 用 API mocking 讓前端不再苦等待

https://github.com/aszx87410/api-mocking-demo-app

簡單介紹 MSW 與 MirageJS

Transcript

1. ⽤用 API mocking 讓前
   端不再苦苦等待
   huli
   
   aszx87410@gmail.com
   

   View Slide

2. https://blog.huli.tw
   OneDegree 資深前端⼯工程師
   

   View Slide

3. 前端
   後端 API
   User
   

   View Slide

4. 前端
   後端 API
   User
   

   View Slide

5. 前端
   後端 API
   User
   「我要等後端好才能開始接喔」
   

   View Slide

6. 該怎麼處理理這個狀狀況？
   

   View Slide

7. 如果後端連 interface
   都還沒定好...
   

   View Slide

8. http://www.quickmeme.com/meme/3rwr8s
   

   View Slide

9. View Slide

10. 幾個⽅方法
    • 不管，繼續等待後端
    
    

    View Slide

11. 幾個⽅方法
    • 不管，繼續等待後端
    
    • Express ⾃自⼰己弄弄
    
    

    View Slide

12. 幾個⽅方法
    • 不管，繼續等待後端
    
    • Express ⾃自⼰己弄弄
    
    • JSON server 假資料
    
    

    View Slide

13. 幾個⽅方法
    • 不管，繼續等待後端
    
    • Express ⾃自⼰己弄弄
    
    • JSON server 假資料
    
    • MSW
    
    • MirageJS
    

    View Slide

14. View Slide

15. View Slide

16. 登入⾴頁⾯面
    後台⾴頁⾯面
    是否有 token
    是
    POST /login
    成功之後把 token

    寫進 localStorage
    並導到後台
    否，輸入帳號密碼
    

    View Slide

17. 登入⾴頁⾯面
    確認
    localStorage
    後台⾴頁⾯面 GET /me
    登入⾴頁⾯面
    沒 token
    有 token
    失敗
    是否有 token
    是
    POST /login
    成功之後把 token

    寫進 localStorage
    並導到後台
    否，輸入帳號密碼
    清除 localStorage
    

    View Slide

18. MSW
    Mock Service Worker
    

    View Slide

19. View Slide

20. 前端網站
    API

    Server
    

    View Slide

21. 前端網站 Service
    Worker
    API

    Server
    瀏覽器
    

    View Slide

22. 設定步驟
    • 加上 service worker
    
    • 加上 handler
    
    

    View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. 還可以針對各種狀狀況
    寫測試！
    

    View Slide

28. View Slide

29. View Slide

30. View Slide

31. Mirage JS
    

    View Slide

32. View Slide

33. 前端網站
    API

    Server
    

    View Slide

34. 前端網站 fetch
    XHR
    API

    Server
    JavaScript
    

    View Slide

35. View Slide

36. View Slide

37. View Slide

38. 寫測試？
    當然沒問題
    

    View Slide

39. View Slide

40. View Slide

41. mirage 的強項
    

    View Slide

42. View Slide

43. View Slide

44. View Slide

45. View Slide

46. 總結
    cy.route msw mirage
    使⽤用在開發上 X O O
    使⽤用在測試上 O O O
    特⾊色 cypress 內建
    使⽤用

    service worker
    打造出完整的
    mock api
    缺點 只能⽤用在測試
    設置較⿇麻煩
    
    適合放靜態資料
    需要較多時間
    

    View Slide

47. https://github.com/aszx87410/api-
    mocking-demo-app
    

    View Slide