前端工程開發實務訓練
21 likes19,313 views
本文件介紹了前端工程開發的課程及其講師蔣定宇的背景，並說明了前端工程師的職責和所需技能。課程內容包括HTML、CSS、JavaScript及Node.js等技術，並探討了前端工程師所面臨的挑戰與現狀。文章強調了前端工程師在技術變遷和團隊合作中扮演的關鍵角色。
前端工程開發實務訓練
- 1. 1 課程介紹 前端工程開發實務訓練 講師：蔣定宇 / josephj Copyright © 2012 FITPI. All rights reserved.
- 2. 2 關於講者 - 蔣定宇(啊嗚) 跑步環島 ・共 27 天 ・約 900 多公里 2008 年 5 月份 雅虎奇摩 ・前端工程师 miiiCasa 雲永科技 ・YDN 傳教士 ・知識+、無名小站 ・前端工程部門主管 2005.10 - 2009.8 ・傳教士 Copyright © 2012 FITPI. All rights reserved. 2009.9 至今
- 3. 3 我的部落格 http://josephj.com 熱愛分享，認為最好的 Solution 是討論出來的 Copyright © 2012 FITPI. All rights reserved.
- 4. 4 前端工程師 Front-end Engineer (F2E) 前身叫 Web Developer Yahoo! 總部於 ~2002 年成立團隊 當時只有兩位 WD 其中一位叫 Nate Koechley 從此成為不可或缺的職位 Copyright © 2012 FITPI. All rights reserved.
- 5. 5 什麼是前端工程師 ๏ 撰寫 HTML / CSS / JavaScript ❖ 是「工程級」的，不是會做網頁的人都可以。 ๏ 告訴瀏覽器該怎麼做 ๏ 所有「檢視原始碼」看得到的都是 處理的範圍 Copyright © 2012 FITPI. All rights reserved.
- 6. Safari Firefox Chrome IE6,7,8,9+ Firefox Chrome Safari Chrome 10,000+ UAs Mac OSX Windows iOS Android Linux, Unix CSS BOM API HTML5 DOM JavaScript DOM API 理解 Spec Data Transport data: custom, xml, mixed: new xhtml 有實作的能力 json behavior: js 解 Bug 理論與實務並重 Node.js server
- 7. Safari Firefox Chrome IE6,7,8,9+ Firefox Chrome Safari Chrome 10,000+ UAs Mac OSX Windows iOS Android Linux, Unix 技術種類: 7 CSS HTML5 DOM 象限數量: x JavaScript 4 BOM API DOM API 系統平台: x 5 理解 Spec Data Transport 平台瀏覽器數量: x 4 data: custom, xml, mixed: new xhtml 有實作的能力 json behavior: js 解 Bug Render 模式: x 2 理論與實務並重 =1020 Node.js server
- 8. 8 應該具備的技能 http://www.flickr.com/photos/mygoare/6165675554/sizes/l/in/photostream/ Copyright © 2012 FITPI. All rights reserved.
- 9. 9 分工 ๏ 與 Producer (產品經理) 討論 Spec。 ๏ 將 Visual Designer (視覺設計) 的 PSD 圖檔轉為 HTML (+CSS/JS)。 ๏ 與 Back-end Engineer (後端工程師) 合作：MVC 中，F2E 要涉獵 V 與 C。 ๏ 修 Quality Assurance (QA) 所測出的 Bug：大多都會是前端的 Bug。 Copyright © 2012 FITPI. All rights reserved.
- 10. 10 現況 ๏ JS 越來越複雜、導致分工越來越專業。 ๏ 台灣有 F2E 的網路公司： Yahoo!、趨勢科技、KKBOX、HTC... ❖ http://tinyurl.com/taiwan-frontend-jobs ๏ 新創的網路公司也大多也有 F2E 的職缺 ๏ 美國、大陸 F2E 已經是必備的職位，而 且也很搶手。 Copyright © 2012 FITPI. All rights reserved.
- 11. 11 分類 ๏ 熱愛 UI 介面、設計感的前端工程師 ❖ 較在意 Usability、介面設計、流程。 ❖ 較不在意程式的邏輯、效能、維護性。呈 現才是重點。 ๏ 熱愛程式：邏輯、軟體堆疊的前端工程師 ❖ 較在意維護性、物件導向、前後端整合。 ❖ 對於 UI 介面細節掌握程度較差。 Copyright © 2012 FITPI. All rights reserved.
- 12. 12 多面向的橋樑 CSDN：可否根据您的感受谈谈，对前端工程师来说最大的挑战是什么？ 蒋定宇：前端工程师可比喻为连接过去与未来、不同人事物之间的桥梁。 过去我们为了不同浏览器的相容性而奋战、现在我们则为了与新技术如何共存 而烦恼。这样的本质就是前端工程师所存在的价值，有许多库的产生都是为了 补足过去的不足。让未来可以加速发生、化不可能为可能就是前端工程师最大 的挑战。 另外由于JavaScript日益复杂、加上越来越多的后端需求，前端工程师从过 去只需注重介面、到现在为了应付复杂的团队开发需求，Solid的架构知识 （例如：MVC）更不可或缺。这些需求都不可与两三年前同日而语，很辛 苦，但也是身为前端工程师最好玩的地方。 Copyright © 2012 FITPI. All rights reserved.
- 13. 13 課程大綱介紹 ๏ 基本架構 - HTML ๏ 厚實內力 - YUI 進階 ๏ 樣式之美 - CSS ๏ 自我省視 - Debugging ๏ 賦予生命 - JavaScript ๏ 飛鴿傳書 - Node.js ๏ 功力大增 - YUI 入門 ๏ 放眼未來 - HTML5 Copyright © 2012 FITPI. All rights reserved.
- 14. 課程網站介紹 14 http://f2eclass.com/ Copyright © 2012 FITPI. All rights reserved.
- 15. 照片網站介紹 15 http://f2e.com/album/ Copyright © 2012 FITPI. All rights reserved.
- 16. 照片網站介紹 16 http://f2e.com/album/ ๏ 整合 Flickr API 的一個免費私有相簿， 大家可以透過上傳、指定 URL、點選書 籤結圖等方式存放進入。 ๏ 別人上傳成功會有即時通知訊息。 ๏ 涵蓋課程所有主題，以讓每個人有能力 製作出這個網站為目標。 Copyright © 2012 FITPI. All rights reserved.
- 17. 17 Q&A Copyright © 2012 FITPI. All rights reserved.