F2E for Enterprise

DEV 202

F2E for Enterprise為什麼企業需要前端工程

講者：josephjLead Front-end Developer

Faria Systems

感謝上官的推薦

向企業及其開發者介紹新興的前端工程

Microsoft Technical Evangelist上官林傑

微軟正在大力推廣

Services to Devices 前端工程很重要

講者介紹• 蔣定宇 / josephj

• 這樣做就對了 http://josephj.com

• 前端工程師，經驗 8 年

2005 -2009 傳教士、前端工程師

2009 -2013.5 miiiCasa 前端部門主管

2013.6 迄今 Lead Front-end Developer

Web 前端工程在這些年的推廣之下，開始變成每一個網路公司的必備職位。

而大部分企業的重點在於建立自己的協同系統：「讓老闆、員工及夥伴可以更有效率地互動、生產、預測」。

那麼，「前端工程能對企業帶來什麼幫助呢？」

前端工程 v.s 企業

企業經驗？

http://www.ithome.com.tw/itadm/article.php?c=47699

「改善接單與客服機制 研揚業績達成率提升到98%」

講者不了解企業資訊需求？

2004-2005 - 第⼀一份正式⼯工作⽤用 ASP.NET 開發⼯工業電腦公司的內部資訊系統。

文章中有兩個系統是我負責的、eFunnel 更是獨立完成

8 年前，老闆的疑問2004 美國的前端 (Web Dev) 才剛興起不久

當時我很有興趣、跟老闆介紹了一下

這樣的技術很好，但若是有這樣的人才、對我們公司能有什麼幫助？

當時前端流行瀏覽器支援、DHTML、CSS對企業幫助的確不大

Agenda

• 什麼是前端工程

• 企業需要前端嗎？

• 導入前端工程吧！

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

傳統網站製作流程

產品經理 視覺設計 程式設計

我負責提需求製作規格與框線圖

將框線圖製作成網頁

套 JavaScriptASP.NET、DB

稍具規模的公司

視覺要產出 HTML/CSS、程式設計師套 JavaScript

中小企業網站製作

老闆

我負責分析使用者需求、製作線框圖、撰寫 UI、套程式與資料庫...

通常不會有分工、程式設計得一肩扛起所有工

我負責提需求

程式設計

Full Stack Developer!你們是全能的企業戰⼠士！

了解網站開發的各種面相是很重要的

前端從無到有Web Developer 的興起

1998 ~ 2006 年

網頁標準化1998 年：網頁標準化小組

當時瀏覽器廠商各自發展標準開發者無所適從。

說服 Microsoft、Netscape、Opera 等瀏覽器廠商實作

W3C 的標準

HTMLCSS

JavaScript

負責結構

負責樣式負責行為

提倡正確且標準的網頁實作方式

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

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

當代網站製作流程

產品經理 視覺設計 程式設計

我負責提需求製作規格與框線圖

將框線圖製作成網頁

開發流程中加⼊入了前端⼯工程師

前端工程 後端工程

將圖轉換成網頁負責所有「檢視原始碼」

看得到的東西專注於視覺設計

產出 PSD套 JavaScriptASP.NET、DB專注於 Model

資料邏輯、效能

導入更專業的分工，讓網站開發更精緻

前端工程師圖：PSD / PNG 網頁：HTML + JS + CSS視覺設計師

把圖做成真正的網頁、每個瀏覽器運作起來完全一致

最喜歡聽工程師說：「有前端真是太幸福了」

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

當時前端的專業何在？HTML/CSS/JavaScript 的專家

漸進式支援 無障礙 搜尋引擎最佳化

CSS Layout

瀏覽器相容性非侵入式 JS網站整體的 CSS 架構

圓角 正確撰寫 HTML

當時前端的專業何在？HTML/CSS/JavaScript 的專家

漸進式支援 無障礙 搜尋引擎最佳化

CSS Layout

瀏覽器相容性非侵入式 JS網站整體的 CSS 架構

圓角 正確撰寫 HTML讓網站開發朝正確的道路發展

到今天仍然是前端的基礎！

導入前端，大大強化了「維護性」與「效能」

中小企業網站製作

老闆

我負責理解使用者需求、製作線框圖、撰寫 UI、套程式與資料庫...

工作開始加重，但還可以負擔

能不能做得更好用不用整頁 Reload

也支援 Firefox

程式設計

得多學 AJAX瀏覽器 hack

不需要太精細，但需求肯定是會增加的

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

2007 年後

2007 年：HK Asia F2E TrainingNate Koechley Chris Heilmann Douglas Crockford

我的一個小問題，大師們認真的討論讓我感動不已

我

大師們在台灣傳承前端的種子

Nate 講 YUI @ OSDC 2008

Awoo 校園徵才與 Y! Course

Douglas 講 JavaScript @ OSDC 2010

Chris 講 Accessibility @ OSDC 2009

前端成為顯學

不再寫 HTML/CSS/JS用編譯的如何？

JavaScript MVC

模組化與載入機制

响應式設計

工程師也能有好樣式

命令行的瀏覽器

用 JS 寫後端越來越應用程式化

前端不再只是 UI、更是一種軟體工程

TDD 測試框架

前端社群雨後春筍地成立

JavaScript.tw HTML5 與 CSS3 在台灣 Nodejs 台灣

快樂設計師 RGBA 網路設計師聚會 F2E 台灣

想要在前端快速成長？你必須參與！

2012 年：JSDC.tw台灣首次有前端專門的研討會！

http://www.flickr.com/photos/othree/7227650096首屆 JSDC.tw 謝幕大合照

前端有著跟其他研討會完全不同的熱情

需要投入更多前端人力

產品經理 視覺設計

我負責提需求製作規格與框線圖

將框線圖製作成網頁 套 ASP.NET

前端工程

後端工程

將圖轉換成網頁負責所有「檢視原始碼」

看得到的東西

專注於視覺設計產出 PSD

專注於資料邏輯

導入HTML5、Node.js、前端 MVC 架構、Mobile 支援

測試驅動開發、持續整合

前端正夯

感覺是個很好的投資 :D

中小企業也需要改變

老闆

再厲害的程式設計師也有其侷限之處

我們的網站要像 Facebook ：快、即時、互動！！

並支援 iPhone/iPad/Android

程式設計

...

過去的網站以呈現內容為主今日的網站變得更應用程式化（Outlook.com）

代表了使用的技術將會更多、更複雜。

企業需要視情況改變系統開發流程！

二、企業需要前端嗎？

前面提到前端工程是當代潮流

但是並不足以說服企業導入這樣的分工模式

對企業的未來有何助益，才是導入與否的重點

這樣的技術很好，但若是有這樣的人才、對我們公司能有什麼幫助？

回答前老闆的問題

台灣 ASP.NET 工作機會真的好多啊！

現況：ASP.NET 受企業歡迎

2013.9.21

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

2013.9.21

Services to DevicesFront-end helps...

讓你的服務在不同裝置上運行

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

為何這些公司都在找前端？

雖然播放軟體跨平台、但內容呈現仍然是 Web

八屏一雲：用 HTML5 在裝置上呈現內容

HTC Start / HTC Share

以網頁技術開發 AppHTML5 純網頁

統一 Device API 以 JS 開發 App

手機即瀏覽器

開發者的願望：一個 App 不要寫三套使用最多人用的語言

以網頁技術開發 AppHTML5 純網頁

統一 Device API 以 JS 開發 App

手機即瀏覽器

開發者的願望：一個 App 不要寫三套使用最多人用的語言

只有網頁的技術能夠達到真正的跨平台而且不會被特定廠商所鎖死

Mobile Web 的功能會更多、手機的效能會更好或者是有其他革命性（Firefox OS？）的發展

前端工程未來在跨 Device 只會越來越重要

Build SaaS UIsFront-end helps...

建立 SaaS 服務的介面

SaaS 的潛力才剛出現SaaS 前景值得期待、企業做好準備了嗎？

技術成熟、Web 「應用程式化」的時代已經來臨！

SaaS 正在掀起革命複雜的會計系統由「雲」取而代之

每月不到 1000 元就可以節省會計支出

我們公司也用了一堆 SaaS

價值：新創公司、中小企業能夠以低成本解決營運問題能夠專心在產品開發上

Airbrake

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

UI 的轉變Web 版的會計系統

網站服務應用程式化、UI 需要專業的前端工程

UI 的轉變Xero - 最美麗的線上會計系統

網站服務應用程式化、UI 需要專業的前端工程

UI 的轉變

SaaS - 最美麗的線上會計系統

已經 8 年沒看到國內的 CRM/ERP 的狀態

不過倒是有租用過不堪入目的企業 Portal 系統 :p

國外的競爭非常激烈

例如 CRM 可以看看 Close.io, Customer.io, Highrise

軟體公司要跟上潮流，絕對要考慮導入前端工程！

Close.io

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

Better Co-work ModelFront-end brings...

更好的分工方式

帶來最舒適的分工

• 工程師不愛處理介面細節

• 喜愛邏輯與資料、不管呈現

• 設計師不愛寫程式碼

• 喜愛呈現、不管作法

• 前端技術日益複雜工程師永遠滿足不了設計師

只有前端工程師可以把技術和設計完美結合

張克軍豆瓣前端工程師

玩技术的都愿意玩“深”的技术，玩设计的又不

愿弄脏自己的手。但是最终能把技术和设计完美

结合在一起要靠前端工程师。

大陸知名的前端工程師

前端

設計 技術

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

Recruiting & RetentionFront-end helps...

讓召募與保有人才更容易

前端可以吸引人才

前端工程已是網站開發的趨勢許多人履歷只投有前端的公司

企業若能提供類似的職缺，吸引力會增加不少

遵循產業分工會有好處的！

Internet 程式設計師

前端工程師＋

耶！職稱終於是

Front-end Engineer

以身為前端為榮

面試過不少人，都希望能專心在前端發展

成就感很重要

讓員工 80% 的時間在做自己有興趣的工作上

有人喜歡處理資料邏輯、有人喜歡做介面

第一份工作、我對日復一日開 DB Schema、套 DataGrid 感到無趣

若可以專注喜歡的前端上，或許可以做得更久

Multi-Functional!Front-end Developer is...

多功能型人才

學校會教「軟體工程」與「美術設計」但沒有學校提供「前端工程」的課

學校沒教的事

會進入這個圈子都是出自自己的熱忱也因此常常是「混合體」

越來越多視覺投入前端當工程師一直打槍設計時...

找到這種人，介面完全不用煩惱了！

即使找不到這種強者大部分的前端都能夠刻出能看且堪用的 UI

許多內部系統的 UI、用 Bootstrap 即可滿足

軟體工程也投入前端

將軟體工程的方法論帶入前端開發，如：

• 重複利用• 代碼品質• 自動化測試• 持續整合• 導入工具• 改變編程方式

越來越多的「本科系」開始重視

老闆為什麼該找前端

• 帶來最適當、最有效率的分工。

• 懂設計及程式兩個領域，很難能可貴。

• 扮演團隊中的橋樑、願意處理棘手問題。

• 能獨立做 Prototype、甚至產品。

• 廣泛的興趣，能為團隊帶來分享的氣氛。

前端是真正的核⼼心關鍵⼈人才

三、導入前端工程吧

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

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?

為什麼前端工程師如此短缺？

为什么前端工程师很难找？

為什麼前端工程師很難找？

軟體產業對前端的共同問題同時反應了前端的真實價值、與產業的問題

Simon WillisonLanyrd.com CEO、 Django Co-creator

• 與其他工程相較，前端絕對不是比較簡單的• 需要在非常多的環境寫程式並運行• 開發與偵錯工具非常有限• 好的前端可以顧及效能、安全性、與响應式設計• 冒出的不同新技術，前端得理解並處理相容性的問題• 說真的，後端工程師處理的事簡單多了

Seriously, Server-side developers have it easy.

企業最好眼光長遠些、培育好的技術文化，能使有潛力的人迅速成長起來。好的團隊、靠譜的做事方式，自然能吸引好的人才。

张克军⾖豆瓣前端⼯工程师

找不到前端工程師？能看到前端價值的企業、自然能夠吸引人才

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

知名網站打算成立前端 Team

感謝保哥的大力支持

到 Hiiir 分享、剛成立了前端部門

很開心能幫忙、帶來正面的循環

今年 JSDC 分享後...

希望企業能夠多多導入前端

導入前端的效益絕不會比贊助差 ^^

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

規模不大，可切分 Task多了解員工的興趣、指派一些跟 UI 相關的工作

會找到一些潛在的前端工程師，例如：

• 導入 CSS 架構：更美觀且容易維護ex. Bootstrap, SMACSS, Normalize.css...

• 導入 HTML5 圖表系統：可跨平台瀏覽 ex. amCharts, HighCharts...

• 用 Responsive Design 製作 Mobile Webex. Susy, Bootstrap Grids...

• 網頁應用程式化ex. Backbone.js, AngularJS

鼓勵員工往更專業的方向發展、又能讓網站更好，Why Not?

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

公司發不發展前端很重要嗎？

自得其樂很重要

把工作網站當成遊樂場、導入你愛的前端技術觀察老闆或使用者的反應

你願意付出，得到最多的一定是你自己（我面試最喜歡了解面試者對前公司改變了什麼）

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

2003：在龜毛進化論認識 Hedger我：「有人會寫 CSS 嗎？要不要接外包」

Hedger 會分享許多 "DHTML" 相關的東西給我看

從此對 WebDev 領域的東西產生濃烈興趣

2004：震撼教育的面試

• 沒有標準答案

• 我只知道「Know How」

完全不懂「Know Why」

• 過去所寫的東西、靈魂在

哪？

• 實在離前端太遠了...

2004 年：在外兼課離職！想藉由教授基礎網頁開發、把前端基礎給打好

• 第一堂課介紹 Web Developer 是什麼

• 某位學員：「我大學同學在 Yahoo! 做這個」

• MSN 問 Hedger，他說：「我們正缺人，過來吧！」

• 就這樣莫名其妙進去了 XD

持續地對一件事保持熱情

冥冥之中會有一條道路出現

熱愛前端、但還不是正式前端工程師的你

何不大膽跟老闆提議成立前端部門呢？

一起加入

Front-end Engineer

期待更多前端種子發芽

http://f2eclass.com

將先前在外授課的資料分享出來

前端、你的名字叫熱血

前端工程師身體裡所流的血液：時時刻刻保持熱血！

• Hedger 從無到有刻了一個 TabView 給

我看。這就是「Culture of Sharing」

啊！

• Nate 說：「前端工程師就像拿著顯微

鏡、專注於 HTML / CSS / JavaScript 的

不斷改善」

• Nate 對產品的堅持、顧客導向的精神。

Front-end engineers are right at the nexus of computer science and design.

“前端工程師正是下個世代 電腦科學與設計的答案”

Blake ElshireUX Developer at Fossil

http://nate.koechley.com/blog/2008/06/11/slides-professional-frontend-engineering/#ixzz2RjtCuCat

We need more evangelists and organizations to take up this cause and push our profession forward.

“我們需要更多的傳教士與 社群把我們的專業向前推”

Blake ElshireUX Developer at Fossil

http://nate.koechley.com/blog/2008/06/11/slides-professional-frontend-engineering/#ixzz2RjtCuCat

“需要更多的傳教士與社群把我們的專業向前推”

希望企業也一同加入前端的大家庭！

有更多的前端工程師，台灣的軟體產業一定能更好

Thank you!

• GitHub - josephj

• Facebook - 蔣定宇

• Slideshare - josephj

• Linkedin - josephj6802

聯繫我