Separation of Data and Ui in your Web App

Hello everyone, My name is Georgy and I’m a Full-stack developer at Bringg and this is the first article I'm writing. 😅

So today I want to focus on the concept of separation of data and UI while building you web app, how it can help you build much cleaner, easier to maintain and more awesome web apps, and a small example of how I was able to render 4 different UI/frameworks libraries with the same consistent. 😄

Usually, in any web app, you have 2 main parts:

• Data
• UI

So you go and choose a framework/UI library like React, Angular, Vue, etc… and then you go on and decide what state manager to use or how to manage your data maybe without state manager.

You start writing your first feature, let's take for example a users list, and you have a checkbox to select users, And then you need to decide where to keep your current selected users.

Do you keep them in your react component state ? or do you keep them in your redux store ? or do you keep them in your angular service or controller ?

Is selected users is something related do your Data somehow ? or is just pure View indicator ?

Okay, so I gonna share with you the mindset, or thoughts you should have while writing features that can help you make the separation more clear through the above example.

Users is our data in our application, we can add user, we can modify user data, and we can remove the user, we can derive information from the users we have like who is online and how many users total we have an so on.

When we show a user list, we just represent our data in a more visible way to the user, like a list for him to see. We allow him to select users and unselect users which is the current state of the view, the selected users on the page, This have no relation to the data at all and should be separated.

By having this separation we are developing javascript applications as plain javascript applications and then choose however we want to represent our data. This can allow us maximum flexibility like using whatever UI library we want to each purpose, this set of components I want to represent with react and the other few I want to represent with web components, I can do that easily now with that separation.

Here is an example I made to show this cool concept:

I choose MobX to manage my state in my application and to help me with the rendering across different frameworks/UI libraries. It has a cool reactivity system which allows you to respond automatically to events you want.

My model here is Template, it’s really simple it just have a name and setter(MobX action) to it, I keep a list of all the templates in the project and I have a store for it TemplateList and this is all my Data.

So I have already my app running as a javascript application, I can add templates and update its text but I still don’t have a UI for this, So let's add React as our first UI here.

For react I used mobx-react which is a library connecting to MobX and uses its abilities to render in react.

Then I choose another library, Vue JS and I keep almost same Html, and CSS classes, I just render with Vue,

I used MobX autorun(https://mobx.js.org/refguide/autorun.html) and on each new template addition, or removal I re-render the view.

and now we have another UI represent with different library but with the same store without changing 1 line of our data management in the app.

So now we had a bit more space on screen so we need to choose more 2 libraries so let's go for AngularJS this time.

AngularJS was a bit more annoying to render because its ng-model was messing with the model so I had to save the texts of the templates in an object and apply re-render on new templates.

So for our last library I choose Preact, it’s really similar to React, Here again, I used autorun to update my UI.

Here I also had to update the template itself on each change(similar to what mobx-react does).

And that’s it now we have 4 different UI/framework libraries showing the same data exactly on the same screen.

I really love this separation, It makes the code in a much cleaner as it just needs to manage the UI state or even just represent the data without any games, it helps the code to be more maintainable and easier to scale.

Hope you liked the concept and if anyone has any question or would just like to discuss, or give me any points to improve is more than welcome to talk to me on Facebook, or by mail [e-mail].

Here is a link to the repository and a website:

stolenng/mobx-cross-data-example

http://mobx-cross-data.georgy-glezer.com/