JavaScript News and Updates (May 2018)

React is love. React is life. The popularity of this JavaScript library from Facebook doesn’t stop growing, so we’ve prepared three articles that, we hope, all React lovers will find helpful. Besides that, we want to provide you with proof that DHTMLX developers haven’t been sitting idly by lately. They’ve introduced two significant updates during the past month: DHTMLX Scheduler 5.0 and DHTMLX Diagram 2.1. Also, we didn’t forget to collect some other exciting news from the JavaScript planet.

Let’s roll!

New Tools and Updates

RSuite 3: React UI Component Suite

RSUITE (React Suite) is a collection of React components for building enterprise system products. After three major revisions, developers have provided a vast amount of components and rich functionality. RSUITE is designed to be used primarily on modern desktop browsers. Therefore, it may not be the best choice for mobile developers. You can install RSUITE via NPM or Yarn.

In the new version of RSUITE developers have implemented some useful functionality. First of all, RSUITE now supports React 16+. A brand new style and internationalization feature were added. The Internet Explorer version 9 is no longer supported. Developers have implemented prettier formatting and added some new properties to the following components: Button Group, Table, Checkbox, Dropbox, Nav components, and Form related components. Besides that, some new components were added, e.g., Sidenav, IconButton, Drawer, Progress, Alert, Message, Notification, Loader.

DHTMLX Scheduler 5.0

DHTMLX Scheduler is a full-featured JavaScript event calendar. The scheduler component provides a vast amount of views and configurable features. The user interface is neat and fully customizable. Not so long ago, developers have released DHTMLX Scheduler version 5.0. Let’s check what new features were implemented.

Following the Material Design patterns, developers have redesigned the scheduler to provide users with a more trendy look and feel. The new Material Skin will be familiar to all Google users:

Also, there are some UX enhancements. The new improvements are related to switching between different time periods (days, weeks, months) and working with the event details form. An orange Plus Button can be added to the app. Users can click on it to add a new event. As a result, a form for adding event description will appear on the screen. A grand CSS refactoring made by developers allows taking advantage of vastly renewed Scheduler styles for building your apps.

The new version of the scheduler allows creating your own custom skins. Style files are included in the dhtmlxScheduler package now. You can use these files to rebuild the existing skins in full accordance with your needs. To learn more about how you can create new skins for this scheduler, you can check the skin customization article.

Developers have improved the server-side integration of this component. Starting with version 5.0, the usage of dhtmlxScheduler with back-end technologies became as easy as you can imagine. Improvements to the dataProcessor module provide a simple connection with RESTful backends. To learn more about this part of the dhtmlxScheduler functionality, you can read the server-side integration guide.

DHTMLX Diagram 2.1

DHTMLX Diagram is another invention of our developers that received some significant updates recently. This JavaScript tool allows creating graphs and diagrams of almost any kind. You can add to your web application an org chart, flowchart, activity diagram, decision tree, etc. Now, let’s see what’s new in version 2.1.

The significant addition to the new version of the library is a new editor that simplifies the work with all possible diagram types. The drag-and-drop oriented editor allows manipulating every diagram element such as shapes and their content, connectors, colors of all elements, etc.:

The left-hand panel with all available shapes helps to build a diagram from scratch. The right-hand panel contains fields for changing style, size, and arrangement of diagram elements. The toolbar at the top of the editor allows resetting the changes and zooming in/out.

Besides that, to simplify the work with diagrams, developers have implemented hotkeys support. Now you can use:

• Ctrl + C — to copy a shape
• Ctrl + V– to paste a shape
• Ctrl + Z — to revert the latest action
• Del — to delete a shape
• Arrows — to move a shape left/right/up/down

A set of new configuration options for shapes and connectors provides additional opportunities for styling. For example, you can define the shape’s angle of rotation, color, stroke, the font color of a shape’s text, the radius of connector’s rounded corners and much more.

In addition to the described functionality, the DHTMLX Diagram Library brings new possibilities for customization via CSS. Now you can use CSS to change the style of connector’s lines, arrows, and modify the look of connectors between diagram components.

Selection.js. Create Visual DOM Selections

This lightweight and easy-to-use selection library allows enabling visual DOM-selection. You can check this demo to see how everything works. Selection.js supports modern touch devices, works with Node.js, doesn’t require jQuery, and weighs only 3KB gzipped.

To use Selection.js, you can either install it via the NPM package manager or use CDN. The library allows making all elements with a given class selectable. A bunch of useful options, methods, and events allows customizing the behavior of the library.

nanoJS. A Tiny JavaScript Library for DOM Manipulation

nanoJS is a really tiny (approximately 100 lines of code, 0.6 Kb compressed) JavaScript library for basic DOM manipulations. This library has syntax simple to jQuery and supports chaining. Apart from being super-duper lightweight, this library is also super-duper customizable. You can easily add or remove methods without breaking anything. All methods are unrelated so adding or removing one or two won’t affect the library. Therefore, nanoJS can become the basis for your own custom-made library.

JavaScript Algorithms and Data Structures

The creators of this JavaScript library have gathered together a vast collection of popular algorithms and data structures. You can think of this resource as of a knowledge base that you can use for learning. Each algorithm and data structure has a separate README page with a detailed explanation and a link to YouTube video tutorial.

The Data Structure section contains the following examples: linked list, queue, stack, hash table, heap, priority queue, etc. The Algorithms section, in its turn, consists of the following topics: math, sets, search, sorting, tree, graph, and so on.

Useful Tips and Articles

React and Separation of Concerns

After the Facebook company has announced the new JSX syntax extension to JavaScript, there were some lamentations that such approach contradicts traditional practice of separation of concerns. The main point was that using JSX, you mix HTML, CSS, and JavaScript. In his article, Krasimir Tsonev describes that React and its ecosystem actually has quite a good mechanism of concerns separation.

Build Your Own Blog Using Gatsby and React

Gatsby.js is a static site generator for React. Rajat S kindly shares his recipe of how you can create your own blog with its help. The author uses the following ingredients:

• Gatsby
• React
• Markdown
• GraphQL
• GitHub

The guide is pretty detailed and contains all required explanations. You’ll learn how to install and configure Gatsby. After a few steps of dealing with code, you’ll be able to create your own blog.

Create an Instagram Press-and-Hold Image Preview Modal with Gesture Actions in React Native

If you’re an Instagram user, you probably know that when you press and hold an image from the grid, you can see a quick view. While holding, you can also move your finger to get access to multiple actions (like, share, or comment). The author of this tutorial has created a step-by-step guide to rebuilding such behavior with React Native. The guide is quite detailed but requires some experience in React coding so that we won’t recommend it for beginners.