Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

winwu
October 08, 2013

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

PHPconf 2013 Lighting Talk

winwu

October 08, 2013
Tweet

More Decks by winwu

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

  3. 只是想上來講講話…

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. Let’s Start…

    View full-size slide

  7. 剛⼊入⾏行

    View full-size slide

  8. How I think Mock-up




    ....




    View full-size slide

  9. include!
    Header.php
    slide.php
    footer.php

    View full-size slide

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

    View full-size slide

  11. include(‘header.php’);
    Include(‘nav.php’);
    Include(‘list_view.php’);





    Include(‘footer.php’);
    Index.php
    List_view.php
    foreach
    data

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. PM UI Frontend Backend
    溝通流程

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. Thanks
    謝謝⼤大家。

    View full-size slide