UI | What exactly is it?
Every single Machine, Camera, Computer, Microwave Oven, Washing Machine … every machine has a sort of User Interface. The way that you operate and control that machine, we can call that a user interface.
In the IT world, the user interface (UI) is everything through which a user interacts with an application or a website.
So, our Computer, it itself has an interface. If we talk about Windows PC, it provides the UI to control the apps, folders etc.
The Browser that we use to surf the internet, itself has its UI. The home button, address bar, back button everything is UI.
Consider the way you operate Facebook in a browser. Facebook also has its UI, the Notification icon, Profile icon, Posts everything is UI.
The growing dependence of many companies on web applications and mobile applications has led many companies to place increased priority on UI in an effort to improve the user’s overall experience.
Evolution of UI in brief:
In early computers, there was very little user interface except for a few buttons at an operator’s console. The user interface evolved with the introduction of the command line interface, which first appeared as a nearly blank display screen with a line for user input. Finally, the graphical user interface (GUI) arrived, which includes such things as windows, pull-down menus, buttons, scroll bars and icons.
So in this blog, I’ll be focusing on the UI of what the Facebook has, i.e. the Web Application UI.
A Web Application is an application that runs on Web Browser. We daily use so many Web Applications like Facebook, Twitter, LinkedIn etc.
UI can have multiple controls and UI doesn’t limit to controls only, the images, styling, functionality, behaviour, all come under UI.
The core of the UI is happening of a reaction to some kind of event.
For example, when you click on a button, some reaction to that action takes place.
I guess that’s enough about the UI now. Let’s move on to what UI Development is.
Let me just differentiate UI designing and UI Development.
UI Designing is giving the look and feel to the UI, with help of CSS.
But if that part has a single logic, for example, making a toggle button to toggle on click, that means you are dealing with the behaviour of that, so it now would be called as UI Development.
Now you must be thinking about DOM. What is DOM?
When a web page is loaded, the browser creates a Document Object Model of that page.
The HTML DOM is constructed as a tree of Objects:
Imagine you are implementing a web application where the user can invite many people by introducing their email addresses. The UX/UI designer makes this decision; there is an empty state where we show a label with some help text, in any other case we show the email addresses with a button/link to delete them to the right.
The state of this form can be basically an array of objects containing the email addresses plus a unique identifier. Initially, it will be empty. When adding an email address by typing it and clicking enter, you add the typed email address to the array and update the UI. When the user clicks on “delete” you delete the email address and update the UI. Have you seen that? Every time you change the state, you need to update the UI.
So as a solution, we got UI Development Frameworks.
UI Development Framework:
A UI development framework is basically a software suite that presents the user with APIs so that we can build our own UI components or modify the UI itself. Framework refers to a set of API and documentation that will allow us to do the above operations.
The web is an increasingly dynamic platform, and thankfully UI development frameworks facilitate adding interactive functionality to websites/applications. If your site has dynamic content requirements, then consider adopting a modern UI development framework.
A set of frameworks available in the market that are highly efficient in their performance. Here are few of them:
I will be picking up top four of these here, however, you can get information of all on their official sites.
React is more of a library than a JS framework. It stands behind user interfaces of Facebook and Instagram, showing its efficiency within dynamic high-traffic applications.
It is rightly considered the fastest growing JS framework. In MVC (Model-View-Controller) pattern React.js acts as “V” and can be smoothly integrated with any architecture. Due to the usage of Virtual DOM it provides a great performance boost, comparing to Angular. In addition to that, React components can be created and reused among applications or even transferred for public use.
Vue 2.0 was also introduced in 2016 and it took the best from Ember, React and Angular, putting all that into a handy package. It is proved to be faster and leaner, comparing to React and Angular 2.0.
Going deeper, Vue.js offers two-way data, server-side rendering (like in Angular2 and ReactJS), Virtual DOM usage, Vue-cli (scaffolding tool for quick start) and optional JSX support. Its founder states that Vue 2 is one of the fastest frameworks all in all.
Ember features two-way data binding, like Angular, keeping both view and model in sync for all the time. Applying Fastboot.js module it ensures prompt server-side rendering of DOM, improving the performance of complex UIs.
Have you noticed a couple of frameworks using Virtual DOM?
What is it? Let’s have a look:
But the problem is that DOM was never optimized for creating dynamic UI.
However, the Virtual DOM is some kind of lightweight copy of our DOM. We can change it as we want and then save to our real DOM tree. While saving we should compare, find difference and change (re-render) what should be changed.
A series of updates that would normally be performed by manually issuing a series of DOM API calls can be automatically batched into a single call (or a reduced set of calls). For instance, suppose the logic behind an update to the site requires that you:
- Remove an element
- Add a new element
- Change a property of the added element
All can be done in a single call. So, in virtual DOM, when the state changes in the background, it will be rendered on the browser in the following way:
First, a copy of the actual DOM would be made and then all the changes would be done to this copied DOM. When all the operations are done, the virtual (copied) DOM will be compared with actual DOM and only the difference between two DOMs would be re-rendered on the browser (as depicted below), not the whole DOM which was actually being done conventionally.
Hence, Virtual DOM saves the overall cost in this way.
I made a research and prepared a chart of comparison between these 4 frameworks, which is as below:
From the comparison, we can see that the Vue JS is the best suited as of now, for the Web Application development. Because it uses Virtual DOM, has a less learning graph, best documentation and moreover, it is the tiniest frameworks among all.
Though it doesn’t have any good company backing it up and it doesn’t have a bigger community behind it. So, what? Its features are going to be more popular in the coming phase and all the things will fall into the right place.
Thanks for reading this. Have a nice day!