Slide 1
Slide 1 text
DEV 202
F2E for Enterprise
為什麼企業需要前端工程
講者：josephj
Lead Front-end Developer
Faria Systems
Slide 2
Slide 2 text
感謝上官的推薦
向企業及其開發者
介紹新興的前端工程
Microsoft Technical Evangelist
上官林傑
微軟正在大力推廣
Services to Devices
前端工程很重要
Slide 3
Slide 3 text
講者介紹
• 蔣定宇 / josephj
• 這樣做就對了
http://josephj.com
• 前端工程師，經驗 8 年
2005 -2009 傳教士、前端工程師
2009 -2013.5 miiiCasa 前端部門主管
2013.6 迄今 Lead Front-end Developer
Slide 4
Slide 4 text
Web 前端工程在這些年的推廣之下，開始變成
每一個網路公司的必備職位。
而大部分企業的重點在於建立自己的協同系統：
「讓老闆、員工及夥伴可以更有效率地互動、生
產、預測」。
那麼，「前端工程能對企業帶來什麼幫助呢？」
前端工程 v.s 企業
Slide 5
Slide 5 text
企業經驗？
http://www.ithome.com.tw/itadm/article.php?c=47699
「改善接單與客服機制
研揚業績達成率提升到98%」
講者不了解企業資訊需求？
2004-2005 - 第⼀一份正式⼯工作
⽤用 ASP
.NET 開發⼯工業電腦公司
的內部資訊系統。
文章中有兩個系統是我負責
的、eFunnel 更是獨立完成
Slide 6
Slide 6 text
8 年前，老闆的疑問
2004 美國的前端 (Web Dev) 才剛興起不久
當時我很有興趣、跟老闆介紹了一下
這樣的技術很好，但若是有這
樣的人才、對我們公司能有什
麼幫助？
當時前端流行瀏覽器支援、DHTML、CSS
對企業幫助的確不大
Slide 7
Slide 7 text
Agenda
• 什麼是前端工程
• 企業需要前端嗎？
• 導入前端工程吧！
Slide 8
Slide 8 text
一、什麼是前端工程
也是個學無止境的領域啊！
Slide 9
Slide 9 text
傳統網站製作流程
產品經理 視覺設計 程式設計
我負責提需求
製作規格與框線圖
將框線圖
製作成網頁
套 JavaScript
ASP.NET、DB
稍具規模的公司
視覺要產出 HTML/CSS、程式設計師套 JavaScript
Slide 10
Slide 10 text
中小企業網站製作
老闆
我負責分析使用者需
求、製作線框圖、撰寫
UI、套程式與資料庫...
通常不會有分工、程式設計得一肩扛起所有工
我負責提需求
程式設計
Slide 11
Slide 11 text
Full Stack Developer!
你們是全能的企業戰⼠士！
了解網站開發的各種面相是很重要的
Slide 12
Slide 12 text
前端從無到有
Web Developer 的興起
1998 ~ 2006 年
Slide 13
Slide 13 text
網頁標準化
1998 年：網頁標準化小組
當時瀏覽器廠商各自發展標準
開發者無所適從。
說服 Microsoft、Netscape、
Opera 等瀏覽器廠商實作
W3C 的標準
Slide 14
Slide 14 text
HTML
CSS
JavaScript
負責結構
負責樣式
負責行為
提倡正確且標準的網頁實作方式
Slide 15
Slide 15 text
前端成為正式職位
2001 年：Yahoo! 首次有了 Web Developer 的職位
Slide 16
Slide 16 text
前端成為正式職位 @台灣
2004 年：雅虎奇摩的第一位 Web Developer
Slide 17
Slide 17 text
當代網站製作流程
產品經理 視覺設計 程式設計
我負責提需求
製作規格與框線圖
將框線圖
製作成網頁
開發流程中加⼊入了前端⼯工程師
前端工程 後端工程
將圖轉換成網頁
負責所有「檢視原始碼」
看得到的東西
專注於視覺設計
產出 PSD
套 JavaScript
ASP.NET、DB
專注於 Model
資料邏輯、效能
導入更專業的分工，讓網站開發更精緻
Slide 18
Slide 18 text
前端工程師
圖：PSD / PNG 網頁：HTML + JS + CSS
視覺設計師
把圖做成真正的網頁、每個瀏覽器運作起來完全一致
最喜歡聽工程師說：「有前端真是太幸福了」
Slide 19
Slide 19 text
前端需求遽增
2005 年：從一開始的 3 人增加為 600 人，只花了 2 年多
Slide 20
Slide 20 text
當時前端的專業何在？
HTML/CSS/JavaScript 的專家
漸進式支援 無障礙 搜尋引擎最佳化
CSS Layout
瀏覽器相容性
非侵入式 JS
網站整體的 CSS 架構
圓角 正確撰寫 HTML
Slide 21
Slide 21 text
當時前端的專業何在？
HTML/CSS/JavaScript 的專家
漸進式支援 無障礙 搜尋引擎最佳化
CSS Layout
瀏覽器相容性
非侵入式 JS
網站整體的 CSS 架構
圓角 正確撰寫 HTML
讓網站開發朝正確的道路發展
到今天仍然是前端的基礎！
導入前端，大大強化了「維護性」與「效能」
Slide 22
Slide 22 text
中小企業網站製作
老闆
我負責理解使用者需
求、製作線框圖、撰寫
UI、套程式與資料庫...
工作開始加重，但還可以負擔
能不能做得更好用
不用整頁 Reload
也支援 Firefox
程式設計
得多學 AJAX
瀏覽器 hack
不需要太精細，但需求肯定是會增加的
Slide 23
Slide 23 text
前端的種子持續擴散
相關技術也雨後春筍般的冒出來
2007 年後
Slide 24
Slide 24 text
2007 年：HK Asia F2E Training
Nate Koechley Chris Heilmann Douglas Crockford
我的一個小問題，大師們認真的討論讓我感動不已
我
Slide 25
Slide 25 text
大師們在台灣傳承前端的種子
Nate 講 YUI @ OSDC 2008
Awoo 校園徵才與 Y! Course
Douglas 講 JavaScript @ OSDC 2010
Chris 講 Accessibility @ OSDC 2009
Slide 26
Slide 26 text
前端成為顯學
不再寫 HTML/CSS/JS
用編譯的如何？
JavaScript MVC
模組化與載入機制
响應式設計
工程師也能有好樣式
命令行的瀏覽器
用 JS 寫後端
越來越應用程式化
前端不再只是 UI、更是一種軟體工程
TDD 測試框架
Slide 27
Slide 27 text
前端社群雨後春筍地成立
JavaScript.tw HTML5 與 CSS3 在台灣 Nodejs 台灣
快樂設計師 RGBA 網路設計師聚會 F2E 台灣
想要在前端快速成長？你必須參與！
Slide 28
Slide 28 text
2012 年：JSDC.tw
台灣首次有前端專門的研討會！
http://www.flickr.com/photos/othree/7227650096
首屆 JSDC.tw 謝幕大合照
前端有著跟其他研討會完全不同的熱情
Slide 29
Slide 29 text
需要投入更多前端人力
產品經理 視覺設計
我負責提需求
製作規格與框線圖
將框線圖
製作成網頁 套 ASP.NET
前端工程
後端工程
將圖轉換成網頁
負責所有「檢視原始碼」
看得到的東西
專注於視覺設計
產出 PSD
專注於資料邏輯
導入HTML5、Node.js、
前端 MVC 架構、Mobile 支援
測試驅動開發、持續整合
Slide 30
Slide 30 text
前端正夯
感覺是個很好的投資 :D
Slide 31
Slide 31 text
中小企業也需要改變
老闆
再厲害的程式設計師也有其侷限之處
我們的網站要像 Facebook ：
快、即時、互動！！
並支援 iPhone/iPad/Android
程式設計
...
Slide 32
Slide 32 text
過去的網站以呈現內容為主
今日的網站變得更應用程式化（Outlook.com）
代表了使用的技術將會更多、更複雜。
企業需要視情況改變系統開發流程！
Slide 33
Slide 33 text
二、企業需要前端嗎？
Slide 34
Slide 34 text
前面提到前端工程是當代潮流
但是並不足以說服企業導入這樣的分工模式
對企業的未來有何助益，才是導入與否的重點
這樣的技術很好，但若是有這
樣的人才、對我們公司能有什
麼幫助？
回答前老闆的問題
Slide 35
Slide 35 text
台灣 ASP.NET 工作機會真的好多啊！
現況：ASP.NET 受企業歡迎
2013.9.21
Slide 36
Slide 36 text
現況：但... ASP.NET + 前端呢？
大多只是職務內容、沒有切出真正的職位
2013.9.21
Slide 37
Slide 37 text
Services to Devices
Front-end helps...
讓你的服務在不同裝置上運行
Slide 38
Slide 38 text
跨瀏覽器是前端的基本工
現在越來越多手持裝置 = Safari, Chrome 的比重越來越高
Slide 39
Slide 39 text
為何這些公司都在找前端？
雖然播放軟體跨平台、但內容呈現仍然是 Web
八屏一雲：用 HTML5 在裝置上呈現內容
HTC Start / HTC Share
Slide 40
Slide 40 text
以網頁技術開發 App
HTML5 純網頁
統一 Device API 以 JS 開發 App
手機即瀏覽器
開發者的願望：
一個 App 不要寫三套
使用最多人用的語言
Slide 41
Slide 41 text
以網頁技術開發 App
HTML5 純網頁
統一 Device API 以 JS 開發 App
手機即瀏覽器
開發者的願望：
一個 App 不要寫三套
使用最多人用的語言
只有網頁的技術能夠達到真正的跨平台
而且不會被特定廠商所鎖死
Mobile Web 的功能會更多、手機的效能會更好
或者是有其他革命性（Firefox OS？）的發展
前端工程未來在跨 Device 只會越來越重要
Slide 42
Slide 42 text
Build SaaS UIs
Front-end helps...
建立 SaaS 服務的介面
Slide 43
Slide 43 text
SaaS 的潛力才剛出現
SaaS 前景值得期待、企業做好準備了嗎？
技術成熟、Web 「應用程式化」的時代已經來臨！
Slide 44
Slide 44 text
SaaS 正在掀起革命
複雜的會計系統由「雲」取而代之
每月不到 1000 元就可以節省會計支出
Slide 45
Slide 45 text
我們公司也用了一堆 SaaS
價值：新創公司、中小企業能夠以低成本解決營運問題
能夠專心在產品開發上
Airbrake
Slide 46
Slide 46 text
UI 的轉變
安裝軟體的會計系統
Slide 47
Slide 47 text
UI 的轉變
Web 版的會計系統
Slide 48
Slide 48 text
網站服務應用程式化、UI 需要專業的前端工程
UI 的轉變
Xero - 最美麗的線上會計系統
Slide 49
Slide 49 text
網站服務應用程式化、UI 需要專業的前端工程
UI 的轉變
SaaS - 最美麗的線上會計系統
已經 8 年沒看到國內的 CRM/ERP 的狀態
不過倒是有租用過不堪入目的企業 Portal 系統 :p
國外的競爭非常激烈
例如 CRM 可以看看 Close.io, Customer.io, Highrise
軟體公司要跟上潮流，絕對要考慮導入前端工程！
Slide 50
Slide 50 text
Close.io
Google 了一下台灣的 CRM，介面還是太傳統了些
Slide 51
Slide 51 text
Better Co-work Model
Front-end brings...
更好的分工方式
Slide 52
Slide 52 text
帶來最舒適的分工
• 工程師不愛處理介面細節
• 喜愛邏輯與資料、不管呈現
• 設計師不愛寫程式碼
• 喜愛呈現、不管作法
• 前端技術日益複雜
工程師永遠滿足不了設計師
只有前端工程師可以把技術和設計完美結合
Slide 53
Slide 53 text
張克軍
豆瓣前端工程師
玩技术的都愿意玩“深”的技术，玩设计的又不
愿弄脏自己的手。但是最终能把技术和设计完美
结合在一起要靠前端工程师。
大陸知名的前端工程師
Slide 54
Slide 54 text
前端
設計 技術
The Keystone
前端能把設計與技術連結起來，是整個架構中最重要的
Slide 55
Slide 55 text
Recruiting & Retention
Front-end helps...
讓召募與保有人才更容易
Slide 56
Slide 56 text
前端可以吸引人才
前端工程已是網站開發的趨勢
許多人履歷只投有前端的公司
企業若能提供類似的職缺，吸引力會增加不少
遵循產業分工會有好處的！
Internet 程式設計師
前端工程師
＋
Slide 57
Slide 57 text
耶！職稱終於是
Front-end Engineer
以身為前端為榮
面試過不少人，都希望能專心在前端發展
Slide 58
Slide 58 text
成就感很重要
讓員工 80% 的時間在做自己有興趣的工作上
有人喜歡處理資料邏輯、有人喜歡做介面
第一份工作、我對日復一日開 DB Schema、套 DataGrid 感到無趣
若可以專注喜歡的前端上，或許可以做得更久
Slide 59
Slide 59 text
Multi-Functional!
Front-end Developer is...
多功能型人才
Slide 60
Slide 60 text
學校會教「軟體工程」與「美術設計」
但沒有學校提供「前端工程」的課
學校沒教的事
會進入這個圈子都是出自自己的熱忱
也因此常常是「混合體」
Slide 61
Slide 61 text
越來越多視覺投入前端
當工程師一直打槍設計時...
找到這種人，介面完全不用煩惱了！
Slide 62
Slide 62 text
即使找不到這種強者
大部分的前端都能夠刻出能看且堪用的 UI
許多內部系統的 UI、用 Bootstrap 即可滿足
Slide 63
Slide 63 text
軟體工程也投入前端
將軟體工程的方法論
帶入前端開發，如：
• 重複利用
• 代碼品質
• 自動化測試
• 持續整合
• 導入工具
• 改變編程方式
越來越多的「本科系」開始重視
Slide 64
Slide 64 text
老闆為什麼該找前端
• 帶來最適當、最有效率的分工。
• 懂設計及程式兩個領域，很難能可貴。
• 扮演團隊中的橋樑、願意處理棘手問題。
• 能獨立做 Prototype、甚至產品。
• 廣泛的興趣，能為團隊帶來分享的氣氛。
前端是真正的核⼼心關鍵⼈人才
Slide 65
Slide 65 text
三、導入前端工程吧
Slide 66
Slide 66 text
請先肯定前端的價值
絕對不是「比較簡單的工程師」
Slide 67
Slide 67 text
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?
為什麼前端工程師如此短缺？
为什么前端工程师很难找？
為什麼前端工程師很難找？
軟體產業對前端的共同問題
同時反應了前端的真實價值、與產業的問題
Slide 68
Slide 68 text
Simon Willison
Lanyrd.com CEO、 Django Co-creator
• 與其他工程相較，前端絕對不是比較簡單的
• 需要在非常多的環境寫程式並運行
• 開發與偵錯工具非常有限
• 好的前端可以顧及效能、安全性、與响應式設計
• 冒出的不同新技術，前端得理解並處理相容性的問題
• 說真的，後端工程師處理的事簡單多了
Seriously, Server-side developers have it easy.
Slide 69
Slide 69 text
企業最好眼光長遠些、培育好
的技術文化，能使有潛力的人
迅速成長起來。好的團隊、靠
譜的做事方式，自然能吸引好
的人才。
张克军
⾖豆瓣前端⼯工程师
找不到前端工程師？
能看到前端價值的企業、自然能夠吸引人才
Slide 70
Slide 70 text
公司規模夠、開職缺吧
把環境跟分工搞好，會更有產值
Slide 71
Slide 71 text
知名網站打算成立前端 Team
感謝保哥的大力支持
到 Hiiir 分享、剛成立了前端部門
很開心能幫忙、帶來正面的循環
今年 JSDC 分享後...
Slide 72
Slide 72 text
希望企業能夠多多導入前端
導入前端的效益絕不會比贊助差 ^^
Slide 73
Slide 73 text
規模不夠、可切分 Task
人少也能做前端、重點是開始導入方法
Slide 74
Slide 74 text
規模不大，可切分 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?
Slide 75
Slide 75 text
我有興趣，但公司沒意願
只要有心，人人都可以是前端
Slide 76
Slide 76 text
公司發不發展前端很重要嗎？
自得其樂很重要
把工作網站當成遊樂場、導入你愛的前端技術
觀察老闆或使用者的反應
你願意付出，得到最多的一定是你自己
（我面試最喜歡了解面試者對前公司改變了什麼）
Slide 77
Slide 77 text
講講我成為前端的故事
Hedger：雅虎奇摩的第一位 Web Developer
Slide 78
Slide 78 text
2003：在龜毛進化論認識 Hedger
我：「有人會寫 CSS 嗎？要不要接外包」
Hedger 會分享許多 "DHTML" 相關的東西給我看
從此對 WebDev 領域的東西產生濃烈興趣
Slide 79
Slide 79 text
2004：震撼教育的面試
• 沒有標準答案
• 我只知道「Know How」
完全不懂「Know Why」
• 過去所寫的東西、靈魂在
哪？
• 實在離前端太遠了...
Slide 80
Slide 80 text
2004 年：在外兼課
離職！想藉由教授基礎網頁開發、把前端基礎給打好
• 第一堂課介紹 Web Developer 是什麼
• 某位學員：「我大學同學在 Yahoo! 做這個」
• MSN 問 Hedger，他說：「我們正缺人，過來吧！」
• 就這樣莫名其妙進去了 XD
Slide 81
Slide 81 text
持續地對一件事保持熱情
冥冥之中會有一條道路出現
Slide 82
Slide 82 text
熱愛前端、但還不是正式前端工程師的你
何不大膽跟老闆提議成立前端部門呢？
一起加入
Front-end Engineer
Slide 83
Slide 83 text
期待更多前端種子發芽
http://f2eclass.com
將先前在外授課的資料分享出來
Slide 84
Slide 84 text
前端、你的名字叫熱血
前端工程師身體裡所流的血液：時時刻刻保持熱血！
• Hedger 從無到有刻了一個 TabView 給
我看。這就是「Culture of Sharing」
啊！
• Nate 說：「前端工程師就像拿著顯微
鏡、專注於 HTML / CSS / JavaScript 的
不斷改善」
• Nate 對產品的堅持、顧客導向的精神。
Slide 85
Slide 85 text
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
Slide 86
Slide 86 text
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
Slide 87
Slide 87 text
“需要更多的傳教士與社群把我們的專業向前推”
希望企業也一同加入前端的大家庭！
有更多的前端工程師，台灣的軟體產業一定能更好
Slide 88
Slide 88 text
Thank you!
• GitHub - josephj
• Facebook - 蔣定宇
• Slideshare - josephj
• Linkedin - josephj6802
聯繫我