All the reasons for choosing react js that you didn't know about - Avi Marcus, Wix
- 1. ReactJS & O(DevTime) Thoughts about frameworks and dev velocity
- 2. Avi Marcus Making the jobs of the 40 other developers in the group as easy as possible.
- 3. UI Library, just the V of MVC Tiny API Does only one thing, does it well One way data flow ReactJS - few important notes
- 4. The obvious reasons you’ve heard about Performance (browsers love single pass DOM writes) Server side rendering Why we chose ReactJS
- 5. Why everyone was so easily convinced
- 6. What convinced me Old 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
- 7. Definition O(DevTime) The 1st feature is always easy How easy is 100th??? The real reason O(DevTime)
- 8. Enemies of O(DevTime): ● Poor test coverage ● Complex flows ● State ● Leaky abstractions What makes our jobs difficult
- 10. 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.
- 11. Complex flows O(NLog(N)) Simple flows Complex flows
- 12. ReactJS - Flow is unidirectional
- 13. State O(N2 )
- 14. 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
- 16. ReactJS - Non-leaky abstractions Zero lines of ReactJS read/debugged so far Trustworthy, does what you expect, no gotchas Simple No real DOM in sight while rendering. It doesn’t even exist in the first render
- 17. Abstraction built for Wix-Editor Developed a touch of AngularJS envy, invented react-templates Angular inspired html templates for ReactJS supports repeat/if/scope/class and lambda events. Generates code, that renders the view described in the HTML programmatically.
- 18. Mandatory XKCD style graph
- 19. Keeping our job easy - O(DevTime) We have cognitive limits How much of what is happening in the code we can safely ignore The stuff we can’t ignore accumulates and eventually progress stalls
- 20. 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.