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

寫好前端不要搞瘋你的 PHP 後端⼯工程師 Lighting Talk WinWu / [email protected] /
winwu.github.io

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

只是想上來講講話…

About Win

Front End Engineer | 悠夏爾科技 (Now) winwu Frontend Web Developer
| 美商網碩科技 (2012.6-2013.7)

•  怎麼⾯面對 400~500 多⼈人講 lighting talk… •  熟悉 LiveScript • 
Joomla! Extension •  It邦幫忙鐵⼈人賽進⾏行中… 近期研究….

M V C F2E

Let’s Start…

剛⼊入⾏行

Mock-up

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

include! Header.php slide.php footer.php

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

include(‘header.php’); Include(‘nav.php’); Include(‘list_view.php’); … … … … … Include(‘footer.php’); Index.php
List_view.php foreach data

Include( ) 無敵？不…只有⾮非常微⼩小的幫助

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

最後PM還⽐比較喜歡上⼀一版（只好….改回去）那時候還不知道有git

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

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

PM UI Frontend Backend 溝通流程

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

列表模組 display_list.php display_list.css display_list.js

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

function display_list ( 要不要圖⽚片, 要不要rating,…){ /* 前端在 function 裡決定顯⽰示邏輯判斷
* html 結構, css class * 組 return 字串 * return html */ } 你要哪種 layout 我都有 echo display_list( $data_ary ) ; 右：圖⽚片來源：Line 貼圖

製造模組化的元件，顯⽰示邏輯避免砍掉重練練習如何達到 DRY（Don‘t repeat yourself）減輕團隊溝通的時間成本 Frontend

不⽤用⾃自⼰己組字串 <h1>’ . $v[‘conf_name’].’ </h1> (這是我的⼯工作…) 資料 (Array) 帶到 Helper
即可 / 或者是使⽤用 Helper 的⼈人透過設定決定 layout 樣式 Frontend Backend

o  產出良好的 HTML 結構 o  ⾴頁⾯面元件模組化 o  減輕重構的負擔 o  re-use
的思考模式 o  做出好⽤用的 helper for 後端⼯工程師 Better F2E

結論1 寫更少做更多 (我不是在說 jQuery) ⼤大家都輕鬆⼀一點

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

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

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

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

Thanks 謝謝⼤大家。

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

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

winwu

More Decks by winwu

Other Decks in Programming

Featured

Transcript

寫好前端不要搞瘋你的 PHP 後端⼯工程師 Lighting Talk WinWu / [email protected] /

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

只是想上來講講話…

About Win

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

•  怎麼⾯面對 400~500 多⼈人講 lighting talk… •  熟悉 LiveScript •

M V C F2E

Let’s Start…

剛⼊入⾏行

Mock-up

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

include! Header.php slide.php footer.php

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

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

Include( ) 無敵？不…只有⾮非常微⼩小的幫助

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

最後PM還⽐比較喜歡上⼀一版（只好….改回去）那時候還不知道有git

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

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

PM UI Frontend Backend 溝通流程

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

列表模組 display_list.php display_list.css display_list.js

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

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

製造模組化的元件，顯⽰示邏輯避免砍掉重練練習如何達到 DRY（Don‘t repeat yourself）減輕團隊溝通的時間成本 Frontend

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

o  產出良好的 HTML 結構 o  ⾴頁⾯面元件模組化 o  減輕重構的負擔 o  re-use

結論1 寫更少做更多 (我不是在說 jQuery) ⼤大家都輕鬆⼀一點

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

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

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

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

Thanks 謝謝⼤大家。