f2e evolution
DESCRIPTION
Share my 9 years front-end experience and core methodologies of building and leading front-end teams.TRANSCRIPT
![Page 1: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/1.jpg)
F2E EVOLUTIONBe a Growing and Lead F2E!
Speaker: @josephj
Image Source:
![Page 2: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/2.jpg)
•蔣定宇 / 啊嗚 / josephj
•部落格:這樣做就對了
•2008 年完成跑步環島
•熱血前端:經驗 9 年
關於講者
F2E, Evangelist
F2E Manager
Lead F2E
![Page 3: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/3.jpg)
「我們正在尋找 F2E Lead」
關於此主題
「我們想要成立 F2E Team,該怎麼做」
「因為我們沒有 F2E Lead,所以...」
「我們正在尋找第一個且最重要的 F2E Lead」
「前端部門剛成立,但很頭痛如何分工」
JSDC 後、一直聽到的聲音
![Page 4: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/4.jpg)
「我們正在尋找 F2E Lead」
關於此主題
「我們想要成立 F2E Team,該怎麼做」
「因為我們沒有 F2E Lead,所以...」
「我們正在尋找第一個且最重要的 F2E Lead」
「前端部門剛成立,但很頭痛如何分工」
JSDC 後、一直聽到的聲音
前端已經成為網路產業不可或缺的一環
除了會寫相關程式、更需要能帶領前端團隊的人才
只要有心,人人都可以是前端領導!
分享自己在前端 9 年的方法論、核心技術
希望能協助更多公司成立前端團隊
也能協助更多的人才往 Lead 的方向成長
![Page 5: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/5.jpg)
• Form a Team 閒聊團隊的組成、常見的分工方式
• Modular Development個人認為最關鍵的前端開發模式:模組化
• Be Faster 一些提昇開發速度的小訣竅
• Automation 藉由工具的回饋、持續改善前端代碼
本日課程大綱
![Page 7: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/7.jpg)
老闆 / 創業夥伴
此時什麼都會 (不用精) 的工程師比前端好用許多
工程師 / CTO
You Are Not Gonna Need It除非產品特殊、剛開始時並不需有前端這麼專業的角色
![Page 8: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/8.jpg)
You Are Not Gonna Need It工作大解放:「為解決困境而雇人」
Image Source: http://www.books.com.tw/products/0010482162
![Page 9: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/9.jpg)
You Are Not Gonna Need It工作大解放:「為解決困境而雇人」
http://www.books.com.tw/products/0010482162
在招聘前端前,請先思考自己的公司 (部門) 的產品
是否真的碰到困境、或者是需要提昇一個 Level 再下此決定
人才能發揮、產品能更好才能創造雙贏
![Page 10: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/10.jpg)
成長到一定規模解決問題、追求更好時就要導入前端
老闆/PM 美工 工程師
前端工程視覺設計 後端工程
多一個角色、所有人都可在更舒適的分工下工作
![Page 11: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/11.jpg)
導入碰到的困難有時候導入前端並不是這麼容易
前端工程
視覺設計 後端工程
•不符合設計:透過 Peer Review 解決
•納入版本控管:前端「工程」師必然得會版本控管
•別讓我改 View:假資料就應該放 Controller 或 Presenter
•某方面比較好:
主管可以主動調配適合的工作、Hire
![Page 12: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/12.jpg)
實際情況前端團隊每個人天賦都不一樣
JS、Rails 很厲害的前端Lead/CSS/JS/Rails 很平庸的前端
視覺、CSS 很厲害的前端 CSS、JS 很厲害的前端
![Page 13: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/13.jpg)
實際情況前端團隊每個人天賦都不一樣
JS、Rails 很厲害的前端Lead/CSS/JS/Rails 很平庸的前端
視覺、CSS 很厲害的前端 CSS、JS 很厲害的前端
依照屬性跟能力分派適合的工作
並一起 Pair 完成自己不熟但有興趣的領域
能順利完成工作、大家也能互相學習、一起成長成功的前端團隊必然有此特質
![Page 14: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/14.jpg)
常見 F2E 資源分配的作法
![Page 15: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/15.jpg)
Resource Pool 中央游泳池不管大小公司,最常見的 F2E 分工模式
專案 1
專案 2
F2E Pool 不會有閒置資源
Image Source: http://projects.ajc.com/gallery/view/travel/cruises/trdisneyap0210/
![Page 16: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/16.jpg)
Dedicated Resource 專人服務專門在做某個案子或服務的 F2E
重要服務會有自己的 RD, F2E, QA, SE
Image Source: http://www.flickr.com/photos/intranation/160210709/
![Page 17: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/17.jpg)
知識+
電影
⾳音樂通
⾸首⾴頁部落格
遊戲拍賣
購物中⼼心新聞
Manager
曾經同時跑三個專案
Y! US
汽⾞車
Image Source: http://www.flickr.com/photos/bluebeckie/149667476/in/faves-josephj/
![Page 18: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/18.jpg)
不管是 Dedicated 或 Pool,如果都只忙自己的專案
最後必定會發生慘案
一定要有個 Lead
負責組織 Guide、分享、Review、Quality
注意!
![Page 19: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/19.jpg)
實際案例
•由新人負責、跟其他專案成員關在小房間
(沒有其他 F2E)
•View 全部用 JS 組、後端只給 JSON
•不支援 NoJS、沒法上一頁
•重複程式碼非常多,沒人敢大改
•專案結束沒多久,新人離職
•2012 年底,此服務關閉
![Page 20: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/20.jpg)
永遠在我心裡的一句話
“As a team, F2E 的價值究竟在哪裡?”
好不容易培訓一個新人、卻又因制度不健全害了他
Image Source: http://www.flickr.com/photos/missbitter/868761050/in/photostream/
![Page 21: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/21.jpg)
開始去思考「團隊」這件事
• Code Convention 團隊規範
• Code Review 定期 Review 程式碼
• Checklist 上線前需達成的清單
開始非常重視一致性、維護性
![Page 22: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/22.jpg)
規範一些最基礎的小事情
一致性、像同一個人寫的
https://github.com/josephj/f2e-styleguide
![Page 23: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/23.jpg)
Code Review
Image Source: http://programmers.stackexchange.com/questions/170211/php-data-access-layer
程式碼接受所有人檢驗、或用 GitHub Pull Request
![Page 24: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/24.jpg)
Pair Programming
Image Source: http://en.wikipedia.org/wiki/File:Pair_programming_1.jpg
一個人寫程式、一個人當觀察員
![Page 25: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/25.jpg)
常見的產品開發流程以及文件
![Page 26: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/26.jpg)
BDD商業企劃書
Wireframe 框線圖
Spec規格書
Design Guide設計標準
User Story使用者故事
User Flow使用流程
MockupPSD 圖檔
HTML PagesJS/CSS/HTML
EDD工程設計文件
Test Case測試範例
Website完整網站
Deploy Script佈署文件與程式
Site Map網站地圖
PM
ID
Producer
VD
F2E
RD
QA產品文件多如牛毛
確保跨 Team 產出的品質
Balsamiq
Axure
![Page 27: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/27.jpg)
單一小團隊:用溝通、往返確認來減少文件、增加速度
小公司:手繪 Wireframe 就解決!
From Wireframe to Interface (by Derek Clark)
![Page 28: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/28.jpg)
回顧 Form a Team
•你真的需要 F2E 嗎?導入 F2E 的改變?
•資源共享、或專屬於某產品(Team)?
•應建立真正的「團隊」、團隊機制
•產品開發流程
![Page 29: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/29.jpg)
回顧 Form a Team
•你真的需要 F2E 嗎?導入 F2E 的改變?
•資源共享、或專屬於某產品(Team)?
•應建立真正的「團隊」、團隊機制
•產品開發流程
對於 Form a Team 有任何問題嗎?
Q&A Break
![Page 30: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/30.jpg)
Modularization模組化開發
Image Source: http://intersis.com/features.html
![Page 31: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/31.jpg)
看過太多 CSS 爆炸的慘案
例如:不知道樣式該設定到哪支檔案、修 A 壞 B
或者是一支 JS 會影響全域、有加載順序的問題...
網站開發已經變得非常複雜
過去以「頁」為單位來開發、該改為用「模組」為單位
看似很笨又靈散的作法、但卻可解決上面所有問題
你是否也有相同的困擾?
![Page 34: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/34.jpg)
<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
的瀏覽器。
![Page 35: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/35.jpg)
<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>
.bartable
#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
![Page 36: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/36.jpg)
頁面層級:合併零散的模組
![Page 37: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/37.jpg)
更深入 CSS/JS 載入剛剛以 Rails 的 Asset Pipeline + RequireJS 為範例
你也可以用 grunt-usemin 來解決 (Yeoman 內建)
比較複雜的架構就請參考我的另兩份投影片了
![Page 38: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/38.jpg)
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 -->
![Page 39: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/39.jpg)
快速解決 CSS/JS 請求數量問題
Google Page Speed
• 自動圖檔最佳化:不需要自己處理圖檔最佳化的問題
• 自動壓縮 HTML/JS/CSS:不需要自己處理合併、
JS/CSS 甚至可以設定直接內嵌在頁面上。
• 自動加入 Google Analytics
安裝 Apache/nginx module 即可用!
不想改變架構時的懶人速成法
http://modpagespeed.com/
即使未來需自己處理載入方式、還是可留下部分好用功能
![Page 40: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/40.jpg)
模組化開發有什麼好處• 維護性:CSS/JS 該改哪邊,不再有灰色空間
• 沙箱理論:大幅減少與別人程式衝突的機會
• 好上手:新人只要專注小區塊的開發
• 可測試:未來導入測試較簡單(區塊小)
• 擴充性:多國語系、線上動態編輯、模組間訊息廣播、
Panel,甚至臉書的 Big Pipe 架構都可以基於模組架構
改善導入。
Image Source: http://thefreshnes.com/blog/uncategorized/tigers-fly/
![Page 41: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/41.jpg)
模組化開發有什麼好處• 維護性:CSS/JS 該改哪邊,不再有灰色空間
• 沙箱理論:大幅減少與別人程式衝突的機會
• 好上手:新人只要專注小區塊的開發
• 可測試:未來導入測試較簡單(區塊小)
• 擴充性:多國語系、線上動態編輯、模組間訊息廣播、
Panel,甚至臉書的 Big Pipe 架構都可以基於模組架構
改善導入。
對於模組化有任何問題嗎?
Q&A Break
![Page 42: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/42.jpg)
Be Faster快速開發
Image Source: http://www.flickr.com/photos/behindthesteeringwheel/9466714943
![Page 43: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/43.jpg)
Lesson From Rails• Asset Pipeline + Precompile框架內建 HAML, Compass, CoffeeScript、部署時壓縮及最⼩小化(替代⽅方案:模組加載策略、Yeoman, FireApp)
• UJS (Unostructive JavaScript)強⼤大 data attributes(直接安裝 jquery-ujs)
• Helper看似無意義的標籤產⽣生⽅方法,但與 Ruby 配合、明顯讓程式更好維護(替代⽅方案:⾃自⼰己寫?)
• Bundler 強⼤大的套件管理,不需⼿手動下載或升級(替代⽅方案:Composer, Bower)
![Page 44: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/44.jpg)
開發環境
線上環境(經過 Precompile)
Asset Pipeline + Precompile
每個網站都有一樣的需求,為什麼不能像 Rails 一樣簡單?
![Page 45: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/45.jpg)
表明用 AJAX 送出,不需再寫 $.ajax 做手動送出
UJS = 少寫 $.ajax
![Page 46: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/46.jpg)
點選後會先跳視窗、顯示訊息
確認後會改 disabled、內容會變
每個 RailsDev 都知道的基礎、你怎麼做?
UJS = 善用 data 屬性
![Page 47: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/47.jpg)
<?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
![Page 48: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/48.jpg)
Lesson From Bootstrap• Reduce to write CSS and JavaScript⼀一種不錯的開發模式:只要加 class 與 data attribute 就可以指定樣式與 JavaScript
• Make Icon Reusable 把常⽤用裝飾性的背景圖、採⽤用 glyphicons 的作法重複利⽤用
• Make Your Own Bootstrap重新整理出⼀一個套件,就可以迅速套⽤用到多個服務上。
![Page 49: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/49.jpg)
不用每次都寫重複的 CSS
<table class="table table-striped"></table>
把樣式設定好,連不懂 CSS 的 RD 都可以快速套用!
![Page 50: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/50.jpg)
<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 - 範例 1Slider - 自製可以左右換頁的控制項
![Page 51: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/51.jpg)
<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 - 範例 1Cascade - 內容收折區塊
![Page 52: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/52.jpg)
不用寫 CSS 背景
<i class="kbm kbm-report"></i>
使用快、較可避免重複圖檔出現、或 Sprites 重複壓縮的問題
學習 glyphicons,即使沒字型檔、相同方式仍可用於背景圖!
不⽤用改 CSS 就可設定裝飾性背景圖檔
![Page 53: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/53.jpg)
很多時候已經不再需要視覺
整理出套件、套用到所有產品
F2E 或甚至 RD 可以自己套版
![Page 54: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/54.jpg)
整理出套件、套用到所有產品
keyb.com intersis.com
即使每個產品樣式不一,也非常有助於頁面的樣式趨於一致
抽出了此客製化 BS 套件,套樣式跟飛的一樣 :D
![Page 55: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/55.jpg)
Lesson From Preprocessors
• Write Less, Do More 工程師一天能產出的行數是固定的,但 Coffee 平均可減少 1/3+ 的程式碼。
• More Semantic Coffee 的寫法與思路較為一致、閱讀也比較輕鬆、有助於維護性。
• Less DuplicationSASS 的 mixin 與 nested 可以減少撰寫與維護許多不必要的程式碼。
• Use *.sass and 2 Spaces Indentation習慣後能夠看的程式碼變多了
![Page 56: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/56.jpg)
Rethink Best Practices
• Mustache.js, Handlebars.js?像 Mustache.js 與 Handlebars.js 這種
Templating 用 JSON Object Literal 組 HTML 真
的是最好的方法嗎?
• normalize.css?normalize.css 真的比 reset.css 利於網站開發嗎?
![Page 57: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/57.jpg)
前端樣板系統真的非用不可 ?
•前後端很難共用
•相同邏輯前後端各維護一份
•好用的 Helper 無法使用
•翻譯字串的問題
•Controller 得區分輸出 JSON 或 View
非 Node.JS 及 AngularJS、以內容為主的網站
![Page 58: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/58.jpg)
用前端樣板來處理真的會很煩
一大堆 Activity 組樣板會想殺人吧 XD
數字全部得更新
其他不用動
![Page 59: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/59.jpg)
傳統方法簡單多了
一大堆 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)
![Page 60: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/60.jpg)
normalize.css 比 reset.css 好?
網路上所有文章都說後起之秀 normalize.css 好
但操作過後還是覺得 reset.css 來得快、方便
做網站你不會希望標題大小不一致、或 li 前面有 disc
我認為 normalize.css 只能用在像部落格內文的部份
不適合用在較具規模的網站
![Page 61: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/61.jpg)
快速回顧:Be Faster• Lesson From Rails
Asset Pipeline, UJS:學習站在巨⼈人肩膀上開發!
• Lesson From Bootstrap好模式:只需寫 HTML、⼤大幅減少 CSS/JS 的撰寫時間!
• Lesson From Preprocessors寫少⼀一點,反⽽而增加許多閱讀性及維護性!
• Rethink Best Practice別⼈人說讚的,不⼀一定是真的。
![Page 62: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/62.jpg)
快速回顧:Be Faster• Lesson From Rails
Asset Pipeline, UJS:學習站在巨⼈人肩膀上開發!
• Lesson From Bootstrap好模式:只需寫 HTML、⼤大幅減少 CSS/JS 的撰寫時間!
• Lesson From Preprocessors寫少⼀一點,反⽽而增加許多閱讀性及維護性!
• Rethink Best Practice別⼈人說讚的,不⼀一定是真的。
Q&A Break
對於「快速開發」有問題或回饋嗎?
![Page 63: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/63.jpg)
Automation自動化
Image Source: http://www.exacttarget.com/blog/marketing-automation-infographic/
![Page 64: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/64.jpg)
工程師:寫程式只是基本
![Page 65: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/65.jpg)
工程師、寫程式只是基本
不再寫 HTML/CSS/JS 用編譯的如何?
JavaScript MVC
模組化與載入機制
响應式設計
工程師也能有好樣式
命令行的瀏覽器
用 JS 寫後端
越來越應用程式化
TDD 測試框架
重點如何在過程中得到「回饋」、而不斷地去改進?
這些技術你會多少其實不是重點 任何技術都是碰久了就會
![Page 66: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/66.jpg)
git commitpost-receive
trigger
CI持續集成系統
Hosting伺服器代管
Log Tracking記錄檔查詢系統
Error Tracking程式錯誤追蹤系統
Quality代碼品質檢測系統
Monitoring伺服器監控系統
Notify通知系統
Issue Tracking工作排程系統
VCS中央版本控管系統
deployreport
report
report
report
report
trigger
Testing跨系統瀏覽器測試
人沒辦法隨時給你回饋、系統可以
![Page 67: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/67.jpg)
感覺弄好這些架構要花很多時間
問題是,真的有這麼困難嗎?
![Page 68: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/68.jpg)
git pushpost-receive
trigger
CI持續集成系統
Hosting伺服器代管
Log Tracking記錄檔查詢系統
Error Tracking程式錯誤追蹤系統
Quality代碼品質檢測系統
Monitoring伺服器監控系統
Notify通知系統
Issue Tracking工作排程系統
VCS中央版本控管系統
deployreport
report
report
report
report
trigger
Testing跨系統瀏覽器測試
其實一個下午就可以全部弄好
![Page 69: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/69.jpg)
而且選擇多到讓人眼花撩亂https://addons.heroku.com/
![Page 70: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/70.jpg)
即時掌握其他系統回報的訊息
Push/Deploy 成功、JS 錯誤、品質下降、測試結果....
![Page 71: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/71.jpg)
CI 持續整合系統自動化測試的引擎,工程團隊一定要有
![Page 72: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/72.jpg)
自動檢查程式碼品質用客觀的標準幫你評斷 JS 寫的好不好
![Page 73: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/73.jpg)
不錯,修掉兩個 Lint 問題
原來是有兩個一模一樣的 JS
品質居然從 A 掉到 F 給我抓出來打屁股!
異常狀況
即時回報
![Page 74: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/74.jpg)
JS 有錯第一時間知道、開票
通常只會對 Staging, Production 做偵測
![Page 76: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/76.jpg)
CSS Regression Testing
製作一些內容不會變動的頁面 (baseline)
套用最新的 CSS
納入 CI 持續做差異化 diff
![Page 77: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/77.jpg)
工程師工具
•無聊
•重複性的
•浪費時間的 藉由工具持續回饋
每次的 Push 都會得到一些回饋(當然最好是 Commit 前就得到回饋、雙重把關)
身為 Lead 一定要不斷地改善流程、更自動化
可專⼼心在核⼼心開發
Q&A Break
Image Source: http://www.slideshare.net/ariyahidayat/javascript-parser-infrastructure-for-code-quality-analysis
![Page 78: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/78.jpg)
工程師工具
•無聊
•重複性的
•浪費時間的 藉由工具持續回饋
每次的 Push 都會得到一些回饋(當然最好是 Commit 前就得到回饋、雙重把關)
身為 Lead 一定要不斷地改善流程、更自動化
可專⼼心在核⼼心開發
讓 RD 在最棒的環境下開發
能省下可觀的時間、大家也開心
Q&A Break
對於「自動化」有問題或回饋嗎?
![Page 79: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/79.jpg)
Before Ending…
Be a Growing and Lead F2E!
![Page 80: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/80.jpg)
帶領提昇 UI 的整體水平台灣比較少看到國外乾淨、大量應用 CSS3 的 UI
http://dribbble.com/
![Page 81: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/81.jpg)
當 Lead 很辛苦、也很有趣
• 對老闆:想辦法用有限的資源把任務達成
• 對員工:傾聽意見、指派合適的任務、協助成長
• 像橋一樣,需要有效溝通。也像天秤一樣需取得平衡、
決定輕重緩急、解決問題
• 不斷地改善流程、讓團隊運行地更好
Coding 技巧不再是最重要的事,該關心的是...
不是管理職也可用這樣的思維去協助同事、會得到很多!
![Page 82: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/82.jpg)
![Page 83: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/83.jpg)
一定會得到正面的回饋
平常的努力都有被大家看到
這樣就值得了!
![Page 84: F2E Evolution](https://reader033.vdocuments.net/reader033/viewer/2022052821/55490b1fb4c90565458b96d0/html5/thumbnails/84.jpg)
Thank you!
• GitHub - josephj
• Facebook - 蔣定宇
• Slideshare - josephj
• Linkedin - josephj6802
聯繫我