using yeoman to develop web app

使用 Yeoman 開發 Web App

@randylien

Wednesday, July 31, 13

Randy Lien

@randylien

敦化南路 T 公司上班


yeoman

• Yo

• Grunt

• Bower

• Yeoman 1.0 Backbone RequireJS

• 四個月之間比較穩定，Grunt 文件必讀


https://github.com/roblevintennis/yeoman_1_0_backbone_requirejs

https://github.com/roblevintennis/yeoman_1_0_backbone_requirejs

Bower

• 好棒呀

• 元件 !== 原始碼 (issue 46, issue 88 )

• 區分原始碼跟元件的存放位置(內部整合)

• grunt-bower-task / bower-installer


https://github.com/bower/bower/issues/46




grunt

• grunt-shell 幫忙整合原先的開發流程

• scp uploading

• 一個存檔 -> compile JS/CSS, livereload,

regenerate documents


Promise

• 太多內部服務要溝通 (License, Popup...etc)

• 執行順序

• 規格改變

• Callback hells


Architecture

• MVW (Marionette.js)

• 將以往設計的 Class 跟 JavaScript 行為的

Class 分開，善用 data attribute 如 data-js

• 監控你的 UI Model，而非你的 DOM

• Modelbinder, Backbone.stickit


Backbone.js/Marionette

• 使用外部 templates，而非直接從 CSS

selector 來取得

• 善用 Marionette.js 的 Layout/Region 來組織你的元件，而非 el 來定義。

• 元件化，將來有助單元測試與重構


i18n

• 產品一次要出 5 國語系 (中中日英法)

• i18next.com

• online translation UI

• post missing resources to server

• localStorage

• jQuery function


CSS

• 用資料夾來整理你的 Less/Sass 原始碼

• 元件的思維，重覆使用性，擴充性

• 建立自已的 UI Pattern


Style Guide

• 文件，重複使用

• 跨部門 Review，給 Vendor，Outsourcing

• Contribution


Screenshots

• Marketing，內部 Review，簡報

• Casper.js，grunt-casper

• casper.wait(6000) 等待動畫，XHR 跑完。


Deployment

grunt build


Thanks


using yeoman to develop web app

Software