UI Development Frameworks

0
171

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.

A Web Application is made up of HTML, CSS, and JavaScript.

HTML helps with building the web pages, CSS helps with giving the look and feel of that page and JavaScript handles the DOM manipulation.

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:[object object] UI Development Frameworks HTML DOM 300x173

With the object model, JavaScript gets all the power it needs to create dynamic HTML:

  • JavaScript can change all the HTML elements, attributes, CSS styles on the page.
  • JavaScript can remove existing HTML elements and attributes and can add new HTML elements and attributes.
  • JavaScript can react to all existing HTML events in the page.

JavaScript can help with everything you need on UI. But there is some problem with it. Let’s just have a look at the same:

Problem :

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.

[object object] UI Development Frameworks ui image2 300x151

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.

The more interaction that happens on the client-side, the more JavaScript code is needed to make those interactive pieces function well. And the more code is written, the more important it is to have a clean and well-architected codebase. And this is exactly the problem JavaScript frameworks help solve — each with its own approach.

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.

Recent JavaScript frameworks can help architect your code so that it is modular (therefore reusable), readable, performant and secure and most importantly cohesive as well as easy to understand.

A set of frameworks available in the market that are highly efficient in their performance. Here are few of them:

[object object] UI Development Frameworks ui develeopment framework 300x171

 

I will be picking up top four of these here, however, you can get information of all on their official sites.

  1. Angular

Angular, a Google’s product comes with a long list of features that enable building everything, ranging from web to desktop and mobile. The framework is built with TypeScript from Microsoft with an eye to making JavaScript more agile and attractive for large enterprises. Ng2 features a component-based architecture, improved DI (dependency injection), efficient logging service, inter-component communications and more.

  1. React

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.

  1. Vue

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.

  1. Ember

Back in 2015, Ember was called the best JavaScript framework for the web application, leaving behind React and AngularJS 1.x. Today, it boasts a huge online community, regular updates and wide appliance of JavaScript best practices to guarantee ultimate experience right out of the box.

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:

As I stated above that Web browsers handle the DOM implementation details, so we can interact with it using JavaScript and CSS.

But the problem is that DOM was never optimized for creating dynamic UI.

We can work with it using JavaScript and libraries like jQuery (thank God we have it). But jQuery and others did little to solve performance issues. Think about modern social networks like Twitter, Facebook or Pinterest. After scrolling a little bit, the user will have tens of thousands of nodes. Interacting with them efficiently is a huge problem. Try to move a 1000 divs 5 pixel left, for example. It may take more than a second. It’s a lot of time for the modern web.

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:

  1. Remove an element
  2. Add a new element
  3. 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.

[object object] UI Development Frameworks ui image3 300x175

Hence, Virtual DOM saves the overall cost in this way.

Comparison:

I made a research and prepared a chart of comparison between these 4 frameworks, which is as below:

Representation:

[object object] UI Development Frameworks ui image4 290x300

Conclusion:

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!

SHARE
Previous articleCorner Aspects of Supercomputers – Innovation at Next Level
Next articleUnderstanding Business Strategy
Dinesh Kathuria
Dinesh Kathuria is Software Engineer at Pyramid India Headquarters, Noida. He did B.Tech. in Computer Science & Engineering from Maharishi Dayanand University. He has worked for almost 2 years in software industry in Web Applications Development. He is closely working with clients in Insurance domain.

LEAVE A REPLY

Please enter your comment!
Please enter your name here