F2E, the Keystone

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

Transcript

1. F2E,the Keystone
   講者 josephj
   前端工程 - 軟體工業的㱬石
   https://www.slideshare.net/josephj/f2e-the-keystone
   

   View Slide

2. 緣起
   「啊嗚嘛？我是透抽(台語)啦」
   http://tinyurl.com/tonyq-nick
   藉由 JSDC、讓前端在台
   灣形成一個真正的產業
   真男⼈人！怎可不兩肋插⼑刀來相助！！
   ？
   ？
   ？
   TonyQ
   

   View Slide

3. 前端工程師之謎
   • 前端工程師是什麼？
   • 前端工程師是不是可有可無？
   • 為什麼前端工程師這麼難找？
   • 為什麼待遇總是不如後端工程師？
   總是有一大堆問號的職業！
   

   View Slide

4. As a Front-end Engineer...
   • josephj / 啊嗚
   • 這樣做就對了 http://josephj.com
   • 前端工程師，經驗 8 年
   • 倚老賣老、分享在前端產業的點滴
   • 看見前端工程師的價值
   • 求進步，讓前端成為一個產業
   

   View Slide

5. 前端革命
   尋根之旅：認識 F2E 的起源
   Iron Bridge, England
   ⼯工業⾰革命發源地、全世界第⼀一座鐵橋
   

   View Slide

6. 興起的原因 v.s 現在的需求
   過去的自己 v.s 現在的自己
   「前端魂」尋根之旅
   使命不同、會讓你更有認同感
   莫忘初衷
   前端魂
   

   View Slide

7. 1998 年：網⾴頁標準化⼩小組
   • WaSP
   • 為「標準」奮戰
   • 減少開發的複雜與浪費
   • 讓瀏覽器廠商符合標準
   • 2013.3 正式結束。
   這群祖師爺們、堅持做對的事
   實在有夠熱血！
   

   View Slide

8. 1998 年：我做了第一個網站
   可以跟全世界的人、用這麼簡單的方式分享資訊
   哇！IE 4
   

   View Slide

9. 2001 年：第一位前端工程師
   Yahoo! 首次有了「前端 Web Developer」的正式職位
   2 YEARS、from 3 to 600
   

   View Slide

10. 2000 年：我開始經營社群
    ASP + Access 讓網站變得好有趣，我已經不可自拔
    當時用了一堆 ，也用 table 排版 :p
    

    View Slide

11. 2004 年：台灣第一位前端工程師
    Hedger Wang 王璽，開創旅美先驅
    

    View Slide

12. 2004 年：台灣第一位前端工程師
    Hedger Wang 王璽，開創旅美先驅
    

    View Slide

13. 2003：在龜毛進化論認識 Hedger
    我：「有⼈人會寫 CSS 嗎？要不要接外包」
    Hedger 會分享許多 "DHTML" 相關的東西給我看
    

    View Slide

14. 2004：震撼教育的面試
    • 沒有標準答案
    • 我只知道「Know How」
    完全不懂「Know Why」
    • 過去所寫的東西、靈魂在哪？
    • 實在離前端太遠了...
    

    View Slide

15. 
    
           Link
    
    
    
           Link
    
    
    Link
    連結前⽅方裝飾圖，該怎麼安排 HTML/CSS Background
    會做不代表 Know Why (當時的考題)
    你寫的每⼀一⾏行 Code，是否都有仔細思考過？
    Link
    

    View Slide

16. 2004 年：在外兼課
    想藉由教基礎網頁開發、把前端基礎給打好
    • 第一堂課介紹 WD（Web Developer）是什麼....
    • Norie 學員：「我同學 (Beckie) 在雅虎做這個」@@
    • MSN 問 Hedger，他說：「我們正缺人，過來吧！」
    • 就這樣莫名其妙進去了 XD
    

    View Slide

17. 持續地對一件事保持熱情
    冥冥之中會有一條道路出現
    

    View Slide

18. 2005 年：前端人數、直線上升
    變成公司內沒辦法缺少的角色，Why ?
    

    View Slide

19. 2007 年：HK Asia F2E Training
    Nate Koechley Chris Heilmann Douglas Crockford
    我的一個小問題，大師們認真的討論讓我感動不已
    我
    克軍
    

    View Slide

20. 大師們在台灣傳承前端的種子
    Nate 講 YUI @ OSDC 2008
    Awoo 校園徵才與 Y! Course
    Douglas 講 JavaScript @ OSDC 2010
    Chris 講 Accessibility @ OSDC 2009
    大多藉由 OSDC 或 COSCUP、並沒有專門的管道
    

    View Slide

21. 2012 年：JSDC.tw
    台灣首次有前端專門的研討會！
    http://www.flickr.com/photos/othree/7227650096
    首屆 JSDC.tw 謝幕大合照
    前端有著跟其他研討會完全不同的熱情
    

    View Slide

22. 前端、你的名字叫熱血
    前端工程師身體裡所流的血液！時時刻刻保持熱血
    • Hedger 從無到有刻了一個 TabView 給我
    看。這就是「Culture of Sharing」啊！
    • Nate 說：「前端工程師就像拿著顯微
    鏡，專注於 HTML / CSS / JavaScript 的
    不斷改善」
    • Nate 對產品的堅持、顧客導向的精神。
    

    View Slide

23. 前端工程師的中心思想
    • The devil is in the details
    • Culture of Sharing
    • Write it down!
    • Positive Thinking
    • Facilitate Team Members
    技術能力不是最重要的，態度才是！
    在 miiiCasa 新人訓練的第一堂課
    

    View Slide

24. 前端工程師的價值
    你值得擁有更多
    http://www.flickr.com/photos/8695125@N08/545346881
    

    View Slide

25. 對前端、一些常見的認知
    • JavaScript = 玩具語言
    • 跟後端相比，簡單多了
    • 不上不下
    • 入門容易
    • Better to have ＝ 沒有也沒關係
    • 薪水比較便宜
    

    View Slide

26. 這些認知，絕⾮非軟體產業之福啊！
    

    View Slide

27. 變成公司內沒辦法缺少的角色，Why ?
    為什麼會不可缺少？
    • 工程師不愛切版
    • 重視邏輯與資料、不管呈現
    • 設計師不愛切版
    • 重視呈現、不管作法
    加上瀏覽器、JS/CSS 日益複雜，工程師永遠滿足不了設計師
    只有前端工程師可以把技術和設計完美結合
    

    View Slide

28. 前端
    設計 技術
    視覺、介⾯面 資料、邏輯
    F2E is Keystone
    前端能把設計與技術連結起來，是整個架構中最重要的
    

    View Slide

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?
    為什麼前端工程師如此短缺？
    为什么前端⼯工程师很难找？
    為什麼前端工程師很難找？
    軟體產業對前端的共同問題
    同時反應了前端的真實價值、與產業的問題
    

    View Slide

30. Simon Willison
    Lanyrd.com CEO、 Django Co-creator
    • 與其他⼯工程相較，前端絕對不是⽐比較簡單的。
    • 需要在⾮非常多的環境寫程式並運⾏行。
    • 開發與偵錯⼯工具⾮非常有限。
    • 好的前端可以顧及效能、安全性、與 Responsive Design。
    • 冒出的不同新技術，前端得理解並處理⽀支援度的問題。
    • 說真的，後端⼯工程師處理的事簡單多了。
    Seriously, Server-side developers have it easy.
    實際有創業的硬底技術人
    

    View Slide

31. 張克軍
    豆瓣前端工程師
    玩技术的都愿意玩“深”的技术，玩设计的又
    不愿弄脏自己的手。但是最终能把技术和设计
    完美结合在一起要靠前端工程师。
    • ⼀一個網站⽤用⼾戶體驗好，會被認為是有很厲害的設計師
    • ⼤大公司分⼯工過細，職能限制在很⼩小的環節上
    • ⼩小公司要求⾯面⾯面俱到，開發品質拙劣
    • ⼊入⾏行⾨門檻低，優秀前端⼈人員流失嚴重（指轉⾏行）
    • 個⼈人得不到持續發展，做兩年認為到頂了、紛紛轉⾏行
    大陸知名的前端工程師
    

    View Slide

32. 前端 ＝ 工程界的「社工」？
    需求多、複雜度高、技巧多、薪水不會多
    

    View Slide

33. 老闆為什麼該珍惜前端
    • 帶來最適當、最有效率的分⼯工。
    • 讓每個⼈人專注於⾃自⼰己的熱情。
    • 懂設計及程式兩個領域，很難能可貴。
    • 扮演團隊中的橋樑、願意處理棘⼿手問題。
    • 能獨⽴立做 Prototype、甚⾄至產品。
    • 廣泛的興趣，能為團隊帶來分享的氣氛。
    前端是真正的核⼼心關鍵⼈人才
    

    View Slide

34. 看清自己的價值
    • 前端需求只會越來越多：
    • Web 應⽤用程式化
    • HTML 是共通的標準
    • Mobile Web 總是會有成熟的⼀一天
    • 前後兼顧 - Node.js
    • 換⼯工作容易，沒有程式語⾔言不同的累贅
    • 市場上，好的前端⼯工程師仍然很少
    

    View Slide

35. 以身為前端工程師為榮
    耶！職稱終於是
    Front-end Engineer
    

    View Slide

36. 以身為前端工程師為榮
    耶！職稱終於是
    Front-end Engineer
    熱愛前端、但還不是正式前端工程師的你
    何不大膽跟老闆提議成立前端部門呢？
    

    View Slide

37. 周圍一些混得很不錯的前端
    Bobby
    前盛大「前端總監」
    Adam
    經典賽 FAN CAVE 台灣代表
    Rex
    近兩年台灣開發者競賽常勝軍
    Huge
    陸續任職於美國雅虎
    Spotify、Netflix
    

    View Slide

38. 周圍一些混得很不錯的前端
    Bobby
    前盛大「前端總監」
    Adam
    經典賽 FAN CAVE 台灣代表
    Rex
    近兩年台灣開發者競賽常勝軍
    Huge
    陸續任職於美國雅虎
    Spotify、Netflix
    前端工程師
    你應該看到自己的價值
    努力去追尋自己的夢想
    

    View Slide

39. 企業最好眼光長遠些、培育好
    的技術文化，能使有潛力的人
    迅速成長起來。好的團隊，靠
    譜的做事方式，自然能吸引好
    的人才。
    张克军
    ⾖豆瓣前端⼯工程师
    公司找不到前端工程師？
    能看到前端價值的企業、才能夠吸引⼈人才
    

    View Slide

40. 前端進化論
    不論在哪個層級、務必讓自己成長
    

    View Slide

41. 一些需要改進的點
    從平凡變成有價值，不能省略的基礎
    

    View Slide

42. 需打好基礎
    會建造危樓的，絕對不是個好的前端⼯工程師
    

    View Slide

43. 需打好基礎
    • 需要了解每個 HTML 標籤的意義
    • 前端 ≠ jQuery
    • JavaScript 跟 DOM API 的關連與區別
    • Event 事件模型是什麼
    • AJAX, JSONP 是什麼
    怎麼回事？90% 的前端面試者不會 Clear Float
    這些都是基本的基本，務必要做好準備
    CSS ⼊入⾨門 - 浮動 (p14)
    

    View Slide

44. 別做「純」的！
    • 前端「設計師」
    • 前端「架構師」
    • 前端「總監」
    只有前端⼯工程師⾃自⼰己知道前端的需求
    不上不下的問題：公司寧願 Hire 新人重新教起
    

    View Slide

45. 避免盲目追求新技術
    能夠深入研究並且整合
    制定規範
    提昇整體品質
    幫大家解決問題
    才能稱得上是好的前端工程師
    好的前端 ≠ 知道很多技術
    

    View Slide

46. 積極分享、多回饋
    沒 GitHub 還能算是工程師嗎 XD
    這裡已經是所有工程師的 Identity
    你需要投注時間與精力經營
    同時也分享你所打造的輪子
    

    View Slide

47. 分享的力量實在太猛了
    受到 TonyQ 的感召，把講課的講義分享出來，沒想到...
    Slideshare 暴增到單日 4,000 次
    

    View Slide

48. 分享的力量實在太猛了
    受到 TonyQ 的感召，把講課的講義分享出來，沒想到...
    Slideshare 暴增到單日 4,000 次
    

    View Slide

49. 期待更多前端種子發芽！
    http://f2eclass.com
    

    View Slide

50. 對工作的承諾
    不管是自己的興趣、還是謀生的職業
    既然選擇投入、就應該做到最好
    評價這件事會一輩子跟隨著你
    

    View Slide

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
    

    View Slide

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
    

    View Slide

53. JavaScript.tw 社群 HTML5 & CSS3 社群 Node.js 社群
    “需要更多的傳教士與社群把我們的專業向前推”
    

    View Slide

54. JavaScript.tw 社群 HTML5 & CSS3 社群 Node.js 社群
    “需要更多的傳教士與社群把我們的專業向前推”
    有這麼多熱情的夥伴
    前端必能在台灣成為不可或缺的產業
    歡迎貢獻你的一份心力！
    

    View Slide

55. Thank you!
    • GitHub - josephj
    • Facebook - 蔣定宇
    • Slideshare - josephj
    • Linkedin - josephj6802
    聯繫我
    

    View Slide