How to Build Web Apps Using JavaScript UI Library

The process of creating a proper web application cannot be set aside or ignored since this software solution enables every business to engage with their users over any mobile or desktop device and platform.

This article is specifically designed for those who want to save their efforts while developing a modern web app. It focuses on building an application with a JavaScript UI library of widgets. Besides, you can use ready-made CSS templates thus significantly cutting time spent on your project customization.

Let’s get started!


Web app navigation directly affects its usability. Your users will appreciate clear and well-defined navigation that helps them easily get around your product, understand where they are, and find what they came for.

The example above shows the horizontal top header navigation. This placement is ideal for small web apps consisting of up to 7 or 8 pages. The header is separated from the page content, reducing confusion between navigation and content.

The toolbar placed at the top header takes up little space, however, it provides an intuitive look and feel. It can display a branded logo image, title, and action buttons. You can also attach links to settings, notifications, and a user profile thus allowing visitors to access any part of your project in a single click.

Moreover, you can consider sub-navigation and display several links to the web app pages in a tab bar. This is useful when the header space isn’t large enough for all of your primary category links.

The following example is the vertical side navigation. This type is especially useful when you have a lot of content categories in your app architecture. In that case, you can attach a sidebar widget, which also allows adding various interactive elements (e.g. calendar, time picker, etc.) and setting scrolling when the list becomes too long to fit within a window.

Having combined sidebar and list widgets, you can create a double sidebar navigation where you can display sidebar items on the left with some subitems on the right.

In fact, combining several widgets and their placements allows you to build a simple and logical navigation structure. For instance, you can use the toolbar for the primary navigation and the sidebar for the secondary navigation. With a complex project, such as a hospital management system, you’ll find yourself attaching the toolbar for the primary, the tab bar for the secondary, and the sidebar for the tertiary level of your web app navigation.

Working with data

Web apps are becoming more elaborate and data-intensive. Users are aimed at adding more data while being able to edit or delete it. To improve your customer experience, you can set one of the following ways of adding and editing information in your web app.

First of all, you can set inline editing to allow users to edit text fields directly in a cell. This functionality is available in grid, tree grid, data view, and list widgets. Secondly, users can edit data via the right panel that will appear after clicking on the desired cell.

Besides, you can add the ability to edit data through a modal window based on a form widget. This method fits for working with large data sets. Users will be able to fill in the form with the relevant information, save it, and edit if needed.

Filtering data

Filtering enables users to customize the view of data in your web app. Therefore, they can view or hide information on a page based on selected criteria, and also save filters and share them so that the recipient could see the same view.

With regard to location, you may add filter controls to the top of the page or to the sidebar. The second method is found to be quite bulky, however, it allows adding a larger number of controls.

About DHTMLX Suite UI library

DHTMLX Suite is a JavaScript UI widget library for developing feature-rich web apps. Each of the 20+ widgets supports a wide configuration via a comprehensive API. Thus, users will be able to work with large data sets, enjoy inline editing and convenient content filtering, use drag-n-drop, as well as export data to Excel or CSV.

Besides, DHTMLX suggests using Optimus, a JavaScript micro-framework that simplifies the process of developing web apps based on the Suite UI library. You can start building your web app with DHTMLX Suite right now by downloading a free 30-day trial.



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