More Related Content More from Joseph Chiang (20) F2E Evolution2. •蔣定宇 / 啊嗚 / josephj
•部落格:這樣做就對了
•2008 年完成跑步環島
•熱血前端:經驗 9 年
關於講者
F2E, Evangelist
F2E Manager
Lead F2E
4. 「我們正在尋找 F2E Lead」
關於此主題
「我們想要成立 F2E Team,該怎麼做」
「因為我們沒有 F2E Lead,所以...」
「我們正在尋找第一個且最重要的 F2E Lead」
「前端部門剛成立,但很頭痛如何分工」
JSDC 後、一直聽到的聲音
前端已經成為網路產業不可或缺的一環
除了會寫相關程式、更需要能帶領前端團隊的人才
只要有心,人人都可以是前端領導!
分享自己在前端 9 年的方法論、核心技術
希望能協助更多公司成立前端團隊
也能協助更多的人才往 Lead 的方向成長
5. • Form a Team
閒聊團隊的組成、常見的分工方式
• Modular Development
個人認為最關鍵的前端開發模式:模組化
• Be Faster
一些提昇開發速度的小訣竅
• Automation
藉由工具的回饋、持續改善前端代碼
本日課程大綱
7. 老闆 / 創業夥伴
此時什麼都會 (不用精) 的工程師比前端好用許多
工程師 / CTO
You Are Not Gonna Need It
除非產品特殊、剛開始時並不需有前端這麼專業的角色
8. You Are Not Gonna Need It
工作大解放:「為解決困境而雇人」
Image Source: http://www.books.com.tw/products/0010482162
9. You Are Not Gonna Need It
工作大解放:「為解決困境而雇人」
http://www.books.com.tw/products/0010482162
在招聘前端前,請先思考自己的公司 (部門) 的產品
是否真的碰到困境、或者是需要提昇一個 Level 再下此決定
人才能發揮、產品能更好才能創造雙贏
18. 不管是 Dedicated 或 Pool,如果都只忙自己的專案
最後必定會發生慘案
一定要有個 Lead
負責組織 Guide、分享、Review、Quality
注意!
20. 永遠在我心裡的一句話
“As a team, F2E 的價值究竟在哪裡?”
好不容易培訓一個新人、卻又因制度不健全害了他
Image Source: http://www.flickr.com/photos/missbitter/868761050/in/photostream/
23. Code Review
Image Source: http://programmers.stackexchange.com/questions/170211/php-data-access-layer
程式碼接受所有人檢驗、或用 GitHub Pull Request
28. 回顧 Form a Team
•你真的需要 F2E 嗎?導入 F2E 的改變?
•資源共享、或專屬於某產品(Team)?
•應建立真正的「團隊」、團隊機制
•產品開發流程
29. 回顧 Form a Team
•你真的需要 F2E 嗎?導入 F2E 的改變?
•資源共享、或專屬於某產品(Team)?
•應建立真正的「團隊」、團隊機制
•產品開發流程
對於 Form a Team 有任何問題嗎?
Q&A Break
34. <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
的瀏覽器。
35. <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
37. 更深入 CSS/JS 載入
剛剛以 Rails 的 Asset Pipeline + RequireJS 為範例
你也可以用 grunt-usemin 來解決 (Yeoman 內建)
比較複雜的架構就請參考我的另兩份投影片了
38. 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 請求數量的一些作法!
<!-- build:js js/app.js -->
<script src="js/app.js"></script>
<script src="js/controllers/thing-controller.js"></script>
<!-- endbuild -->
39. 快速解決 CSS/JS 請求數量問題
Google Page Speed
• 自動圖檔最佳化:不需要自己處理圖檔最佳化的問題
• 自動壓縮 HTML/JS/CSS:不需要自己處理合併、
JS/CSS 甚至可以設定直接內嵌在頁面上。
• 自動加入 Google Analytics
安裝 Apache/nginx module 即可用!
不想改變架構時的懶人速成法
http://modpagespeed.com/
即使未來需自己處理載入方式、還是可留下部分好用功能
40. 模組化開發有什麼好處
• 維護性:CSS/JS 該改哪邊,不再有灰色空間
• 沙箱理論:大幅減少與別人程式衝突的機會
• 好上手:新人只要專注小區塊的開發
• 可測試:未來導入測試較簡單(區塊小)
• 擴充性:多國語系、線上動態編輯、模組間訊息廣播、
Panel,甚至臉書的 Big Pipe 架構都可以基於模組架構
改善導入。
Image Source: http://thefreshnes.com/blog/uncategorized/tigers-fly/
41. 模組化開發有什麼好處
• 維護性:CSS/JS 該改哪邊,不再有灰色空間
• 沙箱理論:大幅減少與別人程式衝突的機會
• 好上手:新人只要專注小區塊的開發
• 可測試:未來導入測試較簡單(區塊小)
• 擴充性:多國語系、線上動態編輯、模組間訊息廣播、
Panel,甚至臉書的 Big Pipe 架構都可以基於模組架構
改善導入。
對於模組化有任何問題嗎?
Q&A Break
43. Lesson From Rails
• Asset Pipeline + Precompile
框架內建 HAML, Compass, CoffeeScript、部署時壓縮及最⼩小化
(替代⽅方案:模組加載策略、Yeoman, FireApp)
• UJS (Unostructive JavaScript)
強⼤大 data attributes(直接安裝 jquery-ujs)
• Helper
看似無意義的標籤產⽣生⽅方法,但與 Ruby 配合、明顯讓程式更好維護(替
代⽅方案:⾃自⼰己寫?)
• Bundler
強⼤大的套件管理,不需⼿手動下載或升級(替代⽅方案:Composer, Bower)
47. <?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
48. Lesson From Bootstrap
• Reduce to write CSS and JavaScript
⼀一種不錯的開發模式:只要加 class 與 data attribute 就可
以指定樣式與 JavaScript
• Make Icon Reusable
把常⽤用裝飾性的背景圖、採⽤用 glyphicons 的作法重複利⽤用
• Make Your Own Bootstrap
重新整理出⼀一個套件,就可以迅速套⽤用到多個服務上。
50. <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 - 自製可以左右換頁的控制項
51. <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 - 內容收折區塊
52. 不用寫 CSS 背景
<i class="kbm kbm-report"></i>
使用快、較可避免重複圖檔出現、或 Sprites 重複壓縮的問題
學習 glyphicons,即使沒字型檔、相同方式仍可用於背景圖!
不⽤用改 CSS 就可設定裝飾性背景圖檔
55. Lesson From Preprocessors
• Write Less, Do More
工程師一天能產出的行數是固定的,但 Coffee 平均可減少 1/3+ 的程式碼。
• More Semantic
Coffee 的寫法與思路較為一致、閱讀也比較輕鬆、有助於維護性。
• Less Duplication
SASS 的 mixin 與 nested 可以減少撰寫與維護許多不必要的程式碼。
• Use *.sass and 2 Spaces Indentation
習慣後能夠看的程式碼變多了
56. Rethink Best Practices
• Mustache.js, Handlebars.js?
像 Mustache.js 與 Handlebars.js 這種
Templating 用 JSON Object Literal 組 HTML 真
的是最好的方法嗎?
• normalize.css?
normalize.css 真的比 reset.css 利於網站開發嗎?
59. 傳統方法簡單多了
一大堆 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)
60. normalize.css 比 reset.css 好?
網路上所有文章都說後起之秀 normalize.css 好
但操作過後還是覺得 reset.css 來得快、方便
做網站你不會希望標題大小不一致、或 li 前面有 disc
我認為 normalize.css 只能用在像部落格內文的部份
不適合用在較具規模的網站
61. 快速回顧:Be Faster
• Lesson From Rails
Asset Pipeline, UJS:學習站在巨⼈人肩膀上開發!
• Lesson From Bootstrap
好模式:只需寫 HTML、⼤大幅減少 CSS/JS 的撰寫時間!
• Lesson From Preprocessors
寫少⼀一點,反⽽而增加許多閱讀性及維護性!
• Rethink Best Practice
別⼈人說讚的,不⼀一定是真的。
62. 快速回顧:Be Faster
• Lesson From Rails
Asset Pipeline, UJS:學習站在巨⼈人肩膀上開發!
• Lesson From Bootstrap
好模式:只需寫 HTML、⼤大幅減少 CSS/JS 的撰寫時間!
• Lesson From Preprocessors
寫少⼀一點,反⽽而增加許多閱讀性及維護性!
• Rethink Best Practice
別⼈人說讚的,不⼀一定是真的。
Q&A Break
對於「快速開發」有問題或回饋嗎?
81. 當 Lead 很辛苦、也很有趣
• 對老闆:想辦法用有限的資源把任務達成
• 對員工:傾聽意見、指派合適的任務、協助成長
• 像橋一樣,需要有效溝通。也像天秤一樣需取得平衡、
決定輕重緩急、解決問題
• 不斷地改善流程、讓團隊運行地更好
Coding 技巧不再是最重要的事,該關心的是...
不是管理職也可用這樣的思維去協助同事、會得到很多!
84. Thank you!
• GitHub - josephj
• Facebook - 蔣定宇
• Slideshare - josephj
• Linkedin - josephj6802
聯繫我