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.9k
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
94
Google Analytics 分享 3 - 內容分組/自訂廣告活動/目標/事件
winwu
0
83
Google Analytics 分享 2 - 版面配置/資訊主頁/資料層級
winwu
0
280
Google Analytics 分享 1 - 基礎知識篇
winwu
0
340
HTML_CSS_前端基礎講座-4.pdf
winwu
0
430
HTML/CSS 前端基礎講座-3
winwu
0
450
HTML/CSS 前端基礎講座-2
winwu
0
470
2016 HTML CSS 前端基礎講座-1
winwu
1
540
2016 中正大學 weic.tw - RWD
winwu
3
970
Other Decks in Programming
See All in Programming
GDG Super.init(version=6) - From Where to Wear : 모바일 개발자가 워치에서 발견한 인사이트
haeti2
0
540
Functional APIから再考するLangGraphを使う理由
os1ma
4
630
複数ドメインに散らばってしまった画像…! 運用中のPHPアプリに後からCDNを導入する…!
suguruooki
0
400
Windows版PHPのビルド手順とPHP 8.4における変更点
matsuo_atsushi
0
360
PHPによる"非"構造化プログラミング入門 -本当に熱いスパゲティコードを求めて- #phperkaigi
o0h
PRO
0
800
SLI/SLOの設定を進めるその前に アラート品質の改善に取り組んだ話
tanden
2
620
フロントエンドテストの育て方
quramy
8
2k
Day0 初心者向けワークショップ実践!ソフトウェアテストの第一歩
satohiroyuki
0
140
2025/3/18 サービスの成長で生じる幅広いパフォーマンスの問題を、 AIで手軽に解決する
shirahama_x
0
140
新卒から4年間、20年もののWebサービスと 向き合って学んだソフトウェア考古学
oguri
7
6.3k
Go1.24で testing.B.Loopが爆誕
kuro_kurorrr
0
140
安全に倒し切るリリースをするために:15年来レガシーシステムのフルリプレイス挑戦記
sakuraikotone
5
2.1k
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
GitHub's CSS Performance
jonrohan
1030
460k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Into the Great Unknown - MozCon
thekraken
35
1.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
A better future with KSS
kneath
238
17k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
31
4.7k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
KATA
mclloyd
29
14k
Transcript
寫好前端 不要搞瘋你的 PHP 後端⼯工程師 Lighting Talk WinWu / win@unisharp.com /
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 謝謝⼤大家。