ReactJS &O(DevTime)

Thoughts about frameworks and dev velocity

Avi Marcus

Making the jobs of the 40 other developers in the group as easy as possible.

UI Library, just the V of MVCTiny APIDoes only one thing, does it wellOne way data flow

ReactJS - few important notes

The obvious reasons you’ve heard aboutPerformance (browsers love single pass DOM writes)Server side rendering

Why we chose ReactJS

Why everyone was so easily convinced

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

Definition O(DevTime)The 1st feature is always easyHow easy is 100th???

The real reason O(DevTime)

Enemies of O(DevTime):● Poor test coverage● Complex flows● State● Leaky abstractions

What makes our jobs difficult

Poor test coverage

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.

Complex flows O(NLog(N))

Simple flows Complex flows

ReactJS - Flow is unidirectional

State O(N2)

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

Leaky abstractions 2N

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

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.

Mandatory XKCD style graph

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

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.