Refactor from Frontend to Backend
To improve performance, let’s refactor the frontend code and move it to the backend.
Step 1: Create the Backend Method
We’ll add a shared/TasksController.ts
file with the following code:
Code Explanation
- We created a
TasksController
class to contain backend methods. - The
setAllCompleted
method is decorated with@BackendMethod({ allowed: true })
, making it accessible from the frontend. - Inside
setAllCompleted
, we get the repository forTask
usingremult.repo(Task)
. - We iterate through the tasks and update each one with the new
completed
status. - Previously, in the frontend, the
taskRepo
repository performed HTTP calls to the backend. Now that we’re on the backend, thetaskRepo
repository makes direct API calls to the database. - An advantage of this approach is that using the
taskRepo
repository allows us to use the same coding style for both the frontend and backend, making it easier for us as developers to switch back and forth.
Step 2: Register the Controller
Head over to the backend/index.ts
file and register the controller:
Code Explanation
- By adding
controllers: [TasksController]
, we make theTasksController
available for API calls from the frontend.
Step 3: Adjust the Frontend
Adjust the frontend/Todo.tsx
component to call the backend method:
Code Explanation
- We removed the
for
loop and the direct update calls from the frontend. - We now call
TasksController.setAllCompleted(completed)
to perform the updates on the backend. - After the backend method completes, we refresh the task list by calling
taskRepo.find().then(setTasks)
. - An advantage of this approach is that the call to
setAllCompleted
is strongly typed, protecting us from spelling or typing mistakes using TypeScript.
Try It Out
Click the “Set All Completed” and “Set All Uncompleted” buttons to see the improved performance with the backend method handling the updates.
Files
Preparing Environment
- Installing dependencies
- Starting http server