Skip to content

Commit

Permalink
feat: add react-router ADR
Browse files Browse the repository at this point in the history
  • Loading branch information
jamesgorrie committed Apr 29, 2024
1 parent 412e253 commit fd637fd
Showing 1 changed file with 70 additions and 0 deletions.
70 changes: 70 additions & 0 deletions docs/adrs/2024-04-29-re-introducing-react-router.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
*Service:* support-frontend
*Status: accepted*

## Context

We need to be able to access a thank you page for the [generic checkout](https://github.com/guardian/support-frontend/issues/5722) to route to after purchase.

[Currently the generic checkout uses routing via Play framework][play-routes] [which][play-controller-render] [renders][play-html] a [`webpack.entryPoint`][webpack-entrypoint] for that [singular component][checkout-component].

We currently have multiple ways of doing this. This ADR aims to choose one, hopefuly leading to deprecating the other, and help with decision making in the future.


### Options

#### Create a `/thank-you` play route

This is what we do with paper products by separating the `FormController` from the `LandingPageController`.
e.g. [`PaperSubscriptionController` and `PaperSubscriptionFormController`](https://github.com/guardian/support-frontend/blob/b31dd3d73ad91313bac10e48a640d13d2656a264/support-frontend/conf/routes#L122-L123)

##### Benefits
- Decouples checkout from thank-you page
- Uses an existing pattern

##### Drawbacks
- Decouples checkout from thank-you page (this is seen as a drawback too as they are intrinsically linked)
- Adds a lot of boiler plate and extra templating
- Maintains the need to context switch between Play and React for routing


#### Use react-router
This is what we currently do with [`supporterPlusRouter`](https://github.com/guardian/support-frontend/blob/b31dd3d73ad91313bac10e48a640d13d2656a264/support-frontend/assets/pages/supporter-plus-landing/supporterPlusRouter.tsx#L99-L142).

##### Benefits
- Keeps routing logic closer to the rendering i.e. in React
- Uses an existing pattern
- Reduces the need to add a lot more scala


##### Drawbacks
- Potential for overloading the router and bloating the JS sent down the pipes. This could be mitigated via [code-splitting](https://v5.reactrouter.com/web/guides/code-splitting) or creating multiple routers.
- There is complexity added to the rendering route (diagram below[^1])



## Decision
We are choosing to go with `react-router` as it feels like the complexity added is minimal and the need to switch between Scala/Play and React is minimised.

This is inline with the goals for the checkout reducing complexity and decrease time-to-change.

## Consequences

- The bundle size increases
- There more complexity in the request flow
- But less complexity in changing routes in future

[^1]: Current vs Proposed solution

```mermaid
flowchart TB
Request --> PlayRoute --> PlayController --> PlayTemplate --> webpack.entryPoint -- "Current" --> render["render(Component)"]
webpack.entryPoint -- "Proposed" --> react-router --> render["render(Component)"]
```

---

[play-routes]: https://github.com/guardian/support-frontend/blob/b31dd3d73ad91313bac10e48a640d13d2656a264/support-frontend/conf/routes#L92-L93
[play-controller-render]: https://github.com/guardian/support-frontend/blob/b31dd3d73ad91313bac10e48a640d13d2656a264/support-frontend/app/controllers/Application.scala#L285
[play-html]: https://github.com/guardian/support-frontend/blob/b31dd3d73ad91313bac10e48a640d13d2656a264/support-frontend/app/views/checkout.scala.html#L24
[webpack-entrypoint]: https://github.com/guardian/support-frontend/blob/b31dd3d73ad91313bac10e48a640d13d2656a264/support-frontend/webpack.entryPoints.js#L3
[checkout-component]: https://github.com/guardian/support-frontend/blob/b31dd3d73ad91313bac10e48a640d13d2656a264/support-frontend/assets/pages/%5BcountryGroupId%5D/checkout.tsx#L620-L624

0 comments on commit fd637fd

Please sign in to comment.