3 ms·
Just the fact that this could technically be written as draw.circle(150, 77, 40) in any sane programming language should give you some pause. This is comparing
by Chris_Newton 6y ago
Just the fact that this could technically be written as draw.circle(150, 77, 40) in any sane programming language should give you some pause.
This is comparing apples and oranges, though.
Your example only uses the required properties that any circle will have. Once you start adding details like strokes and fills, you will probably need extra function calls in the imperative case. Those function calls will probably update some hidden state that defines the style for whatever is drawn afterwards, which means you’re going to have to either keep track of that implicit state if you want it to apply to multiple things you’re drawing or reset it after each drawing call.
If you do want to manipulate a group of related elements collectively, for example to transform or style a certain part of your image as a group rather than adjusting the drawing for each element individually, the React/SVG version allows you to specify those properties and their scope explicitly by applying them to a common parent element, and everything stays clearly structured and can be examined in browser dev tools. The equivalent with an imperative drawing library will probably require individual adjustments for the parameters to each drawing command, or again some sort of implicit state that needs to be managed.
If you want to apply more complex effects, possibly to a group of related elements, the declarative version lets you attach a powerful filter as easily as a fill colour. Again, this means the browser is doing the heavy lifting of working out how to apply the effect it specifies to whatever that combination of elements originally looks like, instead of having to deal with potentially complicated dependencies manually while drawing imperatively.
If you want any sort of interactivity with the elements in your image, with the React/SVG version you can attach event handlers and let the browser work out which events should be sent where. With imperative drawing code, you’re probably going to have to manage any interactions yourself, including reinventing all the hit testing logic you get for free with the browser.
I’m not going to argue that there’s no place for imperative graphics libraries or anything silly like that, but there are plenty of reasons you might prefer a declarative interface depending on what you need to do. Ironically, I would argue that the advantages a declarative style offers when it’s a good fit are much the same as you listed in your comment: the code typically ends up shorter, clearer, and less error-prone.
- sfvisser 6y agoAll of the above can be done with a super clean declarative interface using functions/methods without JSX. JSX vs normal JS code has nothing to do with imperative vs declarative.
- Vinnl 6y agoThey weren't arguing JSX vs no JSX, they were describing arguments for using React ('s declarative interface) over D3's imperative approach, which GP expressed surprise about.
- Chris_Newton 6y agoAs Vinnl suggested, I interpreted dvt’s comment as disliking the declarative style rather than imperative. If the comment was instead intended just to object to the JSX/SVG syntax, then the objection seems rather superficial. It’s just an entity type and some named parameters, plus a bit of punctuation that will be immediately familiar to anyone working in front-end web development. If the alternative in dvt’s comment was meant to be a declarative specification of a circle and not an imperative call to draw one, then the biggest difference between <circle cx="150" cy="77" r="40" /> and draw.circle(150, 77, 40) is that the former uses named parameters and the latter does not, and I suspect a lot of us would consider the former to be the more explicit, less error-prone choice in that case.
- 6y ago