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

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

應 DEMO 之邀,於 twMVC 分享。

7067c01e5e98f8b8211343054a908076?s=128

Ping-Yen Tsai

August 16, 2014
Tweet

Transcript

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

  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
  3. http://mvc.tw n 這是我的經驗整理出來的版本   什麼是網⾴頁前端?   3

  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
  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
  6. 6 FE 依 Mockup 組合素材與 API 建置網頁 這是圖

  7. http://mvc.tw n FE 將 Mockup  翻譯成 HTML  CSS  JavaScript   n 信達雅

      n 可信 達意 ⽂文雅   n 做不做得到 怎麼做 如果做不到 為什麼   n 持續與  PM  UED  BE  溝通   FE  依  Mockup  組合素材與  API  建置網⾴頁   7
  8. http://mvc.tw n ⼊入⾨門容易 精通難   n ⼊入⾨門   n 看起來跟  Mockup ⼀一樣就好  

    n 怎麼做 不在意   n 不明就裡   n Copy  &  Paste   n Try  &  Error   翻譯成 HTML  CSS  JavaScript   8
  9. http://mvc.tw 溝通 協調   9

  10. http://mvc.tw n FE  永遠是問題回報點   溝通 協調   10 Timeout Server-side

    error JavaScript error CSS issue CDN issue Content issue Cache issue Network issue …
  11. http://mvc.tw n 經驗   溝通 協調   11

  12. http://mvc.tw n ⼊入⾨門   n 看起來跟  Mockup ⼀一樣就好   n 怎麼做 不在意  

    n 不明就裡   n Copy  &  Paste   n Try  &  Error   ⼊入⾨門容易 精通難   12
  13. http://mvc.tw n 難關   n Cross-Browser   n SEO   n Performance   n 第三⽅方

     Library 出錯   n 資訊安全   ⼊入⾨門容易 精通難   13
  14. http://mvc.tw n 了解不同瀏覽器環境功能與極限   n 瀏覽器、瀏覽器版本、裝置、作業系統、作業系統版本   n BrowserStack   n caniuse.com   Cross-­‐Browser

      14 Combo * 5 排列組合
  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
  16. http://mvc.tw n 統⼀一不同瀏覽器⾏行為   n <!DOCTYPE  html>   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
  17. http://mvc.tw n Progressive  enhancement  &  graceful  degradation   n 漸進式加強  & 優雅的降級

      n 持續與  PM  UED  BE  溝通   Cross-­‐Browser   17 動畫 圓⾓角 漸層 陰影 … caniuse.com
  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
  19. http://mvc.tw n Search  Engine  Optimization   n 搜尋引擎最佳化   n 真正的 SEO  我也不懂

      n 我只是讓  Search  Engine  看得懂網⾴頁   SEO   19
  20. http://mvc.tw n Search  Engine  只看  HTML  裡的字   n 圖⽚片上的字不看   n FLASH

    裡的字原則上不看   n 原則?   n JavaScript 裡的字原則上不看   n 原則?   SEO   20
  21. http://mvc.tw n 搞懂  HTML 標籤的語義   n 標籤原⽂文   n <p>  -­‐>  Paragraph

      n <ul> -­‐>  Unordered  list   n <li> -­‐>  List  item   n …   n HTML5  Sectioning  Elements   n 產⽣生網⾴頁 Outline   SEO   21 <article> <section> <aside> <nav>
  22. http://mvc.tw n 釐清  HTML  與  CSS  的界線   n 原則上   n 語意留

     HTML   n 設計放  CSS   n CSS  Zen  Garden   n 事實上   n 界線劃哪是⼤大哉問   SEO   22
  23. http://mvc.tw n CSS  Architectures   n OOCSS   n SMACSS   n BEM  

    n Kuro:  漫談  CSS  架構⽅方法  -­‐  以  OOCSS,  SMACSS,  BEM  為例   SEO   23
  24. http://mvc.tw n 處理動態網⾴頁   n Making  AJAX  Applications  Crawlable   n __escape_fragment__  

    n 善⽤用 history.pushState()   n 以  Facebook  為例   SEO   24
  25. http://mvc.tw n Google  PageSpeed  &  YSlow   n Steve  Souders   n Velocity:

     O'Reilly  Conferences   Performance   25
  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
  27. http://mvc.tw n SPDY   n Chrome  Firefox  Opera  IE11  Safari  8  

    n Ihower:  A  brief  introduction  to  SPDY   Performance   27
  28. http://mvc.tw n Bug   n jQuery  Open  Bugs  45  Matches   n jQuery

     Plugin?   n 其他專案?   n 更多時候是不符預期   第三⽅方  Library   28
  29. http://mvc.tw n Trace  Code   n 改?不改?   n 送  Patch?   n ⾃自建

     Library   第三⽅方  Library   29
  30. http://mvc.tw n 重新了解  HTML  CSS  JavaScript  的基礎   n jQuery 幫你做了哪些事  

    n DOM   n JavaScript  與其它語⾔言的不同之處   n ⾃自動轉型   n Closure   n Prototype   n …   第三⽅方  Library   30 良葛格 JavaScript 本質部份
  31. http://mvc.tw n XSS   n Cross-­‐site  scripting   n Session  Hijacking   n CSRF

      n Cross-­‐site  request  forgery   n Session  Riding   資訊安全   31
  32. 32 Q & A

  33. http://mvc.tw n ⾼高中   n CityFamily   n 網路同學會   n 只是想讓字變⾊色   n <font

     color="red"  >炫</font>   n 現在看 全都是  XSS   n 班網   n 教官室網⾴頁   n IE5   我的網⾴頁前端之路   33
  34. http://mvc.tw n ⼤大學   n 中正計中   n 主管資訊系統   n 教職員數位學習系統   n 全端⼯工程師

      n PHP   n Sybase   n ⼤大專創意競賽網站   我的網⾴頁前端之路   34
  35. http://mvc.tw n GAIS  Lab   n Nopam   n NUWeb   n NUBlog  

    n ⾃自建  Cross-­‐Browser  JavaScript  Library   我的網⾴頁前端之路   35
  36. http://mvc.tw n 社會   n 中華電信   n Xuite   n Hami+   n XUI

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

  38. http://mvc.tw 1.  網⾴頁全端轉網⾴頁前端   2.  UED 轉網⾴頁前端   n 各有優缺  

    n 就是沒有學校教出來的網⾴頁前端   市⾯面上的網⾴頁前端   38
  39. http://mvc.tw n Why  can’t  we  find  Front  End  developers?   n 為什麼我們找不到前端⼯工程師?

      為什麼我們找不到前端⼯工程師?   39
  40. http://mvc.tw n 臺⼤大資⼯工⼤大學部課程   n 網路及平台服務程式設計   n 選修額滿 研究⽣生旁聽   現狀開始改變  

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

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

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

    43
  44. http://mvc.tw n ⽔水電出問題   n 先 DIY   n 不⾏行才叫⽔水電師傅   n 隨便 1200

     上看 2000   n 師傅還不⼀一定來   網⾴頁前端⼯工程師與室內裝修師傅的相似之處   44
  45. http://mvc.tw n DIY  vs.  ⽔水電師傅   n ⼊入⾨門 vs.  精通   n 不明就裡

    Copy  &  Paste  Try  &  Error   n 看起來跟 Mockup  ⼀一樣就好了   n ⽔水電師傅   n 良⼼心事業   n 顧客只會看   n 昧著良⼼心 問題不會不⾒見 網⾴頁前端⼯工程師與室內裝修師傅的相似之處   45
  46. http://mvc.tw n ⼀一開始⽴立志做⽔水電師傅的少 n ⽴立志做 建築師 電⼒力⼯工程師 室內設計師 的多 n ⽔水電做久了 也是⼀一⾨門學問  

    網⾴頁前端⼯工程師與室內裝修師傅的相似之處   46
  47. 47 Q & A

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

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

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

  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