dhtmlxSuite 6.0 Rolled Out: Large-Scale Update of the JavaScript UI Library

| Comments (12)

Great news – Suite 6.0 is out! DHTMLX JavaScript UI library has received an extensive update and now presents completely renewed and modernized JavaScript components for building powerful and trendy web interfaces.

JavaScript UI Framework DHTMLX Suite

What is Suite 6.0?

dhtmlxSuite 6.0 is a brand new version of DHTMLX UI library. It is compatible with the most modern browsers starting with IE11+. The library can be smoothly integrated with Angular, React, and Vue.js frameworks.

Suite 6.0 comprises 21 JavaScript components, which can be neatly assembled in one feature-rich user interface. Integrating the components with each other is straightforward due to the universal system of data processing with the help of the Data and Tree collection. The architecture allows developers to implement any modern technologies they wish.

All the UI components are designed on the basis of Material style. The library enables complete customization of the interface via CSS.

The aim of developing a completely renewed Suite was to provide developers with a comprehensive yet flexible tool for building modern web apps with no limits to customization.

dhtmlxSuite 6.0 JavaScript UI Components

So, let’s have a closer look at the components included in the dhtmlxSuite 6.0 library. We have grouped them according to their purpose.

Layout Components: Layout, Tabbar, Window

These are the most basic components, which serve as the foundation of any user interface. dhtmlxLayout as a key part of the library makes it easy to arrange all other UI components on a webpage. Below you can see how various UI elements like a sidebar, toolbar, chart, and some custom HTML content can be organized using the layout component:

JavaScript Layout Library by DHTMLX
Data Processing Components: List, DataView, Grid, Tree, TreeGrid

The following group represents a range of components for working with data: arranging data in different views (list, dataview, grid, tree), filtering and sorting data, etc. The filtering and sorting functions, as well as managing data in all possible ways, are common for all these components due to the ubiquitous system of data processing via Data and Tree collection.
Here is an example of a JavaScript grid with a footer containing the sum of values from column cells, one selected row, and cells with custom marks:

JavaScript Grid by DHTMLX

Data Visualization Components: Charts

The JavaScript charting library includes 11 types of charts: Line and Spline charts, Bar and X-Bar charts, Area and Spline Area charts, Pie and Donut charts and their 3D variations, Radar and Scatter charts.
JavaScript Spline Chart by DHTMLX

Spline Chart

HTML Bar Chart by DHTMLX

Bar Chart

HTML Radar Chart by DHTMLX

Radar Chart

Scatter Chart JavaScript DHTMLX

Scatter Chart

Navigation Components: Menu, Ribbon, Sidebar, Toolbar

This group of JavaScript components shares a similar range of controls for website navigation: various buttons, navigation items, spacers, separators, titles, and input fields. The Tree collection enables developers to conveniently manage the controls and update them dynamically. Here is an example of a JavaScript ribbon toolbar:

JavaScript Ribbon Toolbar - DHTMLX

Form-Oriented Components: Calendar, ColorPicker, Combo, Form, Slider, TimePicker

These components can assist you in building diverse interfaces for multiple purposes. However, we’ve put them in the form-oriented group of components, as they are a perfect fit for creating complex forms and can be easily integrated with each other. Here you can check how dhtmlxForm may look like with a colorpicker, calendar, time picker, and simple file uploader attached:

JavaScript Form by DHTMLX

dhtmlxCalendar can also be integrated with a time picker, which we created on the basis of dhtmlxSlider component:

JavaScript Calendar by DHTMLX JavaScript time picker - DHTMLX

Helpers: Popup and Message (Alert, Confirm, Tooltip)

These are little helpers that are crucial for creating any web interface. They represent different types of dialog boxes: popup windows, message boxes for showing notifications, alerts, confirmations, and tooltips.

JavaScript Message Box by DHTMLX

Suite 6.0 vs The Previous Versions

Apart from the technologies described above, the new Suite 6.0 differs from the previous versions in size and components included.

The size of the newly released Suite 6.0 is 330KB, while its predecessor weighed around 1.3MB. The significant decrease in size contributes to building much faster web apps.

dhtmlxAccordion, dhtmlxCarousel, dhtmlxEditor, and dhtmlxTreeView are no longer independent components of the Suite library. Now you can easily create the accordion component using dhtmlxLayout. dhtmlxTree has taken over all of the features from dhtmlxTreeView. dhtmlxCarousel has been deprecated for lack of use cases in web apps. The editor component has been replaced by dhtmlxRichText, JavaScript rich text editor, with many more functions and possibilities.

Meanwhile, other components have been introduced in v6.0 – dhtmlxDatePicker and dhtmlxTimePicker. The datepicker represents the integration of dhtmlxCalendar with dhtmlxPopup. The timepicker is a separate component, which can be easily used together with the calendar, forms, and other components.

Moreover, other DHTMLX products such as Vault, RichText, and Spreadsheet are now compatible with Suite 6.0, as they are built on the basis of its components and share the same API. That means you can use all of them together with dhtmlxSuite in one web app with no trouble.

Maintenance of dhtmlxSuite 5.1

Despite the launch of dhtmlxSuite 6.0, the previous version of dhtmlxSuite 5.1 will still be maintained. We’ll continue to release updates with improvements and support our current clients and their projects based on the versions of DHTMLX UI library up to 5.1. In the near future, we’ll release an update of dhtmlxSuite v5.2.

The reason for the coexistence of the versions 5.1 and 6.0 is the absence of the straightforward migration path. Thus, we recommend our current clients to use dhtmlxSuite 6.0 for new projects focusing on modern browsers and technologies and leave versions up to 5.1 for existing projects or those where compatibility with older browsers is a necessity. Our technical specialists will support you in implementing the features you have in web apps built with the versions of Suite up to 5.1 using the new Suite 6.0 library.

dhtmlxSuite 6.0 Licensing and PRO Functionality

You may get acquainted with the whole library downloading dhtmlxSuite evaluation version and testing it for free for 30 days. During the evaluation period, you’re eligible to receive support from our technical specialists.

dhtmlxSuite is also available for open source projects under the GNU GPL v2 license and Standard edition.

Commercial projects require the paid license (Commercial, Enterprise or Ultimate depending on your needs) with Professional edition. PRO edition of dhtmlxSuite 6.0 offers a special module for processing data (parsing and serialization) in the XML format that can be used with data processing and visualization components: dhtmlxGrid, dhtmlxTree, dhtmlxTreeGrid, and dhtmlxCharts.

The TreeGrid component is available in PRO edition only as an extension of dhtmlxGrid.

All JavaScript UI components are delivered in one package, as they are all interlinked with each other and represent a comprehensive toolkit for building feature-rich web apps. However, you can still use and purchase the following components separately: dhtmlxGrid, dhtmlxTreeGrid, dhtmlxCharts, and dhtmlxCalendar.

We invite all our users and clients to download and evaluate the new version of Suite UI library 6.0 and leave your feedback. The trial period is free for 30 days. Our technical support team will assist you in every step of your work with the updated components.

Related Material:

Comments

  1. Danny June 20, 2019 at 3:34 pm

    Wow! Congrats!
    The new skin looks quite promising, will try the new version on the weekend.

    • Kotryna Kairyte June 20, 2019 at 3:59 pm

      Thank You! We’ll be waiting for your feedback!

  2. Masdju June 20, 2019 at 4:48 pm

    Congrat team! Keep great

    • Liudas Kairys (DHTMLX team) June 21, 2019 at 11:38 am

      Hi Masdju,
      Thanks! We’re looking forward to your feedback.

      • Masdju June 22, 2019 at 2:20 am

        I’m already submit the feedback. Thanks Team

        • Kotryna Kairyte June 24, 2019 at 1:02 pm

          Thanks a lot, Masdju! We appreciate your feedback. All that you’ve mentioned is in the works right now.

  3. Vincent June 20, 2019 at 5:59 pm

    Congrats!
    Can we get a comparative list of available methods between 5.1 and 6.0? It would be great to choose the right version for our new projects :)

    • Liudas Kairys (DHTMLX team) June 21, 2019 at 11:44 am

      Hi Vincent,
      Unfortunately, we don’t such a list. We recommend using version 6.0 for the new projects. All the functionality of 5.1 can be reproduced using the API.

  4. Kris June 21, 2019 at 7:47 pm

    Thanks for 6.0 release.

    By first glance, looking at the documentation, layout events are missing – either the documentation is not complete or there is another way.

    Where is the API documentation?

    • Kotryna Kairyte June 24, 2019 at 12:18 pm

      Thank you for the feedback! The Layout component is used in many other Suite components and, currently, it has a private API. Shortly, we’ll add a public API as well.

  5. Kris July 12, 2019 at 9:01 pm

    After reviewing, migrating from dhtmlx 5 to dhtmlx 6 – looks like lot of functionality is stripped out or not available – at least after reviewing existing documentation. Not sure what the thought process was, not proving atleast a migration path or different ways to accomplish the same, it makes difficult to transition when you create applications dependent on this framework – we may need to start looking at other frameworks.

    • Kotryna Kairyte July 16, 2019 at 12:33 pm

      Thanks for your feedback, Kris!

      Our main aim was to provide developers with a tool that would be much more customizable than its predecessor, more modern and compatible with the latest browser versions like IE11+, and, what’s most important, appropriate for integration with Angular, React, and Vue.js.

      When we were developing v6.0, we bore in mind that it would be hard to migrate to Suite 6.0 in the existing projects of our clients, as we made use of a different stack of technologies to achieve our goal. That’s why we decided to maintain the previous version of Suite 5.1 and provide updates with fixes as well as technical support for our clients who use this library in their existing projects. For that reason we recommend you to stick to these versions including 5.2 in your current projects and try out Suite 6.0 in new projects if you feel like using a more modern approach.

      Right now we’re working on providing detailed guides and examples for Suite 6.0. We’re also planning to equip Suite 6.0 with the tools that were initially developed for old versions of Suite such as Visual Designer, Skin Builder, and Code Snippet in future. Meanwhile, all these tools are available for use with Suite versions up to 5.1 (and 5.2 when it’s released).

Leave a Reply