F2E Evolution

F2E EVOLUTION
Be a Growing and Lead F2E!
Speaker: @josephj
Image Source:

•蔣定宇 / 啊嗚 / josephj
•部落格：這樣做就對了
•2008 年完成跑步環島
•熱血前端：經驗 9 年
關於講者
F2E, Evangelist
F2E Manager
Lead F2E

「我們正在尋找 F2E Lead」
關於此主題
「我們想要成立 F2E Team，該怎麼做」
「因為我們沒有 F2E Lead，所以...」
「我們正在尋找第一個且最重要的 F2E Lead」
「前端部門剛成立，但很頭痛如何分工」
JSDC 後、一直聽到的聲音

「我們正在尋找 F2E Lead」
關於此主題
「我們想要成立 F2E Team，該怎麼做」
「因為我們沒有 F2E Lead，所以...」
「我們正在尋找第一個且最重要的 F2E Lead」
「前端部門剛成立，但很頭痛如何分工」
JSDC 後、一直聽到的聲音
前端已經成為網路產業不可或缺的一環
除了會寫相關程式、更需要能帶領前端團隊的人才
只要有心，人人都可以是前端領導！
分享自己在前端 9 年的方法論、核心技術
希望能協助更多公司成立前端團隊
也能協助更多的人才往 Lead 的方向成長

• Form a Team  
閒聊團隊的組成、常見的分工方式
• Modular Development 
個人認為最關鍵的前端開發模式：模組化
• Be Faster  
一些提昇開發速度的小訣竅
• Automation  
藉由工具的回饋、持續改善前端代碼
本日課程大綱

Form a Team
成員的天賦與分工合作
Image Source:

老闆 / 創業夥伴
此時什麼都會 (不用精) 的工程師比前端好用許多
工程師 / CTO
You Are Not Gonna Need It
除非產品特殊、剛開始時並不需有前端這麼專業的角色

工作大解放：「為解決困境而雇人」
Image Source: http://www.books.com.tw/products/0010482162

工作大解放：「為解決困境而雇人」
http://www.books.com.tw/products/0010482162
在招聘前端前，請先思考自己的公司 (部門) 的產品
是否真的碰到困境、或者是需要提昇一個 Level 再下此決定
人才能發揮、產品能更好才能創造雙贏

成長到一定規模
解決問題、追求更好時就要導入前端
老闆/PM 美工工程師
   
前端工程視覺設計後端工程
多一個角色、所有人都可在更舒適的分工下工作

導入碰到的困難
有時候導入前端並不是這麼容易
前端工程
視覺設計後端工程
 
 
•不符合設計： 
透過 Peer Review 解決
•納入版本控管： 
前端「工程」師必然得會版本控管
•別讓我改 View： 
假資料就應該放 Controller 或 Presenter
•某方面比較好： 
主管可以主動調配適合的工作、Hire

實際情況
前端團隊每個人天賦都不一樣
JS、Rails 很厲害的前端Lead/CSS/JS/Rails 很平庸的前端
視覺、CSS 很厲害的前端 CSS、JS 很厲害的前端

實際情況
前端團隊每個人天賦都不一樣
JS、Rails 很厲害的前端Lead/CSS/JS/Rails 很平庸的前端
視覺、CSS 很厲害的前端 CSS、JS 很厲害的前端
   依照屬性跟能力分派適合的工作
並一起 Pair 完成自己不熟但有興趣的領域
能順利完成工作、大家也能互相學習、一起成長 
成功的前端團隊必然有此特質

常見 F2E 資源分配的作法

Resource Pool 中央游泳池
不管大小公司，最常見的 F2E 分工模式
專案 1
專案 2
F2E Pool
不會有閒置資源
Image Source: http://projects.ajc.com/gallery/view/travel/cruises/trdisneyap0210/

Dedicated Resource 專人服務
專門在做某個案子或服務的 F2E
重要服務會有自己的 RD, F2E, QA, SE
Image Source: http://www.ﬂickr.com/photos/intranation/160210709/

知識+
電影
⾳音樂通
⾸首⾴頁
部落格
遊戲
拍賣
購物中⼼心
新聞
Manager
曾經同時跑三個專案
Y! US
汽⾞車
Image Source: http://www.ﬂickr.com/photos/bluebeckie/149667476/in/faves-josephj/

不管是 Dedicated 或 Pool，如果都只忙自己的專案
最後必定會發生慘案
一定要有個 Lead
負責組織 Guide、分享、Review、Quality
注意！

實際案例
•由新人負責、跟其他專案成員關在小房間
（沒有其他 F2E）
•View 全部用 JS 組、後端只給 JSON
•不支援 NoJS、沒法上一頁
•重複程式碼非常多，沒人敢大改
•專案結束沒多久，新人離職
•2012 年底，此服務關閉

永遠在我心裡的一句話
“As a team, F2E 的價值究竟在哪裡？”
好不容易培訓一個新人、卻又因制度不健全害了他
Image Source: http://www.ﬂickr.com/photos/missbitter/868761050/in/photostream/

開始去思考「團隊」這件事
• Code Convention 團隊規範
• Code Review 定期 Review 程式碼
• Checklist 上線前需達成的清單
開始非常重視一致性、維護性

規範一些最基礎的小事情
一致性、像同一個人寫的
https://github.com/josephj/f2e-styleguide

Code Review
Image Source: http://programmers.stackexchange.com/questions/170211/php-data-access-layer
程式碼接受所有人檢驗、或用 GitHub Pull Request

Pair Programming
Image Source: http://en.wikipedia.org/wiki/File:Pair_programming_1.jpg
一個人寫程式、一個人當觀察員

常見的產品開發流程
以及文件

BDD 
商業企劃書
Wireframe 
框線圖
Spec 
規格書
Design Guide 
設計標準
User Story 
使用者故事
User Flow 
使用流程
Mockup 
PSD 圖檔
HTML Pages 
JS/CSS/HTML
EDD 
工程設計文件
Test Case 
測試範例
Website 
完整網站
Deploy Script 
佈署文件與程式
Site Map 
網站地圖
PM
ID
Producer
VD
F2E
RD
QA
產品文件
多如牛毛
確保跨 Team 產出的品質
Balsamiq
Axure

單一小團隊：用溝通、往返確認來減少文件、增加速度
小公司：手繪 Wireframe 就解決！
From Wireframe to Interface (by Derek Clark)

回顧 Form a Team
•你真的需要 F2E 嗎？導入 F2E 的改變？
•資源共享、或專屬於某產品（Team）？
•應建立真正的「團隊」、團隊機制
•產品開發流程

回顧 Form a Team
•你真的需要 F2E 嗎？導入 F2E 的改變？
•資源共享、或專屬於某產品（Team）？
•應建立真正的「團隊」、團隊機制
•產品開發流程
對於 Form a Team 有任何問題嗎？
Q&A Break

Modularization
模組化開發
Image Source: http://intersis.com/features.html

看過太多 CSS 爆炸的慘案
例如：不知道樣式該設定到哪支檔案、修 A 壞 B
或者是一支 JS 會影響全域、有加載順序的問題...
網站開發已經變得非常複雜
過去以「頁」為單位來開發、該改為用「模組」為單位
看似很笨又靈散的作法、但卻可解決上面所有問題
你是否也有相同的困擾？

頁是由許多模組構成
Image Source: http://intersis.com/features.html

<div id=”nav”>
<div class=“mod-content”>
<div class=”hd”> 
<h2>標題</h2> 
</div> 
<div class=”bd”>
<p>內⽂文</p>
</div>
<div class=”ft”>
<a href=”...”>更多... </a>
</div>
</div>
</div>
<div id=”nav”>
<div class=“mod-content”>
<div class=”hd”> 
<h2>標題</h2> 
</div> 
<div class=”bd”>
<p>內⽂文</p>
</div>
<div class=”ft”>
<a href=”...”>更多... </a>
</div>
</div>
</div>
id 代表一個模組，
不能重複使用。
.hd, .bd, .ft 代表
模組的頭、身體、尾巴
標準模組結構
考慮不支援 box-sizing
的瀏覽器。

<div id="reports">
<div class="mod-content">
<div class="hd">
<h3 class="title small">Reports</h3>
</div>
<div class="bd">
<form>
<div class="bar bar-inset">
...
</div>
<table class="table">
...
</table>
</form>
</div>
</div>
</div>
.bar
table
#reports
position: relative
.bar
background: #eaeef4
table th
text-shadow: 0 1px 0 #fff
font-weight: bold
_report.html
_report.css.sass
檔案小，幾乎不會超過 100 行命名空間，樣式不可能會互相打架
_report.js.coffee
define (require) ->
!
# Stops execution if no matched element.
$view = $('#reports')
return unless $view.length
!
####################
# Shared Variables
####################
$form = $view.find('form')
!
####################
# Bind Events
####################
$form
.on 'change', '.report-check', ->
ID 存在才會執行
#reports

頁面層級：合併零散的模組

更深入 CSS/JS 載入
剛剛以 Rails 的 Asset Pipeline + RequireJS 為範例
你也可以用 grunt-usemin 來解決 (Yeoman 內建)
比較複雜的架構就請參考我的另兩份投影片了

FUSE/Minify/usemin
• FUSE：從 Yahoo! 學習到的工具 (開發機安裝、配合 build) 
XML Configuration 
http://www.eztable.com/mini?module=index&type=js
• https://github.com/josephj/mini (php)
• Minify：YUI 動態模組載入的作法 (開發與線上都要安裝) 
http://www.eztable.com/min/?f=a.js,b.js,c.js
• https://github.com/rgrove/combohandler (node.js)
• https://github.com/mrclay/minify (php)
• grunt-usemin：Yeoman 內建工具 (build 時 parse HTML 標籤)
還是補充一下，解決 CSS/JS 請求數量的一些作法！

<script src="js/app.js"></script>
<script src="js/controllers/thing-controller.js"></script>

快速解決 CSS/JS 請求數量問題
Google Page Speed
• 自動圖檔最佳化：不需要自己處理圖檔最佳化的問題
• 自動壓縮 HTML/JS/CSS：不需要自己處理合併、
JS/CSS 甚至可以設定直接內嵌在頁面上。
• 自動加入 Google Analytics
安裝 Apache/nginx module 即可用！
不想改變架構時的懶人速成法
http://modpagespeed.com/
即使未來需自己處理載入方式、還是可留下部分好用功能

模組化開發有什麼好處
• 維護性：CSS/JS 該改哪邊，不再有灰色空間
• 沙箱理論：大幅減少與別人程式衝突的機會
• 好上手：新人只要專注小區塊的開發
• 可測試：未來導入測試較簡單（區塊小）
• 擴充性：多國語系、線上動態編輯、模組間訊息廣播、
Panel，甚至臉書的 Big Pipe 架構都可以基於模組架構
改善導入。
Image Source: http://thefreshnes.com/blog/uncategorized/tigers-ﬂy/

模組化開發有什麼好處
• 維護性：CSS/JS 該改哪邊，不再有灰色空間
• 沙箱理論：大幅減少與別人程式衝突的機會
• 好上手：新人只要專注小區塊的開發
• 可測試：未來導入測試較簡單（區塊小）
• 擴充性：多國語系、線上動態編輯、模組間訊息廣播、
Panel，甚至臉書的 Big Pipe 架構都可以基於模組架構
改善導入。
對於模組化有任何問題嗎？
Q&A Break

Be Faster
快速開發
Image Source: http://www.ﬂickr.com/photos/behindthesteeringwheel/9466714943

Lesson From Rails
• Asset Pipeline + Precompile 
框架內建 HAML, Compass, CoffeeScript、部署時壓縮及最⼩小化 
（替代⽅方案：模組加載策略、Yeoman, FireApp）
• UJS (Unostructive JavaScript) 
強⼤大 data attributes（直接安裝 jquery-ujs）
• Helper 
看似無意義的標籤產⽣生⽅方法，但與 Ruby 配合、明顯讓程式更好維護（替
代⽅方案：⾃自⼰己寫？）
• Bundler 
強⼤大的套件管理，不需⼿手動下載或升級（替代⽅方案：Composer, Bower）

開發環境
線上環境（經過 Precompile）
Asset Pipeline + Precompile
每個網站都有一樣的需求，為什麼不能像 Rails 一樣簡單？

表明用 AJAX 送出，不需再寫 $.ajax 做手動送出
UJS = 少寫 $.ajax

點選後會先跳視窗、顯示訊息
確認後會改 disabled、內容會變
每個 RailsDev 都知道的基礎、你怎麼做？
UJS = 善用 data 屬性

<?php if ( ! $is_owner && $viewer_uid) : ?>
<?php echo modules::run("my/_profile_sharing"); ?>
<?php endif; ?>
<%= render "my/profile_sharing" if (!$is_owner && $viewer_uid) %>
<?php if (count($items) > 0): ?>
<ul class="student-list">
...
</ul>
<?php endif; ?>
<%= content_tag :ul, :class => "student-list" do %>
...
<% end if $items.count > 0 %>
積少成多下來真的差很大
Syntax Sugar & Helper

Lesson From Bootstrap
• Reduce to write CSS and JavaScript 
⼀一種不錯的開發模式：只要加 class 與 data attribute 就可
以指定樣式與 JavaScript
• Make Icon Reusable 
把常⽤用裝飾性的背景圖、採⽤用 glyphicons 的作法重複利⽤用
• Make Your Own Bootstrap 
重新整理出⼀一個套件，就可以迅速套⽤用到多個服務上。

不用每次都寫重複的 CSS
<table class="table table-striped"></table>
把樣式設定好，連不懂 CSS 的 RD 都可以快速套用！

<div id="classes" class="slider" data-ride="slider" data-target="#foo .bd">
<div class="bd">
<section>
<div class="pagination">
<a href="#" data-slide-url="?page=1" data-slide-direction="prev"></a>
<a href="#" data-slide-url="?page=3" data-slide-direction="next"></a>
</div>
</section>
</div>
不用寫 JS - 範例 1
Slider - 自製可以左右換頁的控制項

<div class="cascade">A very long text... </div>
<a class="cascade-toggler mini" href=“javascript:void(0);"
data-replacement="Collapse Message"  
data-target=".cascade"
data-toggle="cascade">
<i class="icon-chevron-right"></i>
<span class="tip-text">Continue Reading</span>
</a>
不用寫 JS - 範例 1
Cascade - 內容收折區塊

不用寫 CSS 背景
<i class="kbm kbm-report"></i>
使用快、較可避免重複圖檔出現、或 Sprites 重複壓縮的問題
學習 glyphicons，即使沒字型檔、相同方式仍可用於背景圖！
不⽤用改 CSS 就可設定裝飾性背景圖檔

很多時候已經不再需要視覺
整理出套件、套用到所有產品
F2E 或甚至 RD 可以自己套版

整理出套件、套用到所有產品
keyb.com intersis.com
即使每個產品樣式不一，也非常有助於頁面的樣式趨於一致
抽出了此客製化 BS 套件，套樣式跟飛的一樣 :D

Lesson From Preprocessors
• Write Less, Do More 
工程師一天能產出的行數是固定的，但 Coffee 平均可減少 1/3+ 的程式碼。
• More Semantic 
Coffee 的寫法與思路較為一致、閱讀也比較輕鬆、有助於維護性。
• Less Duplication 
SASS 的 mixin 與 nested 可以減少撰寫與維護許多不必要的程式碼。
• Use *.sass and 2 Spaces Indentation 
習慣後能夠看的程式碼變多了

Rethink Best Practices
• Mustache.js, Handlebars.js? 
像 Mustache.js 與 Handlebars.js 這種
Templating 用 JSON Object Literal 組 HTML 真
的是最好的方法嗎？
• normalize.css? 
normalize.css 真的比 reset.css 利於網站開發嗎？

前端樣板系統真的非用不可？
•前後端很難共用
•相同邏輯前後端各維護一份
•好用的 Helper 無法使用
•翻譯字串的問題
•Controller 得區分輸出 JSON 或 View
非 Node.JS 及 AngularJS、以內容為主的網站

用前端樣板來處理真的會很煩
一大堆 Activity 組樣板會想殺人吧 XD
數字全部得更新
其他不用動

傳統方法簡單多了
一大堆 Activity 組樣板會想殺人吧 XD
數字全部得更新
其他不用動
$(document).on 'ajax:success', (e, html) ->
!
# 回傳的是⼀一個沒有 JS+CSS+多餘標籤的網⾴頁
doc = $(html)
!
# 取得並更新通知訊息模組 .bd
html = doc.find('#activity-list .bd').html()
$('#activity-list .bd').html(html)
!
# 取得並更新篩選器部分內容 fieldset.types
html = doc.find('#activity-filter fieldset.types').html()
$('#activity-filter fieldset.types').html(html)

normalize.css 比 reset.css 好？
網路上所有文章都說後起之秀 normalize.css 好
但操作過後還是覺得 reset.css 來得快、方便
做網站你不會希望標題大小不一致、或 li 前面有 disc
我認為 normalize.css 只能用在像部落格內文的部份
不適合用在較具規模的網站

快速回顧：Be Faster
• Lesson From Rails 
Asset Pipeline, UJS：學習站在巨⼈人肩膀上開發！
• Lesson From Bootstrap 
好模式：只需寫 HTML、⼤大幅減少 CSS/JS 的撰寫時間！
• Lesson From Preprocessors 
寫少⼀一點，反⽽而增加許多閱讀性及維護性！
• Rethink Best Practice 
別⼈人說讚的，不⼀一定是真的。

快速回顧：Be Faster
• Lesson From Rails 
Asset Pipeline, UJS：學習站在巨⼈人肩膀上開發！
• Lesson From Bootstrap 
好模式：只需寫 HTML、⼤大幅減少 CSS/JS 的撰寫時間！
• Lesson From Preprocessors 
寫少⼀一點，反⽽而增加許多閱讀性及維護性！
• Rethink Best Practice 
別⼈人說讚的，不⼀一定是真的。
Q&A Break
對於「快速開發」有問題或回饋嗎？

Automation
自動化
Image Source: http://www.exacttarget.com/blog/marketing-automation-infographic/

工程師：寫程式只是基本

工程師、寫程式只是基本
不再寫 HTML/CSS/JS
用編譯的如何？
JavaScript MVC
模組化與載入機制
响應式設計
工程師也能有好樣式
命令行的瀏覽器
用 JS 寫後端
越來越應用程式化
TDD 測試框架
重點如何在過程中得到「回饋」、而不斷地去改進？
這些技術你會多少其實不是重點
任何技術都是碰久了就會

git commit
post-receive
trigger
CI 
持續集成系統
Hosting 
伺服器代管
Log Tracking 
記錄檔查詢系統
Error Tracking 
程式錯誤追蹤系統
Quality 
代碼品質檢測系統
Monitoring 
伺服器監控系統
Notify 
通知系統
Issue Tracking 
工作排程系統
VCS 
中央版本控管系統
deployreport
report
report
report
report
trigger
Testing 
跨系統瀏覽器測試
人沒辦法隨時給你回饋、系統可以

感覺弄好這些架構要花很多時間
問題是，真的有這麼困難嗎？

git push
post-receive
trigger
CI 
持續集成系統
Hosting 
伺服器代管
Log Tracking 
記錄檔查詢系統
Error Tracking 
程式錯誤追蹤系統
Quality 
代碼品質檢測系統
Monitoring 
伺服器監控系統
Notify 
通知系統
Issue Tracking 
工作排程系統
VCS 
中央版本控管系統
deployreport
report
report
report
report
trigger
Testing 
跨系統瀏覽器測試
其實一個下午就可以全部弄好

而且選擇多到讓人眼花撩亂
https://addons.heroku.com/

即時掌握其他系統回報的訊息
Push/Deploy 成功、JS 錯誤、品質下降、測試結果....

CI 持續整合系統
自動化測試的引擎，工程團隊一定要有

自動檢查程式碼品質
用客觀的標準幫你評斷 JS 寫的好不好

不錯，修掉兩個 Lint 問題
原來是有兩個一模一樣的 JS
品質居然從 A 掉到 F
給我抓出來打屁股！
異常狀況
即時回報

JS 有錯第一時間知道、開票
通常只會對 Staging, Production 做偵測

在各種環境做單元與行為測試
當然可以藉由 CI 去跑自動化測試、也可做本地端測試

CSS Regression Testing
製作一些內容不會變動的頁面 (baseline)
套用最新的 CSS
納入 CI 持續做差異化 diff

工程師工具
•無聊
•重複性的
•浪費時間的
藉由工具持續回饋
每次的 Push 都會得到一些回饋
（當然最好是 Commit 前就得到回饋、雙重把關）
身為 Lead 一定要不斷地改善流程、更自動化
可專⼼心在核⼼心開發
Q&A Break
Image Source: http://www.slideshare.net/ariyahidayat/javascript-parser-infrastructure-for-code-quality-analysis

工程師工具
•無聊
•重複性的
•浪費時間的
藉由工具持續回饋
每次的 Push 都會得到一些回饋
（當然最好是 Commit 前就得到回饋、雙重把關）
身為 Lead 一定要不斷地改善流程、更自動化
可專⼼心在核⼼心開發
讓 RD 在最棒的環境下開發
能省下可觀的時間、大家也開心
Q&A Break
對於「自動化」有問題或回饋嗎？

Before Ending…
Be a Growing and Lead F2E!

帶領提昇 UI 的整體水平
台灣比較少看到國外乾淨、大量應用 CSS3 的 UI
http://dribbble.com/

當 Lead 很辛苦、也很有趣
• 對老闆：想辦法用有限的資源把任務達成
• 對員工：傾聽意見、指派合適的任務、協助成長
• 像橋一樣，需要有效溝通。也像天秤一樣需取得平衡、
決定輕重緩急、解決問題
• 不斷地改善流程、讓團隊運行地更好
Coding 技巧不再是最重要的事，該關心的是...
不是管理職也可用這樣的思維去協助同事、會得到很多！

一定會得到正面的回饋
平常的努力都有被大家看到
這樣就值得了！

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

F2E Evolution

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (19)

Mehr von Joseph Chiang

Mehr von Joseph Chiang (20)

F2E Evolution