LaravelConf Taiwan 2017 單頁面應用與前後端分離開發投影片

1. Maras Chen
Maraschen@codingweb.tw
Laravel 單頁面應用與前後端分離開發

2. • Maras Chen
• 4Gamers 後端工程師
• https://codingweb.tw
• maraschen@codingweb.tw
• C# / PHP / Python
LaravelConf2017

3. 摘要
1.什麼是 SPA
2.Laravel API 開發
3.Laravel API 開發 Packages
LaravelConf2017
4. Laravel x Vue
5. 地雷分享
6. Laravel 5.5 New Artisan

4. 什麼是 SPA ?
LaravelConf2017

5. LaravelConf2017

6. 什麼是 SPA ?
• Single Page Application
• 中文譯名「單頁式應用程式」
• 只在一個頁面中完成動作
LaravelConf2017

7. 圖片來源: https://msdn.microsoft.com/en-us/magazine/dn463786.aspx LaravelConf2017

8. SPA 優點
• 頁面能更快的被呈現出來
• UX 大幅提升
• 降低資料傳輸
• APP、Web前端 不用重複開發
LaravelConf2017

9. SPA 缺點
• SEO 問題
• 舊型瀏覽器不支援
LaravelConf2017

10. 為什麼我們需要 ?
• 前端/後端不維護相同專案
• 前/後端可以不用互相了解程式碼資料夾結構
• 讓後端只需要顧好 Request 資料處理與商業邏輯
• 讓前端選擇自己的前端框架
LaravelConf2017

11. 前端與後端的分工
LaravelConf2017

12. 傳統工作示意圖
LaravelConf2017
• HTML
• CSS
• Javascript
• RWD
• PHP
• Database
• Server後端 全端工程師
設計師
• Illustrator
• photoshop
• flash
• HTML
• CSS
• RWD
串資料是我們 所以資料出不來或掛掉都是我們

13. LaravelConf2017

14. 後端工程師要的很簡單 就只是…
LaravelConf2017

15. LaravelConf2017

16. 最棒的一點就是 …
LaravelConf2017

17. 可以讓前端自己串資料
LaravelConf2017

18. 當有前/後端透過SPA分工後
LaravelConf2017
工作內容
• PHP
• Database
• Server
當資料出問題…
後端工程師
前端工程師
工作內容
• CSS
• Javascript
• RWD
請後端工程師修復
當設計或是畫面出問題…
請前端工程師修復
透過文件溝通

19. 開發流程
透過技術文件溝通
設計 Wireframe
後端工程師
前端工程師 LaravelConf2017

20. 技術文件的溝通
LaravelConf2017

21. • APIDOC
• http://apidocjs.com/
• Sample code:
• https://goo.gl/dDN8oy
• Demo
• https://goo.gl/NccwQ1
LaravelConf2017

22. LaravelConf2017

23. 後端總是開發的很慢？
1. 可以先拿 example response 來串接API - http://myjson.com/
2. 前端遵循 restful 方式串接API - https://github.com/typicode/json-server
LaravelConf2017

24. LaravelConf2017

25. Laravel API 開發 STEP 1 (TDD)
LaravelConf2017

26. Laravel API 開發 STEP 2 (Provider)
LaravelConf2017

27. Laravel API 開發 STEP 3 (Route)
LaravelConf2017

28. API 認證及授權
• JSON Web Tokens (JWT)
• OAuth2 授權 – Laravel5.3-Passport
LaravelConf2017

29. JSON Web Token 認證
LaravelConf2017
圖片來源：https://auth0.com/blog/cookies-vs-tokens-definitive-guide/

30. JSON Web Token 組成
LaravelConf2017https://jwt.io

31. Laravel 5.2 API 認證
• Laravel 5.2+ 提供 guard web、api 認證
1. 需要先在 User 建立 api_token 欄位
2. 接著用 seeder 或是在會員註冊的時候生成一個 60 碼隨機字串
3. 在 call 受保護的 api 時傳入參數 api_token 或是 header 帶 Bearer
<api_token>
LaravelConf2017

32. Laravel 5.2 API 認證 - API 開發 STEP 1 (TDD)
LaravelConf2017

33. Laravel 5.2 API 認證 - API 開發 STEP 2 (Route)
LaravelConf2017

34. Laravel 5.3 - API 認證與授權 - Passport
• Laravel 5.3+ 整合了 OAuth2-Server – Passport
• Authorization Code Grant Flow
• Implicit Grant Flow
• Resource Password Owner Grant Flow
LaravelConf2017

35. OAuth2 認證
• Laravel 5.3 以後提供 Passport 用法
• 可以參考一下這篇教學
https://goo.gl/7wJ4Wr
LaravelConf2017

36. Passport OAuth2 測試怎麼寫 …
LaravelConf2017

37. Laravel Passport Testing - ActingAs
LaravelConf2017

38. Laravel API 套件
LaravelConf2017

39. Dingo
• 更複雜的需求？
• Content Negotiation (內容協商)
• Multiple Authentication Adapters (支援多種認證)
• API Versioning (版本控制)
• Rate Limiting (速率限制)
• Response Transformers and Formatters (統一格式回傳)
• Error and Exception Handling (錯誤及例外處理)
• Internal Requests (內部請求)
• API Blueprint Documentation (API 文件產生)
LaravelConf2017

40. Multiple Authentication Adapters
• Specific Authentication Providers
• Custom Authentication Providers
• Multiple Authentication Providers
• Http Basic
• JSON Web Tokens
• OAuth 2.0
LaravelConf2017

41. API Versioning
API 路由版本定義
LaravelConf2017

42. Response Transformers and Formatters
LaravelConf2017

43. API Blueprint Documentation
LaravelConf2017

44. Laravel x Vuejs
• Laravel5.3+ 預設可以在專案中安裝 bootstrap + vue + axios + jquery
LaravelConf2017

45. LaravelConf2017

46. axios
LaravelConf2017

47. Vuex
• 狀態管理模式 – 集中式儲存組件狀態
• 適用於中大型 SPA 專案
LaravelConf2017

48. LaravelConf2017

49. LaravelConf2017

50. LaravelConf2017

51. 實際上線地雷案例
LaravelConf2017

52. LaravelConf2017
● CORS (跨來源資源共享) - 受同源政策影響
● X-Rate-Limit-Limit (頻率限制)
● SEO (搜尋引擎最佳化)

53. 同源政策 (Same-origin policy)
https://a.com
https://a.com https://b.com

54. CORS – 在後端解決
• 套件
• https://github.com/barryvdh/laravel-cors
LaravelConf2017

55. CORS – 前端解決 (Vue2)
LaravelConf2017
來源參考(如何在 Vue-CLI 建立的開發環境呼叫跨域遠端 RESTful APIs): https://kuro.tw/
Local Only!!

56. X-RateLimit-Limit
LaravelConf2017

57. SEO – Prerender service
• Prerender.io (https://prerender.io)
• 免費 250 個頁面
• 開源 (https://github.com/prerender)
Request Nginx Crawler?
Prerender.io
Application
Yes
No
LaravelConf2017

58. SEO – Server side render
LaravelConf2017

59. LaravelConf2017

60. LaravelConf2017

61. LaravelConf2017

62. 總結
LaravelConf2017

63. • 對於前端工程師
• 可以選擇 Javascript 框架（VueJS、reactJS、angularJS ）
• 取得資料後的頁面應用
• 對於後端工程師
• 不需要管畫面 僅管測試及邏輯通過 當一個真正的全端後端工程師
• 可以不用再被前端凹了
可以更專注在後端工程的應用（資料存取、商業邏輯）
LaravelConf2017

64. 前後端工程師缺一不可
LaravelConf2017

65. 如果沒有前端 ....
LaravelConf2017

67. 如果沒有後端 ....
LaravelConf2017

68. LaravelConf2017

69. LaravelConf2017
http://spa-demo.codingweb.tw/

70. 設計 API 要很謹慎
LaravelConf2017

71. 案例分享 – 某單位可任意使用者修改密碼
• 可任意修改其他使用者的密碼，進而查看其他使用者個資、使用
記錄，註冊/刪除卡片。
https://zeroday.hitcon.org/vulnerability/ZD-2017-00300
LaravelConf2017

72. LaravelConf2017
Laravel 5.5 New Artisan

73. LaravelConf2017

74. LaravelConf2017

75. LaravelConf2017

76. Source Code
• Single Page Application (Laravel+VueJS) sample code:
• Backend(Laravel5.4+dingo): https://github.com/Maras0830/spa-example-with-laravel-vue-backend
• Frontend(Vue2): https://github.com/Maras0830/spa-example-with-laravel-vue-frontend
• Frontend(Nuxtjs): https://github.com/Maras0830/spa-example-with-laravel-vue-frontend-nuxtjs
• APIDoc: https://github.com/Maras0830/spa-example-with-laravel-vue-doc
LaravelConf2017

77. Ｑ＆Ａ
LaravelConf2017

78. END
LaravelConf2017