F2E, the Keystone

前端工程師 - 軟體開發與設計不可或缺的角色

Transcript

1. F2E,the Keystone 講者 josephj 前端工程 - 軟體工業的㱬石 https://www.slideshare.net/josephj/f2e-the-keystone
2. 緣起 「啊嗚嘛？我是透抽(台語)啦」 http://tinyurl.com/tonyq-nick 藉由 JSDC、讓前端在台 灣形成一個真正的產業 真男⼈人！怎可不兩肋插⼑刀來相助！！ ？ ？ ？ TonyQ
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 正式結束。 這群祖師爺們、堅持做對的事 實在有夠熱血！
8. 1998 年：我做了第一個網站 可以跟全世界的人、用這麼簡單的方式分享資訊 哇！IE 4
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
17. 持續地對一件事保持熱情 冥冥之中會有一條道路出現
18. 2005 年：前端人數、直線上升 變成公司內沒辦法缺少的角色，Why ?
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 新人訓練的第一堂課
24. 前端工程師的價值 你值得擁有更多 http://www.flickr.com/photos/8695125@N08/545346881
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. 張克軍 豆瓣前端工程師 玩技术的都愿意玩“深”的技术，玩设计的又 不愿弄脏自己的手。但是最终能把技术和设计 完美结合在一起要靠前端工程师。 • ⼀一個網站⽤用⼾戶體驗好，會被認為是有很厲害的設計師 • ⼤大公司分⼯工過細，職能限制在很⼩小的環節上 • ⼩小公司要求⾯面⾯面俱到，開發品質拙劣 • ⼊入⾏行⾨門檻低，優秀前端⼈人員流失嚴重（指轉⾏行） • 個⼈人得不到持續發展，做兩年認為到頂了、紛紛轉⾏行 大陸知名的前端工程師
32. 前端 ＝ 工程界的「社工」？ 需求多、複雜度高、技巧多、薪水不會多
33. 老闆為什麼該珍惜前端 • 帶來最適當、最有效率的分⼯工。 • 讓每個⼈人專注於⾃自⼰己的熱情。 • 懂設計及程式兩個領域，很難能可貴。 • 扮演團隊中的橋樑、願意處理棘⼿手問題。 • 能獨⽴立做 Prototype、甚⾄至產品。 • 廣泛的興趣，能為團隊帶來分享的氣氛。 前端是真正的核⼼心關鍵⼈人才
34. 看清自己的價值 • 前端需求只會越來越多： • Web 應⽤用程式化 • HTML 是共通的標準 • Mobile Web 總是會有成熟的⼀一天 • 前後兼顧 - Node.js • 換⼯工作容易，沒有程式語⾔言不同的累贅 • 市場上，好的前端⼯工程師仍然很少
35. 以身為前端工程師為榮 耶！職稱終於是 Front-end Engineer
36. 以身為前端工程師為榮 耶！職稱終於是 Front-end Engineer 熱愛前端、但還不是正式前端工程師的你 何不大膽跟老闆提議成立前端部門呢？
37. 周圍一些混得很不錯的前端 Bobby 前盛大「前端總監」 Adam 經典賽 FAN CAVE 台灣代表 Rex 近兩年台灣開發者競賽常勝軍 Huge 陸續任職於美國雅虎 Spotify、Netflix
38. 周圍一些混得很不錯的前端 Bobby 前盛大「前端總監」 Adam 經典賽 FAN CAVE 台灣代表 Rex 近兩年台灣開發者競賽常勝軍 Huge 陸續任職於美國雅虎 Spotify、Netflix 前端工程師 你應該看到自己的價值 努力去追尋自己的夢想
39. 企業最好眼光長遠些、培育好 的技術文化，能使有潛力的人 迅速成長起來。好的團隊，靠 譜的做事方式，自然能吸引好 的人才。 张克军 ⾖豆瓣前端⼯工程师 公司找不到前端工程師？ 能看到前端價值的企業、才能夠吸引⼈人才
40. 前端進化論 不論在哪個層級、務必讓自己成長
41. 一些需要改進的點 從平凡變成有價值，不能省略的基礎
42. 需打好基礎 會建造危樓的，絕對不是個好的前端⼯工程師
43. 需打好基礎 • 需要了解每個 HTML 標籤的意義 • 前端 ≠ jQuery • JavaScript 跟 DOM API 的關連與區別 • Event 事件模型是什麼 • AJAX, JSONP 是什麼 怎麼回事？90% 的前端面試者不會 Clear Float 這些都是基本的基本，務必要做好準備 CSS ⼊入⾨門 - 浮動 (p14)
44. 別做「純」的！ • 前端「設計師」 • 前端「架構師」 • 前端「總監」 只有前端⼯工程師⾃自⼰己知道前端的需求 不上不下的問題：公司寧願 Hire 新人重新教起
45. 避免盲目追求新技術 能夠深入研究並且整合 制定規範 提昇整體品質 幫大家解決問題 才能稱得上是好的前端工程師 好的前端 ≠ 知道很多技術
46. 積極分享、多回饋 沒 GitHub 還能算是工程師嗎 XD 這裡已經是所有工程師的 Identity 你需要投注時間與精力經營 同時也分享你所打造的輪子
47. 分享的力量實在太猛了 受到 TonyQ 的感召，把講課的講義分享出來，沒想到... Slideshare 暴增到單日 4,000 次
48. 分享的力量實在太猛了 受到 TonyQ 的感召，把講課的講義分享出來，沒想到... Slideshare 暴增到單日 4,000 次
49. 期待更多前端種子發芽！ http://f2eclass.com
50. 對工作的承諾 不管是自己的興趣、還是謀生的職業 既然選擇投入、就應該做到最好 評價這件事會一輩子跟隨著你
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 聯繫我