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. 講者介紹 • 蔣定宇 / josephj • 這樣做就對了 http://josephj.com • 前端工程師,經驗

    8 年 2005 -2009 傳教士、前端工程師 2009 -2013.5 miiiCasa 前端部門主管 2013.6 迄今 Lead Front-end Developer
  2. 當代網站製作流程 產品經理 視覺設計 程式設計 我負責提需求 製作規格與框線圖 將框線圖 製作成網頁 開發流程中加⼊入了前端⼯工程師 前端工程

    後端工程 將圖轉換成網頁 負責所有「檢視原始碼」 看得到的東西 專注於視覺設計 產出 PSD 套 JavaScript ASP.NET、DB 專注於 Model 資料邏輯、效能 導入更專業的分工,讓網站開發更精緻
  3. 前端工程師 圖:PSD / PNG 網頁:HTML + JS + CSS 視覺設計師

    把圖做成真正的網頁、每個瀏覽器運作起來完全一致 最喜歡聽工程師說:「有前端真是太幸福了」
  4. 當時前端的專業何在? HTML/CSS/JavaScript 的專家 漸進式支援 無障礙 搜尋引擎最佳化 CSS Layout 瀏覽器相容性 非侵入式

    JS 網站整體的 CSS 架構 圓角 正確撰寫 HTML 讓網站開發朝正確的道路發展 到今天仍然是前端的基礎! 導入前端,大大強化了「維護性」與「效能」
  5. 2007 年:HK Asia F2E Training Nate Koechley Chris Heilmann Douglas

    Crockford 我的一個小問題,大師們認真的討論讓我感動不已 我
  6. 大師們在台灣傳承前端的種子 Nate 講 YUI @ OSDC 2008 Awoo 校園徵才與 Y!

    Course Douglas 講 JavaScript @ OSDC 2010 Chris 講 Accessibility @ OSDC 2009
  7. 前端社群雨後春筍地成立 JavaScript.tw HTML5 與 CSS3 在台灣 Nodejs 台灣 快樂設計師 RGBA

    網路設計師聚會 F2E 台灣 想要在前端快速成長?你必須參與!
  8. 需要投入更多前端人力 產品經理 視覺設計 我負責提需求 製作規格與框線圖 將框線圖 製作成網頁 套 ASP.NET 前端工程

    後端工程 將圖轉換成網頁 負責所有「檢視原始碼」 看得到的東西 專注於視覺設計 產出 PSD 專注於資料邏輯 導入HTML5、Node.js、 前端 MVC 架構、Mobile 支援 測試驅動開發、持續整合
  9. 以網頁技術開發 App HTML5 純網頁 統一 Device API 以 JS 開發

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

    App 手機即瀏覽器 開發者的願望: 一個 App 不要寫三套 使用最多人用的語言 只有網頁的技術能夠達到真正的跨平台 而且不會被特定廠商所鎖死 Mobile Web 的功能會更多、手機的效能會更好 或者是有其他革命性(Firefox OS?)的發展 前端工程未來在跨 Device 只會越來越重要
  11. 網站服務應用程式化、UI 需要專業的前端工程 UI 的轉變 SaaS - 最美麗的線上會計系統 已經 8 年沒看到國內的

    CRM/ERP 的狀態 不過倒是有租用過不堪入目的企業 Portal 系統 :p 國外的競爭非常激烈 例如 CRM 可以看看 Close.io, Customer.io, Highrise 軟體公司要跟上潮流,絕對要考慮導入前端工程!
  12. 帶來最舒適的分工 • 工程師不愛處理介面細節 • 喜愛邏輯與資料、不管呈現 • 設計師不愛寫程式碼 • 喜愛呈現、不管作法 •

    前端技術日益複雜 工程師永遠滿足不了設計師 只有前端工程師可以把技術和設計完美結合
  13. 軟體工程也投入前端 將軟體工程的方法論 帶入前端開發,如: • 重複利用 • 代碼品質 • 自動化測試 •

    持續整合 • 導入工具 • 改變編程方式 越來越多的「本科系」開始重視
  14. 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? 為什麼前端工程師如此短缺? 为什么前端工程师很难找? 為什麼前端工程師很難找? 軟體產業對前端的共同問題 同時反應了前端的真實價值、與產業的問題
  15. Simon Willison Lanyrd.com CEO、 Django Co-creator • 與其他工程相較,前端絕對不是比較簡單的 • 需要在非常多的環境寫程式並運行

    • 開發與偵錯工具非常有限 • 好的前端可以顧及效能、安全性、與响應式設計 • 冒出的不同新技術,前端得理解並處理相容性的問題 • 說真的,後端工程師處理的事簡單多了 Seriously, Server-side developers have it easy.
  16. 規模不大,可切分 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?
  17. 2004 年:在外兼課 離職!想藉由教授基礎網頁開發、把前端基礎給打好 • 第一堂課介紹 Web Developer 是什麼 • 某位學員:「我大學同學在

    Yahoo! 做這個」 • MSN 問 Hedger,他說:「我們正缺人,過來吧!」 • 就這樣莫名其妙進去了 XD
  18. 前端、你的名字叫熱血 前端工程師身體裡所流的血液:時時刻刻保持熱血! • Hedger 從無到有刻了一個 TabView 給 我看。這就是「Culture of Sharing」

    啊! • Nate 說:「前端工程師就像拿著顯微 鏡、專注於 HTML / CSS / JavaScript 的 不斷改善」 • Nate 對產品的堅持、顧客導向的精神。
  19. 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
  20. 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
  21. Thank you! • GitHub - josephj • Facebook - 蔣定宇

    • Slideshare - josephj • Linkedin - josephj6802 聯繫我