Upgrade to Pro — share decks privately, control downloads, hide ads and more …

F2E for Enterprise

Joseph Chiang
September 24, 2013

F2E for Enterprise

Microsoft TechDay 2013

Joseph Chiang

September 24, 2013
Tweet

More Decks by Joseph Chiang

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  65. 三、導入前端工程吧

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide