Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Middle-Scale F2E Application
Saito
May 11, 2013
Programming
3
5.9k
Middle-Scale F2E Application
Ruby Salon in HangZhou
Saito
May 11, 2013
Tweet
Share
More Decks by Saito
See All by Saito
saito
34
3.5k
Other Decks in Programming
See All in Programming
o0h
PRO
0
320
patrickjahr
0
100
daipresents
0
330
hr01
0
1.9k
daipresents
9
3.3k
kidokidofire
1
110
coe401_
3
170
ickx
3
640
devinjeon
2
870
yosuke_furukawa
PRO
1
330
fr0gger
2
2.9k
tooppoo
1
460
Featured
See All Featured
akmur
252
19k
matthewcrist
73
7.5k
bkeepers
PRO
54
4.3k
lynnandtonic
272
16k
danielanewman
2
560
geeforr
333
29k
ddemaree
273
31k
addyosmani
495
110k
orderedlist
PRO
330
36k
sugarenia
233
880k
lauravandoore
11
1.7k
sferik
613
55k
Transcript
Middle-Scale F2E Application
problems • Loader • NameSpace • Dependency • Component/widgets (HTML
& Javascript & CSS) • Unit/Component Test (Fixture) • Build (Strategy) • UX (Speed & LiveReload & ...)
Ways to solve each problem •Loader LABjs headjs yepnopejs (
modernizr.load )
Ways to solve each problem •NameSpace http://addyosmani.com/blog/essential-js-namespacing/ •Single global variables
•Object literal notation •Nested namespacing •Immediately-invoked Function Expressions (IIFE)s •Namespace injection https://github.com/jashkenas/coffee-script/wiki/FAQ#unsupported-features •CoffeeScript
•Component Ways to solve each problem component/component
•Dependency Ways to solve each problem requirejs (AMD) component/component (CMD)
•Unit/Component Test Ways to solve each problem component/component
•Build Ways to solve each problem r.js (require.js) builder (
component/component ) sprockets
•LiveReload Ways to solve each problem LiveReload 2
Crossroad •Chef of Puppet •github or gitlab ? •AMD or
CMD or UMD ?
Crossroad • It doesn't matter.
Diglett • Demo time!
Framework based on Component • HTML5 Web Component • AuraJS
• Component • Twitter flight • MontageJS • And more...
Thanks