前端工程师与室内装修师傅的相似之处-迟飞惭痴颁#16
18 likes2,881 views
本文探讨网页前端工程师与室内装修师傅之间的相似性，强调了两者在工作中的沟通和协调重要性。前端工程师的工作涉及对用户体验的设计和实现，并需面对许多技术挑战和跨浏览器兼容性问题。文章还提及了技术要求，包括厂贰翱、性能优化和安全性等方面。
前端工程师与室内装修师傅的相似之处-迟飞惭痴颁#16
- 2. http://mvc.tw ■ 蔡秉諺 ??米蟲 ?Tsai ?Ping-?‐Yen ? ■ 2001.9 ? ?-?‐ ?2007.7 ? ?中正資?工 ? ■ 2007.10 ?-?‐ ?2013.9 ? ?中華電信 ? ■ 2013.9 ? ?-?‐ ?現在 Yahoo ?Search Vexed 2
- 4. http://mvc.tw ■ PM ?開需求給 UED ?和 BE ? ■ BE ?依需求提供 API ? ■ UED ?依需求提供 Mockup ?與素材! ■ 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 ■ FE 將 Mockup ?翻譯成 HTML ?CSS ?JavaScript ? ■ 信達雅 ? ■ 可信 ?達意 ??文雅 ? ■ 做不做得到 ?怎麼做 ?如果做不到 ?為什麼 ? ■ 持續與 ?PM ?UED ?BE ?溝通 FE ?依 Mockup ?組合素材與 API ?建置網?頁 7
- 8. http://mvc.tw ■ ?入?門容易 ?精通難 ? ■ ?入?門 ? ■ 看起來跟 ?Mockup ?一樣就好 ? ■ 怎麼做 ?不在意 ? ■ 不明就裡 ? ■ Copy ?& ?Paste ? ■ Try ?& ?Error 翻譯成 HTML ?CSS ?JavaScript 8
- 10. http://mvc.tw ■ FE ?永遠是問題回報點 溝通 ?協調 10 Timeout Server-side error JavaScript error CSS issue CDN issue Content issue Cache issue Network issue …
- 12. http://mvc.tw ■ ?入?門 ? ■ 看起來跟 ?Mockup ?一樣就好 ? ■ 怎麼做 ?不在意 ? ■ 不明就裡 ? ■ Copy ?& ?Paste ? ■ Try ?& ?Error ?入?門容易 ?精通難 12
- 13. http://mvc.tw ■ 難關 ? ■ Cross-?‐Browser ? ■ SEO ? ■ Performance ? ■ 第三?方 ?Library 出錯 ? ■ 資訊安全 ?入?門容易 ?精通難 13
- 14. http://mvc.tw ■ 了解不同瀏覽器環境功能與極限 ? ■ 瀏覽器、瀏覽器版本、裝置、作業系統、作業系統版本 ? ■ BrowserStack ? ■ caniuse.com Cross-?‐Browser 14 Combo * 5? 排列組合
- 15. http://mvc.tw ■ 放棄任何裝置、瀏覽器都是市占率的取捨 ? ■ IE6 ?COUNTDOWN ? ■ 台灣 0.8% ? ■ 中國 12.5% ? ■ 全世界 3.8% ?(中國佔其中 2.68%) ? ■ App ?Store ?Distribution ? ■ iOS ?6 ?8% ? ■ 持續與 PM ?UED ?BE ?溝通 Cross-?‐Browser 15
- 16. http://mvc.tw ■統?一不同瀏覽器?行為 ? ■ <!DOCTYPE ?html> ? ■ 使?用標準模式繪製網?頁 ? ■ CSS ?Reset ?& ?Normalize.css ? ■ HTML5 ?Shiv ? ■ IE ?6 ?7 ?8 ?支援 ?HTML5 標籤 ? ■ jQuery ?1.x ?& ?2.x ? ■ 1.x ?支援 ?IE ?6 ?7 ?8 Cross-?‐Browser 16
- 17. http://mvc.tw ■ Progressive ?enhancement ?& ?graceful ?degradation ? ■ 漸進式加強 ?& 優雅的降級 ? ■ 持續與 PM ?UED ?BE ?溝通 Cross-?‐Browser 17 動畫? 圓?角? 漸層? 陰影 … caniuse.com
- 18. http://mvc.tw ■ Responsive ?Web ?Design ? ■ 響應式網?頁設計 ? ■ ?比?一般網?頁設計難 ?需更有經驗的 ?FE ? ■ Mobile ?Websites ?vs ?Responsive ?Design ? ■ 取 ?& ?捨 ? ■ 持續與 PM ?UED ?BE ?溝通 Cross-?‐Browser 18
- 19. http://mvc.tw ■ Search ?Engine ?Optimization ? ■ 搜尋引擎最佳化 ? ■ 真正的 SEO ?我也不懂 ? ■ 我只是讓 Search ?Engine ?看得懂網?頁 SEO 19
- 20. http://mvc.tw ■ Search ?Engine ?只看 HTML ?裡的字! ■ 圖?片上的字不看 ? ■ FLASH 裡的字原則上不看 ? ■ 原則？ ? ■ JavaScript 裡的字原則上不看 ? ■ 原則？ SEO 20
- 21. http://mvc.tw ■ 搞懂 ?HTML 標籤的語義 ? ■ 標籤原?文 ? ■ <p> ?-?‐> ?Paragraph ? ■ <ul> ?-?‐> ?Unordered ?list ? ■ <li> ?-?‐> ?List ?item ? ■ … ? ■ HTML5 ?Sectioning ?Elements ? ■ 產?生網?頁 ?Outline SEO 21 <article>? <section>? <aside> <nav>
- 22. http://mvc.tw ■ 釐清 HTML ?與 CSS ?的界線! ■ 原則上 ? ■ 語意留 ?HTML ? ■ 設計放 ?CSS ? ■ CSS ?Zen ?Garden ? ■ 事實上 ? ■ 界線劃哪是?大哉問 SEO 22
- 23. http://mvc.tw ■ CSS ?Architectures ? ■ OOCSS ? ■ SMACSS ? ■ BEM ? ■ Kuro: ?漫談 CSS ?架構?方法 -?‐ ?以 OOCSS, ?SMACSS, ?BEM ?為例 SEO 23
- 24. http://mvc.tw ■ 處理動態網?頁 ? ■ Making ?AJAX ?Applications ?Crawlable ? ■ __escape_fragment__ ? ■ 善?用 ?history.pushState() ? ■ 以 ?Facebook ?為例 SEO 24
- 25. http://mvc.tw ■ Google ?PageSpeed ?& ?YSlow ? ■ Steve ?Souders ? ■ http://www.webpagetest.org/ ? ■ https://sites.google.com/a/webpagetest.org/docs/ ? ■ Velocity: ?O'Reilly ?Conferences Performance 25
- 26. http://mvc.tw ■ Web ?Performance ?Best ?Practices ? ■ 搞懂瀏覽器繪製網?頁的流程 ? ■ 各種載?入 JS ?CSS ?Image 的?方式與差別 ? ■ 搞懂 ?HTTP ? ■ 計算 ?HTTP ?Request 數量 & ?大?小 ? ■ CSS ?Sprite 、 ?JS ?/ ?CSS ?/ ?Image ?合併壓縮 ?、 Gzip ?、 … ? ■ Cache 機制 ? ■ Brower ?Cache 、 If-?‐Modified-?‐Since 、 ETag 、 … ? ■ Session ?& ?Cookie Performance 26
- 27. http://mvc.tw ■ SPDY ? ■ Chrome ?Firefox ?Opera ?IE11 ?Safari ?8 ? ■ Ihower: ?A ?brief ?introduction ?to ?SPDY Performance 27
- 28. http://mvc.tw ■ Bug ? ■ jQuery ?Open ?Bugs ?45 ?Matches ? ■ jQuery ?Plugin？ ? ■ 其他專案？ ? ■ 更多時候是不符預期 第三?方 Library 28
- 29. http://mvc.tw ■ Trace ?Code ? ■ 改？不改？ ? ■ 送 ?Patch？ ? ■ ?自建 ?Library！ 第三?方 Library 29
- 30. http://mvc.tw ■ 重新了解 HTML ?CSS ?JavaScript 瀏覽器 DOM ?的基礎! ■ jQuery ?幫你做了哪些事 ? ■ JavaScript ?與其它語?言的不同之處 ? ■ ?自動轉型 ? ■ this ? ■ Closure ? ■ Prototype ? ■ … 第三?方 Library 30 良葛格 JavaScript 本質部份
- 31. http://mvc.tw ■ XSS ? ■ Cross-?‐site ?scripting ? ■ Session ?Hijacking ? ■ CSRF ? ■ Cross-?‐site ?request ?forgery ? ■ Session ?Riding 資訊安全 31
- 32. 32 Q & A
- 33. http://mvc.tw ■ ?高中 ? ■ CityFamily ? ■ 網路同學會 ? ■ 只是想讓字變?色 ? ■ <font ?color="red" ?>炫</font> ? ■ 現在看 ?全都是 ?XSS ? ■ 班網 ? ■ 教官室網?頁 ? ■ IE5 我的網?頁前端之路 33
- 34. http://mvc.tw ■ ?大學 ? ■ 中正計中 ? ■ 主管資訊系統 ? ■ 教職員數位學習系統 ? ■ 全端?工程師 ? ■ PHP ? ■ Sybase ? ■ ?大專創意競賽網站 我的網?頁前端之路 34
- 35. http://mvc.tw ■ GAIS ?Lab ? ■ Nopam ? ■ NUWeb ? ■ NUBlog ? ■ ?自建 Cross-?‐Browser ?JavaScript ?Library 我的網?頁前端之路 35
- 36. http://mvc.tw ■ 社會 ? ■ 中華電信 ? ■ Xuite ? ■ Hami+ ? ■ XUI ? ■ Yahoo ?Search 我的網?頁前端之路 36
- 37. http://mvc.tw ■ 不是學校教的 ? ■ 不是?自?己選擇的 ? ■ 團隊需要各司其職 我的網?頁前端之路 37
- 38. http://mvc.tw 1. 網?頁全端轉網?頁前端 ? 2. UED 轉網?頁前端 ? ■ 各有優缺 ? ■ 就是沒有學校教出來的網?頁前端 市?面上的網?頁前端 38
- 39. http://mvc.tw ■ Why ?can’t ?we ?find ?Front ?End ?developers? ? ■ 為什麼我們找不到前端?工程師？ 為什麼我們找不到前端?工程師？ 39
- 40. http://mvc.tw ■ 臺?大資?工?大學部課程 ? ■ 網路及平台服務程式設計 ? ■ 選修額滿 ?研究?生旁聽 現狀開始改變 40
- 41. http://mvc.tw ■ 不是我講的 ? ■ Adam: ?那些mockup沒告訴你的事 網?頁前端?工程師與室內裝修師傅的相似之處 41
- 43. http://mvc.tw ■ ?自此之後我都說我是做?水電的 ? ■ 後來想想! ■ 我不只做?水電 ? ■ 我也要漆油漆 ? ■ 所以改室內裝修 網?頁前端?工程師與室內裝修師傅的相似之處 43
- 44. http://mvc.tw ■ ?水電出問題 ? ■ 先 DIY ? ■ 不?行才叫?水電師傅 ? ■ 隨便 1200 ?上看 2000 ? ■ 師傅還不?一定來 網?頁前端?工程師與室內裝修師傅的相似之處 44
- 45. http://mvc.tw ■ DIY ?vs. ??水電師傅 ? ■ ?入?門 vs. ?精通 ? ■ 不明就裡 ?Copy ?& ?Paste ?Try ?& ?Error ? ■ 看起來跟 Mockup ??一樣就好了 ? ■ ?水電師傅 ? ■ 良?心事業 ? ■ 顧客只會看 ? ■ 昧著良?心 ?問題不會不?見 ? 網?頁前端?工程師與室內裝修師傅的相似之處 45
- 46. http://mvc.tw ■ ?一開始?立志做?水電師傅的少 ? ■ ?立志做 建築師 電?力?工程師 室內設計師 的多 ? ■ ?水電做久了 也是?一?門學問 網?頁前端?工程師與室內裝修師傅的相似之處 46
- 47. 47 Q & A
- 48. http://mvc.tw 好活動需要?支持 感謝 KKTIX 贊助 twMVC 活動報名平台 48
- 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. http://mvc.tw