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

應 DEMO 之邀，於 twMVC 分享。

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