An Overview on Some Popular User Interface Framework (Part 1)

User Interface is an input and output data device that works by generating a web page in which a user search for query to get the output (results). The task is executed via Internet and viewed in web browser. The goal of user interface design is to make the user's interaction as simple and efficient as possible.

To create a web page you have to have knowledge of HTML, CSS and JS.

HTML stands for Hyper Text Markup Language and is used to create web page. The mark up says your Web browser, to display a Web page with words and images for the user. A Web Browser can read the HTML file.

The new version of HTML is HTML5. In HTML5 the DOCTYPE declaration is very simple. It has new elements like <header>, <footer>, <article>, and <section>. It has new form of controllers like number, time, date, calendar and range, <svg> and <canvas>. Graphic new features like, multimedia <audio> and <video> elements are also some of the new inclusions.

Knowing Bootstrap
Bootstrap is a powerful front-end framework, which is faster and easier for web development. It includes HTML and CSS based design user interface components like Typography, Forms, Buttons, Tables, Navigations, Dropdowns, Alerts, Modals, Tabs, Accordion, Carousel and others including JS extensions. It allows a developer the ability to create a responsive layout with much less efforts.

Features

• Save lots of time: It is fast and easier thus saving on your time and efforts

• Responsive features: By using bootstrap, you can make your design responsive and user friendly.

• Easy to use: It is very easy to use. You have to have basic knowledge of HTML and CSS to start development with bootstrap.

• Compatible with browsers: It is compatible with all modern browsers such as Mozilla Firefox, Google Chrome, Safari, Internet Explorer, and Opera.

• Open Source - It is completely free to use.

Knowing KnockOut
A standalone JS library offers two-way data binding and allows promotion of MVVM pattern. It supports automatic declarative UI bindings and automatic UI refresh. It is also considered as more of a library and less of a framework, as per the structure of the code. It can used in tandem with any other library or can be collaborated with a larger framework.

Features

• Declarative Bindings: It does easily associate itself with the DOM elements of the model data using a precise and readable syntax.

• Automatic UI Refresh: If the state of the data model is changed then the UI updates itself automatically.

• Dependency Tracking: The dependency tracking set up chains of relationships between the data model to transform and combine.

• Templating: The template is quick in generating elegant and well-functioned UI for your model data. It also has a built-in templating engine that the user can implement as a third party template.

Knowing Kendo UI
Kendo UI framework is based on JQuery, for building modern web apps. The framework features widgets lie UI that are rich in data visualization framework and auto-adaptive mobile framework. It also has tools needed for HTML5 app development. It offers more on data sources, templates, MVVM, drag and drop elements and more.

Features

• Configuration: In configuration, the developer has to do the basic, with non-declarative set of initialization you have to configure through JSON formatted settings along with the widget.

• Data source configuration: Data source configuration is dependent on the initialization you choose. The developer needs to set up the data source properly in the widget, by configuration.

• Event Binding: Event binding is required for binding up the events of the web widget. It is dependent on the type of initialization a developer chooses.

• Styling: Kendo UI allows style sheets like kendo. [Skin].css, skin specific, colours, backgrounds, positioning and styling. The style sheets enables it to align with the custom made theme.

Knowing JQuery UI
A JS library, designed for JS programming. It is UI widget and interaction library, built on JQuery JS library, which is used to build highly interactive web applications. It is a collection of interface interactions, enabled to bring in effects with widgets, and themes built on top of the jQuery JavaScript Library. The UI library provides great interface enhancements for your web page that might include animation, widget and advanced effects.

Features

• Position Utility: It makes easier positioning with element relativity, or with relativity to the parent window or the mouse. The developer has to select the element and configure the part of another element and position accordingly.

• Button Widget: Developers can use the markup to create buttons. With the button widget, one can directly create a fully themed able button from any other element. You can also develop the native button and directly use them in your dialog boxes or forms. You can create the ordinary button element to form an input element an all you need to do is submit the type or anchor tag.

• Autocomplete Widget: The Autocomplete Widget enables you to make any text input field pop up a menu, and thus help the user in completing the search entry and provide suggestion or show all allowed values. The user can provide static data using the source option to provide a call back function for the data source or can again get the data from the server via Ajax.