Modern web applications have a lot of business logic on the client side. In most cases such applications need to work with large amounts of information, store it in a DOM (Document Object Model) and be able to quickly re-render elements. Nowadays clients don’t like waiting. We need high speed applications that can save our time. Let’s have a look at what Drupal can offer us to solve these problems.

ECMA International

Who develops JavaScript programming language? Of course, there is an organization that coordinates this process. And it’s called ECMA International.

Ecma International is an industry association founded in 1961, dedicated to the standardization of information and communication systems.

It has been involved in the development of some programming languages, multimedia coding, and communications, optical storage, office open XML formats, etc. But we are only interested in ECMAScript at the moment. It’s an official name of JavaScript. JavaScript is similar to Java, so ECMA decided to change a name (Java is registered trademark of Oracle).

ECMAScript 2015

Several years ago ECMAScript 5 was popular among front-end developers. But due to the fact that ECMA decided to launch a new version of JavaScript each year, ECMAScript 6 doesn’t exist. Instead of this, we have ECMAScript 2015. Below you can see a list of new features.

• Constants;
• Scoping;
• Arrow Functions;
• Extended Parameter Handling;
• Template Literals;
• Modules;
• Classes;
• Iterators;
• Generators;
• Map/Set & WeakMap/WeakSet;
• Extended Literals;
• Enhanced Regular Expression;
• Enhanced Object Properties;
• Destructuring Assignment;
• Symbol Type;
• Map/Set & WeakMap/WeakSet;
• Promises;
• Meta-Programming.

Let's look at the most important changes, in my humble opinion.

1. A new behavior of scopes allows us to create variables which will be accessible only inside of the block. We can use “let” or “const”. Unfortunately “var” has a function scope so far.
2. Modules help developers divide their code into the small independent parts. It’s very useful when many programmers work on the same large project. They can store some functions, classes, and variables into their modules and not disturb others.
3. When classes were included in JavaScript, it became true OOP (Object-oriented programming) language. We used it to develop web applications in an object-prototype paradigm. Sometimes it was very strange. I think all developers who work with this programming language can feel my pain. There are no classes, only objects, and prototypes.
4. We can use promises for asynchronous computations. A Promise represents a value which may be available now, or in the future, or never.

ECMAScript 2016

Unfortunately, the last standard has not pleased us with many new features.

• Array.prototype.includes;
• Exponentiation operator.

The main changes have been associated in order to fix bugs in the previous standards.

Babel

If you have a look at how browsers support the last standards, you can find yourself upset a little bit. My friends often asked me how they could use them. And I said them only one word - Babel. It’s a JavaScript compiler which can transform ECMAScript 2015/2016 code to ECMAScript 5. And it’s awesome. With Babel, we can use all of the latest features right now instead of the waiting until browsers start supporting these functionalities.

npm

How to install Babel? As well as the other packages. You need npm. It’s a package manager for JavaScript. I can’t imagine any large project without managing packages via npm. But I would point out to a community that has been formed thanks to npm. Only community gives us an ability to share own code and reuse someone else’s, receive a feedback from our colleagues.

JS Frameworks

npm supports thousands of packages and we need a way which can help us organize all them in our application. Frameworks provide more abstract layers. Developers do not need to pay attention to the details, they can work with higher-level abstractions.
At this time there are 3 most popular JS frameworks: Angular, React and Ember. I don’t want to start one more discussion. So I won’t give you the advice to use an exact framework. It’s your choice.

Drupal theming

We quickly went through all the steps which can help you to build a high-performance JS application. But you may have a question: how you can use all of these in Drupal. Let’s look at the first approach. You just add these frameworks as the library and build some components (blocks, regions, etc) via frameworks. You also may use modules, for example, Decoupled blocks.

RESTful

The second approach is applicable when you want to send data from these components to the back-end. The back-end is managed by Drupal. Front-end is built partially or entirely on the JS frameworks. In the other words, we need to develop API with RESTful. There are many such modules on Drupal.org (for Drupal 8 this functionality is realized out of the box).
If you have a look at this article again, you can see that we described a plan how you can develop high-performance applications with Drupal. We went step by step from new JavaScript features to RESTFul API. Of course, this is only an introduction because each step should take an entire article (or maybe a book). So, subscribe to our newsletter if you have not done it yet. You will get a chance to learn more specific details on this topic.