JavaScript Tools — News & Updates (July-August 2019)

Hello everybody! We are pleased to continue our series of news and updates articles from the JavaScript world. Today we’ll talk about a currency conversion library, a successor of money.js, and look at updated features that the recent React release has to offer.

Besides, we will check some new functionalities that DHTMLX developers added in the latest versions of dhtmlxGantt and dhtmlxSuite. And we’ll close by sharing some useful JavaScript articles and tutorials.

Let’s get started!

New Tools and Updates

Cachify

The idea of creating Cachify, a lightweight currency conversion library, has emerged since the well-known money.js library was no longer maintained and became outdated. The successor of money.js is a well tested and actively maintained TypeScript-based tool with a simple API. Plus, Cachify offers easy migration from money.js.

React 16.9

The hoped-for update of the React framework is now available for all users. The 16.9 version includes a range of enhanced features, bug fixes, and new deprecation warnings to help prepare for a future major release.

The following is the list of rolled-out functionalities that need to be mentioned:

• Introducing async act() for testing to help you write tests that better match the browser behavior. In React 16.9, act() supports both synchronous and asynchronous functions, so now you can await its call and fix all remaining act() warnings.
• Adding performance measurements with <React.Profiler> to assist you in finding performance bottlenecks in your app and benefiting from optimizations. A <Profiler> can be added anywhere in React tree to measure how often an app renders and what the cost of rendering is.
• Renaming unsafe lifecycle methods and adding a “codemode” script to change them automatically.
• Deprecating javascript: URLs to reduce a dangerous attack surface in case of accidentally including unsanitized output and creating a security hole.
• Deprecating “factory” component since this pattern is confusing.

dhtmlxGantt 6.2

DHTMLX Gantt is a complete JavaScript library used for integrating gantt charts into cross-platform and multi-browser applications. The latest extensive update has brought new features and decent performance improvements as well as the cleaned-up API and fixed minor bugs.

So what are the key improvements Gantt 6.2 provides?

Boosting performance

The smart rendering extension is included in the main component by default. Thus, you should notice major performance enhancement for large charts, especially when using resource panels.

Module for timeline zooming

A new module is introduced for manipulating the Gantt chart at different zoom levels. You are therefore able to set up the available zoom levels and manage them through Zoom In and Zoom Out controls. Plus, end-users are able to switch between Gantt chart scales just with the help of the mouse wheel.

Expanding and collapsing split tasks

Gantt 6.2 allows expanding and collapsing split tasks from the interface of the grid in order to view them as separate subtasks and manage them conveniently. This functionality is activated with a new configuration option open_split_tasks and available only in the PRO edition.

Advanced drag-and-drop

The team introduced a new module with an updated drag-n-drop feature, which allows creating new tasks directly in the timeline area. You can add drag-n-drop support to any Gantt interactions by calling an API.

Inline editors update

The default behavior of inline editors was changed. Now modifying the start date triggers a task to move, changing the end date modifies the duration of a task, and changing the duration modifies the end date.

Simplified setup of the timeline scale

The feature allows developers to configure all the available scales using one gantt.config.scales configuration option.

For more detailed information about Gantt 6.2 update with comprehensive screenshots and code samples check the release page.

dhtmlxSuite 6.1

dhtmlxSuite 6 is a JavaScript UI library with 21 components that can be used for building fully-fledged web interfaces and applications. The first minor update delivers significant advanced features and fixes, some of which are described below. The full list is available in the release article.

Inline data editing for dhtmlxGrid, dhtmlxTree, dhtmlxDataView and dhtmlxList

A new Suite 6.1 allows end-users to easily edit any column on the fly by double-clicking a cell they want to change. Developers are able to limit a choice of editable columns and define an editor type. Thus, users can pick a date from a popup calendar instead of working with plain text.

There are two ways of setting up the editing functionality: via the API to define which element should be edited or the configuration option to provide an opportunity to edit all items at once.

Adding vertical spans in a header

The new 6.1 version allows creating not only horizontal but also vertical spans in the columns headers.

Multiple selection and drag-n-drop

List and DataView components allow selecting multiple items and drugging them between containers at once. The multi-selection has two modes of work. The first one is the default mode requiring to use the “Ctrl + click” combination. The second one allows selecting multiple items by means of clicks only.

Useful Tips and Articles

Ways to Improve JavaScript Knowledges

Looking for new effective approaches to enhance your JavaScript skills? Carl Mungazi, a frontend developer with 3+ years of experience, shares some of the ways developers can take when using their favorite library or framework as an educational tool. He defines the benefits and explains the techniques for reading source code. In closing, Mungazi uses Redux case study to demonstrate how he approaches to understanding the library.

How to Include CSS in JavaScript Apps

Every project is different and every method of handling CSS in JavaScript applications has its perks. So there is no hard and fast rule that specifies the only right way. Mr. Magnifico raises this controversial issue in the land of front-end development. In the article, he describes the three more commonly used methods, reflects on their purpose and various opportunities each of them provides.

dhtmlxSuite 6 Introduction (YouTube)

Meet the DHTMLX JavaScript UI library for developing modern and flexible web interfaces. The dhtmlxSuite team created a YouTube video describing their leading-edge product, its key benefits and some of the components arranged in impressive demo applications.