$30 off During Our Annual Pro Sale. View Details »

網頁前端⼯程師與室內裝修師傅的相似之處

 網頁前端⼯程師與室內裝修師傅的相似之處

應 DEMO 之邀,於 twMVC 分享。

Ping-Yen Tsai

August 16, 2014
Tweet

More Decks by Ping-Yen Tsai

Other Decks in Technology

Transcript

  1. 網⾴頁前端⼯工程師與室內裝修師傅的相似之處
    Vexed

    View Slide

  2. http://mvc.tw
    n 蔡秉諺 ⽶米蟲  Tsai  Ping-­‐Yen  
    n 2001.9    -­‐  2007.7    中正資⼯工  
    n 2007.10  -­‐  2013.9    中華電信  
    n 2013.9    -­‐  現在    Yahoo  Search  
    Vexed
    2

    View Slide

  3. http://mvc.tw
    n 這是我的經驗整理出來的版本  
    什麼是網⾴頁前端?  
    3

    View Slide

  4. http://mvc.tw
    n PM  開需求給  UED  和  BE  
    n BE  依需求提供 API  
    n UED  依需求提供  Mockup  與素材  
    n FE  依  Mockup  組合素材與  API  建置網⾴頁  
    我每天的⼯工作  
    4
    PM - Product Manager
    UED - User Experience Designer
    BE - Back-end Engineer
    FE - Front-end Engineer

    View Slide

  5. 5
    PM 開需求給 UED 和 BE
    BE 依需求提供 API
    UED 依需求提供 Mockup 與素材
    FE 依 Mockup 組合素材與 API 建置網頁
    圖⽚片出處:http://www.palantir.net/blog/website-wireframes-making-your-whole-world-better
    Wireframe
    Mockup

    View Slide

  6. 6
    FE 依 Mockup 組合素材與 API 建置網頁
    這是圖

    View Slide

  7. http://mvc.tw
    n FE 將 Mockup  翻譯成 HTML  CSS  JavaScript  
    n 信達雅  
    n 可信 達意 ⽂文雅  
    n 做不做得到 怎麼做 如果做不到 為什麼  
    n 持續與  PM  UED  BE  溝通  
    FE  依  Mockup  組合素材與  API  建置網⾴頁  
    7

    View Slide

  8. http://mvc.tw
    n ⼊入⾨門容易 精通難  
    n ⼊入⾨門  
    n 看起來跟  Mockup ⼀一樣就好  
    n 怎麼做 不在意  
    n 不明就裡  
    n Copy  &  Paste  
    n Try  &  Error  
    翻譯成 HTML  CSS  JavaScript  
    8

    View Slide

  9. http://mvc.tw
    溝通 協調  
    9

    View Slide

  10. http://mvc.tw
    n FE  永遠是問題回報點  
    溝通 協調  
    10
    Timeout
    Server-side error
    JavaScript error
    CSS issue
    CDN issue
    Content issue
    Cache issue
    Network issue

    View Slide

  11. http://mvc.tw
    n 經驗  
    溝通 協調  
    11

    View Slide

  12. http://mvc.tw
    n ⼊入⾨門  
    n 看起來跟  Mockup ⼀一樣就好  
    n 怎麼做 不在意  
    n 不明就裡  
    n Copy  &  Paste  
    n Try  &  Error  
    ⼊入⾨門容易 精通難  
    12

    View Slide

  13. http://mvc.tw
    n 難關  
    n Cross-Browser  
    n SEO  
    n Performance  
    n 第三⽅方  Library 出錯  
    n 資訊安全  
    ⼊入⾨門容易 精通難  
    13

    View Slide

  14. http://mvc.tw
    n 了解不同瀏覽器環境功能與極限  
    n 瀏覽器、瀏覽器版本、裝置、作業系統、作業系統版本  
    n BrowserStack  
    n caniuse.com  
    Cross-­‐Browser  
    14
    Combo * 5
    排列組合

    View Slide

  15. http://mvc.tw
    n 放棄任何裝置、瀏覽器都是市占率的取捨  
    n IE6  COUNTDOWN  
    n 台灣 0.8%  
    n 中國 12.5%  
    n 全世界 3.8%  (中國佔其中 2.68%)  
    n App  Store  Distribution  
    n iOS  6  8%  
    n 持續與  PM  UED  BE  溝通  
    Cross-­‐Browser  
    15

    View Slide

  16. http://mvc.tw
    n 統⼀一不同瀏覽器⾏行為  
    n   
    n 使⽤用標準模式繪製網⾴頁  
    n CSS  Reset  &  Normalize.css  
    n HTML5  Shiv  
    n IE  6  7  8 ⽀支援  HTML5 標籤  
    n jQuery  1.x  &  2.x  
    n 1.x ⽀支援  IE  6  7  8  
    Cross-­‐Browser  
    16

    View Slide

  17. http://mvc.tw
    n Progressive  enhancement  &  graceful  degradation  
    n 漸進式加強  & 優雅的降級  
    n 持續與  PM  UED  BE  溝通  
    Cross-­‐Browser  
    17
    動畫
    圓⾓角
    漸層
    陰影

    caniuse.com

    View Slide

  18. http://mvc.tw
    n Responsive  Web  Design  
    n 響應式網⾴頁設計  
    n ⽐比⼀一般網⾴頁設計難 需更有經驗的  FE  
    n Mobile  Websites  vs  Responsive  Design  
    n 取  &  捨  
    n 持續與  PM  UED  BE  溝通  
    Cross-­‐Browser  
    18

    View Slide

  19. http://mvc.tw
    n Search  Engine  Optimization  
    n 搜尋引擎最佳化  
    n 真正的 SEO  我也不懂  
    n 我只是讓  Search  Engine  看得懂網⾴頁  
    SEO  
    19

    View Slide

  20. http://mvc.tw
    n Search  Engine  只看  HTML  裡的字  
    n 圖⽚片上的字不看  
    n FLASH 裡的字原則上不看  
    n 原則?  
    n JavaScript 裡的字原則上不看  
    n 原則?  
    SEO  
    20

    View Slide

  21. http://mvc.tw
    n 搞懂  HTML 標籤的語義  
    n 標籤原⽂文  
    n   -­‐>  Paragraph  
    n  -­‐>  Unordered  list  
    n  -­‐>  List  item  
    n …  
    n HTML5  Sectioning  Elements  
    n 產⽣生網⾴頁 Outline  
    SEO  
    21




    View Slide

  22. http://mvc.tw
    n 釐清  HTML  與  CSS  的界線  
    n 原則上  
    n 語意留  HTML  
    n 設計放  CSS  
    n CSS  Zen  Garden  
    n 事實上  
    n 界線劃哪是⼤大哉問  
    SEO  
    22

    View Slide

  23. http://mvc.tw
    n CSS  Architectures  
    n OOCSS  
    n SMACSS  
    n BEM  
    n Kuro:  漫談  CSS  架構⽅方法  -­‐  以  OOCSS,  SMACSS,  BEM  為例  
    SEO  
    23

    View Slide

  24. http://mvc.tw
    n 處理動態網⾴頁  
    n Making  AJAX  Applications  Crawlable  
    n __escape_fragment__  
    n 善⽤用 history.pushState()  
    n 以  Facebook  為例  
    SEO  
    24

    View Slide

  25. http://mvc.tw
    n Google  PageSpeed  &  YSlow  
    n Steve  Souders  
    n Velocity:  O'Reilly  Conferences  
    Performance  
    25

    View Slide

  26. http://mvc.tw
    n Web  Performance  Best  Practices  
    n 搞懂瀏覽器繪製網⾴頁的流程  
    n 各種載⼊入 JS  CSS  Image 的⽅方式與差別  
    n 搞懂  HTTP  
    n 計算  HTTP  Request 數量 & ⼤大⼩小  
    n CSS  Sprite 、 JS  /  CSS  /  Image  合併壓縮 、 Gzip  、 …  
    n Cache 機制  
    n Brower  Cache 、 If-­‐Modified-­‐Since 、 ETag 、 …  
    n Session  &  Cookie  
    Performance  
    26

    View Slide

  27. http://mvc.tw
    n SPDY  
    n Chrome  Firefox  Opera  IE11  Safari  8  
    n Ihower:  A  brief  introduction  to  SPDY  
    Performance  
    27

    View Slide

  28. http://mvc.tw
    n Bug  
    n jQuery  Open  Bugs  45  Matches  
    n jQuery  Plugin?  
    n 其他專案?  
    n 更多時候是不符預期  
    第三⽅方  Library  
    28

    View Slide

  29. http://mvc.tw
    n Trace  Code  
    n 改?不改?  
    n 送  Patch?  
    n ⾃自建  Library  
    第三⽅方  Library  
    29

    View Slide

  30. http://mvc.tw
    n 重新了解  HTML  CSS  JavaScript  的基礎  
    n jQuery 幫你做了哪些事  
    n DOM  
    n JavaScript  與其它語⾔言的不同之處  
    n ⾃自動轉型  
    n Closure  
    n Prototype  
    n …  
    第三⽅方  Library  
    30
    良葛格 JavaScript 本質部份

    View Slide

  31. http://mvc.tw
    n XSS  
    n Cross-­‐site  scripting  
    n Session  Hijacking  
    n CSRF  
    n Cross-­‐site  request  forgery  
    n Session  Riding  
    資訊安全  
    31

    View Slide

  32. 32
    Q & A

    View Slide

  33. http://mvc.tw
    n ⾼高中  
    n CityFamily  
    n 網路同學會  
    n 只是想讓字變⾊色  
    n 炫  
    n 現在看 全都是  XSS  
    n 班網  
    n 教官室網⾴頁  
    n IE5  
    我的網⾴頁前端之路  
    33

    View Slide

  34. http://mvc.tw
    n ⼤大學  
    n 中正計中  
    n 主管資訊系統  
    n 教職員數位學習系統  
    n 全端⼯工程師  
    n PHP  
    n Sybase  
    n ⼤大專創意競賽網站  
    我的網⾴頁前端之路  
    34

    View Slide

  35. http://mvc.tw
    n GAIS  Lab  
    n Nopam  
    n NUWeb  
    n NUBlog  
    n ⾃自建  Cross-­‐Browser  JavaScript  Library  
    我的網⾴頁前端之路  
    35

    View Slide

  36. http://mvc.tw
    n 社會  
    n 中華電信  
    n Xuite  
    n Hami+  
    n XUI  
    n Yahoo  Search  
    我的網⾴頁前端之路  
    36

    View Slide

  37. http://mvc.tw
    n 不是學校教的  
    n 不是⾃自⼰己選擇的  
    n 團隊需要各司其職  
    我的網⾴頁前端之路  
    37

    View Slide

  38. http://mvc.tw
    1.  網⾴頁全端轉網⾴頁前端  
    2.  UED 轉網⾴頁前端  
    n 各有優缺  
    n 就是沒有學校教出來的網⾴頁前端  
    市⾯面上的網⾴頁前端  
    38

    View Slide

  39. http://mvc.tw
    n Why  can’t  we  find  Front  End  developers?  
    n 為什麼我們找不到前端⼯工程師?  
    為什麼我們找不到前端⼯工程師?  
    39

    View Slide

  40. http://mvc.tw
    n 臺⼤大資⼯工⼤大學部課程  
    n 網路及平台服務程式設計  
    n 選修額滿 研究⽣生旁聽  
    現狀開始改變  
    40

    View Slide

  41. http://mvc.tw
    n 不是我講的  
    n Adam:  那些mockup沒告訴你的事  
    網⾴頁前端⼯工程師與室內裝修師傅的相似之處  
    41

    View Slide

  42. http://mvc.tw
    n Kuro:  前端⼯工程師如何與團隊合作  
    網⾴頁前端⼯工程師與室內裝修師傅的相似之處  
    42

    View Slide

  43. http://mvc.tw
    n ⾃自此之後我都說我是做⽔水電的  
    n 後來想想
    n 我不只做⽔水電
    n 我也要漆油漆
    n 所以改室內裝修  
    網⾴頁前端⼯工程師與室內裝修師傅的相似之處  
    43

    View Slide

  44. http://mvc.tw
    n ⽔水電出問題  
    n 先 DIY  
    n 不⾏行才叫⽔水電師傅  
    n 隨便 1200  上看 2000  
    n 師傅還不⼀一定來  
    網⾴頁前端⼯工程師與室內裝修師傅的相似之處  
    44

    View Slide

  45. http://mvc.tw
    n DIY  vs.  ⽔水電師傅  
    n ⼊入⾨門 vs.  精通  
    n 不明就裡 Copy  &  Paste  Try  &  Error  
    n 看起來跟 Mockup  ⼀一樣就好了  
    n ⽔水電師傅  
    n 良⼼心事業  
    n 顧客只會看  
    n 昧著良⼼心 問題不會不⾒見
    網⾴頁前端⼯工程師與室內裝修師傅的相似之處  
    45

    View Slide

  46. http://mvc.tw
    n ⼀一開始⽴立志做⽔水電師傅的少
    n ⽴立志做 建築師 電⼒力⼯工程師 室內設計師 的多
    n ⽔水電做久了 也是⼀一⾨門學問  
    網⾴頁前端⼯工程師與室內裝修師傅的相似之處  
    46

    View Slide

  47. 47
    Q & A

    View Slide

  48. http://mvc.tw
    好活動需要⽀支持
    感謝 KKTIX 贊助 twMVC 活動報名平台
    48

    View Slide

  49. http://mvc.tw
    好輸⼊入法需要露出
    49
    http://www.iq-t.com/DOWNLOAD/software.asp

    View Slide

  50. http://mvc.tw
    好課程需要⽀支持
    50
    http://skilltree.my

    View Slide

  51. 謝謝各位
    •  本投影⽚片所包含的商標與⽂文字皆屬原著作者所有。
    •  本投影⽚片使⽤用的圖⽚片皆從網路搜尋。
    •  本著作係採⽤用姓名標⽰示-⾮非商業性-相同⽅方式分享 3.0 台灣授權。閱讀本授權條款,請到
    http://creativecommons.org/licenses/by-nc-sa/3.0/tw/,或寫信⾄至Creative Commons, 444 Castro Street,
    Suite 900, Mountain View, California, 94041, USA.
    h t t p : / / m v c . t w

    View Slide