http://devchat.tv/js-jabber/146-jsj-react-with-christopher-chedeau-and-jordan-walke
podcast-javascript-jabber-146-react#do-the-same-thing-as-previous-implementation1 2 He talks about sending a browser a ton of random flexbox cases and determining where the elements ended up, and ensuring that his implementation ended up doing the same thing. podcast-javascript-jabber-146-react#do-the-same-thing-as-previous-implementation1 2
The Dom or some backing tree (or view hierarchy)
he talks about using regular expressions and good TDD to create multiple implementations of the CSS flex box tool
says that react is "batchy"
About the regular expressions thing:
CHRISTOPHER: Actually it wasn't that hard. And the way it works is the interface is super simple. So, you get a tree of styles. So for example, your tree of nodes and with margin, padding, and all of this. And it outputs a tree with the same shape but the values are top, left, width and height for every single component.
And so, in order to implement this, what I did was I took this tree as input and I created real DOM nodes with real styles and I gave them to the browser. And then from the browser I asked, what are the top, left, width, and height of every single element? And using this setup I was able to make sure that my implementation was giving the same result as the browser. And so, then in TDD style I was able to add new features and see what breaks. And in about two weeks I was able to reproduce the feature, the flexbox I wanted. So, once this was set up, it was super-fast.
DAVE: Christopher, I thought your testing approach for developer this was really novel. Can you talk a little bit about that?
CHRISTOPHER: Yeah. So, I can test against a browser. And one cool thing is at some point I didn't know where my implementation was failing. And so, what I did was to generate random trees and pass it to my implementation and the browser. And the great thing with this is now I have a bunch of random tests. And some of them are going to fail. And so, I pick the first one that fails. I reuse it to make it easier to reason about. And then I implement it and fix it. And I do the same. I take the first one and I debug it, fix it, take the first one. And at some point there would be no failing tests. And so, at this point I was pretty confident that my implementation was working for all of the attributes I was supporting. And so, I did one new attribute and then I did the same. And that's it.
DAVE: So cool.
CHRISTOPHER: Yeah. This is a good example of how you can use TDD. Some specific use cases and it's working very, very well.
JAMISON: Did you just laugh maniacally to yourself when you thought about that?
[Laughter]
JAMISON: How am I going to do this? I know. Muwahahahaha.
CHRISTOPHER: The crazy part about this is at some point I did work in JS. But we wanted it in C. And so, I started doing a port of it in C because I didn't use any, I didn't do any dynamic allocations or use any fancy JS feature. So, the code looked like C. And when I got my port, my C port running, I compared the two versions. I was like, whoa. They're really similar. And so, what I did was to use some reg exes in order to convert from one to the other. [Chuckles]
DAVE: My gosh.
CHRISTOPHER: And I wouldn't recommend using reg ex to do this kind of thing. But in this case it worked really well. And we also transpiled the tests. And so, we got a flexbox implementation that's rather compliant with the browser in C. And when we started the Java port, someone just took my reg exes, they modified it for it being Java compliant, and we got a Java version working as well.
DAVE: [Laughs]
JAMISON: Oh, cool. I think yeah, what you're saying is you now have 'trisomorphic' C to JavaScript to Java.
DAVE: [Laughs] Oh my god. Powered by regular expressions.
JAMISON: Yeah.
JORDAN: And that's a separate project that you can check out as well. And I think it's a really cool artifact of the project because it's a nice little self-contained implementation of flexbox that you can run in any C code out there. Maybe you can integrate it in a game engine if you have a menu screen or something like that. It's really cool.
DAVE: To be clear, you're talking about the ported flexbox implementation, not the regular expressions used to generate the code, right?
JORDAN: Yes, yeah.
DAVE: I'd like to see those. [Chuckles]
CHRISTOPHER: Yeah, sure. You can go to GitHub.com/facebook/css-layout.
JORDAN: Yeah.
JOE: So, it's a pretty cool technique that you did. Unfortunately nobody on the show really cares much for testing or TDD.