(String: {%- set hs_blog_post_body -%} {%- set in_blog_post_body = true -%} <span id="hs_cos_wrapper_post_body" class="hs_cos_wrapper hs_cos_wrapper_meta_field hs_cos_wrapper_type_rich_text" style="" data-hs-cos-general-type="meta_field" data-hs-cos-type="rich_text"> <div class="blog-post__lead h2"> <p>No one likes those big articles - that’s why we’re creating Quick Tips - short tips to change your developer's life from the moment you read them.</p> </div></span>)

Frontend Quick Tips #13 Building an App When There Is No API

Photo of Bernard Klatka

Bernard Klatka

Updated Jan 9, 2023 • 3 min read
woman

No one likes those big articles - that’s why we’re creating Quick Tips - short tips to change your developer's life from the moment you read them.

Those may be some patterns explained in JS code on real-life examples or some techniques for better code.

Problem

Sometimes we need to start building a Web App, but our API is either not complete or not stable. We don’t know the full interface of data that will come from our endpoints but we want to progress with our work.

Solution

Decouple the API from your application by normalizing the data model.

Ok, fancy words aside - what do we actually mean?

Let’s say we call our API through some service with a very simple component to show us a list of vinyl collections.

code

There is no endpoint for the fetchVinyls method yet, however we can return mock data for now.

code

Easy right? But then, the API comes with such an interface:

code

Uhh, now we need to change our component so instead we use vinyl.name Now we have vinyl.vinyl_name as well as others.

Actually, there is another way.

We can create a simple object to transfer data from the API to our app. At the closest point to the API we can map that data to our interface.

code

What we get from it:

  • We can create an interface of data before the API exists and later on only map backend data to our interface.
  • Only one place to introduce changes from API interfaces (property name changes are super easy to introduce).
  • We can change the property naming convention.
  • We can add fallbacks/default values for certain properties.

When to use it?

  • Especially for more complex apps
  • When BE is not ready yet or the API is unstable.
Photo of Bernard Klatka

More posts by this author

Bernard Klatka

Codestories Newsletter  Check what has recently been hot in European Tech.   Subscribe now

We're Netguru!

At Netguru we specialize in designing, building, shipping and scaling beautiful, usable products with blazing-fast efficiency
Let's talk business!

Trusted by: