In a lot of teams, there is a frontend developer and a backend developer working separately on their tasks. Frontend developer diligently working on the UI implementation (perhaps using AI tools to create the components and screens as well) perfecting it in StoryBook and then polishing it with animations and making things seamless to use in general.
In the modern tech landscape, creating APIs generally boils down to implementing the business logic and edge cases. Most general APIs can be generated from your data models and permission schema and things like authentication are provided by libraries. That being said, your backend modules are generally re-usable.
But when it comes to integrating APIs the traditional approach is to get the API schema either in Postman or Swagger and integrate screen by screen.
But what if you could "pre-integrate" APIs and then plug and play into the frontend of your choice?
This approach works best with MobX based state management architecture but can also be implemented with Redux architectures (caveat is the placement of dispatch actions, slicing and middleware code)
Pre-integration using JSON objects
To "pre-integrate" APIs, you need to first ensure that when implementing UIs any data-related texts should be from a JSON object in your UI and utilize dummy functions to simulate method calls.
This approach is very beneficial as it keeps your code data driven while not bogging you down from your other frontend tasks.
//screens/UserScreen.js
import React, { useState, useEffect } from 'react';
// Simulated JSON data with methods
const userStore = {
userList: [
{
id: 1,
name: "John Doe",
age: 30,
greet: function () {
return `Hello, I'm ${this.name} and I am ${this.age} years old.`);
}
},
{
id: 2,
name: "Jane Smith",
age: 25,
greet: function () {
console.log(`Hi, I'm ${this.name} and I am ${this.age} years old.`);
}
}
],
//simulate API Call
fetchUsers: () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(userStore.userList); // Simulate fetching JSON data
}, 1000); // Simulate delay
});
}
}
// Main React component
const UserComponent = () => {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
// Fetch data from simulated JSON
userStore.fetchUsers().then((data) => {
setLoading(false);
});
}, []);
if (loading) {
return <div>Loading...</div>;
}
return (
<div>
<h1>User List</h1>
<ul>
{userStore.userList.map((user) => (
<li key={user.id}>
{user.name} ({user.age} years old)
<button onClick={() => user.greet()}>Greet</button>
</li>
))}
</ul>
</div>
);
};
export default UserComponent;
The structure of JSON should be ideally be defined as per the model schema created in the architecture phase, even if the structure changes backend and frontend can independently update their relevant code base.
Now for the actual API "pre-integration" part, we will follow the approach used by Ignite CLI for React Native (can easily be implemented for React as well).
First, some boilerplating:
/*
Project Structure
/app
/models
/user
user-model.js // User model with actions and flow
user-store.js // UserStore with fetch logic
/screens
UserScreen.js // React Native screen that uses the MobX store
/stores
root-store.js // Root store combining all stores
setup-root-store.js // Function to set up the root store
*/
//app/stores/root-store.js
import { types } from "mobx-state-tree";
import UserStore from "../models/user/user-store";
// RootStore combining all stores (for now only UserStore)
const RootStore = types.model({
userStore: UserStore,
});
//app/stores/setup-root-store.js
export default RootStore;
import { RootStore } from "./root-store";
export const setupRootStore = () => {
const rootStore = RootStore.create({
userStore: {
users: [],
loading: false,
error: null,
},
});
return rootStore;
};
//app.js or app .tsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { setupRootStore } from './stores/setup-root-store';
import { Provider } from 'mobx-react-lite';
import UserScreen from './screens/UserScreen';
const App = () => {
const rootStore = setupRootStore();
return (
<Provider value={rootStore}>
<NavigationContainer>
<UserScreen />
</NavigationContainer>
</Provider>
);
};
export default App;
Store Module
Now that's setup we can create our store, let's first define our data model.
//app/models/user/user-model.js
import { types } from "mobx-state-tree";
// Define the User model with a greet action
const User = types
.model({
id: types.identifierNumber,
name: types.string,
age: types.number,
})
.actions((self) => ({
greet() {
console.log(`Hello, I'm ${self.name} and I am ${self.age} years old.`);
},
}));
export default User;
Now define the actual store which we will be replacing the dummy userStore defined earlier.
//app/models/user/user-store.js
import { types, flow } from "mobx-state-tree";
import User from "./user-model";
// UserStore to handle the state and data fetching
const UserStore = types
.model({
users: types.array(User), // List of User models
loading: types.boolean,
error: types.maybeNull(types.string),
})
.actions((self) => ({
// flow for handling async API calls
fetchUsers: flow(function* () {
self.loading = true;
try {
// Fetch real data from an external API
const response = yield fetch('https://your-server-here/users');
const data = yield response.data;
self.users= User.create(data)
} catch (error) {
self.error = "Failed to fetch users.";
} finally {
self.loading = false;
}
}),
}));
export default UserStore;
Plug and Play!
Now simply plug and play your pre-integrated module by replacing the userStore JSON with the actual userStore.
//screens/UserScreen.js
import React, { useState, useEffect } from 'react';
//JSON data deleted
// Main React component
const UserComponent = () => {
const {userStore}=useStores()
const [loading, setLoading] = useState(true);
useEffect(() => {
// Fetch data from simulated JSON
userStore.fetchUsers().then((data) => {
setLoading(false);
});
}, []);
if (loading) {
return <div>Loading...</div>;
}
return (
<div>
<h1>User List</h1>
<ul>
{userStore.userList.map((user) => (
<li key={user.id}>
{user.name} ({user.age} years old)
<button onClick={() => user.greet()}>Greet</button>
</li>
))}
</ul>
</div>
);
};
export default UserComponent;
The userStore can be developed independently as well and even easily by a backend developer (often backend leads frontend) improving your efficiency.
Enjoy efficient coding!
Top comments (0)