Frontend vs. Backend

“Where is the briefcase?”

If I had a dollar for every time someone asked me that…I would have enough to fill up an actual briefcase.

For those of you who don’t know, a briefcase is a copy of the iModel obtained from iModelHub (cloud). It is the primary data source of an iModel.js application.

Most recently, this question was asked by a client working with a huge iModel. When I say huge…we are talking gigs on gigs. They wanted to build an app for their mobile devices but seemed concerned.

“Is all that data going to be downloaded on my phone!?”

They really wanted to keep it on the cloud considering the storage and bandwidth limitations on mobile.

I feel that.

So where is this data downloaded?

Answer: The backend.

“Great! The briefcase is in the backend.”

“But wait…where is the backend?”

Now that’s the real question. To answer that, let’s first understand what it is. An iModel.js web app has two parts: the frontend and the backend. The frontend is typically a UI client that the users can interact with. It’s only concerned with what needs to be displayed on the screen. Let’s take a look at an example.

Here’s one from the last post:

Bonus: It’s running on my iPhone.

The backend, on the other hand, has access to the filesystem and the briefcase which has the iModel data. It provides the frontend with all the information it needs to display content, as in the example above.

But is the frontend getting all the data from the briefcase (ie. gigs on gigs) or only what’s needed?

That’s the amazing thing: iModel.js frontend components are optimized to fetch only the required information. Let’s take the viewport as an example. It streams graphics on-demand based on which part of the model is being viewed. This process is independent of the size of the briefcase.

Here’s a fun way to look at it. If our app is a broadway show, the frontend is like the main stage. The only thing that is presented is what the audience needs to see. All the scripts, crew, costumes, etc. are in the back along with other things that may never come on stage. That’s our backend. It does all the heavy lifting behind the scenes to make the show happen.

Now that we know what the backend is, it’s time to find out where it lives…the local device or the cloud?

It could be either. Let’s take a look at both:

1. Local Backend: This is how the simple-viewer-app is configured by default. The backend runs concurrently with the frontend on the same machine. All the code for this backend can be found under the src folder:

You guessed it: in the “backend” folder.

This approach is convenient during development. You are less likely to run into latency or backend maintenance issues. But if you are deploying on web, ultimately you need to use a…

2. Deployed Backend: This is a backend set up on a server in the cloud. We offer a general-purpose backend that you are welcome to use. Even my iPhone demo uses it. For our storage conscious clients above, this is where the briefcase needs to be :)

Now we can take all the selfies we want! Storage is someone else’s problem.

-Roop, reporting live from the basement.

<- previous post | home | next post ->