1. Asset Pipeline
天龍國 Developer 的 Assets 管理法
1
星期日, 4月 15, 1

2. Xdite Cheng
github.com/xdite
xdite
2
星期日, 4月 15, 2

3. 小蟹
PIXNET
github.com/wildjcrt
wildjcrt
Ruby Taiwan
RailsTuesday
3
星期日, 4月 15, 3

4. Assets
▪ CSS
▪ JavaScript
▪ Image
4
星期日, 4月 15, 4

5. Asset = 次等公民
5
星期日, 4月 15, 5

6. public/
• icon-01.png • reset.css
• icon-02.png • tinymce/
• jquery.js • ....
• logo.png
• main.css
6
星期日, 4月 15, 6

7. Asset 管理上需要面對的問題
▪ Optimization Issue
▪ Outdate
▪ Hard to write maintainable code
7
星期日, 4月 15, 7

8. Optimization Issue
▪ Compress / Trim
▪ CSS Sprite
▪ Development / Deploy
▪ CDN / clear cache
8
星期日, 4月 15, 8

9. Outdate
▪ jQuery
▪ jQuery UI
▪ Bootstrap
▪ TinyMCE
▪ ....
9
星期日, 4月 15, 9

10. Maintain Issue
#header{ ... }
#header nav.main{ ... }
#header nav.main a{ ...}
#header nav.main a:hover{...}
不覺得這樣寫很囉嗦的請舉手
10
星期日, 4月 15, 10

11. Maintain Issue
▪ JavaScript
11
星期日, 4月 15, 11

12. Asset Pipeline
Since Rails 3.1
12
星期日, 4月 15, 12

13. 以一個全新的角度去管理 Asset
13
星期日, 4月 15, 13

14. Asset Pipeline 提供
▪ Optimization Mechanism
▪ Organization Rules
▪ Asset Version Control
▪ Write assets in other language
14
星期日, 4月 15, 14

15. 這麼神？
15
星期日, 4月 15, 15

16. Optimization
▪ Compress / Trim
▪ CSS Sprite
▪ Development / Deploy
▪ CDN / clear cache
內建 Best Practices，Deploy 時自動完成
16
星期日, 4月 15, 16

17. Organization Rules
▪ vendor/assets/
▫ jQuery, TinyMCE, Bootstrap...
▪ lib/assets/
▫ utility
▪ app/assets
▫ main, sidebar, font,
17
星期日, 4月 15, 17

18. Organization Rules
/*
*= require bootstrap
*= require sidebar
*= require common
*= require_self
*= require_tree .
*/
一律視為 /assets 下檔案掛起來
18
星期日, 4月 15, 18

19. Asset Version Control
▪ Bundler => Asset As Gem
▫ Gemfile
gem "jquery-rails"
gem "tinymce-rails"
gem "bootstrap", "1.4.1"
○ application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require tinymce
19
星期日, 4月 15, 19

20. Front-end Meta Languages
▪ CoffeeScript
▪ Sass / SCSS
▫ Compass
20
星期日, 4月 15, 20

21. CoffeeScript
class Animal
constructor: (@name) ->
move: (meters) ->
alert @name + " moved #{meters}m."
class Snake extends Animal
move: ->
alert "Slithering..."
super 5
21
星期日, 4月 15, 21

22. CoffeeScript
▪ avoid the“bad parts”
▫ avoid global variable / function
▫ 使用 -> 和 indent (縮排)
▫ 容易偵測 syntax error
22
星期日, 4月 15, 22

23. Sass / SCSS
#header{ ... }
#header nav.main{ ... }
#header nav.main a{ ...}
#header nav.main a:hover{...}
23
星期日, 4月 15, 23

24. Sass / SCSS
#header{
nav.main{
a{
▪ We&:hover{do this way
should }
}
}
}
24
星期日, 4月 15, 24

25. Compass
▪ CSS Authoring Framework
▫ Blueprint
▫ 960
▫ fancy buttons
▫ CSS3 Pie
25
星期日, 4月 15, 25

26. Compass
▪ Features
▫ replace-text
▫ border-radius
▫ gradient
▫ sprite
26
星期日, 4月 15, 26

27. Organize SCSS
▪ by default block ( header / footer / sidebar )
▪ by special block
▪ by feature
▪ by (Rails) controller
▪ by page specific
27
星期日, 4月 15, 27

28. Compass and bootstrap
@import "bootstrap";
// config variables first and import compass
$base-font-size: 16px;
$base-line-height: 24px;
$relative-font-sizing: false;
@import "compass";
@import "module/mixins";
@import "module/box";
@import "module/modal"; // override bootstrap modal effect
@import "partial/header";
@import "partial/sidebar-items";
@import "partial/sidebar-tools";
@import "partial/sidebar"; ▪ main.css
28
星期日, 4月 15, 28

29. Reference
▪ http://upgrade2rails31.com/asset-pipeline
▪ http://upgrade2rails31.com/sass-scss
▪ http://upgrade2rails31.com/coffee-script
▪ http://blog.xdite.net/posts/2012/02/06/
extend-bootstrap-in-compass/
▪ https://github.com/anjlab/bootstrap-rails
29
星期日, 4月 15, 29

30. Thanks
30
星期日, 4月 15, 30