![Page 1: All the reasons for choosing react js that you didn't know about - Avi Marcus, Wix](https://reader035.vdocuments.us/reader035/viewer/2022071710/55a84d661a28ab4d708b4749/html5/thumbnails/1.jpg)
ReactJS &O(DevTime)
Thoughts about frameworks and dev velocity
![Page 2: All the reasons for choosing react js that you didn't know about - Avi Marcus, Wix](https://reader035.vdocuments.us/reader035/viewer/2022071710/55a84d661a28ab4d708b4749/html5/thumbnails/2.jpg)
Avi Marcus
Making the jobs of the 40 other developers in the group as easy as possible.
![Page 3: All the reasons for choosing react js that you didn't know about - Avi Marcus, Wix](https://reader035.vdocuments.us/reader035/viewer/2022071710/55a84d661a28ab4d708b4749/html5/thumbnails/3.jpg)
UI Library, just the V of MVCTiny APIDoes only one thing, does it wellOne way data flow
ReactJS - few important notes
![Page 4: All the reasons for choosing react js that you didn't know about - Avi Marcus, Wix](https://reader035.vdocuments.us/reader035/viewer/2022071710/55a84d661a28ab4d708b4749/html5/thumbnails/4.jpg)
The obvious reasons you’ve heard aboutPerformance (browsers love single pass DOM writes)Server side rendering
Why we chose ReactJS
![Page 5: All the reasons for choosing react js that you didn't know about - Avi Marcus, Wix](https://reader035.vdocuments.us/reader035/viewer/2022071710/55a84d661a28ab4d708b4749/html5/thumbnails/5.jpg)
Why everyone was so easily convinced
![Page 6: All the reasons for choosing react js that you didn't know about - Avi Marcus, Wix](https://reader035.vdocuments.us/reader035/viewer/2022071710/55a84d661a28ab4d708b4749/html5/thumbnails/6.jpg)
What convinced meOld codebase ReactJS Wix-Viewer
Time 60 years 10 years
Lines of code 175,000 46,000
Time to first productive commit of new member
2-3 weeks 1 day
![Page 7: All the reasons for choosing react js that you didn't know about - Avi Marcus, Wix](https://reader035.vdocuments.us/reader035/viewer/2022071710/55a84d661a28ab4d708b4749/html5/thumbnails/7.jpg)
Definition O(DevTime)The 1st feature is always easyHow easy is 100th???
The real reason O(DevTime)
![Page 8: All the reasons for choosing react js that you didn't know about - Avi Marcus, Wix](https://reader035.vdocuments.us/reader035/viewer/2022071710/55a84d661a28ab4d708b4749/html5/thumbnails/8.jpg)
Enemies of O(DevTime):● Poor test coverage● Complex flows● State● Leaky abstractions
What makes our jobs difficult
![Page 9: All the reasons for choosing react js that you didn't know about - Avi Marcus, Wix](https://reader035.vdocuments.us/reader035/viewer/2022071710/55a84d661a28ab4d708b4749/html5/thumbnails/9.jpg)
Poor test coverage
![Page 10: All the reasons for choosing react js that you didn't know about - Avi Marcus, Wix](https://reader035.vdocuments.us/reader035/viewer/2022071710/55a84d661a28ab4d708b4749/html5/thumbnails/10.jpg)
ReactJS - Testing
Built in support for testing the UI.Pushes you to keep the UI and the logic separate, and testing the separate logic is really a breeze.
![Page 11: All the reasons for choosing react js that you didn't know about - Avi Marcus, Wix](https://reader035.vdocuments.us/reader035/viewer/2022071710/55a84d661a28ab4d708b4749/html5/thumbnails/11.jpg)
Complex flows O(NLog(N))
Simple flows Complex flows
![Page 12: All the reasons for choosing react js that you didn't know about - Avi Marcus, Wix](https://reader035.vdocuments.us/reader035/viewer/2022071710/55a84d661a28ab4d708b4749/html5/thumbnails/12.jpg)
ReactJS - Flow is unidirectional
![Page 13: All the reasons for choosing react js that you didn't know about - Avi Marcus, Wix](https://reader035.vdocuments.us/reader035/viewer/2022071710/55a84d661a28ab4d708b4749/html5/thumbnails/13.jpg)
State O(N2)
![Page 14: All the reasons for choosing react js that you didn't know about - Avi Marcus, Wix](https://reader035.vdocuments.us/reader035/viewer/2022071710/55a84d661a28ab4d708b4749/html5/thumbnails/14.jpg)
Render is a pure one way function from props/state to virtual DOM.ReactJS will make the minimal changes in the DOM required to bring the current state of the DOM to match the returned virtual DOM.
ReactJS - Rendering is functional
![Page 15: All the reasons for choosing react js that you didn't know about - Avi Marcus, Wix](https://reader035.vdocuments.us/reader035/viewer/2022071710/55a84d661a28ab4d708b4749/html5/thumbnails/15.jpg)
Leaky abstractions 2N
![Page 16: All the reasons for choosing react js that you didn't know about - Avi Marcus, Wix](https://reader035.vdocuments.us/reader035/viewer/2022071710/55a84d661a28ab4d708b4749/html5/thumbnails/16.jpg)
ReactJS - Non-leaky abstractions
Zero lines of ReactJS read/debugged so farTrustworthy, does what you expect, no gotchasSimpleNo real DOM in sight while rendering. It doesn’t even exist in the first render
![Page 17: All the reasons for choosing react js that you didn't know about - Avi Marcus, Wix](https://reader035.vdocuments.us/reader035/viewer/2022071710/55a84d661a28ab4d708b4749/html5/thumbnails/17.jpg)
Abstraction built for Wix-Editor
Developed a touch of AngularJS envy, invented react-templatesAngular inspired html templates for ReactJS supports repeat/if/scope/class and lambda events. Generates code, that renders the view described in the HTML programmatically.
![Page 18: All the reasons for choosing react js that you didn't know about - Avi Marcus, Wix](https://reader035.vdocuments.us/reader035/viewer/2022071710/55a84d661a28ab4d708b4749/html5/thumbnails/18.jpg)
Mandatory XKCD style graph
![Page 19: All the reasons for choosing react js that you didn't know about - Avi Marcus, Wix](https://reader035.vdocuments.us/reader035/viewer/2022071710/55a84d661a28ab4d708b4749/html5/thumbnails/19.jpg)
Keeping our job easy - O(DevTime)
We have cognitive limitsHow much of what is happening in the code we can safely ignoreThe stuff we can’t ignore accumulates and eventually progress stalls
![Page 20: All the reasons for choosing react js that you didn't know about - Avi Marcus, Wix](https://reader035.vdocuments.us/reader035/viewer/2022071710/55a84d661a28ab4d708b4749/html5/thumbnails/20.jpg)
Ignorance Driven Development
“If you can stop thinking about it, and it won’t come back to bite you in the ass, you made the right choice.”
# ReactJS is awesome.