Upgrade to Pro — share decks privately, control downloads, hide ads and more …

PHPconf 2013 - 寫好前端,不要搞瘋你的 PHP 後端工程師

B72258db4bea39b1ff31ca60725be83f?s=47 winwu
October 08, 2013

PHPconf 2013 - 寫好前端,不要搞瘋你的 PHP 後端工程師

PHPconf 2013 Lighting Talk

B72258db4bea39b1ff31ca60725be83f?s=128

winwu

October 08, 2013
Tweet

Transcript

  1. 寫好前端 不要搞瘋你的 PHP 後端⼯工程師 Lighting Talk WinWu / win@unisharp.com /

    winwu.github.io
  2. 其實今天沒什麼爆點 只是題⺫⽬目看起來⽐比較威…

  3. 只是想上來講講話…

  4. About Win

  5. Front End Engineer | 悠夏爾科技 (Now) winwu Frontend Web Developer

    | 美商網碩科技 (2012.6-2013.7)
  6. •  怎麼⾯面對 400~500 多⼈人講 lighting talk… •  熟悉 LiveScript • 

    Joomla! Extension •  It邦幫忙 鐵⼈人賽進⾏行中… 近期研究….
  7. M V C F2E

  8. Let’s Start…

  9. 剛⼊入⾏行

  10. Mock-up

  11. How I think Mock-up <!DOCTYPE html> <head> </head> <body> ....

    … … … </body>
  12. include! Header.php slide.php footer.php

  13. 從.html 到 .php 看起來⽐比較厲害

  14. include(‘header.php’); Include(‘nav.php’); Include(‘list_view.php’); … … … … … Include(‘footer.php’); Index.php

    List_view.php foreach data
  15. Include( ) 無敵? 不…只有⾮非常微⼩小的幫助

  16. 當我們要⾯面對 需求不斷改變

  17. None
  18. None
  19. None
  20. 最後PM還⽐比較喜歡上⼀一版 (只好….改回去) 那時候還不知道有git

  21. 但是⽼老闆喜歡最後⼀一版 (只好….再改回來)

  22. OS: PM幹嘛不⼀一開始就去問⽼老闆

  23. PM UI Frontend Backend 溝通流程

  24. 為了減少反反覆覆的修改次數 以及溝通時間

  25. None
  26. 列表模組 display_list.php display_list.css display_list.js

  27. function display_list(⼀一堆設定){ //html… //return html } 強調模組功能上的獨⽴立性 負責執⾏行某項單純的功能 容易擴充功能

  28. function display_list ( 要不要圖⽚片, 要不要rating,…){ /* 前端在 function 裡決定 顯⽰示邏輯判斷

    * html 結構, css class * 組 return 字串 * return html */ } 你要哪種 layout 我都有 echo display_list( $data_ary ) ; 右:圖⽚片來源:Line 貼圖
  29. 製造模組化的元件,顯⽰示邏輯 避免砍掉重練 練習如何達到 DRY(Don‘t repeat yourself) 減輕團隊溝通的時間成本 Frontend

  30. 不⽤用⾃自⼰己組字串 <h1>’ . $v[‘conf_name’].’ </h1> (這是我的⼯工作…) 資料 (Array) 帶到 Helper

    即可 / 或者是使⽤用 Helper 的⼈人 透過設定決定 layout 樣式 Frontend Backend
  31. o  產出良好的 HTML 結構 o  ⾴頁⾯面元件模組化 o  減輕重構的負擔 o  re-use

    的思考模式 o  做出好⽤用的 helper for 後端⼯工程師 Better F2E
  32. 結論1 寫更少 做更多 (我不是在說 jQuery) ⼤大家都輕鬆⼀一點

  33. 結論2 我曾經想過什麼時候會後端⼯工程師 瘋掉

  34. ⼤大概就是沒有前端的時候

  35. ⼀一份mock-up,兩樣情 破版/跑版/模組化只能⾃自⼰己來 UI Backend

  36. 結論3 好前端帶你上天堂。 不會讓你瘋。 右:圖⽚片來源:Line 貼圖

  37. Thanks 謝謝⼤大家。