AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

Angular+React=Speed(将Angular与React结合使用) by Dave Smith

发布者 angular
发布于 1432689694771  浏览 4309 关键词 前端, JavaScript, AngularJS, ReactJS, English 
分享到

第1页

1 + =Speed



Dave Smith



@djsmith42



第2页

I was going to tell a hilarious joke, but I didn’t know how the audience would … react



第3页

Engineering

is the

intersection

of

science

and

economics



Science



Engineering



Economics



第4页

Performance is hard.

“I don’t think you are measuring what you think you are measuring.”

--Miško Hevery to me. About this talk. Twice.



第5页

“Is RUeascet lfaesstesr QthuanesAtnigounlar?”



第8页

React in 90 seconds



Your JavaScript

Code

Application State



Virtual DOM

Plain old JavaScript

objects



https://www.youtube.com/watch?v=x7cQ3mrcKaY



React Reconciler

and

Renderer



Browser DOM



Optimized DOM operations



第9页

React in 90 seconds

Premise: The modern DOM is dangerously unperformant.

● Virtual DOM is a pure JavaScript intermediate representation of DOM.

● When your app state changes, your code returns a new Virtual DOM.

● React diffs the new Virtual DOM against the previous one.

● React generates performance optimized DOM operations ○ Batched reads and writes ○ Fewer reflows ○ innerHTML



第10页

Links for Later

Pete Hunt explaining Virtual DOM: https://www.youtube.com/watch?v=x7cQ3mrcKaY#t=1207

Virtual DOM diff algorithm: http://facebook.github.io/react/docs/reconciliation.html

Referential transparency: http://en.wikipedia.org/wiki/Referential_transparency_(computer_science) http://en.wikipedia.org/wiki/Pure_function http://www.itu.dk/courses/BPRD/E2009/fundamental-1967.pdf



第11页

The obvious conclusion?



第12页

React all the

things!



第13页

It’s not that simple.



第14页

React some of

the things?



第16页

The Tragedy



第17页

New column

Look, a nested list!



第18页

So I did some

advanced

performance

mathematics



第19页

Slow ng-repeat table

+

Nested ng-repeat

=

Really slow ng-repeat table



第20页

wat

React to the

rescue!!!11



第21页

Our attempt

● Write a directive that uses React to render each tag list.

● Call the directive inside the ng-repeat markup.



React components



第22页

Result:



第23页

1+ =



第24页

Why did this fail?

● Because React could not batch its DOM operations.

● Why? ● Because React did not control the “outer”

DOM

○ Angular controlled the table and rows.

○ appendChild(), React, appendChild(), React, appendChild(), React...

● ng-repeat is not inherently slow



第25页

Fast forward one year to...



第26页

The Glory



第29页

?1 + =



第30页

Demo



第31页

Drawbacks

● +500KB of code. ● JSX build step. ● Two frameworks. ● You might have to change your i18n (we did).



第32页

Where React Shines

● Initial DOM load

○ Thanks to innerHTML

● Updating DOM after state changes

○ Small changes ○ Large changes



第33页

Where React is Weak

● Updating DOM after no state changes ○ In my app, takes about twice as long as Angular1 ○ Still very fast in my app (e.g., 27ms vs 13ms) ○ Strategy: don’t re-render all components.



第34页

One more thing...



第35页

Angular 2

is fast.

Really fast.



第36页

Conclusion

Do your own engineering Measure Observe Decide

@djsmith42



第37页

Links

● Angular + React Demo Code: ○ https://github.com/djsmith42/angular_react_directive_example

● Angular2 Demo Code: ○ https://github.com/djsmith42/angular2_calendar

● Video: ○ https://www.youtube.com/watch?v=XQM0K6YG18s



支持文件格式:*.ppt, *.pptx, *.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。