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

PHPconf 2013 Lighting Talk

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. 當我們要⾯面對 需求不斷改變
20. 最後PM還⽐比較喜歡上⼀一版 （只好….改回去） 那時候還不知道有git
21. 但是⽼老闆喜歡最後⼀一版 （只好….再改回來）
22. OS: PM幹嘛不⼀一開始就去問⽼老闆
23. PM UI Frontend Backend 溝通流程
24. 為了減少反反覆覆的修改次數 以及溝通時間
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 謝謝⼤大家。