Tweet
Tweet

Slide 1

Slide 1 text

SVG Performance with Angular @Quramy 2016.04.20 #ng_sake

Slide 2

Slide 2 text

About me • Yosuke KURAMI (@Quramy) • Frontend Web Developer at WACUL INC. • ೔ʑͷ࢓ࣄ͸AngularJS(1.x)ͰSPA։ൃ • झຯͰTypeScript༻ͷVimϓϥΪϯ։ൃͯ͠·͢ • http://vimawesome.com/plugin/tsuquyomi 


Slide 3

Slide 3 text

Angular2͸ຊ౰ʹ଎͍ͷ͔ʁ

Slide 4

Slide 4 text

ࢼͯ͠Έͨ

Slide 5

Slide 5 text

͓୊: D3.js • Force Layout in D3.js
 (http://bl.ocks.org/mbostock/4062045) • Node, Linkͷؔ܎ΛݩʹॏྗܭࢉΛߦͬͯNode ͷ഑ஔΛܾఆ͢ΔΞϧΰϦζϜ • D3.layout͸୞ͷؔ਺ͳͷͰɺComponentʹbind ͢Ε͹D3.jsҎ֎ͷFrameworkʹ΋૊ΈࠐΊΔ

Slide 6

Slide 6 text

Force Layout const size = 600; const force = d3.layout.force() .nodes(this.UserLink.nodes()) .links(this.UserLink.links()) .size([size, size]) .gravity(1.1) .friction(0.98) .charge(-30) .linkDistance(size / 18.0) .alpha(.9) ; const nodes = force.nodes(); // nodeͷ࠲ඪ৘ใͷऔಘ const links = force.links(); // linkͷ࠲ඪ৘ใͷऔಘ force.on('tick', () => { // ߋ৽ຖͷϋϯυϥΛ͜͜ʹॻ͘ }); force.start();

Slide 7

Slide 7 text

With AngularJS 1.5 force.on('tick', () => { this.$scope.$digest(); // ࣗ෼ͰDigestϧʔϓճ͢ඞཁ͋Γ });

Slide 8

Slide 8 text

With Angular 2 force.on('tick', () => { // উखʹzone.js͕ಈ͘ͷͰԿ΋͢Δඞཁͳ͠ });

Slide 9

Slide 9 text

Demonstration http://quramy.github.io/ng-svg-perf/ng1/ http://quramy.github.io/ng-svg-perf/ng2/

Slide 10

Slide 10 text

Results 7PMVNF$POEJUJPO "OHVMBS+4 "OHVMBS CFUB d/PEFT d-JOLT '14 '14 d/PEFT d-JOLT '14 '14 d/PEFT d -JOLT '14 '14 d /PEFT d -JOLT '14 '14

Slide 11

Slide 11 text

Angular2͸ຊ౰ʹ଎͔ͬͨ(͜ͳΈ)

Slide 12

Slide 12 text

ࢀߟ • Angular2Ͱ΋ͱΓ͋͑ͣSVGΛඳ͍ͯΈΔ
 (http://qiita.com/_likr/items/b2cbaa0e5e3e21a92e57) • D3.js on AngularJSͷ࣮૷ύλʔϯൺֱ
 (http://qiita.com/Quramy/items/4ed72ae91899b47fb167) • Replacing (most of) d3.js with pure SVG + AngularJS
 (http://alexandros.resin.io/angular-d3-svg/)