Slide 1
Slide 1 text
寫好前端
不要搞瘋你的 PHP 後端⼯工程師
Lighting Talk
WinWu / win@unisharp.com / winwu.github.io
Slide 2
Slide 2 text
其實今天沒什麼爆點
只是題⺫⽬目看起來⽐比較威…
Slide 3
Slide 3 text
只是想上來講講話…
Slide 4
Slide 4 text
About Win
Slide 5
Slide 5 text
Front End Engineer | 悠夏爾科技 (Now)
winwu
Frontend Web Developer | 美商網碩科技 (2012.6-2013.7)
Slide 6
Slide 6 text
• 怎麼⾯面對 400~500 多⼈人講 lighting talk…
• 熟悉 LiveScript
• Joomla! Extension
• It邦幫忙 鐵⼈人賽進⾏行中…
近期研究….
Slide 7
Slide 7 text
M
V
C
F2E
Slide 8
Slide 8 text
Let’s Start…
Slide 9
Slide 9 text
剛⼊入⾏行
Slide 10
Slide 10 text
Mock-up
Slide 11
Slide 11 text
How I think Mock-up
....
…
…
…
Slide 12
Slide 12 text
include!
Header.php
slide.php
footer.php
Slide 13
Slide 13 text
從.html 到 .php
看起來⽐比較厲害
Slide 14
Slide 14 text
include(‘header.php’);
Include(‘nav.php’);
Include(‘list_view.php’);
…
…
…
…
…
Include(‘footer.php’);
Index.php
List_view.php
foreach
data
Slide 15
Slide 15 text
Include( ) 無敵？
不…只有⾮非常微⼩小的幫助
Slide 16
Slide 16 text
當我們要⾯面對
需求不斷改變
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
最後PM還⽐比較喜歡上⼀一版
（只好….改回去）
那時候還不知道有git
Slide 21
Slide 21 text
但是⽼老闆喜歡最後⼀一版
（只好….再改回來）
Slide 22
Slide 22 text
OS:
PM幹嘛不⼀一開始就去問⽼老闆
Slide 23
Slide 23 text
PM UI Frontend Backend
溝通流程
Slide 24
Slide 24 text
為了減少反反覆覆的修改次數
以及溝通時間
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
列表模組
display_list.php
display_list.css
display_list.js
Slide 27
Slide 27 text
function display_list(⼀一堆設定){
//html…
//return html
}
強調模組功能上的獨⽴立性
負責執⾏行某項單純的功能
容易擴充功能
Slide 28
Slide 28 text
function display_list
( 要不要圖⽚片, 要不要rating,…){
/* 前端在 function 裡決定 顯⽰示邏輯判斷
* html 結構, css class
* 組 return 字串
* return html */
}
你要哪種 layout 我都有
echo display_list( $data_ary ) ;
右：圖⽚片來源：Line 貼圖
Slide 29
Slide 29 text
製造模組化的元件，顯⽰示邏輯
避免砍掉重練
練習如何達到 DRY（Don‘t repeat yourself）
減輕團隊溝通的時間成本
Frontend
Slide 30
Slide 30 text
不⽤用⾃自⼰己組字串
’ . $v[‘conf_name’].’
(這是我的⼯工作…) 資料 (Array) 帶到 Helper 即可 / 或者是使⽤用 Helper 的⼈人 透過設定決定 layout 樣式 Frontend BackendSlide 31
Slide 31 text
o 產出良好的 HTML 結構
o ⾴頁⾯面元件模組化
o 減輕重構的負擔
o re-use 的思考模式
o 做出好⽤用的 helper for 後端⼯工程師
Better F2E
Slide 32
Slide 32 text
結論1
寫更少 做更多 (我不是在說 jQuery)
⼤大家都輕鬆⼀一點
Slide 33
Slide 33 text
結論2
我曾經想過什麼時候會後端⼯工程師
瘋掉
Slide 34
Slide 34 text
⼤大概就是沒有前端的時候
Slide 35
Slide 35 text
⼀一份mock-up，兩樣情
破版/跑版/模組化只能⾃自⼰己來
UI Backend
Slide 36
Slide 36 text
結論3
好前端帶你上天堂。
不會讓你瘋。
右：圖⽚片來源：Line 貼圖
Slide 37
Slide 37 text
Thanks
謝謝⼤大家。