Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad

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

Ad

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

Ad

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

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Upcoming SlideShare
工作坊簡介
工作坊簡介
Loading in …3
×

Check these out next

1 of 78 Ad
1 of 78 Ad

More Related Content

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

  1. 1. Maras Chen Maraschen@codingweb.tw Laravel 單頁面應用與前後端分離開發
  2. 2. • Maras Chen • 4Gamers 後端工程師 • https://codingweb.tw • maraschen@codingweb.tw • C# / PHP / Python LaravelConf2017
  3. 3. 摘要 1.什麼是 SPA 2.Laravel API 開發 3.Laravel API 開發 Packages LaravelConf2017 4. Laravel x Vue 5. 地雷分享 6. Laravel 5.5 New Artisan
  4. 4. 什麼是 SPA ? LaravelConf2017
  5. 5. LaravelConf2017
  6. 6. 什麼是 SPA ? • Single Page Application • 中文譯名「單頁式應用程式」 • 只在一個頁面中完成動作 LaravelConf2017
  7. 7. 圖片來源: https://msdn.microsoft.com/en-us/magazine/dn463786.aspx LaravelConf2017
  8. 8. SPA 優點 • 頁面能更快的被呈現出來 • UX 大幅提升 • 降低資料傳輸 • APP、Web前端 不用重複開發 LaravelConf2017
  9. 9. SPA 缺點 • SEO 問題 • 舊型瀏覽器不支援 LaravelConf2017
  10. 10. 為什麼我們需要 ? • 前端/後端不維護相同專案 • 前/後端可以不用互相了解程式碼資料夾結構 • 讓後端只需要顧好 Request 資料處理與商業邏輯 • 讓前端選擇自己的前端框架 LaravelConf2017
  11. 11. 前端與後端的分工 LaravelConf2017
  12. 12. 傳統工作示意圖 LaravelConf2017 • HTML • CSS • Javascript • RWD • PHP • Database • Server後端 全端工程師 設計師 • Illustrator • photoshop • flash • HTML • CSS • RWD 串資料是我們 所以資料出不來或掛掉都是我們
  13. 13. LaravelConf2017
  14. 14. 後端工程師要的很簡單 就只是… LaravelConf2017
  15. 15. LaravelConf2017
  16. 16. 最棒的一點就是 … LaravelConf2017
  17. 17. 可以讓前端自己串資料 LaravelConf2017
  18. 18. 當有前/後端透過SPA分工後 LaravelConf2017 工作內容 • PHP • Database • Server 當資料出問題… 後端工程師 前端工程師 工作內容 • CSS • Javascript • RWD 請後端工程師修復 當設計或是畫面出問題… 請前端工程師修復 透過文件溝通
  19. 19. 開發流程 透過技術文件溝通 設計 Wireframe 後端工程師 前端工程師 LaravelConf2017
  20. 20. 技術文件的溝通 LaravelConf2017
  21. 21. • APIDOC • http://apidocjs.com/ • Sample code: • https://goo.gl/dDN8oy • Demo • https://goo.gl/NccwQ1 LaravelConf2017
  22. 22. LaravelConf2017
  23. 23. 後端總是開發的很慢? 1. 可以先拿 example response 來串接API - http://myjson.com/ 2. 前端遵循 restful 方式串接API - https://github.com/typicode/json-server LaravelConf2017
  24. 24. LaravelConf2017
  25. 25. Laravel API 開發 STEP 1 (TDD) LaravelConf2017
  26. 26. Laravel API 開發 STEP 2 (Provider) LaravelConf2017
  27. 27. Laravel API 開發 STEP 3 (Route) LaravelConf2017
  28. 28. API 認證及授權 • JSON Web Tokens (JWT) • OAuth2 授權 – Laravel5.3-Passport LaravelConf2017
  29. 29. JSON Web Token 認證 LaravelConf2017 圖片來源:https://auth0.com/blog/cookies-vs-tokens-definitive-guide/
  30. 30. JSON Web Token 組成 LaravelConf2017https://jwt.io
  31. 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. 32. Laravel 5.2 API 認證 - API 開發 STEP 1 (TDD) LaravelConf2017
  33. 33. Laravel 5.2 API 認證 - API 開發 STEP 2 (Route) LaravelConf2017
  34. 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. 35. OAuth2 認證 • Laravel 5.3 以後提供 Passport 用法 • 可以參考一下這篇教學 https://goo.gl/7wJ4Wr LaravelConf2017
  36. 36. Passport OAuth2 測試怎麼寫 … LaravelConf2017
  37. 37. Laravel Passport Testing - ActingAs LaravelConf2017
  38. 38. Laravel API 套件 LaravelConf2017
  39. 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. 40. Multiple Authentication Adapters • Specific Authentication Providers • Custom Authentication Providers • Multiple Authentication Providers • Http Basic • JSON Web Tokens • OAuth 2.0 LaravelConf2017
  41. 41. API Versioning API 路由版本定義 LaravelConf2017
  42. 42. Response Transformers and Formatters LaravelConf2017
  43. 43. API Blueprint Documentation LaravelConf2017
  44. 44. Laravel x Vuejs • Laravel5.3+ 預設可以在專案中安裝 bootstrap + vue + axios + jquery LaravelConf2017
  45. 45. LaravelConf2017
  46. 46. axios LaravelConf2017
  47. 47. Vuex • 狀態管理模式 – 集中式儲存組件狀態 • 適用於中大型 SPA 專案 LaravelConf2017
  48. 48. LaravelConf2017
  49. 49. LaravelConf2017
  50. 50. LaravelConf2017
  51. 51. 實際上線地雷案例 LaravelConf2017
  52. 52. LaravelConf2017 ● CORS (跨來源資源共享) - 受同源政策影響 ● X-Rate-Limit-Limit (頻率限制) ● SEO (搜尋引擎最佳化)
  53. 53. 同源政策 (Same-origin policy) https://a.com https://a.com https://b.com
  54. 54. CORS – 在後端解決 • 套件 • https://github.com/barryvdh/laravel-cors LaravelConf2017
  55. 55. CORS – 前端解決 (Vue2) LaravelConf2017 來源參考(如何在 Vue-CLI 建立的開發環境呼叫跨域遠端 RESTful APIs): https://kuro.tw/ Local Only!!
  56. 56. X-RateLimit-Limit LaravelConf2017
  57. 57. SEO – Prerender service • Prerender.io (https://prerender.io) • 免費 250 個頁面 • 開源 (https://github.com/prerender) Request Nginx Crawler? Prerender.io Application Yes No LaravelConf2017
  58. 58. SEO – Server side render LaravelConf2017
  59. 59. LaravelConf2017
  60. 60. LaravelConf2017
  61. 61. LaravelConf2017
  62. 62. 總結 LaravelConf2017
  63. 63. • 對於前端工程師 • 可以選擇 Javascript 框架(VueJS、reactJS、angularJS ) • 取得資料後的頁面應用 • 對於後端工程師 • 不需要管畫面 僅管測試及邏輯通過 當一個真正的全端後端工程師 • 可以不用再被前端凹了 可以更專注在後端工程的應用(資料存取、商業邏輯) LaravelConf2017
  64. 64. 前後端工程師缺一不可 LaravelConf2017
  65. 65. 如果沒有前端 .... LaravelConf2017
  66. 66. 如果沒有後端 .... LaravelConf2017
  67. 67. LaravelConf2017
  68. 68. LaravelConf2017 http://spa-demo.codingweb.tw/
  69. 69. 設計 API 要很謹慎 LaravelConf2017
  70. 70. 案例分享 – 某單位可任意使用者修改密碼 • 可任意修改其他使用者的密碼,進而查看其他使用者個資、使用 記錄,註冊/刪除卡片。 https://zeroday.hitcon.org/vulnerability/ZD-2017-00300 LaravelConf2017
  71. 71. LaravelConf2017 Laravel 5.5 New Artisan
  72. 72. LaravelConf2017
  73. 73. LaravelConf2017
  74. 74. LaravelConf2017
  75. 75. 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
  76. 76. Q&A LaravelConf2017
  77. 77. END LaravelConf2017

×