🔥 Never Wait for Backend Again! 3 Stupidly Simple Steps That Changed My Frontend Life

#webdev #javascript #programming #frontend

Last week, I came across the article "How to Build Your Frontend Apps 10x Faster!" and found it incredibly interesting. I decided to give the techniques a try, and my development efficiency improved dramatically.

What is Mock ❓

In typical development environments, when we receive a requirement, both the frontend and backend teams start developing simultaneously.
What? You wonder if it's possible to wait for the backend to complete the entire development before the frontend begins integration? That's not feasible 🙅 unless you own the company.
In reality, frontend developers with strong skills can create pages very quickly. They can complete several static pages in no time, leaving only the task of interfacing with the API.
At this point, data-related coding comes into play. We rely on the response from API data to handle some complex logic. However, while interfacing, we often encounter unclear API documentation, such as incorrect parameter names or unspecified required fields, exposing all kinds of minor but frustrating issues.
This is where learning to use the most suitable Mock data method becomes crucial. Essentially, it's a technique that allows us to obtain simulated data that matches the agreed data structure with the backend, even when the backend data isn't ready. This avoids allowing backend delays to impact our regular development process.

How to Use Mock ❓

Apidog is a real design-first API development platform that enables you to easily create endpoints and automatically generate mock data, simply by having a JSON structure.
Using Apidog's mock path is quite simple. The process involves three straightforward steps: First, obtain the JSON data structure; second, create an endpoint; and third, acquire the mock URL for use.

🔥 Step One

First, we need to obtain a JSON data structure. This can be achieved by communicating with the backend team to provide the corresponding data format. For instance, they might provide a JSON structure like this.

{
    "status": "success",
    "timestamp": "2024-01-20T10:30:45Z",
    "data": {
        "books": [
            {
                "id": "978-0-123456-78-9",
                "title": "Understanding Computer Systems",
                "author": "Randal E. Bryant",
                "publisher": "Technical Publishing House",
                "publishDate": "2016-01-01",
                "price": 49.99
            },
            {
                "id": "978-0-123456-78-8",
                "title": "Clean Code",
                "author": "Robert C. Martin",
                "publisher": "Prentice Hall",
                "publishDate": "2008-08-01",
                "price": 44.99
            }
        ],
        "pagination": {
            "currentPage": 1,
            "totalPages": 50,
            "totalItems": 500,
            "itemsPerPage": 10
        }
    }
}

🔥 Step Two

Apidog offers a web version, allowing us to use it online without downloading anything. All you need is to register for an account.
Start by creating a new project. The platform supports both HTTP and gRPC, but here we'll choose HTTP. Enter your project name and click "Create."

After creating the project, the next step is to set up a new endpoint. Fill in basic information such as the endpoint path and name.

Under the "Responses" section, click on "Generate from JSON etc." and paste your JSON data. Apidog will automatically generate the correct Data Schema from the JSON. It's incredibly convenient!

You'll notice in the "Preview" area that it shows the content that will be mocked later. It's amazing how effortless it is.

🔥 Step Three

Now, we need to obtain the corresponding mock address. To do this, switch to the "Settings" tab on the left side, select "Mock Settings," and turn on the cloud mock toggle.

This gives us the Cloud Mock Base URL.
Return to the "Run" page of the endpoint. In the top-right corner, select the cloud mock environment and click "Send." You'll see in the bottom panel that the data has responded successfully. It's very cool.

Switch to "Actual Request" to access the real request URL. Copy it into your browser's address bar to view the corresponding mock data. This process is incredibly convenient, allowing you to easily use it directly in your projects.

Additionally, you can adjust the default rules for intelligent mocks or create custom rules, making it a highly powerful tool.

🌟 Final Thoughts

Now we've completed the Mock setup. As you can see, the process is quite simple. In practice, this approach is very user-friendly and significantly enhances the efficiency of the frontend, backend, and testing teams. As frontend developers, we should all give Apidog a try to experience this elegant mock solution.

The intuitive interface and powerful features of Apidog mean that even developers with minimal experience in mock data generation can quickly get up to speed, creating a more productive and efficient workflow. There's no doubt that integrating such tools into your development process can lead to more robust applications and a faster time-to-market. Give it a try and see the difference it makes!