UI DEVELOPMENT
UI Development is the process of developing a Front End of any websites using Various UI Technologies like HTML, CSS, JavaScript, jQuery, Bootstrap and Angular JS for better interaction with a user and the underlying system.
INTRODUCTION TO UI
There are different names for UI like “GUI”, “UI”, “UX” and “Front-End”
GUI → Graphical User Interface
UI → User Interface
UX → User Experience
Front-End → The front look and Feel of any website
Initial days of communication between two human beings, it required a language and body language.
The same if a person wants to communicate with a machine it requires the concept called Programming Language.
First we need to understand why every software industry starts using the concept called UI. For any kind of business or any product to reach the intended users it should have a proper website. The website or a mobile app is the only way to interact with any user.
But here with a mobile app, a user can easily interact with the underlying system, but a user cannot install all the mobile apps in his mobile there may be memory issue. The only best way is a website and if that website works like mobile app then that will be more convenient for a user.
To develop a website for any underlying system we should learn UI Technologies. The UI development is the process of developing any website’s front end using various UI Technologies. UI Technologies is not a single technology, which is the combination of other and each different technologies.
First we understand a website’s architecture.
Each website’s architecture contains majority 3 parts, such as
- Client
- Server
- Database
Let’s understand how the Facebook application works as per the above architecture.
A user opens a Facebook login page in his client’s browser and clicks on ‘login’ button. Then that browsers collects the form data and sends a HTTP requests to a Facebook server.
The Facebook server performs some processing and checks the user verification with the Facebook database. The Facebook database executes few SQL queries and gets the user data and confirms the user verification with the Facebook server.
Facebook server collects the user data and prepares the complete Facebook page and sends back to client’s browser, so that the user can able to see his Facebook page with complete Notifications, Chat information and Friend requests.
Here we have to understand the purpose of client, server and database is completely different.
To develop the client side UI, server side code and Database design we should require different kinds of technologies.
Technologies required for web development
As a UI Developer we are responsible to develop the complete front end of any website. For this we are learning the client side technologies/ UI Technologies.
Let’s understand the brief introduction about the UI technologies
HTML
HTML stands for Hypertext markup language which is used to structure a webpage. We use HTML just to define the structure of a webpage with some basic styles.
CSS
CSS stands for Cascading Style Sheet. The CSS is used to present the data on the webpage. CSS is used to override the default styles of HTML and apply various styles to a webpage.
JavaScript
JavaScript is a client side programming language which is used to display dynamic data on a webpage using the concept called DOM Manipulation
jQuery
jQuery is a library of JavaScript, which is also used to display dynamic data on a webpage in a simplified manner and DOM Manipulation and CSS Manipulation AJAX calls in a simplified manner.
AJAX
AJAX stands for Asynchronous JavaScript and XML, this is a client side programming technique to update the specific parts of a webpage without reloading the whole browser. Here we use a built in browser’s object called XMLHttpRequest Object.
Bootstrap
This is a Framework of HTML, CSS, and JavaScript. The core features of Bootstrap is Responsiveness and Mobile first approach. This is the world’s most popular front end framework for responsive web applications development any website developed by using Bootstrap, which works properly in all the browsers, all the devices and all the operating systems.
AngularJS
This is the most popular JavaScript framework developed and maintained by Google. We use AngularJS to develop rich client side applications with complex logics. We can simplify the complex front end logics by using MVC architecture and two-way data binding. This AngularJS framework is best suitable for single page applications.