Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
PHPconf 2013 - 寫好前端,不要搞瘋你的 PHP 後端工程師
winwu
October 08, 2013
Programming
6
2.6k
PHPconf 2013 - 寫好前端,不要搞瘋你的 PHP 後端工程師
PHPconf 2013 Lighting Talk
winwu
October 08, 2013
Tweet
Share
More Decks by winwu
See All by winwu
Google Data Studio 分享
winwu
0
33
Google Analytics 分享 3 - 內容分組/自訂廣告活動/目標/事件
winwu
0
45
Google Analytics 分享 2 - 版面配置/資訊主頁/資料層級
winwu
0
130
Google Analytics 分享 1 - 基礎知識篇
winwu
0
280
HTML_CSS_前端基礎講座-4.pdf
winwu
0
320
HTML/CSS 前端基礎講座-3
winwu
0
340
HTML/CSS 前端基礎講座-2
winwu
0
380
2016 HTML CSS 前端基礎講座-1
winwu
1
430
2016 中正大學 weic.tw - RWD
winwu
3
740
Other Decks in Programming
See All in Programming
TokyoR#103_DataProcessing
kilometer
0
490
jq at the Shortcuts
cockscomb
1
390
様々なWebアプリをAzureにデプロイする
tomokusaba
0
110
AWS App Runnerがそろそろ本番環境でも使い物になりそう
n1215
PRO
0
880
Refactor with using `available` and `deprecated`
417_72ki
3
380
Most Valuable Bug(?) ~インシデント未遂から得た学び~
tatsumiakahori
0
140
OSSから学んだPR Descriptionの書き方
fugakkbn
4
120
Swift Observation
shiz
3
250
NGK2023S - OCaml最高! スマホ開発にも使えちゃう?!
haochenxie
0
110
ちょうぜつ改め21世紀ふつうのソフトウェア設計
tanakahisateru
7
6.1k
An Advanced Introduction to R
nicetak
0
1.7k
Enumを自動で網羅的にテストしてみた
estie
0
1.2k
Featured
See All Featured
Building Your Own Lightsaber
phodgson
96
4.9k
How to Ace a Technical Interview
jacobian
270
21k
Art, The Web, and Tiny UX
lynnandtonic
284
18k
Embracing the Ebb and Flow
colly
75
3.6k
Designing for humans not robots
tammielis
245
24k
Bash Introduction
62gerente
601
210k
Gamification - CAS2011
davidbonilla
75
4.1k
The World Runs on Bad Software
bkeepers
PRO
59
5.7k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
11k
Rails Girls Zürich Keynote
gr2m
87
12k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
214
12k
Testing 201, or: Great Expectations
jmmastey
25
5.7k
Transcript
寫好前端 不要搞瘋你的 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( ) 無敵? 不…只有⾮非常微⼩小的幫助
當我們要⾯面對 需求不斷改變
None
None
None
最後PM還⽐比較喜歡上⼀一版 (只好….改回去) 那時候還不知道有git
但是⽼老闆喜歡最後⼀一版 (只好….再改回來)
OS: PM幹嘛不⼀一開始就去問⽼老闆
PM UI Frontend Backend 溝通流程
為了減少反反覆覆的修改次數 以及溝通時間
None
列表模組 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 謝謝⼤大家。