Using Yeoman to develop Web App
-
Upload
randy-lien -
Category
Software
-
view
181 -
download
6
description
Transcript of Using Yeoman to develop Web App
使用 Yeoman 開發 Web App
@randylien
Wednesday, July 31, 13
Randy Lien
@randylien
敦化南路 T 公司上班
Wednesday, July 31, 13
Wednesday, July 31, 13
Wednesday, July 31, 13
Wednesday, July 31, 13
yeoman
• Yo
• Grunt
• Bower
• Yeoman 1.0 Backbone RequireJS
• 四個月之間比較穩定,Grunt 文件必讀
Wednesday, July 31, 13
Bower
• 好棒呀
• 元件 !== 原始碼 (issue 46, issue 88 )
• 區分原始碼跟元件的存放位置(內部整合)
• grunt-bower-task / bower-installer
Wednesday, July 31, 13
grunt
• grunt-shell 幫忙整合原先的開發流程
• scp uploading
• 一個存檔 -> compile JS/CSS, livereload,
regenerate documents
Wednesday, July 31, 13
Promise
• 太多內部服務要溝通 (License, Popup...etc)
• 執行順序
• 規格改變
• Callback hells
Wednesday, July 31, 13
Architecture
• MVW (Marionette.js)
• 將以往設計的 Class 跟 JavaScript 行為的
Class 分開,善用 data attribute 如 data-js
• 監控你的 UI Model,而非你的 DOM
• Modelbinder, Backbone.stickit
Wednesday, July 31, 13
Backbone.js/Marionette
• 使用外部 templates,而非直接從 CSS
selector 來取得
• 善用 Marionette.js 的 Layout/Region 來組織你的元件,而非 el 來定義。
• 元件化,將來有助單元測試與重構
Wednesday, July 31, 13
i18n
• 產品一次要出 5 國語系 (中中日英法)
• i18next.com
• online translation UI
• post missing resources to server
• localStorage
• jQuery function
Wednesday, July 31, 13
CSS
• 用資料夾來整理你的 Less/Sass 原始碼
• 元件的思維,重覆使用性,擴充性
• 建立自已的 UI Pattern
Wednesday, July 31, 13
Style Guide
• 文件,重複使用
• 跨部門 Review,給 Vendor,Outsourcing
• Contribution
Wednesday, July 31, 13
Screenshots
• Marketing,內部 Review,簡報
• Casper.js,grunt-casper
• casper.wait(6000) 等待動畫,XHR 跑完。
Wednesday, July 31, 13
Deployment
grunt build
Wednesday, July 31, 13
Thanks
Wednesday, July 31, 13