F2E,the Keystone

講者 josephj

前端工程 - 軟體工業的碶石

https://www.slideshare.net/josephj/f2e-the-keystone

緣起

「啊嗚嘛？我是透抽(台語)啦」

http://tinyurl.com/tonyq-nick

藉由 JSDC、讓前端在台灣形成一個真正的產業

真男⼈人！怎可不兩肋插⼑刀來相助！！

？？？

TonyQ

前端工程師之謎

• 前端工程師是什麼？

• 前端工程師是不是可有可無？

• 為什麼前端工程師這麼難找？

• 為什麼待遇總是不如後端工程師？

總是有一大堆問號的職業！

As a Front-end Engineer...

• josephj / 啊嗚

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

• 前端工程師，經驗 8 年

• 倚老賣老、分享在前端產業的點滴

• 看見前端工程師的價值

• 求進步，讓前端成為一個產業

前端革命尋根之旅：認識 F2E 的起源

Iron Bridge, England⼯工業⾰革命發源地、全世界第⼀一座鐵橋

興起的原因 v.s 現在的需求

過去的自己 v.s 現在的自己

「前端魂」尋根之旅

使命不同、會讓你更有認同感

莫忘初衷

前端魂

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

• WaSP

• 為「標準」奮戰

• 減少開發的複雜與浪費

• 讓瀏覽器廠商符合標準

• 2013.3 正式結束。

這群祖師爺們、堅持做對的事實在有夠熱血！

1998 年：我做了第一個網站

可以跟全世界的人、用這麼簡單的方式分享資訊

哇！IE 4

2001 年：第一位前端工程師Yahoo! 首次有了「前端 Web Developer」的正式職位

2 YEARS、from 3 to 600

2000 年：我開始經營社群ASP + Access 讓網站變得好有趣，我已經不可自拔

當時用了一堆 <frameset/>，也用 table 排版 :p

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

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

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

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

2004：震撼教育的面試

• 沒有標準答案

• 我只知道「Know How」

完全不懂「Know Why」

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

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

<!-­‐-­‐  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 (當時的考題)

你寫的每⼀一⾏行 Code，是否都有仔細思考過？

Link

2004 年：在外兼課

想藉由教基礎網頁開發、把前端基礎給打好

• 第一堂課介紹 WD（Web Developer）是什麼....

• Norie 學員：「我同學 (Beckie) 在雅虎做這個」@@

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

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

持續地對一件事保持熱情

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

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

2007 年：HK Asia F2E Training

Nate Koechley Chris Heilmann Douglas Crockford

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

我克軍

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

Nate 講 YUI @ OSDC 2008

Awoo 校園徵才與 Y! Course

Douglas 講 JavaScript @ OSDC 2010

Chris 講 Accessibility @ OSDC 2009

大多藉由 OSDC 或 COSCUP、並沒有專門的管道

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

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

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

前端、你的名字叫熱血前端工程師身體裡所流的血液！時時刻刻保持熱血

• Hedger 從無到有刻了一個 TabView 給我看。這就是「Culture of Sharing」啊！

• Nate 說：「前端工程師就像拿著顯微鏡，專注於 HTML / CSS / JavaScript 的不斷改善」

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

前端工程師的中心思想

• The devil is in the details

• Culture of Sharing

• Write it down!

• Positive Thinking

• Facilitate Team Members

技術能力不是最重要的，態度才是！

在 miiiCasa 新人訓練的第一堂課

前端工程師的價值你值得擁有更多

http://www.flickr.com/photos/8695125@N08/545346881

對前端、一些常見的認知

• JavaScript = 玩具語言

• 跟後端相比，簡單多了

• 不上不下

• 入門容易

• Better to have ＝ 沒有也沒關係

• 薪水比較便宜

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

變成公司內沒辦法缺少的角色，Why ?

為什麼會不可缺少？

• 工程師不愛切版• 重視邏輯與資料、不管呈現

• 設計師不愛切版• 重視呈現、不管作法

加上瀏覽器、JS/CSS 日益複雜，工程師永遠滿足不了設計師

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

前端

設計 技術視覺、介⾯面 資料、邏輯

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

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

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

Seriously, Server-side developers have it easy.

實際有創業的硬底技術人

張克軍豆瓣前端工程師

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

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

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

• ⼀一個網站⽤用⼾戶體驗好，會被認為是有很厲害的設計師• ⼤大公司分⼯工過細，職能限制在很⼩小的環節上• ⼩小公司要求⾯面⾯面俱到，開發品質拙劣• ⼊入⾏行⾨門檻低，優秀前端⼈人員流失嚴重（指轉⾏行）• 個⼈人得不到持續發展，做兩年認為到頂了、紛紛轉⾏行

大陸知名的前端工程師

前端 ＝ 工程界的「社工」？

需求多、複雜度高、技巧多、薪水不會多

老闆為什麼該珍惜前端

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

• 讓每個⼈人專注於⾃自⼰己的熱情。

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

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

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

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

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

看清自己的價值

•前端需求只會越來越多：

• Web 應⽤用程式化

• HTML 是共通的標準

• Mobile Web 總是會有成熟的⼀一天

•前後兼顧 - Node.js

•換⼯工作容易，沒有程式語⾔言不同的累贅

•市場上，好的前端⼯工程師仍然很少

以身為前端工程師為榮

耶！職稱終於是 Front-end Engineer

以身為前端工程師為榮

耶！職稱終於是 Front-end Engineer

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

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

周圍一些混得很不錯的前端

Bobby前盛大「前端總監」

Adam經典賽 FAN CAVE 台灣代表

Rex近兩年台灣開發者競賽常勝軍

Huge

陸續任職於美國雅虎

Spotify、Netflix

周圍一些混得很不錯的前端

Bobby前盛大「前端總監」

Adam經典賽 FAN CAVE 台灣代表

Rex近兩年台灣開發者競賽常勝軍

Huge

陸續任職於美國雅虎

Spotify、Netflix

前端工程師

你應該看到自己的價值

努力去追尋自己的夢想

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

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

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

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

一些需要改進的點

從平凡變成有價值，不能省略的基礎

需打好基礎

會建造危樓的，絕對不是個好的前端⼯工程師

需打好基礎

• 需要了解每個 HTML 標籤的意義

• 前端 ≠ jQuery

• JavaScript 跟 DOM API 的關連與區別

• Event 事件模型是什麼

• AJAX, JSONP 是什麼

怎麼回事？90% 的前端面試者不會 Clear Float

這些都是基本的基本，務必要做好準備

CSS ⼊入⾨門 - 浮動 (p14)

別做「純」的！

• 前端「設計師」

• 前端「架構師」

• 前端「總監」

只有前端⼯工程師⾃自⼰己知道前端的需求

不上不下的問題：公司寧願 Hire 新人重新教起

避免盲目追求新技術

能夠深入研究並且整合

制定規範

提昇整體品質

幫大家解決問題

才能稱得上是好的前端工程師

好的前端 ≠ 知道很多技術

積極分享、多回饋

沒 GitHub 還能算是工程師嗎 XD

這裡已經是所有工程師的 Identity

你需要投注時間與精力經營

同時也分享你所打造的輪子

分享的力量實在太猛了

受到 TonyQ 的感召，把講課的講義分享出來，沒想到...

Slideshare 暴增到單日 4,000 次

分享的力量實在太猛了

受到 TonyQ 的感召，把講課的講義分享出來，沒想到...

Slideshare 暴增到單日 4,000 次

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

對工作的承諾

不管是自己的興趣、還是謀生的職業

既然選擇投入、就應該做到最好

評價這件事會一輩子跟隨著你

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

JavaScript.tw 社群 HTML5 & CSS3 社群 Node.js 社群

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

JavaScript.tw 社群 HTML5 & CSS3 社群 Node.js 社群

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

有這麼多熱情的夥伴

前端必能在台灣成為不可或缺的產業

歡迎貢獻你的一份心力！

Thank you!

• GitHub - josephj

• Facebook - 蔣定宇

• Slideshare - josephj

• Linkedin - josephj6802

聯繫我