CODEWITHSUNDEEP
springreact-nativeversioningbackwards-compatibility
Mr.J4mes
Mr.J4mes

Reputation: 9266

How to design front-end to handle multiple back-end versions

In my company, we're using Spring Boot to implement backend API and React to implement frontend including Web interface and Android/iOS apps.

Since our product is an Enterprise software, customers actually have to pay to get the latest backend API to deploy on their own servers. However, our mobile apps are regularly updated on the App Store. This leads to a situation where the mobile apps on end-users' devices may be the newer version while the backend API on the customer's machine is the older one. We plan to support up to 3 minor version backward, meaning FE 5.4 will support up to backend 5.2.

The backend does have an endpoint to return the current version number. However, I'm a bit clueless as to how our frontend implementation can maintain backward compatibility with older API versions as we add new features and may introduce breaking changes in backend API.

I completely understand there might not any beautiful solutions for this problem. I'm hoping if you've gone through this pain, you can share your experiences about what you've tried, the final approach that you took and the potential pitfalls to look out for.

I'm sure myself and other people who's running into this issue would be really grateful :).

Upvotes: 7

Views: 2256

Answers (1)

Tan Kim Loong
Tan Kim Loong

Reputation: 1035

Your solution will be similar to any frontend solution that uses Feature Toggle but I can already imagine that it will not be pretty.

Basically inside your code you'll have a lot of if/else statements or some form of wrapper that does the same underneath for every piece of UI/logic/functionality that is a breaking change on version upgrade.

I'd suggest that for every layers that you have (UI, logic, API call) you should start to have switches based on version returned by backend. You'll end up with a lot of redundant looking codes and a lot of codes that looks like this. (if you support only two versions. Use switch if you have more versions)

render() {
    {version === "1.0.0" ? <VersionA /> : <VersionB/>}
}

You can however, write a utility method that wraps and returns different components based on versions. By doing that you can more easily remove components that you no longer need to support in the future.

const versionSwitcher = (version, ...Components) => {
   switch (version) {
      case "1.0.0":
          return Components[0];

      case "1.1.0":
          return Components[1];
   }
}

This of course, increases complexity throughout all layers but given your case I can't see it being simple. A good thing to do is to try to keep your own viewModel and never pass response from API directly into component. That reduces the coupling between API and your components and will make this a little easier.

Upvotes: 2

Related Questions