tailor
tailor copied to clipboard
zalando
Base template and React Router
Hi, guys.
Here at work we are trying to put Base Templates and React Router 3 to work together, but for now is not working. Has anyone ever tried to do this?
Here is our POC, based on @tsnolan23 's project
Hey, sorry for the delay. Been busy with something lately. I will have a look at this and get back to you guys by tomorrow. Could you please give me some details on what you like to achieve in general?
@vigneshshanmugam we currently have an application based on React + React Router with several modules (pages) based on Microservices.
We need to split our application with Microfrontend, where each page would be 1 fronted and would have 1 common frontend to all (menu).
Our journey with Tailor: POC 01: https://github.com/marlonmleite/tailor-react-router-spa/ We implemented a default template and in it all divs with the "all" id like our pages and the React legal packages for startup application. However, it's looking very heavy for the DOM, given that we're going to have 10 Microfrontend's rendered in DOM.
POC 02: https://github.com/vilaboim/tailor-react-router-spa/tree/feature/performance We use the concept of available Tailor base template and we try to separate it for each module to have only its HTML and bundle .js fragment. But with this approach when navigating via React Router, it modifies the HTML with the new one, however the bundle .js that the Fragment transport is not loaded. This solution it only works when we navigate to other routes by applying update across an entire page, but this goes against the Single Page Application.
@vigneshshanmugam Is there scope of react router here. I am not sure, since the architecture itself says that the skipper will handle the route and point to a template view, which will merge multiple fragments (multiple SPA).
How will the SPA listen to route query or is this not the way we can build fragments. Thank you
@marlonmleite did you make any progress on this? It is something I'm interested in being able to do.
@tomasgriffin i solved my problem using https://github.com/entria/react-app-loader
Since we used everything in React, this solution served us well.
@tomasgriffin, do you have any example that explains how to use skipper with tailor?
