search

zalando / tailor

A streaming layout service for front-end microservices
http://www.mosaic9.org
MIT License
1.73k stars 141 forks source link

Base template and React Router #219

Open vilaboim opened 6 years ago

vilaboim commented 6 years ago

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

marlonmleite commented 6 years ago

@tsnolan23 @vigneshshanmugam can you help us?

vigneshshanmugam commented 6 years ago

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?

marlonmleite commented 6 years ago

@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.

marlonmleite commented 6 years ago

@vigneshshanmugam news?

abelkbil commented 6 years ago

@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

tomasgriffin commented 6 years ago

@marlonmleite did you make any progress on this? It is something I'm interested in being able to do.

marlonmleite commented 6 years ago

@tomasgriffin i solved my problem using https://github.com/entria/react-app-loader

Since we used everything in React, this solution served us well.

robbin-arris commented 6 years ago

@tomasgriffin, do you have any example that explains how to use skipper with tailor?