JavaScript News and Updates (June 2020)

Hello everybody! The long-awaited summer has finally come with hot and sunny days to give us a break from the rough start of the year and we’ve been working hard to provide you with the hottest bits of news from the JavaScript land.

Despite the start of the summer holiday season, the DHTMLX development team continues to devote its professional skills and inexhaustible enthusiasm to the improvement and promotion of our products. In June, we have released the update of DHTMLX Suite 6.5, prepared Angular and Vue.js integration examples for all Suite components, and provided a couple of interesting tutorials associated with our Gantt chart library. More details on these novelties can be found below.

Moreover, in our June digest you will also learn about the top new features of Angular 10 and what to expect from the upcoming Vue.js, find out how the recently added Dart’s full safety feature can help web developers, become familiar with the new GitHub’s Super Linter, and finally enrich your JavaScript arsenal with helpful tutorials.

Let’s get underway!

New Tools and Updates

Production Release of Vue.js 3.0 is Coming

The front-end community has held its breath in anticipation of the Vue.js 3.0 release that is around the corner. The popularity of this technology has been constantly growing among web developers since its release in 2014 and now it is one of the most widely-used JavaScript frameworks along with React and Angular. It is expected that the improvements implemented in v3.0 will make this framework faster in rendering, reduce its size, and enhance its maintainability.

The key feature that comes in Vue.js 3.0 is a new API, referred to as the Composition API, allowing developers to maintain large and complex components as well as reuse code without any problem. Other significant improvements include rewritten virtual DOM providing enhanced performance, Typescript support, native portals (known as teleport), global mounting, suspension of component rendering under specific conditions, and more. Many web developers have already taken a chance to estimate updates included in v3.0 by utilizing its beta version that is available on GitHub.

Angular 10 Released

Angular, one of the most widely-used web frameworks, has been recently updated to version 10.0. The new release has come just a few months after the previous version of Angular (v9.0), appearing to be smaller and less impactful than its predecessor. However, v10.0 still has some remarkable new features that will come in handy for developers using this framework: new data range picker, updated default browser configuration, optional stricter settings, warnings about CommonJS imports.

The development team has also introduced several important changes to the dependencies of Angular to keep it up to date with the JavaScript ecosystem. The Angular team has also made significant efforts to improve its work with the community by addressing more open issues. Apart from new features, v10.0 has also been optimized thanks to the elimination of some obsolete features from previous versions. For instance, the new version will not support ESM5 or FESM5 bundles as well as some old browsers. Read more info about this release in this blog post.

DHTMLX Suite 6.5

DHTMLX development team rolled out the 6.5 version of the JavaScript UI library of customizable UI components intended for building feature-packed web interfaces of different kinds. This long-awaited release comprises a range of important novelties and improvements that will certainly be appreciated by our customers.

For instance, web developers using our Suite widgets now can write code for web interfaces faster and more efficiently while at the same time avoiding common errors thanks to the added support of TypeScript definitions. Web developers can also utilize examples of all Suite widgets with Angular provided by our team for this release.

Moreover, from now on, developers can manipulate the positioning of Grid and TreeGrid columns using drag-n-drop and group data in TreeGrid columns based on particular parameters. Suite 6.5 also comes with a variety of new config options and methods for managing DataView and List items as well as improving your working experience with Form controls and Sidebar options. Find more details about this release in our blog.

Dart Gains a New Important Feature

Dart, the programming language introduced by Google as an improved alternative to JavaScript, is to be complemented with the new null safety feature. This is the most relevant novelty in Dart since its major release 2.0 in 2018. Currently, the null safety is available in tech preview and is planned to be adopted as a stable feature by the end of this year.

The new feature will help web developers to stay away from tricky null dereferencing errors that can be hard to detect, as well as provide a variety of performance improvements. This helpful addition is based on the following 3 main principles: non-nullable by default, incrementally adoptable, and thoroughly sound.

The development team has undertaken significant efforts to make this major feature as user-friendly as possible. Dart’s null safety is backward compatible and is not a breaking change. It will be an optional feature, enabling web developers to apply it when needed.

Introducing GitHub Super Linter

Having a reliable instrument that properly checks source code for readability, maintainability, and functionality errors can be extremely helpful for software developers. For this purpose, when programmers set up GitHub repositories, they use special tools named linters.

But the thing is that each programming language has a separate linter (sometimes even several) and the tuning of linters for each ecosystem is different. Thus, the process of code validation can become tedious and time-consuming, especially for projects using multiple programming languages. That is why the GitHub engineering team came up with a solution called the Super Linter, a GitHub Action that provides a wide range of linters ensuring source code validation. Currently it supports 20 programming languages, including JavaScript, TypeScript, Ruby, PHP, Perl, Kotlin, etc.

Using this novelty developers can enjoy the following advantages: automation and optimization of code validation processes, lack of broken code in main development branches, establishment of best coding practices across supported languages, development of manuals on code layout and format, simplification of code reviews. As a result, developers can write cleaner and more stable code. Check out this post to get a deeper insight into the Super Linter.

Useful Tips and Articles

Integration of DHTMLX Gantt with Salesforce Lightning Component in Web Apps

Lightning Components are becoming more and more popular among web developers specialized in enterprise applications, and more helpful features are added to the Lightning Component Framework. It is a sophisticated User Interface framework aimed to provide ready-made components for building modern Salesforce apps for mobile and desktop devices. And the good news is that this framework can be smoothly and securely integrated with our comprehensive Gantt chart library, providing a powerful project management tool for any Salesforce app.

If you are interested in how to do it in your project quickly and correctly, watch the step-by-step video guide created by the DHTMLX development team. The complete demo can be found on our GitHub page.

Editing Capabilities for End-Users in DHTMLX Gantt Chart

DHTMLX Gantt has deservedly become one of the most highly-demanded JavaScript components available in our product portfolio. This fully customizable JavaScript library provides a wide range of Gantt chart features that can cover the needs of any project management app. For instance, our Gantt component is notable for its rich inline editing capabilities in the grid of a Gantt Chart.

This feature allows end-users to edit Gantt data in two ways (lightbox or built-in editors). To give you a full picture of this topic we’ve prepared the post in our blog where you will learn in more detail how to enable inline editing feature, how to build a custom inline editor, and what steps should be taken to integrate our Gantt chart with a third-party color picker.

Angular and Vue.js Integration for DHTMLX Suite Components Now Available

We have a great announcement for web developers using our DHTMLX Suite components for building full-featured apps. From now on, you can use ready-made integration examples of all Suite UI components not only with React but also with two other most popular JavaScript frameworks — Angular and Vue.js.

Our development team has done a great deal of work to provide you with well-structured live samples of Suite UI components complemented with the full source code for each framework available on our GitHub page. Moreover, you can also learn more about possible configuration options by using links to documentation pages provided for each UI component.

All these additions help web developers start working with our UI widgets without any difficulties and create web apps based on popular JS frameworks much faster. Make use of the trial version of our Suite library to fully estimate all its benefits.

Ways to Compare Object in JavaScript

It is not a hard task to compare booleans, string, number, and other primitive values in JavaScript. For this purpose, web developers can easily apply equality operators, but it is not that simple with JavaScript objects as they are structured data. Fortunately, the professional software developer Dmitri Pavlutin has prepared a great post, in which he provides a detailed insight into possible ways to compare JS objects, namely: referential equality, manual comparison, shallow equality, and deep equality.

Great Way To Test Your JavaScript Knowledge

As the old saying goes, knowledge is power. And it is extremely important to regularly check your knowledge and keep it up to date, especially when it comes to JavaScript. This programming language is constantly evolving, frequently gaining new tools and frameworks. Thus, no matter whether you are an absolute beginner in preparing for a job interview or an experienced programmer, continuous learning is a must.

For this purpose, you can make use of this questionnaire on GitHub containing interesting and regularly updated questions on JavaScript. Here you will find not only tricky tasks of different levels (from basic to advanced) but also answers with detailed explanations. Test your JavaScript knowledge and improve your coding skills.

Insight into JS Generators

The 6th edition of ECMAScript 2015 specification (also known as ECMAScript 6 or simply ES6) brought in a wide range of new features to JavaScript, giving a serious boost to the functionality of this programming language. Such novelties as arrow functions, promises, and classes swiftly gained popularity among developers and became an integral part of modern web apps. However, some other features from that release are less known, but still extremely helpful for developers today.

For instance, we can mention JavaScript generators. By analogy with using bookmarks in paper books, generators are special JS functions that can be paused and then continued from where it stopped. Thus, generators significantly simplify the task of writing iterators. If you want to learn more about generators, find out how to create generator functions, and become familiar with other peculiarities of working with generators, read this informative article provided by the software engineer and open-source creator Tania Rascia.