f:[["$","p",null,{"children":["I have been working on a side-project recently.\nIt's called ",["$","$Le",null,{"href":"/pabla","children":"Pabla"}]," (",["$","a",null,{"href":"https://github.com/goshacmd/pabla","children":"GH"}],"), and it is an engaging image creator, a just-for-fun clone of Buffer's ",["$","a",null,{"href":"https://pablo.buffer.com/app","children":"Pablo"}],"."]}],"\n",["$","p",null,{"children":["$","$Le",null,{"href":"/pabla","children":"$L14"}]}],"\n",["$","p",null,{"children":["The most interesting thing about it, for me, was exploring ways to do ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API","children":"Canvas"}]," rendering.\nI have worked on a sophisticated React+Canvas app in the past, but it was a mess.\nIt had functions which drew almost all of the UI to canvas directly and reacted to events on canvas.\nIn a single huuuge file."]}],"\n",["$","p",null,{"children":"It hurt even navigating in that file, lest changing something or adding features."}],"\n",["$","p",null,{"children":"So with Pabla, I set to find better ways to make that happen."}],"\n",["$","p",null,{"children":"If you are looking for a before-after, here you go:"}],"\n",["$","p",null,{"children":[["$","a",null,{"href":"https://github.com/goshacmd/pabla/blob/857f591f8773262bc117241bc2ed9939eaf82815/app/components/ImageCanvas.jsx#L258-298","children":"Before"}]," — is very imperative and handles a lot of detail."]}],"\n",["$","p",null,{"children":[["$","a",null,{"href":"https://github.com/goshacmd/pabla/blob/master/app/components/ImageCanvas.jsx#L144-173","children":"After"}]," — with all these nested components, it looks like any React code you are used to. It also allows you to define custom canvas components, with state and such! The ",["$","a",null,{"href":"https://github.com/goshacmd/pabla/blob/master/app/components/TextBoxCursor.jsx","children":"Cursor"}]," component neatly encapsulates the blinking."]}],"\n",["$","pre",null,{"className":"language-jsx","children":["$","code",null,{"className":"language-jsx","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],["$","span",null,{"className":"token class-name","children":"Canvas"}]]}]," ",["$","span",null,{"className":"token attr-name","children":"width"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"canvasWidth",["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token attr-name","children":"height"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"canvasHeight",["$","span",null,{"className":"token punctuation","children":"}"}]]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],["$","span",null,{"className":"token class-name","children":"CanvasImage"}]]}]," ",["$","span",null,{"className":"token attr-name","children":"image"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"image",["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token attr-name","children":"frame"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"mainFrame",["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token punctuation","children":"/>"}]]}],["$","span",null,{"className":"token plain-text","children":"\n "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],["$","span",null,{"className":"token class-name","children":"Filter"}]]}]," ",["$","span",null,{"className":"token attr-name","children":"name"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"filter",["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token attr-name","children":"frame"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"mainFrame",["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token punctuation","children":"/>"}]]}],["$","span",null,{"className":"token plain-text","children":"\n "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],["$","span",null,{"className":"token class-name","children":"CanvasLine"}]]}]," ",["$","span",null,{"className":"token attr-name","children":"color"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"color",["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token attr-name","children":"width"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token number","children":"2"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token attr-name","children":"from"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"a",["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token attr-name","children":"to"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"b",["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token punctuation","children":"/>"}]]}],["$","span",null,{"className":"token plain-text","children":"\n "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],["$","span",null,{"className":"token class-name","children":"CanvasLine"}]]}]," ",["$","span",null,{"className":"token attr-name","children":"color"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"color",["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token attr-name","children":"width"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token number","children":"2"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token attr-name","children":"from"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"a",["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token attr-name","children":"to"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"b",["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token punctuation","children":"/>"}]]}],["$","span",null,{"className":"token plain-text","children":"\n"}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":""}]]}],"\n"]}]}],"\n",["$","p",null,{"children":"React is great at providing common ground for building UIs, no matter the platform.\nIt provides immense power for rendering to any output, be it native mobile, DOM, canvas, or even the terminal."}],"\n",["$","p",null,{"children":"In this post, I'm going to share what I learned about the private APIs of React that let it happen.\nWhile I will share some thought-process that led me there, some mid-steps will naturally be omitted."}],"\n",["$","p",null,{"children":["$","strong",null,{"children":"🚧 The APIs discussed in this post are not public, and can/will change in the future."}]}],"\n",["$","p",null,{"children":"Skip that if you are in for the reference and not the story."}],"\n",["$","p",null,{"children":["$","em",null,{"children":["(I am aware of projects like ",["$","a",null,{"href":"https://github.com/Flipboard/react-canvas","children":"react-canvas"}],".\nHowever, it seemed to have a different use-case in mind.\nThat said, I did learn on some private React APIs from it.)"]}]}],"\n",["$","h3",null,{"children":"Declarative first"}],"\n",["$","p",null,{"children":"The goal is to go from imperative to React-style declarative.\nBut do you know what would the first step be?"}],"\n",["$","p",null,{"children":["It'd be to go just ",["$","em",null,{"children":"declarative"}]," first.\nThat is, using data structures to describe what should be drawn onto the canvas, not immediately drawing."]}],"\n",["$","p",null,{"children":"It is going from"}],"\n",["$","pre",null,{"className":"language-jsx","children":["$","code",null,{"className":"language-jsx","children":[["$","span",null,{"className":"token function","children":"drawImage"}],["$","span",null,{"className":"token punctuation","children":"("}],"ctx",["$","span",null,{"className":"token punctuation","children":","}]," img",["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token punctuation","children":"["}],["$","span",null,{"className":"token number","children":"0"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"0"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"300"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"300"}],["$","span",null,{"className":"token punctuation","children":"]"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n",["$","span",null,{"className":"token function","children":"drawRect"}],["$","span",null,{"className":"token punctuation","children":"("}],"ctx",["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token string","children":"\"black\""}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token punctuation","children":"["}],["$","span",null,{"className":"token number","children":"10"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"10"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"290"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"290"}],["$","span",null,{"className":"token punctuation","children":"]"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n"]}]}],"\n",["$","p",null,{"children":"to"}],"\n",["$","pre",null,{"className":"language-jsx","children":["$","code",null,{"className":"language-jsx","children":[["$","span",null,{"className":"token punctuation","children":"["}],"\n ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n type",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token string","children":"'image'"}],["$","span",null,{"className":"token punctuation","children":","}],"\n frame",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token punctuation","children":"["}],["$","span",null,{"className":"token number","children":"0"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"0"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"300"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"300"}],["$","span",null,{"className":"token punctuation","children":"]"}],["$","span",null,{"className":"token punctuation","children":","}],"\n image",["$","span",null,{"className":"token operator","children":":"}]," img\n ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":","}],"\n ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n type",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token string","children":"'rect'"}],["$","span",null,{"className":"token punctuation","children":","}],"\n frame",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token punctuation","children":"["}],["$","span",null,{"className":"token number","children":"10"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"10"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"290"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"290"}],["$","span",null,{"className":"token punctuation","children":"]"}],["$","span",null,{"className":"token punctuation","children":","}],"\n color",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token string","children":"\"black\""}],"\n ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n",["$","span",null,{"className":"token punctuation","children":"]"}],"\n"]}]}],"\n",["$","p",null,{"children":"plus having a function that can iterate over that array and draw each primitive."}],"\n",["$","p",null,{"children":[["$","a",null,{"href":"https://github.com/goshacmd/pabla/commit/1b96316dbf77bf1336e9d86a7859e258daf0cc7a","children":"This"}]," was a vast improvement already in terms of readability and understanding what's going on."]}],"\n",["$","p",null,{"children":"It did lack, well, components — the layout had to include all the primitives.\nIt's true that these could be encapsulated into functions which return parts of this layout, and composing them together, but components are a bit more than on the screen, they're also about encapsulating particular behavior (like the blinking cursor that I linked)."}],"\n",["$","p",null,{"children":"So what would it take to make it all React-y?"}],"\n",["$","h3",null,{"children":"React renderers — high-level intro"}],"\n",["$","p",null,{"children":["It's not a secret that React can be used to render to anything, even ",["$","a",null,{"href":"https://facebook.github.io/react-native/","children":"native mobile apps"}],", so it shouldn't come as a surprise that you can make it render onto canvas."]}],"\n",["$","p",null,{"children":"React is a great generalization of UI, independent of the platform."}],"\n",["$","p",null,{"children":"Before going into the details, let's take a higher level look at what we need here, and really, what any rendered consists of."}],"\n",["$","p",null,{"children":"$L15"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":["\n",["$","p",null,{"children":["$","strong",null,{"children":"A bridge."}]}],"\n",["$","p",null,{"children":["React DOM and React Native don't need it.\nIn this case of canvas, however, we will need to provide a place for canvas components to exist.\nFor that, a bridge component is required.\nIt's a typical React component, which renders to DOM (with ",["$","code",null,{"children":"