• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
[COSCUP 2013] 前端工程師如何與團隊合作
 

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

on

  • 4,614 views

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

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

Statistics

Views

Total Views
4,614
Views on SlideShare
4,597
Embed Views
17

Actions

Likes
31
Downloads
0
Comments
1

3 Embeds 17

http://www.plurk.com 13
http://www.linkedin.com 3
https://cloudup.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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