Microsoft TechDay 2013

1. DEV 202
F2E for Enterprise
為什麼企業需要前端工程
講者：josephj
Lead Front-end Developer
Faria Systems

2. 感謝上官的推薦
向企業及其開發者
介紹新興的前端工程
Microsoft Technical Evangelist
上官林傑
微軟正在大力推廣
Services to Devices
前端工程很重要

3. 講者介紹
• 蔣定宇 / josephj
• 這樣做就對了
http://josephj.com
• 前端工程師，經驗 8 年
2005 -2009 傳教士、前端工程師
2009 -2013.5 miiiCasa 前端部門主管
2013.6 迄今 Lead Front-end Developer

4. Web 前端工程在這些年的推廣之下，開始變成
每一個網路公司的必備職位。
而大部分企業的重點在於建立自己的協同系統：
「讓老闆、員工及夥伴可以更有效率地互動、生
產、預測」。
那麼，「前端工程能對企業帶來什麼幫助呢？」
前端工程 v.s 企業

5. 企業經驗？
http://www.ithome.com.tw/itadm/article.php?c=47699
「改善接單與客服機制
研揚業績達成率提升到98%」
講者不了解企業資訊需求？
2004-2005 - 第⼀一份正式⼯工作
⽤用 ASP.NET 開發⼯工業電腦公司
的內部資訊系統。
文章中有兩個系統是我負責
的、eFunnel 更是獨立完成

6. 8 年前，老闆的疑問
2004 美國的前端 (Web Dev) 才剛興起不久
當時我很有興趣、跟老闆介紹了一下
這樣的技術很好，但若是有這
樣的人才、對我們公司能有什
麼幫助？
當時前端流行瀏覽器支援、DHTML、CSS
對企業幫助的確不大

7. Agenda
• 什麼是前端工程
• 企業需要前端嗎？
• 導入前端工程吧！

8. 一、什麼是前端工程
也是個學無止境的領域啊！

9. 傳統網站製作流程
產品經理 視覺設計 程式設計
我負責提需求
製作規格與框線圖
將框線圖
製作成網頁
套 JavaScript
ASP.NET、DB
稍具規模的公司
視覺要產出 HTML/CSS、程式設計師套 JavaScript

10. 中小企業網站製作
老闆
我負責分析使用者需
求、製作線框圖、撰寫
UI、套程式與資料庫...
通常不會有分工、程式設計得一肩扛起所有工
我負責提需求
程式設計

11. Full Stack Developer!
你們是全能的企業戰⼠士！
了解網站開發的各種面相是很重要的

12. 前端從無到有
Web Developer 的興起
1998 ~ 2006 年

13. 網頁標準化
1998 年：網頁標準化小組
當時瀏覽器廠商各自發展標準
開發者無所適從。
說服 Microsoft、Netscape、
Opera 等瀏覽器廠商實作
W3C 的標準

14. HTML
CSS
JavaScript
負責結構
負責樣式
負責行為
提倡正確且標準的網頁實作方式

15. 前端成為正式職位
2001 年：Yahoo! 首次有了 Web Developer 的職位

16. 前端成為正式職位 @台灣
2004 年：雅虎奇摩的第一位 Web Developer

17. 當代網站製作流程
產品經理 視覺設計 程式設計
我負責提需求
製作規格與框線圖
將框線圖
製作成網頁
開發流程中加⼊入了前端⼯工程師
前端工程 後端工程
將圖轉換成網頁
負責所有「檢視原始碼」
看得到的東西
專注於視覺設計
產出 PSD
套 JavaScript
ASP.NET、DB
專注於 Model
資料邏輯、效能
導入更專業的分工，讓網站開發更精緻

18. 前端工程師
圖：PSD / PNG 網頁：HTML + JS + CSS
視覺設計師
把圖做成真正的網頁、每個瀏覽器運作起來完全一致
最喜歡聽工程師說：「有前端真是太幸福了」

19. 前端需求遽增
2005 年：從一開始的 3 人增加為 600 人，只花了 2 年多

20. 當時前端的專業何在？
HTML/CSS/JavaScript 的專家
漸進式支援 無障礙 搜尋引擎最佳化
CSS Layout
瀏覽器相容性
非侵入式 JS網站整體的 CSS 架構
圓角 正確撰寫 HTML

21. 當時前端的專業何在？
HTML/CSS/JavaScript 的專家
漸進式支援 無障礙 搜尋引擎最佳化
CSS Layout
瀏覽器相容性
非侵入式 JS網站整體的 CSS 架構
圓角 正確撰寫 HTML讓網站開發朝正確的道路發展
到今天仍然是前端的基礎！
導入前端，大大強化了「維護性」與「效能」

22. 中小企業網站製作
老闆
我負責理解使用者需
求、製作線框圖、撰寫
UI、套程式與資料庫...
工作開始加重，但還可以負擔
能不能做得更好用
不用整頁 Reload
也支援 Firefox
程式設計
得多學 AJAX
瀏覽器 hack
不需要太精細，但需求肯定是會增加的

23. 前端的種子持續擴散
相關技術也雨後春筍般的冒出來
2007 年後

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

25. 大師們在台灣傳承前端的種子
Nate 講 YUI @ OSDC 2008
Awoo 校園徵才與 Y! Course
Douglas 講 JavaScript @ OSDC 2010
Chris 講 Accessibility @ OSDC 2009

26. 前端成為顯學
不再寫 HTML/CSS/JS
用編譯的如何？
JavaScript MVC
模組化與載入機制
响應式設計
工程師也能有好樣式
命令行的瀏覽器
用 JS 寫後端
越來越應用程式化
前端不再只是 UI、更是一種軟體工程
TDD 測試框架

27. 前端社群雨後春筍地成立
JavaScript.tw HTML5 與 CSS3 在台灣 Nodejs 台灣
快樂設計師 RGBA 網路設計師聚會 F2E 台灣
想要在前端快速成長？你必須參與！

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

29. 需要投入更多前端人力
產品經理 視覺設計
我負責提需求
製作規格與框線圖
將框線圖
製作成網頁
套 ASP.NET
前端工程
後端工程
將圖轉換成網頁
負責所有「檢視原始碼」
看得到的東西
專注於視覺設計
產出 PSD
專注於資料邏輯
導入HTML5、Node.js、
前端 MVC 架構、Mobile 支援
測試驅動開發、持續整合

30. 前端正夯
感覺是個很好的投資 :D

31. 中小企業也需要改變
老闆
再厲害的程式設計師也有其侷限之處
我們的網站要像 Facebook ：
快、即時、互動！！
並支援 iPhone/iPad/Android
程式設計
...

32. 過去的網站以呈現內容為主
今日的網站變得更應用程式化（Outlook.com）
代表了使用的技術將會更多、更複雜。
企業需要視情況改變系統開發流程！

33. 二、企業需要前端嗎？

34. 前面提到前端工程是當代潮流
但是並不足以說服企業導入這樣的分工模式
對企業的未來有何助益，才是導入與否的重點
這樣的技術很好，但若是有這
樣的人才、對我們公司能有什
麼幫助？
回答前老闆的問題

35. 台灣 ASP.NET 工作機會真的好多啊！
現況：ASP.NET 受企業歡迎
2013.9.21

36. 現況：但... ASP.NET + 前端呢？
大多只是職務內容、沒有切出真正的職位
2013.9.21

37. Services to Devices
Front-end helps...
讓你的服務在不同裝置上運行

38. 跨瀏覽器是前端的基本工
現在越來越多手持裝置 = Safari, Chrome 的比重越來越高

39. 為何這些公司都在找前端？
雖然播放軟體跨平台、但內容呈現仍然是 Web
八屏一雲：用 HTML5 在裝置上呈現內容
HTC Start / HTC Share

40. 以網頁技術開發 App
HTML5 純網頁
統一 Device API 以 JS 開發 App
手機即瀏覽器
開發者的願望：
一個 App 不要寫三套
使用最多人用的語言

41. 以網頁技術開發 App
HTML5 純網頁
統一 Device API 以 JS 開發 App
手機即瀏覽器
開發者的願望：
一個 App 不要寫三套
使用最多人用的語言
只有網頁的技術能夠達到真正的跨平台
而且不會被特定廠商所鎖死
Mobile Web 的功能會更多、手機的效能會更好
或者是有其他革命性（Firefox OS？）的發展
前端工程未來在跨 Device 只會越來越重要

42. Build SaaS UIs
Front-end helps...
建立 SaaS 服務的介面

43. SaaS 的潛力才剛出現
SaaS 前景值得期待、企業做好準備了嗎？
技術成熟、Web 「應用程式化」的時代已經來臨！

44. SaaS 正在掀起革命
複雜的會計系統由「雲」取而代之
每月不到 1000 元就可以節省會計支出

45. 我們公司也用了一堆 SaaS
價值：新創公司、中小企業能夠以低成本解決營運問題
能夠專心在產品開發上
Airbrake

46. UI 的轉變
安裝軟體的會計系統

47. UI 的轉變
Web 版的會計系統

48. 網站服務應用程式化、UI 需要專業的前端工程
UI 的轉變
Xero - 最美麗的線上會計系統

49. 網站服務應用程式化、UI 需要專業的前端工程
UI 的轉變
SaaS - 最美麗的線上會計系統
已經 8 年沒看到國內的 CRM/ERP 的狀態
不過倒是有租用過不堪入目的企業 Portal 系統 :p
國外的競爭非常激烈
例如 CRM 可以看看 Close.io, Customer.io, Highrise
軟體公司要跟上潮流，絕對要考慮導入前端工程！

50. Close.io
Google 了一下台灣的 CRM，介面還是太傳統了些

51. Better Co-work Model
Front-end brings...
更好的分工方式

52. 帶來最舒適的分工
• 工程師不愛處理介面細節
• 喜愛邏輯與資料、不管呈現
• 設計師不愛寫程式碼
• 喜愛呈現、不管作法
• 前端技術日益複雜
工程師永遠滿足不了設計師
只有前端工程師可以把技術和設計完美結合

53. 張克軍
豆瓣前端工程師
玩技术的都愿意玩“深”的技术，玩设计的又不
愿弄脏自己的手。但是最终能把技术和设计完美
结合在一起要靠前端工程师。
大陸知名的前端工程師

54. 前端
設計 技術
The Keystone
前端能把設計與技術連結起來，是整個架構中最重要的

55. Recruiting & Retention
Front-end helps...
讓召募與保有人才更容易

56. 前端可以吸引人才
前端工程已是網站開發的趨勢
許多人履歷只投有前端的公司
企業若能提供類似的職缺，吸引力會增加不少
遵循產業分工會有好處的！
Internet 程式設計師
前端工程師
＋

57. 耶！職稱終於是
Front-end Engineer
以身為前端為榮
面試過不少人，都希望能專心在前端發展

58. 成就感很重要
讓員工 80% 的時間在做自己有興趣的工作上
有人喜歡處理資料邏輯、有人喜歡做介面
第一份工作、我對日復一日開 DB Schema、套 DataGrid 感到無趣
若可以專注喜歡的前端上，或許可以做得更久

59. Multi-Functional!
Front-end Developer is...
多功能型人才

60. 學校會教「軟體工程」與「美術設計」
但沒有學校提供「前端工程」的課
學校沒教的事
會進入這個圈子都是出自自己的熱忱
也因此常常是「混合體」

61. 越來越多視覺投入前端
當工程師一直打槍設計時...
找到這種人，介面完全不用煩惱了！

62. 即使找不到這種強者
大部分的前端都能夠刻出能看且堪用的 UI
許多內部系統的 UI、用 Bootstrap 即可滿足

63. 軟體工程也投入前端
將軟體工程的方法論
帶入前端開發，如：
• 重複利用
• 代碼品質
• 自動化測試
• 持續整合
• 導入工具
• 改變編程方式
越來越多的「本科系」開始重視

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

65. 三、導入前端工程吧

66. 請先肯定前端的價值
絕對不是「比較簡單的工程師」

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

68. Simon Willison
Lanyrd.com CEO、 Django Co-creator
• 與其他工程相較，前端絕對不是比較簡單的
• 需要在非常多的環境寫程式並運行
• 開發與偵錯工具非常有限
• 好的前端可以顧及效能、安全性、與响應式設計
• 冒出的不同新技術，前端得理解並處理相容性的問題
• 說真的，後端工程師處理的事簡單多了
Seriously, Server-side developers have it easy.

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

70. 公司規模夠、開職缺吧
把環境跟分工搞好，會更有產值

71. 知名網站打算成立前端 Team
感謝保哥的大力支持
到 Hiiir 分享、剛成立了前端部門
很開心能幫忙、帶來正面的循環
今年 JSDC 分享後...

72. 希望企業能夠多多導入前端
導入前端的效益絕不會比贊助差 ^^

73. 規模不夠、可切分 Task
人少也能做前端、重點是開始導入方法

74. 規模不大，可切分 Task
多了解員工的興趣、指派一些跟 UI 相關的工作
會找到一些潛在的前端工程師，例如：
• 導入 CSS 架構：更美觀且容易維護
ex. Bootstrap, SMACSS, Normalize.css...
• 導入 HTML5 圖表系統：可跨平台瀏覽
ex. amCharts, HighCharts...
• 用 Responsive Design 製作 Mobile Web
ex. Susy, Bootstrap Grids...
• 網頁應用程式化
ex. Backbone.js, AngularJS
鼓勵員工往更專業的方向發展、又能讓網站更好，Why Not?

75. 我有興趣，但公司沒意願
只要有心，人人都可以是前端

76. 公司發不發展前端很重要嗎？
自得其樂很重要
把工作網站當成遊樂場、導入你愛的前端技術
觀察老闆或使用者的反應
你願意付出，得到最多的一定是你自己
（我面試最喜歡了解面試者對前公司改變了什麼）

77. 講講我成為前端的故事
Hedger：雅虎奇摩的第一位 Web Developer

78. 2003：在龜毛進化論認識 Hedger
我：「有人會寫 CSS 嗎？要不要接外包」
Hedger 會分享許多 "DHTML" 相關的東西給我看
從此對 WebDev 領域的東西產生濃烈興趣

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

80. 2004 年：在外兼課
離職！想藉由教授基礎網頁開發、把前端基礎給打好
• 第一堂課介紹 Web Developer 是什麼
• 某位學員：「我大學同學在 Yahoo! 做這個」
• MSN 問 Hedger，他說：「我們正缺人，過來吧！」
• 就這樣莫名其妙進去了 XD

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

82. 熱愛前端、但還不是正式前端工程師的你
何不大膽跟老闆提議成立前端部門呢？
一起加入
Front-end Engineer

83. 期待更多前端種子發芽
http://f2eclass.com
將先前在外授課的資料分享出來

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

85. 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

86. 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

87. “需要更多的傳教士與社群把我們的專業向前推”
希望企業也一同加入前端的大家庭！
有更多的前端工程師，台灣的軟體產業一定能更好

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