DEV Community: Pavel Lazarev

DHTMLX React Scheduler: Create Customizable Scheduling Interfaces with React

Pavel Lazarev — Thu, 28 Aug 2025 09:32:13 +0000

When building scheduling features in a React app, developers often run into limitations with basic calendar libraries, including poor performance, limited flexibility, or unimpressive feature set. DHTMLX React Scheduler solves these issues by providing a fully-featured scheduling component designed for React.

With native props, state-friendly updates, full access to the Scheduler API, and seamless integration with Redux and Material UI, it allows web developers to focus on building powerful applications instead of reinventing scheduling logic.

Let’s dive into the main feature set of DHTMLX React Scheduler and learn how to get started quickly while building scheduling calendars in React.

React Scheduler Key Features

📂Declarative Data Handling

DHTMLX React Scheduler is built to feel natural for React developers and simplify data management by embracing a declarative approach. You can pass arrays of events, calendar views, markers, and other configuration elements directly as props. This allows your scheduler to automatically render and update based on the data you provide, keeping your React code clean and in sync with your app state.

⚛️Full Control Through React Components

You can replace default elements, including a lightbox editor or event templates, with custom React components by updating a property with no manual DOM manipulations.

🗓️Built-in Basic and Advanced Calendar Views

The Scheduler component comes with a rich set of customizable calendar views to cover a wide range of scheduling scenarios. Out of the box, you can switch between Day, Week, Month, Year, Agenda, and Map views to display events in the most convenient format.

For more complex scenarios, DHTMLX Scheduler offers advanced views, including Grig, Week Agenda, Timeline, and Units. The Timeline view displays events arranged horizontally across separate timelines, making it perfect for visualizing workloads by people, rooms, or equipment. The Units view organizes resources along the X-axis with a timescale on the Y-axis. This setup makes it easy to build daily planners or staff timetables, since any property can group events.

🔁Recurring Events

The React Scheduler component comes with built-in support for recurring events. You can define repeat patterns, e.g., on a daily, weekly, monthly, and yearly basis, and the component will automatically generate and update all instances, thus saving end-users from managing complicated recurrence logic themselves.

🖱️Rich Drag-and-Drop Behavior

DHTMLX Scheduler provides smooth drag-and-drop support for event management. Users can create new events by dragging elements from external DHTMLX components into the calendar. Events can also be moved between multiple schedulers on the same page. Developers have full control over enabling or restricting drag-in/out actions, making scheduling more intuitive.

🚫Avoiding Overlapping Events

You can set a limit on the number of events allowed per slot. Thus, for example, if a time interval is already booked, the React Scheduler can deny the creation of a second event at that time. By applying a simple configuration, DHTMLX Scheduler ensures data integrity and provides end-users with a clear, conflict-free scheduling experience.

⚡️Dynamic Loading

When working with large event collections, loading all data at once can slow down your app. DHTMLX React Scheduler solves this with dynamic loading, which fetches only the data required for the current visible area of the calendar.

You can define how much data should be loaded at a time (by day, week, month, or year). For example, in a Week mode, the Scheduler will only request events for the current week, fetching additional weeks on demand as users navigate.

For a better user experience, you can also enable a loading spinner, ensuring users know when new data is being fetched.

🎨Flexible Theming and MUI Compatibility

DHTMLX Scheduler comes with built-in themes and supports runtime theming using the skin prop. Styling is simplified through CSS variables. Therefore, you can adjust colors, fonts, and other UI elements consistently across your app. In addition, seamless integration with Material UI ensures your scheduler blends perfectly into modern React interfaces.

How to Get Started

DHTMLX React Scheduler is available as an NPM package and requires React 18 and newer. Under the hood, it initializes a standard DHTMLX Scheduler instance but translates React props.

Here is an example of importing and rendering the Scheduler:

import React, { useEffect, useRef, useState } from 'react';
import ReactScheduler, { Event, SchedulerConfig, SchedulerTemplates } from "@dhx/react-scheduler";
import "@dhx/react-scheduler/dist/react-scheduler.css";
import "./styles.css";
import { initialData } from "./DemoData";


export default function SchedulerTemplatesDemo() {
  const config: SchedulerConfig = {
    first_hour: 8,
    last_hour: 20,
    time_step: 15
  };

  const templates: SchedulerTemplates = {
    event_class: (start, end, event) => {
      return event.classname || '' ;
    }
  };



  return (
    <div style=height: '100%', display: 'flex', flexDirection: 'column'>
      <ReactScheduler
        events={initialData.events}
        date={new Date("2025-08-15T00:00:00Z")}
        view={"week"}
        templates={templates}
        config={config}
      />
    </div>
  );
};

You can explore the React Scheduler documentation to dive deeper into its API and configuration options. For a hands-on introduction, check out the React Scheduler quick start on GitHub to see working examples and get up and running quickly.

Summing up, DHTMLX React Scheduler is a powerful and developer-friendly solution for building advanced scheduling interfaces in React. With features like multiple calendar views, recurring events, and drag-and-drop support, it streamlines event management. Whether you’re creating booking systems or resource planners, React Scheduler helps you deliver a smooth and professional scheduling experience.

⚛️ Introducing DHTMLX React Gantt: Build Professional Project Timelines in React

Pavel Lazarev — Tue, 03 Jun 2025 15:47:56 +0000

If you’re developing a React app and looking for a powerful Gantt chart component for managing projects, tasks, and resources, you should try DHTMLX Gantt. With support for React integration, DHTMLX Gantt brings enterprise-grade features out of the box to your React ecosystem. Developers can use the component natively and apply familiar concepts, without resorting to manual DOM manipulation.

In this article, we’ll take a closer look at what features DHTMLX React Gantt offers, how to get started, and why this component might be a great fit for your project.

📊 Key Features

Here’s what makes DHTMLX React Gantt stand out:

🧩 Usage with Redux

You can integrate Redux into your React Gantt setup to manage and store Gantt settings in a centralized state. When Gantt-related data changes, dispatching Redux actions updates the storage and triggers an automatic re-render.

🔄 Various Task Types and Dependencies

The component supports a variety of task types, including regular tasks, projects, and milestones, allowing for flexible workflow visualization. Users can control how tasks relate to each other within the timeline by defining different types of dependencies, such as Start-to-Start, Finish-to-Finish, Finish-to-Start, and Start-to-Finish.

⚙️ Auto Scheduling

DHTMLX Gantt comes with a built-in scheduling engine that automatically calculates task start and end dates. It handles constraints and updates related tasks when changes occur. This feature is especially valuable for complex projects and large-scale charts that require dynamic recalculation.

🔗 Critical Path Calculation

When enabled, DHTMLX Gantt highlights tasks that impact the project’s finish date, helping teams focus on the most time-sensitive parts of the schedule. This feature is handy when you need to monitor potential bottlenecks and ensure the key milestones are met on time.

👥 Resource Allocation

The Gantt chart component allows end-users to assign and track resources across projects and tasks. It generates task- and resource-specific work-time calendars based on individual availability, shifts, and non-working days. You can select from two predefined resource views, namely resource load diagram and resource histogram, that visually highlight how resources are distributed, making it easier to identify overbooking or potential workload conflicts.

⚛️ Custom React Components

DHTMLX React Gantt provides total control over how a Gantt chart looks and behaves. Thus, for example, you can embed custom React components into lightbox forms, task templates, and inline editors.

🎨 MUI Support and Theming

The Gantt chart component comes with several built-in themes that make it easy to customize its appearance to fit your app’s style. Themes can be applied dynamically and fine-tuned by adding custom CSS variables. DHTMLX Gantt also integrates smoothly with Material UI components.

🛠️ Getting Started

DHTMLX React Gantt is distributed as a dedicated NPM package for easy setup in React 18+ apps. Under the hood, it initializes a standard DHTMLX Gantt instance, translating React props like tasks and settings automatically into the proper Gantt chart structures.

import { useEffect, useRef } from "react";
import { useState } from 'react';
import ReactGantt from '@dhx/react-gantt';
import '@dhx/react-gantt/dist/react-gantt.css';
import { demoData } from './DemoData'
export default function BasicGantt() {
    const [tasks, setTasks] = useState(demoData.tasks);
    const [links, setLinks] = useState(demoData.links);
    const config = {
    scales: [
        { unit: "month", step: 1, format: "%F %Y" },
        { unit: "day", step: 1, format: "%d" }
    ]
    };
    return (
    <div style={{ height: '100vh' }}>
        <ReactGantt
        tasks={tasks}
        links={links}
        config={config}
        />
    </div>
    );
}

🗣 Final Thoughts

DHTMLX React Gantt brings enterprise-level timeline visualization to the React ecosystem with a clean and flexible API. Whether you're building a startup MVP or an enterprise platform, this component provides the power and flexibility needed to deliver a great experience.

Have you tried using DHTMLX React Gantt in your app? Thinking about integrating it? Share your thoughts in the comments!

How to Create a Custom DataView Editor in a JavaScript Grid Table with DHTMLX

Pavel Lazarev — Tue, 27 May 2025 11:54:36 +0000

Data editing is one of numerous powerful features implemented in the DHTMLX Grid widget. Combining it with other Grid strengths like high customizability and interoperability with Suite widgets, you can add custom editing options to cover specific use case scenarios. In this article, you will learn how to enrich the Grid configuration with a dataview editor.

Example of a JavaScript Grid Table with a Custom DataView Editor

DHTMLX Grid is shipped with a range of built-in column editors that make it much easier to add various editing forms to data tables in web apps. But what if you work on a dashboard or CMS that requires something more informative and visually appealing than basic input or dropdown editors? That’s where a dataview editor like in the sample below comes in handy.

Check the sample >

Clicking any cell in the “Owner” column opens a popup editor featuring a card-style list of available options. You can visually browse and select an appropriate option, the content of the selected cell will be updated accordingly.

Step-by-Step Guide on Adding a Custom Dataview Editor in DHTMLX Grid

Let us proceed to concrete steps that will allow you to incorporate a custom dataview editor into a JavaScript grid table with DHTMLX. When using our Grid widget, you don’t need a third-party dataview component or build it from scratch. Instead, you can use the corresponding JavaScript DataView and Popup widgets from the Suite library that can be seamlessly integrated with Grid, saving you much time and effort. However, we still have to clarify some key points to make this integration more meaningful and straightforward.

Step 1: Initializing and Configuring the Grid Table

First of all, you initialize a JavaScript data table and specify its structure and behavior. The columns configuration property outlines each column’s id, type, formatting, and editing options, including the “Owner” column that will later be complemented with the DataView-based editor.

In preparation for that, you need to use the mark property to assign a special CSS class (dataview-editor) to cells in the “Owner” column to trigger a custom editor. You should also apply editable: false to prevent default editing in the column.

const grid = new dhx.Grid("grid", {
    columns: [
        { id: "project", header: [{ text: "Project" }], width: 180 },
        {
            id: "owner",
            header: [{ text: "Owner" }],
            mark: () => "dataview-editor",
            editable: false,
            autoWidth: true
        },
            … // Config for other columns
    ],
    selection: true,
    editable: true,
    keyNavigation: false,
    data,
});

In this step, you also define how the Grid behaves by default – enabling editing, selection, disabling keyboard navigation, and loading initial data.

Step 2: Create the DataView Editor

Next, you initialize DHTMLX DataView and provide a custom HTML layout for cells in the “Owner” column that appears when a user edits them. This layout is defined via the template property and includes a visually rich card format displaying a person’s photo, name, position, phone number, birthday, and email.

const dataview = new dhx.DataView(null, {
    selection: true,
    itemsInRow: 2,
    template: ({ name, photo, post, phone, birthday, mail }) => (`
    ... // Custom HTML layout for cards appearing in the editor
`),

    `),
    data: owner_data,
});

This improves the editing experience by offering structured and intuitive visuals. The styling of this layout will be detailed in the final step of the tutorial.

Step 3: Attach the DataView to a Popup

Now, you need to create a popup window using the JavaScript Popup widget from the Suite library:

const popup = new dhx.Popup({
    css: "dhx_widget--border-shadow popup",
});
popup.attach(dataview);

You insert the previously created DataView layout into the popup via popup.attach(dataview). The popup lets you reveal a rich UI of the editor only when it’s needed i.e. when a user clicks on any cell of the “Owner” column. Extra styling with css: “dhx_widget–border-shadow popup” helps make the popup visually distinct and match the rest of the UI.

To make the popup appear when a user clicks on the Owner cell, you attach event hadlers to cells in the Owner column by targeting the dataview-editor class applied via the column’s HTML template.

eventHandlers: {
    onclick: {
        "dataview-editor": (event, { row, col }) => {
            const ownrer = dataview.data.find(item => item.name == row[col.id]);
            dataview.selection.add(ownrer.id);// Highlights the selected card in the DataView
            popup.show(event.target, { centering: false });// Opens the popup near the clicked element
       }
    }
},

Step 4: Update Grid Cell After Selection

When an item is selected in the dataview editor, you need to update the grid cell and hide the popup using the afterSelect event:

dataview.events.on("AfterSelect", () => {
    const owner = dataview.selection.getItem();
    const { row } = grid.selection.getCell();
    grid.data.update(row.id, { "owner": owner.name });
    popup.hide();
});

This step makes the custom editor work the way it should – users click a cell, pick a card, and the grid updates in real time.

Step 5: Custom Styling of DataView Editor for Better User Experience

Once your custom dataview editor becomes fully functional, you can make it more visually appealing. When using DHTMLX widgets, you can apply one of the predefined CSS layout templates for the dataview items:

…

.dhx_dataview_template_d__picture {
        width: 110px;
        min-width: 110px;
        background: center center/cover no-repeat #f7f7f7;
}


.dhx_dataview_template_d__picture:before {
        content: "";
        display: block;
        padding-top: 100%;
}


.dhx_dataview_template_d__body {
        padding-left: 12px;
        width: 150px;
}
…

These styles are applied to structure and style the DataView item template provided in Step 2, when dhx.DataView is initialized.

Following the steps above, you can create a JavaScript data table with a custom dataview editor like in our sample.

Final Thoughts

This tutorial vividly demonstrates just one of many ways you can customize DHTMLX Grid. Its rich API empowers you to go far beyond default settings and extend Grid with new functional capabilities and design patterns. The widget offers a high degree of control over UI and data behavior. Whether you’re building a common dashboard or a complex enterprise app, DHTMLX Grid is a dependable tool for reaching your web development goals. Still on the fence? Try the 30-day trial version free of charge and see how our Grid widget fits your project.

This tutorial was originally published on the DHTMLX blog on April 15, 2025.

Tools for Building a Modern JavaScript Booking Application

Pavel Lazarev — Wed, 12 Feb 2025 10:55:54 +0000

The advent of digital technologies gives companies a wide range of opportunities for better work efficiency and enhanced customer experience. For instance, it is hard to imagine any thriving hotel, medical center, or repair shop without the possibility of making an appointment on the web.

We have become so used to online booking that the lack of such a service may threaten businesses with significant losses of potential customers and profits. Thus, unsurprisingly, such a solution often becomes a priority objective.

According to the Business Research Company, the reservation and online booking software market is expected to grow to $120.62 billion in 2025 at a compound annual growth rate (CAGR) of 25.4%.

This article highlights a range of tools that can facilitate the implementation of functional capabilities widely used in modern booking apps.

Booking Functionality

It is a centerpiece of any availability calendar solution. This functionality should combine an intuitive UI structure with features for convenient booking such as various filtering options, localization, user-friendly reservation form, etc. So, there are some useful tools aimed to help in the delivery of such complex features.

If the project involves a lot of specific requirements such as custom settings or certain styling, it is better to use flexible stand-alone components like the DHTMLX Booking widget. It is a JavaScript UI widget that offers full control over the system’s look and feel and options for deep customization.

The extensive API allows for defining rules for time slots and adding a needed filtering mechanism. This lightweight widget is also notable for its responsive design, built-in themes, and cross-browser compatibility.

The product comes with well-written documentation and numerous online samples. Apart from that, it can also be smoothly integrated with a more advanced DHTMLX Scheduler for comprehensive solutions.

However, if you are looking for an out-of-the-box solution with minimal technical involvement, it is reasonable to consider SaaS platforms such as Appointedd, Calendly, and Scheduly. These products may not provide the same level of flexibility and customization as the DHTMLX Booking widget, but they can be the right choice when speed and ease of deployment are the main priorities.

User Authentication

In booking calendar apps, you’ll certainly need a tool to add a user authentication feature required for a secure and personalized experience. It ensures that only legitimate users can access personal data and reduces the risk of data breaches and other threats.

There are many various tools and services that simplify secure access management. For instance, you can count on Firebase Authentication designed by Google. It supports popular authentication methods such as email/password, social (Google, Facebook, etc.), and even custom options.

Alternatively, you can consider another popular authentication and authorization platform called Auth0. It also provides a number of authentication strategies that can be seamlessly implemented in a web app.

A robust authentication mechanism is also important for other popular booking calendar features such as payments and integration with third-party services that will be discussed below.

Real-Time Updates

It is essential to maintain the reliability and responsiveness of your booking app, and real-time updates have a vital part in it. This feature ensures that any changes in the booking system will be instantly visible to all users.

It is crucial for time-sensitive services with high loads such as medical appointments or event reservations. Real-time updates help avoid unpleasant things like double bookings and increase user satisfaction and dynamic experience.

Tools like Socket.IO and WebSockets significantly simplify the implementation of real-time communication between client and server.

Integration with External Calendars

In today’s fast-paced world, it has become common for individuals to use scheduling calendars to arrange their day-to-day activities. Therefore, it can be very useful if your booking app offers seamless synchronization with popular platforms like Google or Outlook calendars.

To enable end-users to view their bookings via popular calendar tools, you must use Google Calendar API, Outlook Calendar API. Thus, you’ll be able to make your booking app more appealing to potential users and provide a unified scheduling experience.

Online Payment

It is often the case that booking apps are requested to be able to process paid reservations. Such payment solutions should meet some common requirements for covering end-users’ needs related to handling transactions within the booking system.

So, instead of investing time and effort into customization, you can make it much faster with time-tested tools such as PayPal, Stripe, and Square. They offer built-in features required for a robust payment gateway.

Notification Channels

When working on a booking app, it is necessary to take care of notification channels that should be integrated into the system to inform end-users about their bookings (confirmations, cancellations, reminders, etc.). There are several popular options that can be integrated into the booking system using special tools:

email alerts (SendGrid, Mailgun),
push notifications (Firebase Cloud Messaging, Notification API, Push API),
SMS (Twilio).

With these notification channels, end-users will receive timely updates on their bookings, enhancing your app’s usability.

Maps and Geolocation

If you are working on a booking calendar solution that offers location-specific services (clinics, barber shops, etc.), adding the possibility of using interactive maps would be nice. This feature enables end-users to search for nearby locations, view directions, and estimate travel times.

The most popular choice for implementing this functionality is Google Maps. Also, you can estimate popular mapping libraries like Mapbox and Leaflet.js.

Wrapping Up

As you can see, booking calendars may include various useful features. Implementing these capabilities from scratch makes sense when many custom features are required, otherwise, it can be done faster and more reliably with special ready-made tools like the ones reviewed in this article.

It is a thoughtful approach that helps avoid many potential issues during development and ensures that your booking app is functional, responsive, and user-friendly.

This article was originally published on Medium.

JavaScript News, Updates, and Tutorials: November 2024 Edition

Pavel Lazarev — Mon, 02 Dec 2024 11:02:17 +0000

November has been an exciting month for the DHTMLX team and the overall JavaScript community, with the series of updates from DHTMLX, Webix, SVAR, Angular, and TypeScript that web developers won’t want to miss. This digest arrives on Black Friday — a day known for its great deals and opportunities. As anticipated as pleasant discounts, these updates complemented with useful materials on JavaScript promise to boost productivity and enhance your projects, making them worth exploring. Let’s unpack this month’s highlights!

New Releases and Updates

Meet Brand-New DHTMLX Booking Widget 1.0

DHTMLX Booking is a new widget in our product line of JS tools designed to speed up the development of online booking systems for the web. This widget has a user-friendly UI with two main sections — filtering area and cards list with time slots. It offers plenty of options for configuring the booking structure as needed.

For instance, the rich API allows specifying rules for time slots and filtering settings, thereby securing seamless and productive appointment management. DHTMLX Booking is also notable for simple styling with CSS variables and localization support. To make the most of this product, you should consider combining it with the time-proven DHTMLX Scheduler. These tools can be easily integrated and synchronized within a single app, becoming a solid foundation for an advanced scheduling solution. This blog post will give you a complete picture of this product.

Other DHTMLX Updates: Suite UI Library 9.0 and Kanban 1.6

The DHTMLX release schedule in November included two more significant events. In addition to the Booking widget, our development team also prepared updates for Suite and Kanban libraries.

DHTMLX Suite v9.0 is a big step forward in the development of the top-requested Suite widget — JS data table. It received several highly-anticipated features in v9.0, becoming an all-encompassing solution for data management in business apps.

First, we merged the TreeGrid widget into Grid, enabling it to handle hierarchical data. The ability to process tree-like structures is at the core of the key Grid feature added in v9.0, namely, row data grouping. This novelty is a powerful instrument for analyzing large datasets and detecting patterns that usually count when making decisions. Another essential feature of this release is the ability to specify custom stats functions and render the totals of data calculations. You can also enhance accuracy and consistency in data grids and forms built with DHTMLX by setting specific formats for entered data with input masks.

DHTMLX Kanban 1.6 introduces a pack of targeted improvements that will add more setup and personalization options at your disposal. For instance, there are templates for column headers and search results, new options for opening and displaying the Kanban editor, simplified voting for tasks, and settings for displaying users assigned to tasks. Using these features, you can also enhance the usability of DHTMLX-based Kanban boards.

As a bonus, we also rolled out a new project management demo app that is a great example of how our products can be combined to deliver real-life solutions of any scale with minimum time and effort.

Webix 11.0 Release

Webix presented a number of updates in the core and complex widgets of the library. The enhancements equip users with a wider variety of tools for data manipulation, report and file management, as well as extended export-import to/from Excel capabilities.

Let’s have a look at the key features of the Webix v11.0:

Core Updates: support of the recent version of PDF.js, export of images, frozen rows and columns to Excel, auto mode to have the page orientation option available in a browser;
Report Manager: reports as standalone widgets;
File Manager: extended filters for searching files;
SpreadSheet: export of SpreadSheet images to Excel (available in the core), possibility to get a cell reference from a cell id in a table, import of filters from Excel, export of frozen rows and columns to Excel (available in the core), searching for and replacing data in cells, filtering math methods by category, highlights for math methods.

To learn more about Webix updates read the release article.

SVAR UI Widgets: New React Gantt Chart and Svelte 5 Compatibility

This month, SVAR introduced two major updates. First, the new Gantt chart for React has been released — an open-source, interactive Gantt chart component that helps developers quickly integrate project workflow visualization into React apps. The component offers customizable UI, responsive design, fast performance with large datasets, and 2 sleek themes: light and dark. In addition, SVAR Svelte UI components have been upgraded to support the latest Svelte 5.

Angular 19 is Generally Available Now

Getting to the top of popularity is one thing, yet quite another to remain on a high level for a long time in a competitive environment like web development. And the Angular team knows it very well. It is hard to call Angular a favorite front-end framework among web developers, but it is still a decent choice for complex, enterprise-grade apps. Regular updates help stir the public’s interest in the project. In November, the world saw the release of Angular 19. This major update is aimed at making Angular more developer-friendly and performant. This list of novelties includes partial and incremental hydration, route-level render mode, linked signals, event replay, and much more. Find more in the release article.

Introducing TypeScript 5.7

Many JavaScript developers say that once you try coding with TypeScript, you’ll never want to switch back to plain JS. TypeScript is especially admired for its reliability, scalability, and developer experience. This month, more reasons to enjoy TypeScript have emerged with its update to version 5.7. The new TypeScript version provides an updated mechanism for checking never-initialized variables aimed to help avoid runtime errors. You should also pay attention to such novelty as path rewriting for relative paths. Now, TypeScript also supports ES2024 features, enabling devs to benefit from the latest JS capabilities. Check out the primary source on the TypeScript blog for more information on v5.7.

Useful Tips and Articles

Benefits of Using JS To Do List for Implementing GTD System

Getting Things Done (GTD) is a popular methodology adopted by individuals and professionals across various fields to improve their time management and productivity. Various tools can be used for the practical implementation of GTD, but a to-do list is often viewed as the most appropriate option, as it aligns perfectly with its structure. To make it work on the web, you can use DHTMLX To Do List. This article highlights the main aspects of GTD and how our JS solution will help you make the most of this methodology.

Useful JavaScript SEO Tricks

Some devs underestimate the importance of JavaScript SEO, but it plays an important role in how search engines index and rank web apps. If JavaScript is used in apps without SEO optimizations, web projects usually lose visibility and traffic. This article provides a range of useful SEO tricks for JavaScript content.

Less-Known But Useful JavaScript Features

Learning JavaScript is an unending journey since its ecosystem is constantly enriched with new features and tools. So it is not surprising developers may overlook some less popular, but still useful JS features and not use them in their projects. The author of this video offers a list of such features and explains them.

Getting Deeper Insight into JavaScript Symbols

JavaScript symbols are unique identifiers serving as object keys to exclude property name collisions. They are especially useful when extending objects without interfering with existing code or working with shared libraries. If are not quite familiar with the concept of JS symbols, check out this article, where the subject is covered with great examples.

Impact of Using GitHub Copilot on Code Quality

It is just amazing how fast AI tools have become an indispensable part of modern technology stacks. GitHub Copilot is a striking example of such a tool used for writing code. But there remains the question about the efficiency of such tools. The recent GitHub study addresses this question and proves the positive impact of such tools on the development flow. Check out the results for more information.

That’s it for now. Stay tuned for more DHTMLX releases and JavaScript news.

This article was originally published on Medium.

JavaScript News, Updates, and Tutorials: October 2024 Edition

Pavel Lazarev — Fri, 01 Nov 2024 13:26:52 +0000

Hello everyone! October has been an eventful month on the JavaScript landscape. We at DHTMLX rolled out a highly-anticipated major update of our JS Gantt component. Significant releases also occurred in SVAR, Deno, and Svelte projects.

Apart from that, Evan You presented a new toolchain for JavaScript. We will review these releases in this post and add a traditional pack with JS tutorials and other useful materials.

New Releases and Updates

Meet DHTMLX Gantt 9.0

Development teams around the world have always admired DHTMLX Gantt for its extensive feature set that allows managing workflows in projects of any complexity. With the recent release of version 9.0, we hope that our Gantt will also be loved for its new theming and styling capabilities.

In v9.0, our dev team fully overhauled the existing Gantt themes and added a new Dark option. The themes are updated in line with modern design practices, enhancing both visual appeal and usability. To reduce the need for custom styling efforts, we introduced the possibility of customizing various Gantt elements like icons or links using CSS variables.

Apart from that, we also implemented a range of useful configuration options that will certainly contribute to more effective project management. The list of novelties includes manually scheduled summary tasks, built-in support for baselines, built-in visualization of deadlines and constraints, and sticky labels for time scales.

The new Gantt version enables you to build a modern-looking Gantt chart with new capabilities for managing project tasks conveniently. Learn more in the release article.

SVAR UI Widgets: New React DataGrid and Improved Svelte Gantt Chart

The SVAR team has released an open-source React DataGrid component that combines blazing-fast performance with advanced features like tree data view, context menu, flexible column layouts, and rich in-cell editing options (including combo, date picker, text and rich select).

There’s also a piece of news for Svelte developers: the SVAR Svelte Gantt chart has been updated to feature auto-calculated summary tasks, intuitive sorting, and optimized batch requests. With this latest release, SVAR Gantt offers a professional way to track tasks, project timeline and progress.

Svelte 5.0 is Finally Here

After 1,5 years of preparatory work, the Svelte team finally presented the long-awaited stable release of the popular JavaScript framework. The new version 5.0 is said to be the most significant release in the Svelte’s history. Let us see what’s so special about it.

Many developers like this framework for its simplicity and reactivity. But nothing is perfect and rapidly changing requirements stimulate the product’s progress. For instance, the use of Svelte in large projects unveiled its shortcomings in reactivity.

The updated framework provides a new mechanism for declaring a reactive state called runes. It is expected to become a game-changer and an effective solution in dealing with existing reactivity issues.

The development team also modified the event handling process. Moreover, Svelte now comes with native TypeScript support. More info on v5.0 can be found in this article.

Introducing Deno 2.0

Many developers were not very enthusiastic about the appearance of Deno and doubted the prospects of this project back in 2018. But for several years now, Deno has been steadily growing in functionality and popularity among programmers.

Recently, Ryan Dahl’s team presented a new version of Deno, which shows the seriousness of the team’s intentions to give a real fight to the generally recognized (but not ideal) Node.js.

When looking through a considerable list of updates included in v 2.0, the first thing that catches one’s eye is that Deno is now backward compatible with Node.js and npm. In other words, this novelty allows seamlessly running existing Node.js projects and simultaneously benefiting from Deno’s strengths.

This major feature will certainly contribute to faster Deno adoption. Much effort was directed toward making Deno more performant in real-case scenarios. For more details on v2.0, visit the Deno blog.

What’s New in Next.js 15

If you look through the latest editions of popular surveys such as State of JS or Developer Survey, you will certainly find Next.js among the top frameworks. Built on top of React, this tool can be effective in handling both front-end and server-related tasks. The development team of this project fuels interest in the product by delivering regular updates. So let us take a look at the new Next 15.

Although, currently React 19 has an RC status, Next 15 comes with full support for the upcoming React update and its new features. In version 15, you can also find numerous improvements in catching semantics that should have a positive impact on performance.

One more noteworthy addition of v15 is a stable release of Turbopack Dev, an incremental bundler optimized for JavaScript and TypeScript. Read the release article to get an absolute impression of the new Next.js capabilities.

VoidZero: New Toolchain for JavaScript from Evan You

Evan You is a well-known figure in the dev community, primarily as the creator of two popular dev tools — Vue.js and Vite. Despite numerous existing achievements, he continues working on new promising projects.

During the work on a new bundler for Vite’s needs, Evan You faced existing challenges of the JS ecosystem such as fragmentation, incompatibilities, etc. This led to the development of a new toolchain for JavaScript named VoidZero. This project raised $4.6 million in seed funding.

The dev team of the project already delivered crucial elements of the toolchain such as a JS parser, Node.js-compatible resolver, TypeScript/JSX transformer, linter, and more. This article offers more curious insights on VoidZero and Evan You’s plans for the future.

Useful Tips and Articles

Building a JS Gantt Chart with a Resource Panel in Salesforce with DHTMLX

Many dev teams prefer implementing their business apps in cloud-based environments like Salesforce. Our devs continue adapting our popular JS components for use on the Salesforce platform. The list of helping materials now includes a new demo that demonstrates an example of building a Gantt chart with a resource panel for Salesforce. With the demo highlighted in this post, it will be easier to keep track of workflows and resource allocation within a Gantt chart.

Handling Data Management Issues with JavaScript Grid Components

When developers are requested to implement data tables (or simply grids) for managing complex data on a web page, they often resort to using ready-made UI components to facilitate this objective. Such tools often help to overcome various difficulties during the development process that are frequently associated with high demands on performance, scalability, customization, and data handling capabilities. This article elaborates more on challenging data management requirements and offers three popular JavaScript data tables that help address emerging issues.

Tips on Securing Browser Extensions with CodeQL

Modern web browsers offer a wide range of extensions that can enrich default browser settings. Ordinary users and professional programmers can benefit from the convenience and extra features provided by browser extensions. As more people count on such extensions to achieve various goals, it becomes crucial to ensure their security. The author of this article highlights the structure of a browser extension, possible security issues, and how the use of CodeQL can enhance the extension security level.

Choosing the Right Folder Structure for a Web Project

Choosing the proper folder structure for a web project is essential for maintaining organization, readability, and scalability. A well-structured project also facilitates debugging and updating, especially as the project grows with time. Setting up the folder structure depends on factors such as the project’s scale, the tech stack, team size, specific project requirements, etc. Сheck out this video, if you want to learn how to do it without any problem. It explains how to create a folder structure that will be easy to maintain, refactor, and work in.

Debunking SEO JavaScript Myths in Google Search

You’ve probably heard many controversial claims about how Google Search indexes JavaScript like “Google treats JS pages differently”. Understanding how search engines like Google actually handle JavaScript for optimizing web projects in terms of SEO. The MERJ and Vercel’s research dives deep into this topic and provides many valuable insights.

This article was originally published on Medium.

Latest JavaScript News, Updates, and Tutorials

Pavel Lazarev — Fri, 09 Aug 2024 11:23:51 +0000

Hello to all JavaScript enthusiasts! We are happy to continue sharing with you new JavaScript stuff, especially as we have plenty to say about DHTMLX.

Today, you will learn about our new product, namely, DHTMLX Chatbot for AI. In addition, we released updates for Scheduler, Suite, and RichText components. You’ll also learn about the latest news from the Webix team. Apart from that, we’ll highlight the latest surveys on JavaScript and programming in general.

Traditionally, this article also includes a section with useful materials covering various aspects of writing code in JavaScript.

DHTMLX Chatbot 1.0: New Widget for AI Chat Apps

Artificial intelligence is not a new phenomenon in the IT industry, but the advent of generative AI tools such as ChatGPT has become a starting point of the immense transformation in the world of programming. The DHTMLX team is very enthusiastic about this trend and anxious to contribute to the adoption of AI in web development with a new product - JavaScript chatbot widget for AI.

Our team designed this lightweight tool to help web developers deliver UIs for a single or multiagent AI chat integrated with popular large language models such as ChatGPT, Claude 3, and Gemini on the backend. The widget has a responsive and configurable interface with different modes for displaying messages and a modifiable sidebar.

The chatbot is also mobile-friendly and supports markdown text format and read-only mode. Apart from that, you can also make use of ready-made integration examples and other samples prepared by our team. And the best part is that DHTMLX Chatbot is distributed under the MIT license, meaning you can use it in your projects free of charge.

Find more details about this new widget in the release article.

Other Releases from DHTMLX

This month, in addition to the new chatbot widget, the DHTMLX team also rolled out several minor updates for well-known JS components from our product portfolio. We are talking about new versions of DHTMLX Scheduler, Suite, and RichText Editor.

The DHTMLX Scheduler 7.1 offers several novelties designed to improve your experience with this JS component. First of all, there is a new option for storing recurring events known as RFC-5545 format.

In the Map view, you can use two popular map providers out-of-the-box: OpenStreetMap and Mapbox. In addition, you can integrate into your project abilities to highlight cells from which users drag events and undo event deletion.

The DHTMLX Suite 8.4 comes with multiple API updates for popular UI widgets such as Grid/TreeGrid, Combobox, Chart, Form, and Toolbar. Combobox allows specifying custom logic in templates (also applicable to Grid, TreeGrid, and Form). In DHTMLX Charts, you also have an opportunity to add a template for displaying values in Pie, Pie3D, and Donut charts.

The ability to set headers and footers for files exported in PDF and PNG formats is now available in Charts, Grid, and TreeGrid. The configuration of the Toolbar widget includes the option that opens menu items in toolbar elements when hovering over them with the pointer.

The DHTMLX RichText 2.1 is not a substantial release in terms of new features. In fact, there is one feature but it will be useful for both web developers and end-users.

Starting from v2.1, you can specify required default values for various text parameters such as font, font size, etc. in the toolbar of the Editor. Thus, end-users won’t have to worry about manually adjusting the Editor’s settings and can focus on work with text. Moreover, this minor update includes a range of fixes and improvements to improve your experience with our JavaScript Text Editor.

Webix Updates: Improvements Inspired by User Challenges

The Webix team is dedicated to continuously improving the library based on user feedback and support tickets. The recent updates in version 10.2.5 brought several functionality enhancements of existing components.

Performance is always a priority for the Webix team so they optimized rendering for faster UI updates and a more responsive user experience:

Diagram rendering engine has been optimized for better performance in FireFox,
Pivot incorrect rendering of the total section in the footer has been fixed,
standard RichText widget rendering with an unset value has been also corrected.

When it comes to Complex widgets, Webix team put the effort into developing Spreadsheet JS UI Widget. Users’ feedback has been invaluable, allowing to implement numerous enhancements, some of them are highlighted here:

the copy-paste process was improved,
Spreadsheet 10.2.2 is the first version that got all data saving actions including saving styles, spans, and sizes now get name of the source sheet,
updates in filtering in math formula suggestions is applied correctly to named ranges as well and resulted in enhanced usability.

Documentation Updates:

Alongside the improvements, the documentation has been updated to provide clear guidance on implementing the latest enhancements. With the comprehensive examples and usage scenarios it helps developers quickly adapt to the new functionalities. To learn more about Webix releases between 10.2 and 11 read the release article page. Nevertheless, additional updates and fixes are coming soon.

Stack Overflow’s Developer Survey 2024

This popular survey is a valuable resource for the web development community, providing insights into trends, preferences, and challenges faced by developers.

This year’s edition includes a lot of insights. For instance, JavaScript predictably continues to be the most widely used programming language, and, besides this, JS is high on the list of highly desired and admired languages. Svelte is loved by developers and 72% of survey respondents express admiration for this front-end framework.

The survey also paid much attention to AI technologies. Most of the respondents (76%) are using or are planning to use AI tools in their development process this year, but only 43% said they trust the accuracy of AI tools.

The list of the most popular AI tools includes ChatGPT, GitHub Copilot, Google Gemini, and Bing AI. At the same time, 70% of professional developers do not think that AI technologies pose a threat to their job opportunities.

Long-Awaited Results of Surveys from the Devographics Team

Believe it or not, the results of the State of JS 2023 have recently become available to the public. Despite a six-month delay, this release still has many curious insights supported with an updated data visualization codebase.

For us, for instance, it was interesting to know about the things that bother survey respondents the most about JavaScript. It is said that the most challenging aspects of JavaScript are code architecture, state management, build tools, and managing dependencies. People also crave new features and improvements in JavaScript such as static typing, a standard library of common utilities, and better date management.

We also want to note the growing interest in some “smaller” front-end frameworks like Preact, Solid, and htmx, the enduring popularity of SPAs, and the higher adoption of Partial Hydration and Islands architecture.

You may wonder why we still haven’t mentioned React while reviewing the latest State of JS report. There is a good reason for that. React is still immensely popular, therefore the Devographics team conducted a separate survey dedicated solely to this framework - State of React 2023.

The data in this survey was collected between October 27 and November 15, 2023, meaning that all the developments since then, including the upcoming React 19, were not covered. Anyway, you can come across interesting findings when examining the results of this survey.

Updated GitHub Innovation Graph and Its Practical Value

Launched in 2020 by the GitHub team, the Innovation Graph initiative proved to be a useful source of information for researchers, policymakers, and developers, who are looking for insights on software development trends.

Recently updated with Q1 2024 data, the Innovation Graph offers global metrics on various categories such as top programming languages, Git pushes, developers, organizations, etc. And it seems that this data has practical value.

To prove this point, GitHub published a blog post interviewing two researchers who used the Innovation Graph data to estimate the impact of ChatGPT on developer engagement across various programming languages.

Useful Tips and Articles

Web Development Challenges Addressed with JavaScript UI Libraries

Nowadays, it is only in rare circumstances dev teams have to deliver a web app without the use of additional tools like JavaScript UI libraries. For instance, when the UI requirements of a project require a highly customized solution.

But in most cases, JavaScript UI libraries can become a game-changer for web projects of any complexity. Established JS libraries offer pre-built components and functionalities that streamline the development process, saving significant time and effort. In this article, you will learn more about the advantages of using JavaScript libraries in real-case scenarios.

Mastering Your JavaScript Debugging Skills

Debugging is a crucial part of the application development process. No matter whether you are a newcomer or an experienced developer, you should certainly devote some time to improving your skills at debugging your JavaScript code.

There are many techniques used to identify and fix issues efficiently. If you have knowledge gaps in this important aspect, this crash course will walk you through from absolute basics to advanced debugging concepts.

Going into Multithreading in JavaScript

In JavaScript, multithreading refers to the ability of a program to execute multiple threads, or units of execution, concurrently within a single process. The use of multithreading in web apps can contribute to improved performance, better user experience, optimal utilization of computer resources, and enhanced functionality.

There are some techniques to enable multithreading in JavaScript. In this article, you’ll get acquainted with the main mechanisms for achieving parallel threads in JavaScript in the browser (web workers) and on the server (worker threads).

Collection of Useful Shorthands for JavaScript and TypeScript

Shorthands are techniques that allow developers to write code concisely and achieve the same goals as longer, more verbose syntax. Working the same way as longhand code under the hood, shorthands can make code cleaner, more readable, and even more efficient.

If you write JavaScript or TypeScript code and know little about shorthands, this article will expand your knowledge on the topic.

Exploring Server-Side Rendering Strategies and Choosing the Right One for Your Project

In web development, server-side rendering (SSR) is a special technique used to generate the HTML content on the server before sending it to the client side. Several SSR options can be used in web apps. By choosing the right SSR strategy, you can enhance the performance, SEO, and user experience of your app.

This article highlights 5 popular SSR strategies and their use-case scenarios.

Tips on Code Review from GitHub Staff Engineer

Code review plays a crucial role in the development process, especially in the age of AI code generation. With the right approach to code review, you can ensure the quality and reliability of the codebase.

Sarah Vessels, a staff engineer at GitHub, shares her thoughts and useful tips on the process of code review in this blog post.

This article was originally published on Medium.

Latest News, Updates, and Tutorials from JavaScript World

Pavel Lazarev — Fri, 31 May 2024 11:17:10 +0000

We have been quite busy recently, therefore you haven’t heard from us about the latest DHTMLX and JavaScript news for some time. But we are back and ready to make up for this delay with new JavaScript stuff. We collected the most interesting news for the previous and current months.

Today, you will get acquainted with a huge release of DHTMLX Diagram 6.0, new Angular 18, release candidates of Svelte 5 and React 19, new Svelte UI components, and key insights from the “State of HTML” report. In addition, you’ll also find a pack of useful materials to enhance your JavaScript knowledge.

New Releases and Updates

DHTMLX Diagram 6.0 with Enhanced Diagram Editor

If you want to implement complex functionalities such as data visualization in web apps in the desired way, it is often the case that you have to do it yourself. We took into account this important aspect when delivering DHTMLX Diagram 6.0.

This major update allows you to adjust the killer feature of our JavaScript diagramming library, namely the Diagram editor, to the needs of any project.

In version 6.0, we overhauled the Diagram editor and enriched its control elements with numerous novelties. First of all, now you can fully customize the Editbar responsible for modifying diagram shapes in real time. The default Toobar of the editor became much more functional and flexible to configure it as needed. The process of adding new sections with shapes has never been easier thanks to numerous enhancements in the Shapebar API.

The updated editor is also notable for the modified API for item selection, simplified management line titles, updated move events, copy manager, and many other useful novelties.

We also want to mention that the Diagram component and the Diagram editor now also support new customizable themes. Check out the release article to learn more interesting insights about DHTMLX Diagram 6.0.

Angular 18 is Here

Angular has a reputation as a very complex tool, and there is some truth in that. However, the development team of this framework certainly deserves some credit for regularly updating their product with new features and improvements. So it is time to highlight the recently released Angular 18.

Some features that gained popularity among Angular devs such as Material 3, deferrable views, and built-in control flow changed their status from experimental to stable. Now you can evaluate a new experimental feature — zoneless change detection.

Also, there are several server-side rendering improvements such as i18n hydration support, better debugging, event replay, etc. Want to learn more about this major update? Read the release article on the Angular blog.

Svelte 5 is Coming

Svelte has been around for only 8 years but many dev teams already prefer this option over other time-proven and mature frameworks. Web developers love Svelte for its efficiency and simplicity in achieving various coding goals. If you are one of those Svelte admirers, you’ll be happy to know that the framework will be soon updated to version 5.

Currently, it is in the Release Candidate phase, thus the design of the framework is largely settled and you already can get acquainted with the biggest changes included in v5. The development team of the project decided to rewrite Svelte to make it faster and more robust.

The key feature of the new Svelte is a signal-powered reactivity API (called runes) that promises a new level of reactivity. The update will also include overhauled event handling, improved component composition via snippets, and native TypeScript support.

At the same time, there still may be some changes before the stable release of Svelte 5. Watch this video, where Rich Harris, the creator of Svelte, goes through the main features of v5.

Brand New Svelte UI Components from SVAR

There is one more good news for those developers who have Svelte in their technology stacks. The SVAR team has recently introduced a set of advanced UI components for the Svelte framework, including feature-rich DataGrid, Gantt Chart, and File Manager. It also offers an open-source SVAR Svelte Core library, a collection of commonly used UI elements (buttons, tabs, popups, date picker, and more).

Leveraging Svelte’s lightweight and high-performance nature, SVAR components are blazingly fast and promise ease of use and customization. Visit the SVAR Svelte website for more information and a free trial.

What to Expect from React 19

Today, we also have reasons to mention another extremely popular JavaScript framework — React. Just like Svelte, the new React 19 reached the release candidate status. This major update promises a range of new features and improvements.

First of all, this release is notable for the React compiler designed for managing component’s re-rendering on the UI state change, thereby ensuring performance optimization. Developers will also benefit from new React actions that facilitate the management of data and interactions on web pages. Apart from that, the list of novelties includes support for document metadata, server components, new hooks, and much more.

You can learn more about React by visiting this page, and if you get the urge to upgrade your app to React 19, check out this step-by-step guide. You should also take a look at the recap of React Conf 2024 packed with exciting announcements and updates from the React & React Native team and community.

Key Takeaways from State of HTML 2023 Survey

Although this article is mainly dedicated to the JavaScript world, we simply could not ignore the release of the State of HTML report. HTML remains indispensable for structuring and presenting web content effectively, so it is great to know about the latest trends in this area.

Created by a talented team known for similar informative surveys for JavaScript and CSS, it provides plenty of curious insights based on 20,904 responses from participants across the world.

In this survey, you can find interesting visual data on the experience and sentiment of respondents related to HTML features and other browser APIs. The “Usage” section of this survey deserves special attention since it provides better visibility into developer needs. For instance, if you take a look at the list of missing elements (including data table, tabs, switch/toggle, etc.), it is safe to assume that developers want more interactive HTML elements.

Developers also complain about insufficient customizability, especially around styling. This issue directly concerns form input elements, which frequently have to be recreated. For more information, check out the complete survey.

Useful Learning Resources

Customizing Top DHTMLX JavaScript Libraries

Many development teams trust DHTMLX products when it comes to delivering complex functionalities for business apps, especially project management. Knowing that the development of a modern web app very often requires nontrivial solutions, we try to help our customers with tutorials that help adjust our JS libraries to various use-case scenarios.

This month, our team prepared two tutorials that vividly demonstrate the high customizability of our JavaScript libraries for project management — Gantt and Scheduler.

In the first tutorial, you will learn how to complement a JavaScript Gantt chart with a custom context menu that enables end-users to manage tasks in the project workflow more efficiently.

The second tutorial explains how to implement a custom toolbar into a JavaScript scheduling calendar based on DHTMLX Scheduler. This toolbar offers powerful features that enhance user interaction and accessibility.

Deeper Insight into React Compiler and Its Impact on Your Code

We already mentioned the React compiler in the news dedicated to the upcoming release of React 19. But since this feature is expected to become a game-changer in terms of performance, it is nice for web developers to learn more about this feature. This video provides interesting insights about React Compiler and its practical application.

Listing of AI Tools to Boost Developer’s Productivity

AI technologies still raise some reasonable concerns in the dev community, but it has become common for many developers to use various AI tools in their jobs. Such AI aids help automate recurring tasks, implement enhanced features, and improve the overall code quality. In this article, you will find the selection of popular AI code generators and development tools for programmers.

5 Modern JavaScript Techniques

JavaScript is constantly evolving, so JS developers should broaden their knowledge of the language to keep up with the advancements. By expanding their coding practices with new techniques, developers enhance their skills, deliver better products, and stay competitive in the job market. This article offers 5 cutting-edge JavaScript techniques aimed at helping developers create powerful but concise code for their apps.

23 Must-Know CSS Features

CSS (Cascading Style Sheets) plays a crucial role in modern web development by providing a means to style and layout web pages. Thus, it is useful for web developers to follow CSS trends and learn its features. Proficiency in CSS enables developers to create visually appealing and user-friendly apps as well as optimize their performance. In this video, you will get acquainted with the list of popular CSS features that developers should know.

Thanks for reading and see you next time.

This article was originally published on Medium.

JavaScript Libraries for Implementing Trendy Technologies in Web Apps in 2024

Pavel Lazarev — Tue, 09 Apr 2024 13:22:05 +0000

The field of web development is dynamic and continuously evolving, affected by technological advancements, user preferences, and industry needs. No wonder that web development trends are changing with time. Web developers have to adapt to the latest changes and new requirements to remain effective in their work. Specialized JavaScript libraries can facilitate this process.

I selected several trending topics in web development in recent years and collected packs of useful JavaScript libraries related to them. Using these libraries, you can implement highly requested functionalities much faster.

AI and machine learning

Today, it is hard to find someone in the IT world who knows nothing about the AI tool called ChatGPT. It is a vivid example of how the machine-learning approach works in practice. Despite the novelty of AI technologies and the potential risks associated with them, programmers are already actively using AI tools in their day-to-day activities.

Participants of the latest Developer Survey from StackOverflow predict that AI tools will considerably impact various aspects of the development workflow. The State of Octoverse report talks about the striking growth of generative AI projects on GitHub that started in 2023, namely 65,000 projects, indicating a 248% year-over-year increase. Here is the list of useful JS libraries for AI web projects.

TensorFlow.js

TensorFlow.js is a WebGL-accelerated JavaScript library that brings machine-learning capabilities to the web. Using this tool, you can build, train, and deploy machine learning models right in web browsers or in the Node.js runtime. It supports deep learning, neural networks, and a variety of model architectures. Apart from that, TensorFlow.js enables you to run and retrain existing models. There are plenty of available models, modules, and datasets created by the TensorFlow community.

ml5.js

ml5.js is a JS library that offers a simplified approach to integrating machine learning models and related features into web apps. It allows working with machine learning algorithms and models in the browser, building on top of TensorFlow.js. With ml5.js, you can benefit from pre-trained models for detecting human poses, generating text, styling an image with another, and much more. ml5.js is suitable for newcomers to machine learning.

Brain.js

Brain.js is another good option if you need to perform some simple tasks or prototype machine-learning models. It is a lightweight and user-friendly tool used for creating neural networks in JavaScript for browsers and Node.js. It has a modular implementation for easier extendability and uses GPU for calculations. Brain.js offers a range of neural network implementations since different neural nets can be trained for different purposes. It is possible to export and import trained models via a JSON format or as a function.

Synaptic.js

Synaptic.js is a JavaScript library for building neural networks and implementing machine learning algorithms in web browsers as well as in Node.js. It is notable for a generalized and architecture-free algorithm. This peculiarity makes this library suitable for creating and training any type of first-order or second-order neural network architectures. Synaptic.js comes with several pre-defined architectures (such as multilayer perceptrons, LSTM, etc.) and a trainer capable of training any given network.

Tracking.js

Tracking.js is a good option in case you need to complement your web project with something from the realm of computer vision and real-time object tracking. Designed with a lightweight core (~7 KB) and an intuitive UI, this library equips you with computer vision algorithms and techniques that can be used in the browser environment. This library enables you to add great features to your app, such as real-time color tracking and face detection, thereby creating a more engaging and interactive user experience.

Project management

In the current economic and political disruptions, the integration of productivity software remains crucial for the success of today’s businesses. According to Statista, the revenue in the productivity software market is projected to reach 79.07 billion U.S. dollars in 2024.

In this software segment, we should point out the popularity of project management solutions. Most of the respondents in Capterra’s 2024 Tech Trends survey assume that their organizations are looking to increase spending on PM software in 2024.

If you need a project management tool for your app but ready-made products do not meet your requirements, check out popular JavaScript libraries that will help you implement a custom solution.

DHTMLX

If you plan to build a modern project management app, you will most likely need some advanced functionalities such as a Gantt chart, scheduling calendar, Kanban board, to-do list, etc. DHTMLX provides JavaScript UI components for integrating these capabilities into your app with less time and effort.

Each product comes with a solid feature set and ample opportunities for customization. For instance, as the DHTMLX team says, the Gantt component with auto-scheduling and critical path features enabled renders up to 6000 tasks in under a second without impacting the UI performance. Extensive APIs, detailed documentation, numerous demos, and live samples will help you get started faster and make the most of DHTMLX libraries. All these JavaScript products can be easily combined in a single app as a comprehensive project management solution.

Socket.io

Project management apps are frequently used by multiple users at the same time, therefore you will certainly need a reliable mechanism for implementing real-time collaboration features. Socket.io is a JS library that enables real-time bidirectional event-based communication between a client and a server in apps. Based on the WebSocket protocol, it provides support for auto-reconnection, disconnection detection, multiplexing, arbitrary channels (rooms), etc. Therefore, Socket.io can be very helpful in delivering project management apps with real-time communication and data streaming.

Highcharts.js

When managing data-rich projects, it can be hard to do without some visual media such as a KPI dashboard, risk matrix, etc. It is hard to find a JavaScript library with predefined solutions for such scenarios. Therefore, you will need a highly customizable library like Highcharts.js. Developed on the basis of native browser technologies, this library presents a collection of interactive charts (bar, pie, spline, etc.) with ample customization options for integrating required visualizations into your app. Here, you can count on a considerable resource base and support from a vibrant community. Also, there is a new version of the Highcharts editor called Highsoft Lab - a special playground powered by ChatGPT, where you have an opportunity to experiment with various visualizations.

Markwhen

A project timeline is a chronologically organized visual roadmap with all activities (tasks, milestones, deadlines, etc.) scheduled to be completed within a project. The Markwhen tool allows you to build a cascading timeline by writing markdown-like text that is converted into a good-looking visualization. To enable you to conveniently switch between the text editor and the timeline view, the library includes the VSCode extension. It also comes with multiple useful features such as American/European date styles, real-time collaborative editing, recurring events, comments, tags & filters, markdown-style images, and much more.

Cybersecurity

In a global digital environment characterized by an ever-growing number of cyberattacks, dev teams have to take serious measures to protect sensitive data.

According to Verizon’s 2023 Data Breach Investigation Report, web application attacks are involved in 26% of all breaches, ranking them second in attack patterns. Statista’s list of the main sources of web application critical vulnerabilities in 2023 includes SQL injections, cross-site scripting (XSS), and malicious file uploading. No wonder that dealing with these security concerns remains one of the main requirements in modern web applications. So it is nice to have some ready-made tools that can help strengthen the security of your app.

DOMPurify

DOMPurify is a DOM-only library used to sanitize and clean up HTML, especially user-generated content, thereby preventing XSS attacks. Written in JavaScript, this tool operates with a secure default but still provides a number of configuration options and hooks. When DOMPurify encounters a malicious HTML string, it will exclude everything that contains harmful HTML and return a string with safe HTML.

XSS module

This JS module is dedicated to sanitizing suspicious HTML by filtering user input and eliminating the possibility of XSS attacks. The module helps control the usage of tags and their attributes following the predefined whitelist of allowed items. You can extend the module by adding custom rules or modifying the default behavior to suit the specific requirements of your app. For instance, you can customize the XSS filter or add custom whitelist rules.

Knex.js

Knex.js is an SQL query builder for Node.js that supports various database systems. While Knex.js itself is not specifically designed for security, it encourages the use of parameterized queries and can help prevent SQL injections by handling query generation securely. This tool also offers fluent query builder syntax, transaction support, execution of custom raw SQL, and query logging that can facilitate app security.

JsonWebToken

JsonWebToken is an implementation of JSON Web Tokens for Node.js. JSON Web Tokens operate as a self-contained means of transmitting information between parties (a web browser and a server). This library serves for creating (signing) and validating tokens used to authenticate and authorize users.

Retire.js

Some JavaScript libraries can be very useful in the development process but, at the same time, contain vulnerabilities that may compromise app security. The Retire.js library helps avoid such unpleasant situations. It is a scanning tool used to detect the usage of JavaScript libraries with known security issues. You can employ Retire.js in many ways: as a command line scanner, grunt plugin, gulp task, Chrome extension, Burp, and ZAP add-on.

Blockchain and cryptocurrency integration

Today, blockchain may seem to be outshined by much-hyped AI technologies, but in fact, blockchain continues to evolve and be actively applied in various domains.

Forecasts from Statista back up this point, saying that global blockchain technology revenues will experience massive growth in the coming years, with the market expected to climb to over 39 billion U.S. dollars in size by 2025. Cryptocurrencies like Bitcoin and Ethereum are the most common use of blockchain technology. If you are interested in adding such functionalities to your app, the following libraries can help you.

Web3.JS

Web3.js is a collection of libraries that enables you to connect and craft web apps within the Ethereum ecosystem. Using web3.js, you’ll be able to interact with smart contracts, listen for on-chain events, fetch data from the blockchain, simplify your code with built-in utilities, and much more. Moreover, you can extend the functional capabilities of web3.js with additional plugins.

Ethers.js

Ethers.js is one more noteworthy tool designed to cover your needs in the Ethereum blockchain. It is commonly used to build decentralized apps (dapps), wallets (e.g. MetaMask), and other tools that require reading and writing to the blockchain. There is a playground tool that allows you to play around with the ethers.js API.

CCXT

CCXT is a JavaScript library that simplifies cryptocurrency exchange integration in web applications. It supports many popular cryptocurrency exchange markets and merchant APIs. The CCXT library also offers access to real-time market data for market analysis, price monitoring, and programming of trading bots. This library can help deliver trading platforms or market analysis tools.

xrpl.js

The xrpl.js library provides a handy toolkit for integrating XRP Ledger functionality into web projects. XRP Ledger is a decentralized public blockchain network focused on cross-border payments, smart contracts, and digital currencies. Using the xrpl.js library, you will be able to manage keys & create test credentials, submit transactions to the XRP Ledger, send requests to observe the ledger, subscribe to changes in the ledger, and more. The library also helps get access to numerous advanced features such as payment paths and channels, account settings, escrows, etc.

bitcore-lib

Bitcore-lib is a JavaScript library that comes with a reliable API that allows web apps to interact with the Bitcoin blockchain. This library is a part of the Bitcore platform, which features a complete infrastructure for delivering blockchain-based apps. Bitcore-lib supports addresses and key management, payment handling, scripting, and more. Some features, such as peer-to-peer networking, blockchain explorers, and mnemonics, are implemented as modules and can be installed separately.

Wrapping Up

As you can see from the above, the web development community keeps pace with trending technologies in the IT world, providing useful JavaScript libraries, tools, and extensions in response to emerging needs. Therefore, web developers don’t need to build everything from scratch to enrich their web apps with increasingly popular functionalities.

With libraries highlighted in this article, you have useful resources for enhancing security, incorporating AI capabilities, integrating blockchain technology, or building project management solutions on the web.

The article was originally published on Hackernoon.

JavaScript News, Updates, and Tutorials: March 2024 Edition

Pavel Lazarev — Tue, 02 Apr 2024 09:38:09 +0000

March is coming to an end, so it is high time for us to bring you up to date with the latest news from DHTMLX and the rest of the JavaScript world. This month, we rolled out a major update of our Vault library designed for building a customizable file uploader.

Apart from that, we will also highlight a new JS registry from Deno and updates of TypeScript, Winter.js, and Nuxt. As always, we also collected helpful materials to expand your knowledge in various areas of JavaScript and web development.

New Releases and Updates

What’s New in DHTMLX Vault 5.0

The DHTMLX development team continues expanding the capabilities of our JavaScript UI libraries with the requested features. This time, we are pleased to share with you highlights of the recently released DHTMLX Vault 5.0.

This major update is mainly focused on improving your styling experience with our JavaScript file uploader. Now you can apply 4 customizable themes to provide a unified look and feel for your app. Moreover, it became much easier and faster to customize the appearance of specific Vault elements with UI templates.

Lastly, our developers updated the integration demos of Vault with Angular, React, and Vue and added a new one with Svelte. Check out the release article to learn more about the novelties and examine related samples.

Deno Team Presents a New JavaScript Registry

Ryan Dahl and his team do not cease to amaze the development community with new ideas. For several years of the active development process, the Deno runtime has evolved from a promising project to a viable alternative to Node.js for many projects.

Now, it is time to unveil a new initiative of the Deno team called JSR. It is a new package registry for modern JavaScript and TypeScript.

According to the project’s website, JSR is not a replacement for npm, but it’s superset that can be used with any JS package manager and in popular runtimes (Node, Deno, Bun, etc.). Currently, the JSR project is in public beta. In this blog post, you can get acquainted with JSR in more detail.

Meet Winter.js 1.0

Winter is not coming, it is already here with the first significant milestone in its lifecycle. As you may have guessed, we are talking not about the coldest season of the year, but about the same-named JavaScript webserver updated to version 1.0.

Written in Rust, this tool boats to be incredibly fast. According to the benchmark study, Winter.js can handle 150k requests/second when executed natively, which is faster than Bun, WorkerD, and Node.js.

The updated Winter.js is also notable for compatibility with the WinterCG spec, Cloudflare API, and React server components. In addition, it also supports many existing frameworks such as Next.js, Svelte, Gatsby, etc. Find more about Winter.js 1.0 in the release article.

TypeScript 5.4 is Here

In recent years, TypeScript has been on the wave of popularity in the web development world. TypeScript support is integrated into many popular dev tools, including DHTMLX products, and many developers eagerly learn TypeScript as part of their professional development. This popularity is achieved thanks in large part to regular updates delivered by the TypeScript team. In March, TypeScript was updated to version 5.4.

The main features of this release are type narrowing improvements, a new NoInfer utility type, declarations for new JS Object.groupBy and Map.groupBy static methods, and much more. Read the release article to get the full scope of info on TypeScript 5.4.

Nuxt.js 3.11 is Now Available

The release of Nuxt.js 3.11 is great news for those developers who include this Vue-based framework in their technology stacks. Despite its minor status, this release brings along a range of features and improvements that promise to significantly improve your development experience with Nuxt.js.

In v3.11, you can expect better logging, preview mode, cache-busting payloads, middleware routeRules, and other useful novelties. The Nuxt.js team says that v3.11 is probably the last release before the major update of the framework.

If you want to learn more details about the advantages of using Nuxt.js 3.11, check out this blog post dedicated to the release.

Useful Tips and Articles

Integrating Trendy Technologies in a Web Project

It is not surprising that trendy technologies become the top requested features in web applications. When web developers are asked to implement functionalities related to such popular topics as AI technologies, cybersecurity, or project management, it can be extremely wearisome and time-consuming to do that from scratch. If you face such a challenge, you can speed up the development process with the JavaScript libraries reviewed in this article.

Useful Insights about JavaScript SEO

When talking about JavaScript SEO, we usually mean practices of optimizing web projects built using JavaScript for better search engine visibility and ranking. While JavaScript offers a lot in terms of interactivity, at the same time, it introduces multiple SEO complexities. Neil Patel, a well-known influencer in the field of online marketing and SEO, provides interesting insights on the topic of JavaScript SEO in this article.

Exploring Features of Upcoming React 19

In the previous edition of our news digest, we shared with you some insights on the development progress within the React team. Therefore, it is not a secret that the new version of this framework will include plenty of new features such as React Compiler, new capabilities in React Canary, and much more. In this YouTube video on the popular Web Dev Simplified channel, you can learn more information about 7 top features that will be included in React 19.

Tips on Optimizing JavaScript Code

Performance is one of the main priorities for web developers when delivering a modern web application. Optimizing JavaScript code is a way to ensure the necessary performance level. In this article, you can find tips and tricks that will contribute to faster load times and smoother user experiences in web apps.

Risks of Copy-Pasting Commands from the Internet

The Internet offers numerous useful resources (forums, blogs, repositories, etc.), where web developers can find solutions for their coding issues. In an attempt to save time and effort, web developers can act imprudently and copy-paste necessary commands found on the Internet directly into the computer’s terminal. But harmless-looking code may be malicious. This article elaborates further on the subject and provides useful recommendations.

The news digest was originally published on Medium.

Potential Risks of Using Open-Source JavaScript UI Libraries in Business Apps

Pavel Lazarev — Thu, 28 Mar 2024 10:17:26 +0000

The history of the emergence of free and open-source software goes back to the 1950s and 1960s. However, with the advent of web technologies and the widespread adoption of JavaScript, the popularity of open-source software such as UI libraries has been growing fast.

Now such tools are rightly considered a driving force behind innovation, collaboration, and cost-effective solutions in web development. But open-source libraries certainly have some soft spots that may harm your project, especially if it is an enterprise-grade undertaking.

In this post, we will touch on the topic of open-source JS libraries’ popularity and focus on the potential risks of using such tools in business web applications.

Open-Source Software is on the Rise

Today, it can be said that open-source software is booming and some numbers prove this fact. For instance, the latest Octoverse survey reported 420 million projects registered on GitHub, where 98 million of them were launched in 2023 and the number of first-time contributors (those who joined the platform in 2023) to open-source projects reached the highest numbers than ever before (2.2M). In addition, many professional developers who took part in the latest Stack Overflow Developer Survey claimed that outside of work they are involved in open-source projects, thereby also contributing to their growth.

Source: Developer Survey 2023

Now, let us talk specifically about JavaScript. According to Statista, last year, the total number of open-source project versions reached approximately 60 million. Among these, the majority was in JavaScript, accounting for about 37 million projects. It is safe to assume that open-source JS libraries played a significant role in delivering these projects.

Source: Statista

Open-source JavaScript libraries as well as other free-to-use tools are extremely popular among web developers, and there are many reasons for that. The combination of cost reduction, transparency, community engagement, and the ability to customize and innovate makes open-source JS libraries valuable for web developers in achieving their goals.

But not everything is so rosy about open-source JavaScript libraries in some niche areas, so let us see what can possibly go wrong with their usage in business apps.

Possible Drawbacks of Using Open-Source JavaScript Libraries in Business Projects

Open-source JavaScript libraries can be a suitable option when working on small and medium-scale business apps with straightforward requirements and a limited budget or prototyping new solutions.

However, suppose you decide to stick with open-source tools for complex projects, where advanced feature set, security, and long-term sustainability are the priority. In that case, you can face many potential challenges. Let us discuss them in more detail.

Maturity Concerns

If you feel like extending your technology stack with a business-oriented JavaScript UI library, you’ve got to be sure about its stability, and overall readiness for production use i.e. its maturity. A mature library should typically undergo several stages (extensive testing, bug fixing, etc.) in the formation of a stable and reliable codebase.

With open-source libraries, it often turns out to be a hit-or-miss game since they often appear overnight and fade into nothingness very rapidly. If you are unlucky to go with an open-source library that is not mature enough, be ready to face potential problems such as issues with dependency management, scalability, etc.

Limited Feature-Set

When you prefer using open-source UI libraries, most often you can expect a standard set of features that will cover only common needs during the application development process. But what if your project requires feature-packed tools such as a Gantt chart, event calendar, Kanban board, various diagram types, etc.?

Open-source UI libraries rarely offer some unconventional features, therefore you’ll have to perform customizations or find a viable alternative.

Issues with Documentation

The availability of complete and well-written documentation complemented with useful materials (snippets, samples, demos) is another potential weakness of open-source JavaScript libraries used in business apps.

It is often the case that the documentation quality can vary greatly across open-source projects. Some of them may have proper documentation, while others may have serious documentation gaps, outdated information, or no documentation at all, complicating the learning process and the overall usage efficiency of such libraries.

Lack of Timely and Dedicated Tech Support

Implementing various business functionalities is definitely easier with a UI library than from scratch, but it still can be accompanied by unexpected difficulties, which require explanation. If you don’t want to waste time on such obstacles and stay on the project schedule, you will certainly need professional tech support.

Unfortunately, open-source JavaScript UI libraries are unlikely to come with the required level of technical support. At best, you can count on community support, the effectiveness of which often depends on the popularity and relevance of a given library.

Also, it can be really hard to find a particular vendor accountable for the product which calls into question not only the possibility of any tech support but also the maintainability and longevity of the product. For instance, if at some point, maintainers lose interest in the product, they are not legally obliged to provide any services related to it, and you risk remaining alone with all potential challenges.

Vulnerability Exposure

Open-source libraries are known and loved by many developers for their transparency, enabling developers to scrutinize the codebase and perform comprehensive testing. But at the same time, you must remember that the code of open-source projects is available to everyone, including attackers. They may find a way to integrate malware into the code that will increase risks for your project.

For instance, Sonatype reported over 245 thousand malicious attacks on the open-source software supply chain in 2023, aimed at exploiting any weaknesses in upstream open-source ecosystems, including JavaScript. This figure represents a nearly 280% growth from the previous year and is over double the sum of the attacks from all the reported previous years (2019 – 2022).

Source: Statista

License Compatibility

And finally, we have to say a few words about possible licensing pitfalls with open-source libraries. Commonly, open-source tools are offered under different licenses (GPL, MIT, Apache, BSD, etc.). Therefore, it is recommended to go through all license terms since they may contain some restrictions. For example, some licenses for open-source products may include special conditions that restrict the commercial use, modification, and distribution of the software.

All in all, open-source JavaScript UI libraries can be effective in many cases, including common business scenarios. For instance, as shown in a short video tutorial, you can use an open-source version of DHTMLX Gantt component to create a JavaScript Gantt chart equipped with essential features.

Conclusion

Summarizing the above, we do not claim that all open-source JavaScript libraries should necessarily have any of the drawbacks described in this article, but objectively speaking, such tools are more susceptible to them. Many vendors of JavaScript UI component libraries for business like DHTMLX offer open-source library editions, besides proprietary ones, that can be great in particular circumstances.

But if it is critical for you to have access to advanced features and high-speed tech support, giving preference to the editions distributed under proprietary licenses is recommended.

As an alternative, you can also take a hybrid approach, where open-source libraries are applied in combination with closed-source ones to strike a balance between cost-effectiveness and additional features/support.

The post was originally published in the DHTMLX blog.

Common Mistakes in Selecting JavaScript UI Libraries for a Web Project

Pavel Lazarev — Fri, 15 Mar 2024 10:24:14 +0000

Complex technical requirements for modern web applications along with tight deadlines compel developers to use various auxiliary tools such as JavaScript libraries. However, the selection of a proper JavaScript tool frequently turns out a challenging task, where numerous factors should be taken into account. A proper JavaScript library significantly facilitates application development, but the wrong choice will only bring disappointment and frustration.

In this blog post, we will highlight the most common mistakes and potential pitfalls that should be avoided when choosing a JavaScript UI library.

Exploring Intricacies of JavaScript UI Library Selection

There are plenty of JavaScript UI libraries available on the market and their number is constantly growing, thereby providing more possible options for development teams, but at the same time, complicating the problem of choice. This issue applies to various types of software purchased by businesses.

The recent Tech Trends survey from Capterra provides a curious insight that proves the point. According to the survey, 58% of U.S. businesses say they regret at least one software purchase made in the past 12 to 18 months, while nearly a quarter (23%) have made multiple regretful purchases during that period.

No matter whether you are an experienced developer or a newcomer to the field, it is important to understand some non-trivial aspects of the JS library selection to make the right purchasing decision.

Mistakes Made Before Selecting a JavaScript UI Library

Prerequisites for making a false step with JavaScript UI libraries may occur before the actual selection process.

For instance, let us consider how a vague understanding of project scope and requirements may affect the final choice. In cases where project requirements are ill-defined and poorly analyzed, you are more likely to experience difficulties in identifying all functionalities and parameters required for the UI of your app.

To be more specific, it is important to take into consideration a wide range of requirements related to functional capabilities, user experience, performance, scalability, security, compatibility with various technologies, customizability, and much more. As a result, insufficient clarity in project requirements may lead to selecting a JavaScript UI library that either lacks essential features or includes unnecessary ones also named as “gold plating”.

Apart from that, you should also conduct proper market research and have a clear financing strategy before considering particular JavaScript UI libraries for a web project.

Main Obstacles to Getting the Right JavaScript UI Library

When you clearly define all project requirements, decide on the budget, and become familiar with the market of JavaScript UI libraries, you can proceed to the most important part – selecting the right UI tool for your app. At this stage, you’ll have to take into consideration a lot of important things and the risk of making mistakes is quite high.

Here is the list of the most common mistakes made by development teams in their quest for suitable JavaScript products.

Falling for Marketing Ploys

Good marketing can effectively promote even not-so-great products on the market using various gimmicks. Eye-catching advertising campaigns, bold and unsubstantiated product praises, too attractive offerings – all these and many other tricks may persuade you to make rash decisions.

Recommendations: Make sure that you are dealing with a reputable vendor. The most obvious way to do that is to check out the company’s website and read reviews on special platforms (G2, Capterra, GetApp, Software Advice).

Focusing Solely on Features

A rich feature-set is a good motivation for selecting a particular JavaScript UI library. But as it is said, quantity does not equal quality. You should not forget about the actual needs of the project and delude yourself with the number of built-in features. Large feature-sets may be burdened with complex practical implementation, increased load times, and higher computer resource consumption. Moreover, there is always a chance of underestimating a learning curve.

Recommendations: You should give priority to the features that are essential for your project. It is also important to ensure that all functional capabilities are well-documented and preferably complemented with live samples and demo apps so that you can get started with a given library much faster.

Poor Product Evaluation

On paper, many products may look like a good investment, but, in practice, things can be different. Therefore, it is better not to opt for products that are not thoroughly tested before the final choice.

Recommendations: It is great when JavaScript UI libraries come with detailed documentation and rich support materials, but that’s not enough. It is a common practice for major vendors to offer potential customers an opportunity to test their products using free trial versions in various scenarios. It will help you to get the full picture of the product’s potential. Also, do not forget to learn about the frequency of product updates.

Disregarding Tech Support Level

Even if you find a JavaScript library that perfectly matches your project requirements, you are still likely to deal with some challenges during the implementation stage. That’s where the quality of tech support comes into play. Poor tech support, or lack of thereof, will force you to fix issues by yourself or find solutions on the internet, thereby slowing down the development process.

Recommendations: Timely and effective tech support guarantees a quicker solution to immediate issues and ensures your web project’s long-term success and sustainability. You can estimate the level of tech support from a specific vendor by exploring various sources that may contain useful information on the subject: available support channels (email, ticket system, forum, etc.), customer reviews and case studies (or testimonials), user forums and Q&A websites (like Stack Overflow). Vendors also commonly specify their commitments related to tech support in the license terms.

Hidden Pitfalls in Pricing and Licensing Terms

Finally, we come to the point that frequently turns out a determining factor in selecting a JavaScript UI library, namely pricing policies and licensing terms. These aspects must be maximally clear and transparent for potential customers. Otherwise, you risk facing various unpleasant problems such as additional payments, hidden fees, application restrictions, legal complications, and more.

Recommendations: If you don’t want to experience a great deal of stress and regret when the selected library turns out more expensive than expected, you should understand the total cost of ownership (TCO) of the desired product. The thing is that in some cases the price advertised on the product’s website may not include possible add-on fees buried in the terms and conditions of the license. So it is highly recommended to devote the right amount of time to carefully examine all licensing and pricing options provided for the chosen JavaScript UI library.

The post was originally published in the DHTMLX blog.