Wp-calypso: Framework: Single-Tree Render

[apeatling]

This has been a long time desire for the people involved in Calypso.

Project: https://github.com/Automattic/wp-calypso/projects/53

The general objective is to stop having multiple render targets controlled by separate React instances that are mounted/unmounted on navigation. This should have a mild performance boost, while also helping with server side rendering efforts. At the moment, rendering a sidebar for a section is handled imperatively through a routing middleware that is out of the section’s control.

'Some previous work on a codemod for these has been done here.

Looking ahead, here’s an example of how a section could declare its UI using React 16 portals with array returns:

// Array syntax and portals.
return( [
    <Sidebar.Publish key="sidebar">
        <SidebarItem>
            // My menu
        </SidebarItem>
    </Sidebar.Publish>
    <Main key="main">
        // My section
    </Main>
] );

The sidebar “slot” would know where to render the menu item, concentrating declaration.

[simison]

Great! I've continued working on that codemod to get this done and it'll obviously require quite a bit of manual refactoring as well.

@apeatling Do you feel that React 16 portals -approach would be a way to go forward already now? I haven't studied how they work exactly so I'm not sure how much refactoring existing codebase they might require. They sure seem like a goal where we need to get eventually.

As an intermediate step towards that, @ockham's and my approach so far has been this:

• Turn all ReactDom.render() to:
  js context.primary = <Foo>; // or context.secondary = <Bar>;
  Most common way to utilise ReactDom.render() has been renderWithReduxStore() helper.
• Place makeLayout and render middlewares from client controller to the end of each route like so:
  js page('/foo', foo, makeLayout, render);
makeLayout middleware builds one <Layout> element from primary and secondary and render middleware does the final ReactDom.render() — and that should be the only render() we'll have anywhere.
• No more ReactDom.unmountComponentAtNode() to remove sidebars from middlewares; simply ensure context.secondary is null.

[ockham]

cc @ehg

[simison]

Done in https://github.com/Automattic/wp-calypso/commit/126f3cff8f0763edec9beab8e32ec6f722d81cef (PR https://github.com/Automattic/wp-calypso/pull/19494).

I collected a good bunch of backlog issues while working on this:
https://github.com/Automattic/wp-calypso/projects/53