JavaScript News and Updates (April 2020)
Greetings to all JavaScript enthusiasts! As it is still better to stay at home, we’ve gathered some interesting JavaScript news to bring you up to date with the latest updates in front-end technologies and brighten up your mood.
This month has become quite productive for the DHTMLX team, as we’ve released a major update of our key product DHTMLX Gantt 7.0, and you will know more about this novelty below.
Moreover, in this digest you will learn how to generate structured data using JavaScript, become familiar with a new JavaScript framework Crank.js and new features in Node.js 14.0, find out how JavaScript developers can help in combating COVID-19, and what to expect from ES2020 and Bootstrap 5. For a dessert, we will share with you some useful tutorials and valuable tips to make your quest for JavaScript knowledge a bit easier.
Here we go!
New Tools and Updates
Google’s New Guide on How to Generate Structured Data Using JavaScript
Google has recently published a new developer guideline on the Google Developers page. This document gives a good insight into how to create structured data with the help of JavaScript and how to implement it on the website, or rather how to do it properly so that it can bring benefits in Google search. In general, the guide describes three methods for dynamically adding structured data to a web site using JS: Google Tag Manager, сustom JS, and rendering on the server-side. Nowadays, the use of JavaScript is a must for creating a website with enhanced functionality. Thus, these tips will be especially valuable for web developers and SEO specialists.
What’s New in DHTMLX Gantt Chart Version 7.0
This month, our development team has finally given a green light to the major release of DHTMLX Gantt. A new version 7.0 offers several important improvements that will come in handy for expanding the functionality of our Gantt in any project management app.
In addition to several important client-side updates such as merging several calendars, new configuration options for grid columns, and updated content security policy, the new DHTMLX Gantt component has also taken aboard a groundbreaking server-side Gantt module for Node.js.
This add-on will allow you to do some magic with our Gantt on the server-side in the Node.js environment. For instance, you will be able to keep Gantt chart tasks up to date with the help of auto-scheduling after receiving task updates from different sources. The module also makes it possible for numerous users to work with Gantt and introduce necessary alterations into its schedule simultaneously. Moreover, you will be able to perform calculations and analyze the schedule via your server code. Check out our blog for more info on this release.
Node.js Gets Major Update
The Node.js development team has recently presented a major update of its popular Node.js framework, offering a JavaScript runtime environment for writing server-side apps in JavaScript. The new version 14.0 provides a lot of interesting features, which will certainly strengthen the arsenal of web developers. The list of the most notable novelties of v.14.0 includes the following: enhanced diagnostics, modified JS engine, improved consistency of the streams APIs. The new version also offers some peculiar experimental features such as implementation of Web Assembly System Interface, async local storage API, and ES modules.
It should be noted that Node.js 14.0 is not production-ready until it is promoted to Long Term Support (LTS) status, scheduled for October 2020. Until then, developers can experiment with the latest Node.js 14 features and report all encountered issues so they can be fixed before shifting to LST. To learn more about this major release check out this blog post.
Nextstrain Looks for JS Developers to Fight COVID-19
Nextstrain, an international nonprofit project focused on creating visualization instruments for monitoring and analyzing the development and spread of pathogenic germs, has urged JavaScript developers to give a helping hand in updating its interactive web app named Auspice.
Recently, this application has been widely used for illustrating the evolution and geographic distribution of COVID-19. Each week, the Auspice team issues situation reports using narratives on the extension of the coronavirus disease. This information allows virologists and other specialists to analyze and observe how the pathogen is changing.
The problem is that currently narratives can only make use of only one dataset and it significantly limits the amount of data covered in reports. That is why Nextstrain seeks help from JS developers in enhancing the narratives functionality i.e. enabling each narrative to use multiple datasets. Here is some useful info for those developers who decide to join this useful initiative.
Introducing Crank.js Framework
If you are looking for some new approach to building JSX-driven components, then you should certainly pay attention to Crank.js. This new framework can be considered as an alternative to major JSX libraries (such as React or Preact), allowing you to create JSX-based components with the help of functions, promises, and generators. Crank.js does not require the usage of hooks, classes, or proxies, thereby significantly simplifying the process of debugging. Thanks to the support of promises, Crank.js makes it possible to utilize async/await right in components, and race components to display fallback UIs. If you are interested in more details on this remarkable framework and want to know the full story behind its creation, check out the Crank.js blog.
What to Expect from Upcoming Bootstrap 5
Bootstrap is one of the most popular front-end frameworks comprising a wide range of UI components (HTML, CSS, JavaScript) for the implementation of web-based projects. Statistics say that approximately one-fifth of all websites are created with the help of Bootstrap, which this year is expected to be updated to a new version 5.0.
The official release date of this major update still hasn’t been announced, but the list of expected changes looks intriguing. First and foremost, the upcoming Bootstrap will not support jQuery and Internet Explorer 10/11. It is a huge move from the Bootstrap team, but there are good reasons for such radical measures:
- jQuery is inferior to other modern JavaScript frameworks in terms of performance and code maintainability
- Internet Explorer 10/11 browsers do not support modern JavaScript standards and can hardly compete with other popular browsers (Chrome, Firefox, Edge)
Among other notable changes, we should also mention the following: addition of responsive font sizes, Navbar optimization, new SVG icon library, CSS class updates, switching from Jekyll to Hugo.
All in all, it can be assumed that we won’t see significant changes in the basic set of components implemented in Bootstrap 5, but the framework promises to become faster, simpler, and better looking.
Final List of Features for ES2020
ECMAScript is a widely-used programming language specification with JavaScript being the most popular implementation of this standard. This month, the TC39 committee has presented the final feature package for the 11th edition of ECMAScript known as ES2020. Currently, the ES2020 version has a candidate status. It has been put forward for consideration and further adoption by the ECMA GA during the annual meeting in June 2020.
The list of features includes 10 interesting additions to ES2020 ranging from a new import() method to dynamic loading of JS modules to a new BigInt primitive data type for working with large numbers. Each proposed feature has gone through 4 maturity stages before being included in the final set of features, thereby excluding the possibility of any safety issues. It is interesting to point out that most of the novelties are already supported in modern browsers, but they will become an official part of JavaScript only after the final approval.
Useful Tips and Articles
Setting up Source Maps for Debugging Production JavaScript
Sometimes JavaScript developers may experience significant difficulties with debugging JavaScript errors in a production environment. The thing is that many developers frequently write code in JS supersets (TypeScript, Dart, etc.) that is then transformed in JavaScript via transpilers to be used in a browser. The transpiled code is profoundly different from the original source code used for writing an app, thus detecting errors becomes a complex and time-consuming task.
That’s where source maps come into play. Source maps are JSON files that help to bring the transformed code back to its original form and speed up the process of JavaScript code debugging. However, setting up source maps can be quite tricky, but fortunately here is a tutorial with useful recommendations on how to do it right and enjoy the benefits of using source maps.
Performance Optimization Tips for Angular-based Applications
Angular is a popular TypeScript-based platform used by millions of front-end developers for building feature-packed web applications. Even though this mainstream technology significantly simplifies and accelerates the development process, developers frequently face the problem of low performance. It occurs mainly when devs add too much complex content to their applications, apply bad coding techniques, or update them all too often. Poor performance rates can become a big blow to the popularity of any application. Make use of these 14 valuable tips to keep your Angular-based application lightning-fast and responsive.
How to Create Vue.js Gantt Chart Application
A Gantt chart is a critical tool for planning and scheduling projects of any scale. This instrument enables project managers to estimate the project timeframe, assign tasks to project participants, monitor the workload, manage the dependencies between tasks and make use of many other helpful features to successfully complete their projects. If you are looking for a comprehensive tutorial with step-by-step instructions on how to create a Gantt chart application for your project, the DHTMLX team has come up with a great solution for you. Check out this great video guide and you will learn how to do it properly using Vue.js and DHTMLX Gantt. Here is also a link to our GitHub repository where you will find the source code of Gantt chart component for Vue.js
GitHub Tips and Tricks from Githubbers
Currently, GitHub is not just the most widely used code hosting service among open source developers with version control, but it’s also a huge collaboration network for software developers. Developers from all over the world use this helpful service daily for working on their projects and sharing their experience on open source code. If you are one of the active GitHub users, then you will certainly appreciate this set of GitHub tips and tricks provided by experienced Githubbers.
Easy Way to Add Particle Animation to your Website
Particle animations can become a great addition to your website. And the good news is that you don’t have to be a guru in graphics programming to implement this eye-catching design feature. In this tutorial, Anna Prenzel will show you how to animate your project using some basic knowledge of front-end technologies and an intuitive JavaScript library named anime.js.
Strategies for Migrating from JavaScript to TypeScript
It is not a secret that currently JavaScript is one of the most widely used programming languages in the world and its popularity continues to grow. It is an extremely flexible and easy-to-learn language with extended functionality and a huge community. JavaScript is a great choice for small coding projects, but when it comes to large projects developers frequently have hard times debugging JS code.
Therefore when your JS project becomes too large and complex, it may be reasonable to consider migrating codebases from JavaScript to TypeScript. Using TypeScript, it is possible to deal with the problem of code complexity and effectively detect bugs during development and at compile time, making the code more simple, clean, and consistent. Migrating huge codebases may seem like a challenging and time-consuming task, but after reading this blog post on migrating strategies you will certainly come up with the right solution.
