F2E, the Keystone (Front-end Developer Party #1)

Transcript

1. F2E, the Keystone 講者：josephj 前端工程 - 軟體開發的關鍵 @Front-End Developers Taiwan Party
2. +4%$
   ֥ဆᾣᗥ 知名網站打算成立前端 Team 感謝保哥的大力支持 到 Hiiir 分享、剛成立了前端部門 很開⼼心能幫忙、帶來正⾯面的循環
3. 感謝帥氣小莊的邀約
4. 但... 身為小莊的前老闆，看到這段介紹 還是忍不住得要 Code Review 一下... 開啟 JSLint (JoSeph Lint)
5. Ĉ
   Ϝ
   'BSJB
   ٢ᄝଧ䥰Ć 
   
   ଀ሳնཬ⇔҂ٳĆ≾∄ỚĤ 
   ܲసĆ 你你你你...
6. 小莊的空白規則始終是個謎啊！！ 
   8IJUFTQBDFT 我不是幫你裝了 CodePaint 嗎 XD
7. 既然叫 Front-end Developer Party...
8. 
   ࣵ଻ĤĆ
9. 沒 JSLint 就 push，金害！
10. 言歸正傳，自我介紹一下 • josephj / 啊嗚 • 這樣做就對了 http://josephj.com • 前端⼯工程師，經驗 8 年 • ⺫⽬目前任職於 Faria Systems • 倚⽼老賣⽼老、分享擔任前端的歷史 • 看⾒見前端⼯工程師的價值 • 求進步，讓前端成為⼀一個產業
11. 前端革命 尋根之旅：認識 F2E 的起源 Iron Bridge, England ⼯工業⾰革命發源地、全世界第⼀一座鐵橋
12. 興起的原因 v.s 現在的需求 過去的⾃自⼰己 v.s 現在的⾃自⼰己 「前端魂」尋根之旅 使命不同、會讓你更有認同感 莫忘初衷 前端魂
13. 1998 年：網⾴頁標準化⼩小組 • WaSP • 為「標準」奮戰 • 減少開發的複雜與浪費 • 讓瀏覽器廠商符合標準 • 2013.3 正式結束。 這群祖師爺們、堅持做對的事 實在有夠熱⾎血！
14. 1998 年：我做了第一個網站 可以跟全世界的人、用這麼簡單的方式分享資訊 IE 4 XD
15. 2001 年：第一位前端工程師 Yahoo! ⾸首次有了「前端 Web Developer」的正式職位 2 YEARS、from 3 to 600
16. 2000 年：我開始經營社群 ASP + Access 讓網站變得好有趣，我已經不可⾃自拔 當時用了一堆 <frameset/>，也用 table 排版 :p
17. 2004 年：台灣第一位前端工程師 Hedger Wang ⺩王璽
18. Hedger 開創前端旅美先驅 雅⻁虎奇摩 – Yahoo! – Google – facebook
19. 2003：在龜毛進化論認識 Hedger 我：「有⼈人會寫 CSS 嗎？要不要接外包」 Hedger 會分享許多 "DHTML" 相關的東⻄西給我看
20. 2004：震撼教育的面試 •沒有標準答案 •我只知道「Know How」 完全不懂「Know Why」 •過去所寫的東⻄西、靈魂在哪？ •實在離前端太遠了...
21. <!-- 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 (當時的考題) ୆⇔֥ૄ၂ྛ
    $PEFđ൞ڎ׻Ⴕር↱නॉἾĤ Link
22. 2004 年：在外兼課 想藉由教基礎網⾴頁開發、把前端基礎給打好 • 第⼀一堂課介紹 WD（Web Developer）是什麼.... • N 學員：「我⼤大學同學 B 在雅⻁虎做這個」@@ • MSN 問 Hedger，他說：「我們正缺⼈人，過來吧！」 • 就這樣莫名其妙進去了 XD
23. 持續地對一件事保持熱情 冥冥之中會有一條道路出現
24. 2005 年：前端人數、直線上升 變成公司內沒辦法缺少的⾓角⾊色
25. 2007 年：HK Asia F2E Training Nate Koechley Chris Heilmann Douglas Crockford 我的⼀一個⼩小問題，⼤大師們認真的討論讓我感動不已 我 克軍
26. 大師們在台灣傳承前端的種子 Nate 講 YUI @ OSDC 2008 Awoo 校園徵才與 Y! Course Douglas 講 JavaScript @ OSDC 2010 Chris 講 Accessibility @ OSDC 2009 過去⼤大多藉由 OSDC 或 COSCUP、並沒有專⾨門的管道
27. 2012 年：JSDC.tw 台灣首次有前端專門的研討會！ http://www.flickr.com/photos/othree/7227650096 首屆 JSDC.tw 謝幕大合照 前端有著跟其他研討會完全不同的熱情
28. 前端、你的名字叫熱血 前端⼯工程師⾝身體裡所流的⾎血液！時時刻刻保持熱⾎血 • Hedger 從無到有刻了⼀一個 TabView 給 我看。這就是「Culture of Sharing」 啊！ • Nate 說：「前端⼯工程師就像拿著顯微 鏡、專注於 HTML / CSS / JavaScript 的 不斷改善」 • Nate 對產品的堅持、顧客導向的精神。
29. 前端工程師的中心思想 • The devil is in the details • Culture of Sharing • Write it down! • Positive Thinking • Facilitate Team Members ࠯ℿି৯҂൞ቋᇗေ֥đⅢ؇Ҍ൞
30. 前端工程師的價值 你值得擁有更多 http://www.flickr.com/photos/8695125@N08/545346881
31. 對前端、一些錯誤的認知 • JavaScript = 玩具語⾔言 • 跟後端相⽐比，簡單多了 • 不上不下 • ⼊入⾨門容易 • Better to have ＝ 沒有也沒關係 • 薪⽔水⽐比較便宜
32. 這些認知，絕⾮非軟體產業之福啊！
33. 變成公司內沒辦法缺少的⾓角⾊色，Why ? 為什麼會不可缺少？ •⼯工程師不愛切版 • 重視邏輯與資料、不管呈現 •設計師不愛切版 • 重視呈現、不管作法 加上瀏覽器、JS/CSS ⽇日益複雜，⼯工程師永遠滿⾜足不了設計師 只有前端⼯工程師可以把技術和設計完美結合
34. 前端 設計 技術 視覺、介⾯面 資料、邏輯 F2E is Keystone 前端能把設計與技術連結起來，是整個架構中最重要的
35. 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? 為什麼前端⼯工程師如此短缺？ 为什么前端⼯工程师很难找？ 為什麼前端⼯工程師很難找？ 軟體產業對前端的共同問題 同時反應了前端的真實價值、與產業的問題
36. Simon Willison Lanyrd.com CEO、 Django Co-creator • 與其他⼯工程相較，前端絕對不是⽐比較簡單的。 • 需要在⾮非常多的環境寫程式並運⾏行。 • 開發與偵錯⼯工具⾮非常有限。 • 好的前端可以顧及效能、安全性、與 Responsive Design。 • 冒出的不同新技術，前端得理解並處理相容性的問題。 • 說真的，後端⼯工程師處理的事簡單多了。 Seriously, Server-side developers have it easy. 實際有創業的硬底技術人
37. 張克軍 豆瓣前端工程師 玩技术的都愿意玩“深”的技术，玩设计的又 不愿弄脏自己的手。但是最终能把技术和设计 完美结合在一起要靠前端工程师。 • ⼀一個網站⽤用⼾戶體驗好，會被認為是有很厲害的設計師 • ⼤大公司分⼯工過細，職能限制在很⼩小的環節上 • ⼩小公司要求⾯面⾯面俱到，開發品質拙劣 • ⼊入⾏行⾨門檻低，優秀前端⼈人員流失嚴重（指轉⾏行） • 個⼈人得不到持續發展，做兩年認為到頂了、紛紛轉⾏行 大陸知名的前端工程師
38. 前端 ＝ 工程界的「社工」？ 需求多、複雜度⾼高、技巧多、薪⽔水不會多？
39. 老闆為什麼該珍惜前端 • 帶來最適當、最有效率的分⼯工。 • 讓每個⼈人專注於⾃自⼰己的熱情。 • 懂設計及程式兩個領域，很難能可貴。 • 扮演團隊中的橋樑、願意處理棘⼿手問題。 • 能獨⽴立做 Prototype、甚⾄至產品。 • 廣泛的興趣，能為團隊帶來分享的氣氛。 前端是真正的核⼼心關鍵⼈人才
40. 看清自己的價值 • 前端需求只會越來越多： • Web 應⽤用程式化 • HTML 是共通的標準 • Mobile Web 總是會有成熟的⼀一天 • 前後兼顧 - Node.js • 換⼯工作容易，沒有程式語⾔言不同的累贅
41. 以身為前端工程師為榮 耶！職稱終於是 Front-end Engineer
42. 以身為前端工程師為榮 耶！職稱終於是 Front-end Engineer 熱愛前端、但還不是正式前端工程師的你 何不大膽跟老闆提議成立前端部門呢？
43. 周圍一些混得很不錯的前端 Bobby 前盛大「前端總監」 Adam 經典賽 FAN CAVE 台灣代表 Rex 近兩年台灣開發者競賽常勝軍 Huge 陸續任職於美國雅虎 Spotify、Netflix
44. 周圍一些混得很不錯的前端 Bobby 前盛大「前端總監」 Adam 經典賽 FAN CAVE 台灣代表 Rex 近兩年台灣開發者競賽常勝軍 Huge 陸續任職於美國雅虎 Spotify、Netflix 前端工程師 你應該看到自己的價值 努力去追尋自己的夢想
45. 企業最好眼光⻑⾧長遠些、培育好 的技術⽂文化，能使有潛⼒力的⼈人 迅速成⻑⾧長起來。好的團隊，靠 譜的做事⽅方式，⾃自然能吸引好 的⼈人才。 张克军 ⾖豆瓣前端⼯工程师 公司找不到前端工程師？ 能看到前端價值的企業、才能夠吸引⼈人才
46. 前端進化論 不論在哪個層級、務必讓⾃自⼰己成⻑⾧長
47. 一些需要改進的點 從平凡變成有價值！
48. 需打好基礎 ὜ࡹᄯາ‾֥đ䌉Ớ҂൞ἠݺ֥భ؊۽ӱ℩
49. 需打好基礎 • 需要了解每個 HTML 標籤的意義 • 前端 ≠ jQuery • JavaScript 跟 DOM API 的關連與區別 • Event 事件模型是什麼 • AJAX, JSONP 是什麼 怎麼回事？90% 的前端⾯面試者不會 Clear Float 這些都是基本的基本，務必把基礎打好 CSS ⼊入⾨門 - 浮動 (p14)
50. 別做「純」的！ •前端「設計師」 •前端「架構師」 •前端「總監」 只有前端⼯工程師⾃自⼰己知道前端的需求 不上不下的問題：公司寧願 Hire 新⼈人重新教起
51. 避免盲目追求新技術 能夠深⼊入研究並且整合 制定規範 提昇整體品質 幫⼤大家解決問題 才能稱得上是好的前端⼯工程師 好的前端 ≠ 知道很多技術
52. 積極分享、多回饋 沒 GitHub 還能算是⼯工程師嗎 XD 這裡已經是所有⼯工程師的 Identity 需投⼊入時間與精⼒力經營 同時也分享你所打造的輪⼦子 寫部落格、講課、給予意⾒見都是很棒的分享
53. 篩選履歷表的第⼀一件事就是先看 GitHub XD
54. 分享的力量實在太猛了 受到 TonyQ 的感召，把講課的講義分享出來，沒想到... Slideshare 暴增到單⽇日 4,000 次
55. 分享的力量實在太猛了 受到 TonyQ 的感召，把講課的講義分享出來，沒想到... Slideshare 暴增到單⽇日 4,000 次
56. 期待更多前端種子發芽！ http://f2eclass.com
57. 對工作的投入 與玩新技術或分享需相輔相成 還是要投⼊入團隊、產品開發 才會碰到真正棘⼿手的問題 多主導架構與導⼊入⼯工具、會獲得更多
58. Be a Modern JavaScript Ninja! ㍇Ⴈ⇀ս߄֥۽ऎaॹ෎ࢳ㢯↜ⅳĆ
59. 偶爾改變、才能讓自己成長 ၂ٺ۽ቔࠇ⇝҂∣ἐӑἾ೘୍
60. 新工作有哪些改變 • Deploy 速度：Weekly → Daily • 團隊協作軟體： gitosis+Redmine → GitHub+BaseCamp+HipChat+CodeShip+CodeClimate • 分⼯工⽅方式： Producer+VD 備妥 Wireframe+Mockup+Spec → ⽼老闆畫 Wireframe、沒有 Spec、VD 外包、許多流程與⾴頁⾯面得⾃自⼰己想。 • Git Branch Model：master/qa → stable/release/develop • 技術架構：PHP CodeIgniter + YUI3 → Rails + jQuery/Bootstrap • ⼯工作流程：Waterfall → Kanban • 開發環境：共⽤用 Linux 伺服器 → 個⼈人 Mac • 教育訓練：1 個月 → 無。還沒簽約就先解 Bug、做新功能
61. 抉擇點 • 業界最好的開發⼯工具 • Rails → 網站開發的領先架構 • 跟⾼高⼿手們⼀一起⼯工作 • 補⾜足我 jQuery/Bootstrap 的不⾜足 • 新團隊怎麼解決過去無解的問題 • 更好的薪⽔水
62. ܄ඳ൞ἠቋݺ֥⇥↮ὔ࣢đ⇢≢⇀ᾲ؍ℳ ކ୆֥đॖၛ⇥֞ޓ؟b భ܄ඳޓϿ֥൞⊦∊ٳ۽đ⃸≇۽ॖၛധ ೆ↱ᾳa஡∃⊦∊֥ି৯b ؊ुሱ֥࠭ἠྟaࠣଢభམေ֥൞൉喁b
63. ＄關於薪水 新⼿手居多，不易撐過三年？ 新⼿手⼤大多落在 33 - 40K 左右 前端⼯工程師薪資匿名⼤大調查 https://docs.google.com/forms/d/1CCND-D_3xme08w-5oFumYrCoMzmC-TxVl_C5SaRS1Qk/viewanalytics 190 份、月薪為年薪除以以 12 個月 或者是正在起飛？ 50K 後是⼀一個⾨門檻
64. 薪水得用來培養技術與人脈？
65. Ⴕ⇝؟֥࿹Ⅿ὜∻ऊ὜ ޽҂֞൉喁⃒a⨰ॖၛ⃾ℰޓ؟ದa⇥ֻ֞၂ੀ֥࠯ℿ 前端不用花什麼錢、要的是熱情
66. 有錢後更要投資自己 http://lanyrd.com/topics/css/ http://lanyrd.com/topics/js/
67. 要反思的是：⾃自⼰己能 對得起這份薪⽔水嗎？ 如果前端工程師有 13 萬月薪...
68. Ќӻ⃑䟥aӻ⇟⇥↮aỚ༟ὓ֥Ọ༆Ќӻ⃼࿓ ୭৯۽ቔ㬪ↀộầῲݺ֥ڿṉ ܄ඳྈඣ҂὜Ῠր୆֥ ⃸ྈඣῲሔ୆ Tips to get a good pay
69. 立志成強者 不要做大大 ༐ຬሱ࠭൞ᆇҌℯਘ ቋஃw࿽Ἶఃℯx
70. 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
71. 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
72. “需要更多的傳教士與社群把我們的專業向前推” 有社群真好！ 需要大家貢獻一份心力！
73. Let’s Party • GitHub - josephj • Facebook - 蔣定宇 • Slideshare - josephj • Linkedin - josephj6802 ‗⚝໡