[COSCUP 2013] 前端工程師如何與團隊合作

  • 5,470 views
Uploaded on

[COSCUP 2013] 前端工程師如何與團隊合作

[COSCUP 2013] 前端工程師如何與團隊合作

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
5,470
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
0
Comments
1
Likes
33

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 前端⼯工程師 如何與團隊合作 以 Drupal 專案為例 Kuro Hsu @ COSCUP 2013
  • 2. Who am I • I’m Kuro • 前端⼯工程師 • Drupal 經驗近四年
  • 3. 什麼是前端⼯工程師? 聽說以前⽐比較流⾏行 全端 ⼯工程師
  • 4. We tell browsers what to do. - Professional Frontend Engineering by Nate Koechley http://www.slideshare.net/natekoechley/professional-frontend-engineering
  • 5. Source: http://www.slideshare.net/adamp3wang/mockupwebconftw-2013 那些 mockup 沒告訴你的事 @ WebConf.tw 2013 by Adam Wang
  • 6. F2E is Keystone Source: https://speakerdeck.com/josephj/f2e-the-keystone F2E, the Keystone by Joseph Chiang
  • 7. 網站開發流程 • 企劃 • 設計 • 開發 • 維護
  • 8. 網站開發流程 • 企劃 • 設計 • 開發 • 維護
  • 9. Round1: 企劃階段
  • 10. • PM:解決需求! • 訪談分析,決定產品規格,功能, ⾵風格,並制作 sitemap, wireframe, prototype.
  • 11. • Web 有極限,需求則無 - tonyQ • 溝通! 溝通! 溝通! • 理解需求,擁抱變化
  • 12. • 給予技術建議,改善設計決策,但不 宜過度干涉 • 協助制作 Prototype,只作需要的部分 • 重點:不斷溝通,持續調整。
  • 13. • 例:圓⾓角 / 陰影 等 CSS3 特性是否適 ⽤用? 瀏覽器⽀支援? • ans: 統計數據,採取漸進增強策略 ( progressive enhancement. )
  • 14. • 例:圓⾓角 / 陰影 等 CSS3 特性是否適 ⽤用? 瀏覽器⽀支援? • ans2: 聽說最近 flat design 好像很夯?
  • 15. • 了解需求, 確定功能並規劃內容類型 • 想像可以無限,但技術有限 • 尋找 現成模組 或 ⾃自⾏行開發? • 先架構網站功能?先設計介⾯面外觀? 以 Drupal 網站來說:
  • 16. Round2: 設計階段
  • 17. •視覺提供設計好的 PSD •前端負責 HTML 結構設計 •透過 CSS 在網⾴頁上重現樣貌 •靜態圖檔 > (腦補) > 動態網⾴頁
  • 18. • 視覺習慣⽤用靜態 / 平⾯面設計思考 • 畫⾯面不規則 • 字太⻑⾧長跑版 • 網⾴頁是⽅方塊世界 • 前端有責任溝通引導,彼此合作
  • 19. 那些 mockup 沒告訴 你的事 http://www.slideshare.net/adamp3wang/mockupwebconftw-2013
  • 20. F2E 是良⼼心事業 • HTML 語意標記 • CSS / JS 模組化 • 瀏覽器差異:畫⾯面呈現? 功能實作? • 網⾴頁易⽤用性 • 前端執⾏行效能
  • 21. • 選擇1. 先將 PSD 檔案轉換成 HTML / CSS,再轉換⾄至 Drupal 版型 (⾃自⾏行開發) • 選擇2. 選⽤用⼀一個 Drupal 現成版型,然後 以其為基礎做開發 以 Drupal 網站來說:
  • 22. • Zen ( https://drupal.org/project/zen ) • Basic ( https://drupal.org/project/basic ) • Bootstrap ( https://drupal.org/project/bootstrap ) • Framework ( https://drupal.org/project/framework ) Drupal 基本版型:
  • 23. Round 3-1: 前端與後端合作
  • 24. •溝通⼀一樣很重要 •重點:減少前 / 後端雙⽅方耦合 •後端 負責提供內容 (資料) •前端 將資料放在正確的地⽅方
  • 25. 差異?
  • 26. • API 定義先⾏行 ex: JSON / XML / HTML ... • 後端功能完成以前,前端可以就資料 結構⾃自⾏行模擬 • 假資料轉換成正式資料時仍需測試
  • 27. 前後端溝通不良,有資料卻⽤用不到 Source: 台灣零時政府 / g0v.tw - http://blog.g0v.tw/post/40755632158
  • 28. 前端不必理解後端實作細節 定義好溝通管道,同樣可以順利取得資料 Source: 台灣零時政府 / g0v.tw - http://blog.g0v.tw/post/40755632158
  • 29. • 前端可不必完全瞭解後端資料存取細 節,只要事先約定好資料取得⽅方式, 以及對應格式即可。 • 前端越熟悉後端開發語⾔言及流程,對 專案開發及後續除錯越有幫助。
  • 30. 如果你開發過 Drupal 網站,應該不陌⽣生 ( Drupal WSOD,White Screen Of Death ) 不⽤用國防布,也完全沒有畫⾯面
  • 31. • 模組開發,除錯,需要前端協助動態效果 (前端需要基本 PHP 技能) • 前端理解 Drupal Theme hooks 來處理版型 • 了解如何利⽤用 PHP 來解析 XML / JSON 等 資料格式,並輸出 HTML • 15 % 後端, 85 % 前端 以 Drupal 網站來說:
  • 32. Round 3-2: 前端團隊之間合作
  • 33. OOCSS, SMACSS
  • 34. • 制定團隊規範,共同遵守 • 良好的 Coding 習慣 • CSS / JS 模組化
  • 35. • 善⽤用⼯工具可弭平成員間技術落差 • LESS / SASS / Compass ... • CoffeeScript / LiveScript ... • 版本控管
  • 36. • CSS 筆記、建議與指導⽅方針總整理 https://github.com/doggy8088/CSS-Guidelines • 各式 Web 前端開發⼯工具整理 https://github.com/doggy8088/frontend-tools
  • 37. Source: http://www.flickr.com/photos/kejun/3114605967/sizes/o/
  • 38. 可是 瑞凡
  • 39. 技術以外的問題 才是最棘⼿手的
  • 40. 團隊合作最困難的不是技術 ⽽而是⼈人與⼈人之間的溝通
  • 41. 技術可以透過訓練成⻑⾧長 團隊默契只能倚賴時間磨合
  • 42. 視覺設計多關⼼心 網⾴頁與平⾯面設計之間的差異
  • 43. 前端多與企劃、設計及後端 溝通彼此之間的想法
  • 44. 團隊成員專注在各⾃自領域 透過⼀一次次合作的⼩小成功 彼此尊重,取得信任
  • 45. Source: http://www.slideshare.net/lis186/20130112webconf
  • 46. 「 讓我們真⼼心相愛吧 >_^ 」 - 程式與設計如何真⼼心合作, HitomiYang @ WebConf 2013
  • 47. kuro Hsu kurotanshi [at] gmail.com http://kuro.tw http://facebook.com/kurotanshi Thanks!