介紹如何利用 Yeoman 來開發 Web App，以及一些開發 Web App 的心得

1. 使用Yeoman 開發 Web App
@randylien
Wednesday, July 31, 13

2. Randy Lien
@randylien
敦化南路 T 公司上班
Wednesday, July 31, 13

3. Wednesday, July 31, 13

4. Wednesday, July 31, 13

5. Wednesday, July 31, 13

6. yeoman
• Yo
• Grunt
• Bower
• Yeoman 1.0 Backbone RequireJS
• 四個月之間比較穩定，Grunt 文件必讀
Wednesday, July 31, 13

7. Bower
• 好棒呀
• 元件 !== 原始碼 (issue 46, issue 88 )
• 區分原始碼跟元件的存放位置(內部整合)
• grunt-bower-task / bower-installer
Wednesday, July 31, 13

8. grunt
• grunt-shell 幫忙整合原先的開發流程
• scp uploading
• 一個存 -> compile JS/CSS, livereload,
regenerate documents
Wednesday, July 31, 13

9. Promise
• 太多內部服務要溝通 (License, Popup...etc)
• 執行順序
• 規格改變
• Callback hells
Wednesday, July 31, 13

10. Architecture
• MVW (Marionette.js)
• 將以往設計的 Class 跟 JavaScript 行為的
Class 分開，善用 data attribute 如 data-js
• 監控你的 UI Model，而非你的 DOM
• Modelbinder, Backbone.stickit
Wednesday, July 31, 13

11. Backbone.js/Marionette
• 使用外部 templates，而非直接從 CSS
selector 來取得
• 善用 Marionette.js 的 Layout/Region 來組
織你的元件，而非 el 來定義。
• 元件化，將來有助單元測試與重構
Wednesday, July 31, 13

12. i18n
• 產品一次要出 5 國語系 (中中日英法)
• i18next.com
• online translation UI
• post missing resources to server
• localStorage
• jQuery function
Wednesday, July 31, 13

13. CSS
• 用資料夾來整理你的 Less/Sass 原始碼
• 元件的思維，重覆使用性，擴充性
• 建立自已的 UI Pattern
Wednesday, July 31, 13

14. Style Guide
• 文件，重複使用
• 跨部門 Review，給Vendor，Outsourcing
• Contribution
Wednesday, July 31, 13

15. Screenshots
• Marketing，內部 Review，簡報
• Casper.js，grunt-casper
• casper.wait(6000) 等待動畫，XHR 完。
Wednesday, July 31, 13

16. Deployment
grunt build
Wednesday, July 31, 13

17. Thanks
Wednesday, July 31, 13