Separation of Data and Ui in your Web App

Georgy Glezer
Sep 21, 2019 · 5 min read

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 stolenng@gmail.com.

Here is a link to the repository and a website:

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

Frontend Weekly

It's really hard to keep up with all the front-end…

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Georgy Glezer

Written by

Fullstack Developer, Engineering Blogger, Udemy Instructor. https://georgy-glezer.com

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store