Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Life of JavaScript Libraries in 2016

DZone's Guide to

Life of JavaScript Libraries in 2016

An overview, analysis, and comparison of updates and new features within three popular JavaScript libraries—jQuery 3.0, Kendo UI, and dhtmlxSuite 5.0.

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

Nowadays, following the trends of web development became the uneasy task. There are tons of libraries, and each of them intends to implement the latest features in the pursuit of developer’s attention. To make your life a little bit easier, we've gathered together info about the latest updates of known (or not so well-known) JavaScript libraries. This article does not claim to be the full overview of the recent tendencies, but still, we hope you’ll find it useful.

Here is the list of libraries for today:

  • jQuery. Modern classics. jQuery 3.0 is almost here. You can already try the 3.0 release candidate version of this library. It’s available via CDN or npm.
  • Kendo UI is another widespread library that is based on jQuery. Let’s check if there are any new updates available.
  • dhtmlxSuite is probably not so well-known as the previous two, but there was a major release recently, and now we can use visual development tools. Another new feature is Material Design support, so I guess we can give it a try.

jQuery 3.0

Is there a necessity to talk much about jQuery? I mean, come on, everybody knows it. It's a library that focuses on the interaction between HTML and JavaScript and helps to get access to the DOM elements and manipulate them. Many other libraries were developed based on jQuery.

The state of the jQuery library at the time of writing this is version 3.0 Release Candidate. Let’s check the list of updates.

jQuery 3.0 Release Candidate Features

First of all, jQuery 3.0 will become the only and main version of the library. The 1.12 and 2.2 branches won’t get new features. The new version of jQuery won’t support IE6-8. You should use version 1.12 if IE6-8 support is crucial for you. To avoid problems, better check 3.0 Upgrade Guide.

jQuery.Deferred objects have been updated for compatibility with Promises/A+ and ES2015 Promises resulting in changes of the .then() method:

  • An exception thrown in a .then() callback now becomes a rejection value. Previously, exceptions bubbled all the way up, aborting callback execution and irreversibly locking both the parent and child Deferred objects.
  • The resolution state of a Deferred created by .then() is now controlled by its callbacks—exceptions become rejection values and non-thenable returns become fulfillment values. Previously, returns from rejection handlers became rejection values.
  • Callbacks are always invoked asynchronously. Previously, they would be called immediately upon binding or resolution, whichever came last.

You can always recover the behavior of the then(), method from the previous versions of jQuery by using the .pipe() method which is deprecated in the third version.

jQuery Deferred Reporter Plugin is a new plugin that was built to help in debugging Promises/A+ compatible Deferreds.

The catch() method was added to promise objects as an alias for .then(null, fn).

Event aliases .load, .unload, and .error were removed from the library. Instead of using them, you should register new listeners using .on().

Now, jQuery uses requestAnimationFrame API, which should lead to smoother animation with less CPU usage. This feature will be extremely important for mobile applications because it will help to save battery power.

Speedups for some custom jQuery selectors were achieved. Developers have identified the way to eliminate the amount of produced work when custom selectors like :visible are used many times in the same document. That particular case is up to seventeen times faster now. Despite this news, you should remember that selectors like :visible and :hidden still can be expensive.

Kendo UI Recent Updates

Kendo UI is a framework that was developed by the Telerik company. It contains a collection of UI widgets such as grid, charts, drop-down menus, and others. It’s based on jQuery and uses HTML5 and CSS3.

Let’s check the current state of this library. There are no revolutionary improvements, but for those who use it, there’s a lot of interest.

We’ll start with the updates that affected all available components. First of all, the bundled jQuery version was updated to version 1.12.3. Source files are now distributed as separate packages in the downloads section. The address memory leak in IE after calling kendo.saveAs() was fixed.

For the Calendar widget, changing the month with the date disabled is impossible if the selected date in the current month is the same as the disabled date in the month we try to navigate to.

The Chart component now has support for events and a pinch to zoom feature when rendering to Canvas. The pane title color now inherits chart title color to match the current theme. They also added a new chart type: Vertical Box Plot.

The Diagram widget now automatically updates its shape when binding to HierarchicalDataSource and an item is changed. fontWeight and fontStyle options were added, and they improved selection and drag-and-drop behavior on mobile devices.

Actually, the full list of recent updates and fixes is too big to describe them in a single paragraph. You can check it out here.

dhtmlxSuite 5.0

dhtmlxSuite is a JavaScript UI Library for building cross-browser web and mobile apps. It consists of UI Components such as Chart, Calendar, Editor, Menu, etc. It’s a technology that you can learn with ease, and it allows you to customize the appearance, create new skins, and use visual development tools.

Let’s take a look at the new features.

Material Design

The main new feature of dhtmlxSuite 5.0 is Material Skin:

Material Design

From now on, all widgets and components implement the Google Material Design concept. For the fans of this clean and neat approach, there’s more good news: This skin is available by default, so there’s no need for extra effort. To check how the new Material Skin looks like, check this demo page.

New Widget: TreeView

dhtmlxTreeView is a component that allows visualizing the hierarchical data in the form of a tree. It’s faster and more lightweight than the already existing dtmlxTree, and the developers assure that it works faster with large amounts of data.

Distinctive features of this new component are drag-and-drop support, checkboxes, multi-selection, etc.

Programming Tools: Form Builder and Visual Designer

Form Builder is a brand new tool that simplifies the process of form creation:

Form Builder

Form Builder consists of the following parts:

  • Toolbar–Import and Export buttons.
  • Tree–that represents the hierarchical state of the form you are creating.
  • Editor–central part of the Builder that defines the place for the components. Editor has two buttons: Mockup for creating the layout of the form and Preview, which shows how this form looks.
  • Item Configuration Block–allows changing the properties of existing components.

Well, nothing complex here. It will look familiar if you worked with visual development tools earlier, and it should not take much time to learn how it works. You can try it here. For more info, check the documentation page.

Another visual development tool, Visual Designer, hasn’t changed much.

It allows you to build interfaces for web applications. You can define the interface structure and manipulate UI elements without writing a line of code. Unfortunately, the recent update affected only the visual part of this tool. Now, it looks neater.

Font Awesome Support, Fixes, and Improvements

Controls built with dhtmlxSuite 5.0 supports Font Awesome icons. Now you can use this famous icon collection in your apps.

Besides the described changes, developers have fixed a wide variety of bugs and added a bunch of little updates. The full list is available here.

Conclusions

We’ve talked about only three JavaScript libraries. The first of them, jQuery is some kind of a keystone of modern mobile development. The second one uses its powers for its own needs, providing you with the high number of high-quality UI components. The third one, dhtmlxSuite, gives you visual development tools among the other features. And each of them intends to follow the needs of developers by providing them with cutting-edge features and simplifying the development process.

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:
javascript ,jquery ,kendo ui ,dhtmlx ,libraries

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}