Summer’s gone, and it’s a sad fact. To cheer you up a little, we’d like to entertain you with our monthly JavaScript news bulletin. Of course, it won’t replace the bright sun and hot beach, but it’s still something. This time we’d like to tell you about a new ReactJS Map Component, and the updated version of dhtmlxVault, a JavaScript file uploader. Also, we’ll discuss how you can track the state of Agile sprints more efficiently, bring some life into your browser console, and dispatch events and listen to them. Besides, we’ll learn a few new React tricks, and look inside your browser to see how rendering works.

New Tools and Updates

dhtmlxVault 3.0. JavaScript File Uploader and Manager

https://youtu.be/zCR72TZfDug

dhtmlxVault is an easy-to-use JavaScript control for the intuitive files’ uploading and managing. Recently, developers have released a new version of this tool that includes a series of major improvements.

From now on dhtmlxVault 3.0 supports three extremely popular JavaScript libraries: Angular, React, and Vue.

dhtmlxVault 3.0 is fully customizable. You can change the appearance of all its elements, add a custom icon to a toolbar control, use custom icons for file extensions, adjust the progress bar, and so on. Check the configuration docs to learn how you can apply the necessary localization, add a custom scroll, or hide the toolbar.

Renewed API allows controlling the process of uploading files to the server. For example, you can set restrictions on the maximum size of each uploaded file or all files for upload, the number of uploaded files, and allowable file extensions. dhtmlxVault can restore the list of previously uploaded files. Downloading files from Vault to the computer is also available. Also, this uploader enables filtering and sorting the queue of files by different criteria like file name, size or extension.

Pigeon Maps. ReactJS Maps Without External Dependencies

Pigeon Maps is a performance-first React-centric extendable map engine for everyone who’s tired of waiting too long until Google Maps finishes rendering a few tiles and a marker. The component is currently ~25KB minified and ~8KB gzipped. Here’s the list of its current features:

Show tiles

Arbitrary overlays (markers, etc.)

Drag-and-drop and touch support

Smoothly animated zooming without flickering

Slide when dragging and letting go

Event handling (clicks, etc.)

Double-click and double tap zooming

Option to block dragging with one finger and mouse wheel scrolling without holding meta key

Enable/disable touch and mouse events as needed — you could make a 100% static server rendered react map

Support for 100% width/height containers

You can install Pigeon Maps via Yarn or NPM. Also, it works with Inferno.

Console Colors. Colorized Console Logs in Your Browser

Console colors is a tiny decorator library that can bring some colors to the console of your browser. All you have to do is to add the required methods before the log() method. The styling of console logs will work only for primitive types. Also, you can use this utility only with modern browsers. The developer doesn’t recommend to include this script in production. You can place in it development env instead. You can install console-colors via the NPM package manager.

Arcus: Faceted arch diagram for project management

Arcus is a visualization tool that helps to understand how issues move through different phases across sprints for a project. You can check this little demo to understand how it works.

The core concept of managing a project workflow remains pretty much the same every time, since every project defines a few main stages like:

To Do In Progress In Review Done

These are the main states a task can take according to its progress. When we talk about Agile methodology, the whole project life cycle is broken into sprints. Each sprint consists of several tasks to be completed. All uncompleted tasks move to the next sprint. Arcus records every sprint and tracks how tasks move from one sprint to another.

Custom-event.js. Event Dispatcher Based on the CustomEvent Interface

Custom-event.js allows communicating inside your application by dispatching events and listening to them. Also, it runs polyfill for Internet Explorer 9 and higher. You can learn how CustomEvent interface works on this documentation page.

The library is available via NPM and Yarn package managers.

Useful Tips and Articles

Build an Autocomplete widget with React and ElasticSearch

Let’s start our React series with this one. The author describes the process of creating an auto-suggest search widget with the following requirements:

A search bar that enables a quick search for a customer by first or last name or a unique short code Type-ahead search support with results being refined with more keystrokes Search is possible by first, middle or last name or full name If there are two or more customers with the same name, order them by their created time with the most recent one at the top

Besides the React library, the ElasticSearch was used. It’s a distributed, RESTful search and analytics engine capable of solving a growing number of use cases.

React Component Patterns

The second article is written by Gustavo Matheus who decided to share his experience with React. The article contains some useful info on React component patterns that will be useful for those who are just about to start using this library. React components can hold and manipulate state during application (Stateful Component) usage or be a simple component that takes the input props and returns what to display (Stateless Component). Containers are responsible to reach data that lives outside React scope while Presentational components are free of dependencies from the rest of the app. Higher-Order Component, in its turn, will be useful when you want to reuse a component logic. If you want to learn more about the differences between these types of components and how you can create them, read the full article.

Immutability in React and Redux. The Complete Guide

Immutability can be a confusing topic. To solve this issue, Dave Ceddia wrote a comprehensive article on immutability in React and Redux. You might have faced the situation when you get a bug where your React components don’t re-render, even though you know you’ve changed the props. It might be a tricky situation especially if you’re not sure where to look for the answer. This guide will explain what immutability is and how to write immutable code in your own apps.

How Browser Rendering Works. Behind the Scenes

Ohans Emmanuel did a great job and wrote an exhaustive article describing in very simple terms how your browser converts HTML, CSS, and JavaScript into a working website. The author explains what the engine is, how the DOM object is derived, how CSS works, and so on. This info will be useful mainly for beginner developers since it can enhance their enthusiasm and empower them to optimize web apps for better performance.