DEV Community

Cover image for How to Build Frontend Apps 10x Faster
Anmol Baranwal for Requestly

Posted on

How to Build Frontend Apps 10x Faster

We have all been there when the backend isn't ready with APIs so the frontend developers manually hardcode the response.

It's time consuming and comes with a lot of indirect problems.

Today, we will explore how Requestly can help you build frontend applications at least 10x faster by reducing dependency on backend developers.

Let's jump in.

excited to try it


In a nutshell, we are covering these topics in detail.

  1. What is the usual workflow when APIs aren't available?
  2. How Requestly solve that problem with use cases.
  3. More things that Requestly can help you achieve.

Star Requestly ⭐


1. What is the usual workflow when APIs aren't available?

In most cases, there isn't an efficient way to implement a proper frontend without API logic.

We can mock an API using Mirage JS but it still won't solve the issue completely.

backend is not ready

Let's see what is the usual dev workflow for any frontend developer when there are no APIs ready yet.

⚡ Backend developers create API contracts, which define how the frontend can interact with the backend services. These contracts are shared in JSON format, detailing the expected request and response structures.

⚡ Frontend developers take these API contracts and hardcode the expected responses directly into their code (workaround). This is often done to allow for immediate development and testing of the UI without waiting for the backend to be fully implemented.

⚡ When frontend developers need to integrate the actual API or submit a pull request (a request to merge their code changes into the codebase), they have to remove the hardcoded responses. This is necessary to ensure that the code interacts with the live API rather than the static data.

⚡ If reviewers leave comments on the pull request, frontend developers may need to revert to the hardcoded responses to continue refining the UI based on the feedback, since the actual API might not be available or stable at that moment. It's a huge hassle for simple stuff.

⚡ Similarly, during API integration, if issues arise (for instance the API is not returning the expected data), developers may need to bring back the hardcoded responses to continue working on the UI without being blocked by backend issues.

⚡ This back-and-forth of removing and reintegrating hardcoded responses can lead to a disorganized codebase and is very time-consuming. Developers may spend a lot of time managing these changes rather than focusing on building features.

⚡ The reliance on hardcoded responses makes it very tough to test various edge cases. Developers have to repeatedly modify the hardcoded data to test different situations, which may lead to errors and inconsistencies.

 

✅ Instead of hardcoding responses, a simple solution for developers can be to use mock servers that simulate API responses. This allows for more dynamic testing and reduces the need to modify code repeatedly.

mock

Let's see how we can solve this problem in the next section!


2. How Requestly solves that problem including use cases.

If you've ever developed a website, you know that every app needs to make a call to the server to fetch its resources.

It can be API requests, scripts or anything else to render it on the webpage.

Requestly is an open source frontend development platform that helps developers test and debug their apps faster without needing multiple deployment cycles. It helps you to:

✅ Build features when backend API is not ready.

✅ Testing code changes in production without deployment cycles.

✅ Testing, Validating, Mocking API responses and many more.

frontend vs backend

 

🎯 How to install Requestly?

You can download the desktop app or find it on your preferred browser including Chrome, Safari and Brave.

requestly

desktop version

the desktop version

 

As I discussed the hardcoding responses in the codebase, you no longer need to do it after setting up Requestly. With a mutual understanding of the backend and frontend, an API contract is decided and then defined on the Requestly dashboard for the desired API endpoint.

It serves the response in such a way that it's coming from the server to avoid making any changes in the codebase or any other complex configuration.

The teams can agree on the responses. It can be added to the Requestly dashboard which leads to proper progress on the same feature by both teams without any big problems!

 

There are many other use cases like Requestly can help avoid the risk of accidentally committing mock code. However, I will explore a single use case on how we can use it to update the response with production APIs.

Let's see how to change the response body of HTTP requests without making actual changes in the server content using the Requestly Response Rule.

First, let's create a new Rule to modify the response body of an HTTP request.

create new rule

create new rule

 

We will only look at modify response rule with different examples and cases.

Select the API response option

Select the API response option

 

You get various template options as well if you quickly want to get started.

various template options

 

🎯 Wikipedia quick peek update - Static Override.

We will explore how we can update the quick peek data with fixed data so that after hovering any word on Wikipedia will show the same response.

As usual, we are going with the REST API.

modify response rule with REST API

 

✅ Explanation.

-→ Request: this will contain the main API endpoint URL that will be used along with options like contains and equal.

-→ Response status: This will be the status code sent with the response that will help you identify the log easily. You can select the status codes like 3xx, 4xx, 5xx and many more depending on your case.

-→ Response: We can use static response data or a dynamic request to add custom logic using code. In case of lengthy API calls or the need to manage multiple requests simultaneously, using Async/Await can be efficient. It's damn useful :)

 

We will use Static Response in this example, which is another way of saying static override.

If you're not aware of what a quick peek is, it is shown whenever anyone hovers over a text to understand more. You would have noticed it on Wikipedia.

To get the API endpoint, just start searching on Wikipedia and filter the network requests to get the one responsible for a quick peek.

The API endpoint responsible is: en.wikipedia.org/api/rest_v1.

go search on Wikipedia

you can also use any other API endpoints

 

Set up the rule with an example response, I've just used a quick peek JSON response of Amazon grabbed from the network log. You can copy this response from this gist on GitHub.

This should update the quick peek of any hovered word.

the rule to update the quick peek of any hovered word

As you can see, the rule is applied properly.

The rule is applied properly

 

Output.

updated json response of quick peek

I've hovered over Google but the json response is the one we used

 

updated json response of quick peek

I've hovered over Apple but the json response is the one we used

 

The best part is that Requestly provides its own network log where you can catch the requests and analyze so many other stuff.

requestly console

 

🎯 Amazon Search Suggestion - Dynamic Override.

Let's understand how we can update the response on the Amazon search suggestions by using Dynamic JavaScript in this example, which is another way of saying dynamic override.

To get the API endpoint, just start searching on Amazon and filter the network requests to get the one responsible for search suggestions.

The API endpoint we get is: https://completion.amazon.in/api/2017/suggestions.

api endpoint for amazon search suggestions

 

-→ 🎯 Logic 1.

We are using a rule to append a number of suggestions with the URL of the API in the first suggestion of the Amazon query. The query is defined below!



function modifyResponse(args) {
  const {method, url, response, responseType, requestHeaders, requestData, responseJSON} = args;
  // Change response below depending upon request attributes received in args
  res= responseJSON
  res.suggestions[0].value= res.suggestions[0].value + " - " + res.suggestions.length + " - " + url
  return response;
}


Enter fullscreen mode Exit fullscreen mode

dynamic rule

Once the rule is implemented, a message will be clearly shown on the page that the rule has been applied. I did it with multiple rules and it clearly showed that those specific rules were being applied.

clear message that the rule is applied on the page

 

Output.

query as laptop

query as laptop gives response based on the rule

 

query as laptop Samsung

query as laptop samsung gives response based on the rule

 

-→ 🎯 Logic 2.

Change the above rule to just show the response including the length of suggestions in the 2nd suggestion without appending the URL.



res.suggestions[1].value= res.suggestions[1].value+" - "+responseJSON.suggestions.length;


Enter fullscreen mode Exit fullscreen mode

logic 2

 

Output.

2nd suggestion is changed

2nd suggestion is changed

 

-→ 🎯 Logic 3.

Let's change the first suggestion entirely to requestly in the rule by using:



res.suggestions[0].value='requestly';


Enter fullscreen mode Exit fullscreen mode

new rule to change the first suggestion

 

Output.

requestly is the first suggestion

requestly is the first suggestion

 

-→ 🎯 Simulating Error.

During testing, you often face a situation where you want to test your feature in case of an API Error because simulating some errors can be tricky on backends. Let's put the response code as 400.

setting response code as 400

response code as 400

 

Due to the error, there are no search suggestions visible!

there are no search suggestions visible

 

You can read more on the official blog on how to use Modify API Response Rule.

Or watch this video!


3. More brief on what Requestly can help you achieve.

You can lots of other stuff like:

-→ Testing scripts or APIs directly on staging/production sites by redirecting HTTP requests(API Calls/Files) from one environment to another.

redirect

 

-→ Modify headers or Inject custom scripts/styles on external web pages.

-→ Intercept, Modify, and Mock GraphQL Query by applying extra targeting on operation name and query data.

 

It's extremely useful for QA Software engineers or frontend teams. Let's see some of the exciting features:

✅ You can create a workspace to share rules, mocks, and sessions. Faster collaboration leads to solving problems quickly!

collaboration

 

✅ You can record sessions and it's automatically done whenever you test a rule from the dashboard.

sessions

 

✅ You can enable/disable rules from the dashboard.

disable or enable rules

 

✅ You can get free credits and buy a premium plan after doing some basic things like creating a rule.

free credits

 

✅ You can read the documentation on how they perform in comparison with competitive tools like Charles Proxy, Fiddler, Resource Override, ModHeader, HTTP Toolkit, Proxyman, Wireshark, Mockoon, BirdEatsBug and Jam.

comparison

 

You can follow the quickstart guide and read how to guides which would answer most of your questions.

I also recommend watching this quick demo to get started with Requestly!


I think it's safe to say Requestly can help you build your frontend apps at least 10x faster. It's easy and efficient.

It's worth it and a lot of international teams already use it in their workflow.

Let me know if you've any questions or feedback.

Have a great day. Till next time!

If you like this kind of stuff,
please follow me for more :)
profile of Twitter with username Anmol_Codes profile of GitHub with username Anmol-Baranwal profile of LinkedIn with username Anmol-Baranwal

"Write more, inspire more!"

Ending GIF waving goodbye

Top comments (18)

Collapse
 
anmolbaranwal profile image
Anmol Baranwal

Hi guys.. you can do the same with GraphQL endpoints as well.

I initially covered it, but the article was getting too long.. so I decided to remove that section. Maybe I will cover it in one of my future articles.

If you're looking for a site to test with, Medium supports GraphQL APIs so you can try it there.

Image description

By the way, some people might misunderstand "10x faster" referring to speed which is why I explained it in the opening paragraph.

Thanks for reading.
Let me know if you enjoyed this :)

Collapse
 
andrewbaisden profile image
Andrew Baisden

Nice, another helpful tool worth adding to my productivity list 😋

Collapse
 
anmolbaranwal profile image
Anmol Baranwal

Whoa! Thanks for reading Andrew 🙌
A lot of teams are already using Requestly in their workflow. It's definitely worth it!

Image description

Collapse
 
ezra_kiplangat_25a5d8a70f profile image
Ezra Kiplangat

Amazing

Collapse
 
st3adyp1ck profile image
Ilya Belous

Great article! I’m officially 10x faster just from reading it! 🚀 If this keeps up, by the end of the week, I’ll be coding at light speed and bending space-time to deliver projects before they’re even started!

But seriously, these tips are golden—especially the part about simplifying workflows. If I can shave even half the time off my dev process, I’ll finally have time to tackle my real enemy: figuring out where that missing semi-colon went…

Cheers to faster, cleaner code! May our console.logs be few and our deployments be smooth!

Collapse
 
derick1530 profile image
Derick Zihalirwa

reading the first paragraph... LOL

Collapse
 
exclusivdkpro profile image
Rambevha Dakalo

Thanks for sharing this!

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary

Most recommended for productivity.

Collapse
 
anmolbaranwal profile image
Anmol Baranwal

Thanks for reading Jitendra. Appreciate your support!

Collapse
 
neurabot profile image
Neurabot

Interesting.

Collapse
 
anmolbaranwal profile image
Anmol Baranwal

Thank you for reading :)

Collapse
 
mohamed_karim_2dddebb42bd profile image
mohamed karim

Thank for sharing

Collapse
 
mroman7 profile image
Roman

Nice, and amazing post

Collapse
 
anmolbaranwal profile image
Anmol Baranwal

Thanks for reading Roman :)
I'm sure this will make the process easier for teams.

Collapse
 
chandra_pantachhetri profile image
Chandra Panta Chhetri

Thank you! It seems Requestly has a better UI & is easier to use compared to what I've used in the past (Fiddler).

Collapse
 
expressa profile image
Expressa

Good post!

Collapse
 
smikodanic profile image
Saša M

new, fast, and easy to learn, frontend JS framework for single page apps

Collapse
 
kxrn0 profile image
kxrn0 • Edited

>mikosoft

I'm going to be really disappointed if it doesn't reference touhou anywhere.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.