Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
PHPconf 2013 - 寫好前端,不要搞瘋你的 PHP 後端工程師
Search
winwu
October 08, 2013
Programming
6
2.8k
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
74
Google Analytics 分享 3 - 內容分組/自訂廣告活動/目標/事件
winwu
0
66
Google Analytics 分享 2 - 版面配置/資訊主頁/資料層級
winwu
0
190
Google Analytics 分享 1 - 基礎知識篇
winwu
0
310
HTML_CSS_前端基礎講座-4.pdf
winwu
0
410
HTML/CSS 前端基礎講座-3
winwu
0
420
HTML/CSS 前端基礎講座-2
winwu
0
450
2016 HTML CSS 前端基礎講座-1
winwu
1
520
2016 中正大學 weic.tw - RWD
winwu
3
900
Other Decks in Programming
See All in Programming
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
How to use Macrobenchmark
veronikapj
0
160
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
【Go言語】ジェネリクス
tomo1227
0
170
유연한 Composable 설계
l2hyunwoo
0
380
スクラムマスターって孤独じゃないですか?
yoshitaroyoyo
1
140
CSC307 Lecture 12
javiergs
PRO
0
220
Ruby メモリ管理 プログラミング
megmogmog1965
0
130
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
OpenAI/Gemini APIを使って EPUBを翻訳するCLIツールをつくってみた
tomiyan
0
790
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
1
620
Featured
See All Featured
Building Adaptive Systems
keathley
34
2k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
Atom: Resistance is Futile
akmur
261
25k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
The Cult of Friendly URLs
andyhume
75
5.9k
The Language of Interfaces
destraynor
151
23k
Documentation Writing (for coders)
carmenintech
63
4.2k
Scaling GitHub
holman
458
140k
Infographics Made Easy
chrislema
238
18k
A better future with KSS
kneath
231
17k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
Bash Introduction
62gerente
607
210k
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 謝謝⼤大家。