F2E, the Keystone
20 likes4,140 views
该文档探讨了前端工程师的重要性及其在软件行业中的价值，同时分析了前端发展过程中的挑战和机遇。作者分享了自己的经历以及前端工程师的核心技能，强调了对技术和设计的理解如何帮助建立更好的用户体验。通过引用与前端相关的历史事件和个人故事，文档旨在激励更多人重视前端开发并投身这一领域。
F2E, the Keystone
- 1. F2E,the Keystone 講者 josephj 前端工程 - 軟體工業的碶石 https://www.slideshare.net/josephj/f2e-the-keystone
- 3. 前端工程師之謎 • 前端工程師是什麼？ • 前端工程師是不是可有可無？ • 為什麼前端工程師這麼難找？ • 為什麼待遇總是不如後端工程師？ 總是有一大堆問號的職業！
- 4. As a Front-end Engineer... • josephj / 啊嗚 • 這樣做就對了 http://josephj.com • 前端工程師，經驗 8 年 • 倚老賣老、分享在前端產業的點滴 • 看見前端工程師的價值 • 求進步，讓前端成為一個產業
- 5. 前端革命 尋根之旅：認識 F2E 的起源 Iron Bridge, England ⼯工業⾰革命發源地、全世界第⼀一座鐵橋
- 6. 興起的原因 v.s 現在的需求 過去的自己 v.s 現在的自己 「前端魂」尋根之旅 使命不同、會讓你更有認同感 莫忘初衷 前端魂
- 7. 1998 年：網⾴頁標準化⼩小組 • WaSP • 為「標準」奮戰 • 減少開發的複雜與浪費 • 讓瀏覽器廠商符合標準 • 2013.3 正式結束。 這群祖師爺們、堅持做對的事 實在有夠熱血！
- 9. 2001 年：第一位前端工程師 Yahoo! 首次有了「前端 Web Developer」的正式職位 2 YEARS、from 3 to 600
- 10. 2000 年：我開始經營社群 ASP + Access 讓網站變得好有趣，我已經不可自拔 當時用了一堆 <frameset/>，也用 table 排版 :p
- 11. 2004 年：台灣第一位前端工程師 Hedger Wang 王璽，開創旅美先驅
- 12. 2004 年：台灣第一位前端工程師 Hedger Wang 王璽，開創旅美先驅
- 13. 2003：在龜毛進化論認識 Hedger 我：「有⼈人會寫 CSS 嗎？要不要接外包」 Hedger 會分享許多 "DHTML" 相關的東西給我看
- 14. 2004：震撼教育的面試 • 沒有標準答案 • 我只知道「Know How」 完全不懂「Know Why」 • 過去所寫的東西、靈魂在哪？ • 實在離前端太遠了...
- 15. <!-‐-‐ Option 1 -‐-‐> <span> <a href="#">Link</a> </span> <!-‐-‐ Option 2 -‐-‐> <a href="#"> <span>Link</span> </a> <!-‐-‐ Option 3 -‐-‐> <a href="#">Link</a> 連結前⽅方裝飾圖，該怎麼安排 HTML/CSS Background 會做不代表 Know Why (當時的考題) 你寫的每⼀一⾏行 Code，是否都有仔細思考過？ Link
- 16. 2004 年：在外兼課 想藉由教基礎網頁開發、把前端基礎給打好 • 第一堂課介紹 WD（Web Developer）是什麼.... • Norie 學員：「我同學 (Beckie) 在雅虎做這個」@@ • MSN 問 Hedger，他說：「我們正缺人，過來吧！」 • 就這樣莫名其妙進去了 XD
- 19. 2007 年：HK Asia F2E Training Nate Koechley Chris Heilmann Douglas Crockford 我的一個小問題，大師們認真的討論讓我感動不已 我 克軍
- 20. 大師們在台灣傳承前端的種子 Nate 講 YUI @ OSDC 2008 Awoo 校園徵才與 Y! Course Douglas 講 JavaScript @ OSDC 2010 Chris 講 Accessibility @ OSDC 2009 大多藉由 OSDC 或 COSCUP、並沒有專門的管道
- 21. 2012 年：JSDC.tw 台灣首次有前端專門的研討會！ http://www.flickr.com/photos/othree/7227650096首屆 JSDC.tw 謝幕大合照 前端有著跟其他研討會完全不同的熱情
- 22. 前端、你的名字叫熱血 前端工程師身體裡所流的血液！時時刻刻保持熱血 • Hedger 從無到有刻了一個 TabView 給我 看。這就是「Culture of Sharing」啊！ • Nate 說：「前端工程師就像拿著顯微 鏡，專注於 HTML / CSS / JavaScript 的 不斷改善」 • Nate 對產品的堅持、顧客導向的精神。
- 23. 前端工程師的中心思想 • The devil is in the details • Culture of Sharing • Write it down! • Positive Thinking • Facilitate Team Members 技術能力不是最重要的，態度才是！ 在 miiiCasa 新人訓練的第一堂課
- 25. 對前端、一些常見的認知 • JavaScript = 玩具語言 • 跟後端相比，簡單多了 • 不上不下 • 入門容易 • Better to have ＝ 沒有也沒關係 • 薪水比較便宜
- 26. 這些認知，絕⾮非軟體產業之福啊！
- 27. 變成公司內沒辦法缺少的角色，Why ? 為什麼會不可缺少？ • 工程師不愛切版 • 重視邏輯與資料、不管呈現 • 設計師不愛切版 • 重視呈現、不管作法 加上瀏覽器、JS/CSS 日益複雜，工程師永遠滿足不了設計師 只有前端工程師可以把技術和設計完美結合
- 28. 前端 設計 技術視覺、介⾯面 資料、邏輯 F2E is Keystone 前端能把設計與技術連結起來，是整個架構中最重要的
- 29. Why are Front-end Developers so high in demand at startup if Front- end Development is relatively easier than other fields of engineering? 為什麼前端工程師在 Start-up 需求超高，但前端 開發卻是相對簡單的？ Why are Frontend Engineers in such short supply? 為什麼前端工程師如此短缺？ 为什么前端⼯工程师很难找？ 為什麼前端工程師很難找？ 軟體產業對前端的共同問題 同時反應了前端的真實價值、與產業的問題
- 30. Simon Willison Lanyrd.com CEO、 Django Co-creator • 與其他⼯工程相較，前端絕對不是⽐比較簡單的。 • 需要在⾮非常多的環境寫程式並運⾏行。 • 開發與偵錯⼯工具⾮非常有限。 • 好的前端可以顧及效能、安全性、與 Responsive Design。 • 冒出的不同新技術，前端得理解並處理⽀支援度的問題。 • 說真的，後端⼯工程師處理的事簡單多了。 Seriously, Server-side developers have it easy. 實際有創業的硬底技術人
- 31. 張克軍 豆瓣前端工程師 玩技术的都愿意玩“深”的技术，玩设计的又 不愿弄脏自己的手。但是最终能把技术和设计 完美结合在一起要靠前端工程师。 • ⼀一個網站⽤用⼾戶體驗好，會被認為是有很厲害的設計師 • ⼤大公司分⼯工過細，職能限制在很⼩小的環節上 • ⼩小公司要求⾯面⾯面俱到，開發品質拙劣 • ⼊入⾏行⾨門檻低，優秀前端⼈人員流失嚴重（指轉⾏行） • 個⼈人得不到持續發展，做兩年認為到頂了、紛紛轉⾏行 大陸知名的前端工程師
- 33. 老闆為什麼該珍惜前端 • 帶來最適當、最有效率的分⼯工。 • 讓每個⼈人專注於⾃自⼰己的熱情。 • 懂設計及程式兩個領域，很難能可貴。 • 扮演團隊中的橋樑、願意處理棘⼿手問題。 • 能獨⽴立做 Prototype、甚⾄至產品。 • 廣泛的興趣，能為團隊帶來分享的氣氛。 前端是真正的核⼼心關鍵⼈人才
- 34. 看清自己的價值 • 前端需求只會越來越多： • Web 應⽤用程式化 • HTML 是共通的標準 • Mobile Web 總是會有成熟的⼀一天 • 前後兼顧 - Node.js • 換⼯工作容易，沒有程式語⾔言不同的累贅 • 市場上，好的前端⼯工程師仍然很少
- 37. 周圍一些混得很不錯的前端 Bobby 前盛大「前端總監」 Adam 經典賽 FAN CAVE 台灣代表 Rex 近兩年台灣開發者競賽常勝軍 Huge 陸續任職於美國雅虎 Spotify、Netflix
- 38. 周圍一些混得很不錯的前端 Bobby 前盛大「前端總監」 Adam 經典賽 FAN CAVE 台灣代表 Rex 近兩年台灣開發者競賽常勝軍 Huge 陸續任職於美國雅虎 Spotify、Netflix 前端工程師 你應該看到自己的價值 努力去追尋自己的夢想
- 43. 需打好基礎 • 需要了解每個 HTML 標籤的意義 • 前端 ≠ jQuery • JavaScript 跟 DOM API 的關連與區別 • Event 事件模型是什麼 • AJAX, JSONP 是什麼 怎麼回事？90% 的前端面試者不會 Clear Float 這些都是基本的基本，務必要做好準備 CSS ⼊入⾨門 - 浮動 (p14)
- 44. 別做「純」的！ • 前端「設計師」 • 前端「架構師」 • 前端「總監」 只有前端⼯工程師⾃自⼰己知道前端的需求 不上不下的問題：公司寧願 Hire 新人重新教起
- 46. 積極分享、多回饋 沒 GitHub 還能算是工程師嗎 XD 這裡已經是所有工程師的 Identity 你需要投注時間與精力經營 同時也分享你所打造的輪子
- 47. 分享的力量實在太猛了 受到 TonyQ 的感召，把講課的講義分享出來，沒想到... Slideshare 暴增到單日 4,000 次
- 48. 分享的力量實在太猛了 受到 TonyQ 的感召，把講課的講義分享出來，沒想到... Slideshare 暴增到單日 4,000 次
- 51. Front-end engineers are right at the nexus of computer science and design. “前端工程師正是下個世代 電腦科學與設計的答案” Blake Elshire UX Developer at Fossil http://nate.koechley.com/blog/2008/06/11/slides-professional- frontend-engineering/#ixzz2RjtCuCat
- 52. We need more evangelists and organizations to take up this cause and push our profession forward. “我們需要更多的傳教士與 社群把我們的專業向前推” Blake Elshire UX Developer at Fossil http://nate.koechley.com/blog/2008/06/11/slides-professional- frontend-engineering/#ixzz2RjtCuCat
- 53. JavaScript.tw 社群 HTML5 & CSS3 社群 Node.js 社群 “需要更多的傳教士與社群把我們的專業向前推”
- 54. JavaScript.tw 社群 HTML5 & CSS3 社群 Node.js 社群 “需要更多的傳教士與社群把我們的專業向前推” 有這麼多熱情的夥伴 前端必能在台灣成為不可或缺的產業 歡迎貢獻你的一份心力！
- 55. Thank you! • GitHub - josephj • Facebook - 蔣定宇 • Slideshare - josephj • Linkedin - josephj6802 聯繫我