3 Main Layers of front-end development

(Note: This is one of the articles written in a series of vue plugin-based development. If you are new, please check out the whole story here)

Photo by Dave on Unsplash

On a top-level, if we see any front-end application development, we have three main layers

1. Business Layer(Logics)
2. Service Layer (API calls)
3. UI Layer (Presentation)

Let’s talk a bit about these and will explore how we can improve this for our modular approach

Business Layer

Here is where all the logic of the application sits. So we thought, how can we separate this layer, so anyone can write their logics for every plugin they are consuming. Interestingly we didn’t come with up any such solution because differentiating complete logics is hard since some part of the logic will be hard-wired with the plugin itself. So we identified the essential logics, and we gave hooks inside the application, and all these hooks will be configured using a configuration file. Earlier we saw how to build the core plugin which will take these configurations and inject into each plugin

Service Layer

This is where the front-end interacts with the backend and fuels the engine. Earlier, we never thought of building the service as a separate package, but once we made, we got a lot of control over the plugins. So we made services as a different package, this package is just a phone book of APIs. So anyone wants to call the API no need to worry about the static parameters and all they can call the service by using the name.

So our service package has Axios instance and all the required URLs to make the API calls. Now in our plugin, we will call the service by

service.makeCall('user/getUsers').then(...)

Now we can provide a way to the consumer to manipulate this API call in a configuration like,

plugins:{
  users:{
    services:{getUsers:'user/getUsersV2'}
  }
}

In our plugins instead of making default call, we will check for configuration first and will tell service to make the call.

UI Layer

Once our engine is running, this is the place where we can see some content. So we thought of practice some things which can make our life a little easier.

Theme Injector

We built a theme injector that will inject the colors on the run time based on some id. We hosted multiple CSS files and a script that will insert the CSS file on run time.

Common components

When we are building components for plugins, then we end up having some standard components which can be used across the plugins. So we created a common component package, where all the common components will be there and used across the plugins.

Templates

We will face a scenario where we have to change designs dynamically on runtime. For that, we used the vue template slots approach(read this article) to achieve this.