JavaScript Trends for 2015

Hello! We somehow decided to make an easy introductory course on JavaScript and application development (which, by the way, will be published soon): and while I was collecting materials for it, it somehow turned out that there are quite a few things that say are at the forefront of javascript development. From here the idea was born to make a separate review article in the genre of “X trends for year Y according to technology Z”.

Many of those things that I will describe, you can try to one degree or another today (actually, otherwise I would talk about the cosmic future, and not about trends). This is a definite plus: if you have free time (and usually a lot of it during holidays), you will have something to do. And, in general, it is good to start the new year with the expansion of its horizons!

')

1. ECMAScript 6

If you are engaged in web development, you must have experienced all the advantages and limitations of JavaScript. When Brendan Ike in 1995 invented a quick javascript, he could hardly have imagined what web technologies would evolve in 15-20 years and what tricks the developers would do using his brainchild.

The complexity of modern web solutions has long required a significant review of how we create these solutions, so it’s not by chance that browser developers (in particular) pay so much attention to the next version of the JavaScript standard - ECMAScript 6 .

The new standard (which, by the way, in response to the failed ES4 release is sometimes referred to as ES6 “Harmony”) has long-awaited features that will greatly facilitate the creation of complex solutions: classes, modules, collections, iterators, generators, proxies, typed arrays, promises, new methods and properties for standard objects and new syntactic capabilities and whatnot.

// lib/math.js export function sum(x, y) { return x + y; } export var pi = 3.141593; // app.js module math from "lib/math"; alert("2π = " + math.sum(math.pi, math.pi)); 

On the basis of the modules, by the way, quite a lot of interesting decisions have recently developed, take at least RequireJS or Browserify .

Writing and maintaining complex applications will be much easier. You can see how the new language chips look like in the code in the “ Overview of ECMAScript 6 features ” review by Luke Hoban.

You can follow the implementation of support for new features of ES6 by using the table of compatibility with ES6 . And you can try out many of the features right now in the latest build of the Internet Explorer Technical Preview, available as part of the Windows Insider program.

By the way, at the end of 2015 we are waiting for a big holiday - the 20th anniversary of JavaScript. In fact, the new standard is an attempt to make JavaScript a good language (although some of its concepts are unlikely to seem easier to beginners than prototype inheritance). And there is also a forecast that the ES6 standard will be approved exactly in 2015. However, the direct implementation of the new standard in the practice of development will take more than one year.

What to expect in 2015: ECMAScript 6 standard, implementation in browsers, community adaptation and frameworks.

2. Typed JavaScript

While we have been waiting for the coming of new features in JavaScript for several years, the spirit of the time suggested that one of the biggest problems of JS in creating complex solutions is typing, more precisely, a little less than its complete absence.

Of course, there are a number of standard types in JavaScript, but everything else comes down to them, it requires inconvenient checks, and in general one of the charms of JS is just in its dynamism, which, however, does not help in any way to make complex and reliable decisions.

As evil, it turned out that working with files and graphics (hello WebGL!) Requires the ability to work with types of a specific dimension, rather than a single generalized Number, so, by the way, a separate standard for typed arrays appeared , which will now become part of ES6.

In general, when Anders Hejlsberg took over the business (Delphi and C # is his brainchild), TypeScript appeared. TS is a JS superset that adds static typing to the language at the design stage, as well as many features from ES6. Of course, TS did not appear just like that, but also from Microsoft’s internal need for conveniently creating complex web applications.

 // TypeScript class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } } 

(A similar need has ripened in other companies - pay attention to new typing projects from Facebook ( Flow ) and Google ( AtScript ). This is the place for high hopes that in 2015 we will not receive another new incompatible technology.)

The beauty of TypeScript is that while you are writing code (especially if you do it in Visual Studio, but not necessarily), you can conveniently describe complex data structures, while the compiler helps you keep track of what you have messed up anywhere and working correctly with types.

Another remarkable property of TS, or rather its compiler (which, by the way, is open as well as the language itself! ), Is that as a result of the compilation, you get pure JavaScript code, and approximately the same as you yourself would write following modern practices:

 // TypeScript to JavaScript var Greeter = (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function () { return "Hello, " + this.greeting; }; return Greeter; })(); 

Thus, the output is the code that works in modern browsers on any operating systems. By the way, under Node.js, you can also write in TypeScript.

By the way, since any code in JS is already a code in TS, the question naturally arises, how to use the existing code in a typed way? The answer to this question is in the large DefinitelyTyped project, within which most of the most common libraries are already typed.

In perspective, the next large version of TypeScript 2.0 should become a ES6 superset. Try TS in the browser right now in our sandbox .

In general, if you write code in JavaScript, TypeScript implementation can be one of your most important investments in 2015.

What to expect in 2015: the growth of TypeScript adaptation, the development of alternative projects and their mutual enrichment.

3. Cross-platform

If with the cross-browser JavaScript industry, in the end, almost all the problems solved, in the context of cross-platform application development on JS, we are really only at the very beginning of a long journey.

Two key tasks that we will have to solve next year (and not only): erase the boundary between sites and applications, and develop the capabilities of cross-platform JavaScript application development.

Erasing borders

In the first task, the desire to teach websites to do what applications can do is critical: for example, to integrate into the operating system - from icons and live tiles to push notifications and support for local contracts. At the same time, the system for updating the content of such applications via the website remains important, which allows you to retain the benefits of the web approach.

In the context of Windows and Windows Phone, one of the solutions in this direction is WAT (Web Application Template) technology, which allows hosting websites as OS applications delivered via the application store. As a result, the site “turns” into an application: it looks like a native application (with proper styling), behaves like a native application (due to integration into the OS) and gets native features (for example, working with the camera and file system).

Of course, this is not the only movement in this direction: I think a part of web developers with more experience remembers the Mozilla Prism project. From a recent history, these are fixed sites in Windows 7+, and from a very recent one, Yandex Browser, trying to minimize the visual presence of the browser.

Despite these advances, much remains to be done in the future (from facilitating access to native capabilities to standardizing relevant APIs, for example, in the W3C Manifest for web applications section). This, by the way, may be an interesting space for technological innovation.

Mobile development

In the second task, much of the way has already been done in projects such as Apache Cordova . Over the past couple of years, many large companies have joined the project: today it is not only Adobe, which bought PhoneGap, but also Microsoft, Intel, IBM, Google and others .

In a certain sense, Cordova is currently solving the task that takes more time in the world of web development and web standards than we would like. Namely: providing access to native features consistently from JavaScript on different platforms.

You write code in HTML / CSS and JS, Cordova packs them into an application that can be distributed through application stores. An important difference from the previous paragraph here is that the code of such an application is local, so it certainly has great potential. However, along with this, he acquires limitations in the sense of renewal only through stores.

Why do I expect significant growth in the use and adaptation of Cordova next year? There are three important reasons for this:

1. Continued growth of the mobile segment and the shift of focus towards applications (against the web browser).
2. Improving the performance and capabilities of the WebView component (the standard reason to say that JS applications are stunted). This, incidentally, is also critical for hosting sites.
3. The emergence of excellent tools that allow you to conveniently develop, test and build applications for different platforms. Visual Studio 2015 (Preview) is a great example of this, but naturally, not only Microsoft is moving in this direction.

An interesting point in both directions is that if you have a JavaScript developer in your staff, then in the future it can close all the major niches of web and mobile development. Yes, writing applications on TypeScript for Apache Cordova and websites is also possible today!

What to expect in 2015: development of tools for cross-platform development on JS, continuing to erase the boundaries between sites and applications.

4. Native

The natural development of the previous trend is another transition, which has actually already happened, but has not yet gained critical mass in the minds of web developers. This is about native application development directly in JavaScript. By the way, the previously mentioned Apache Cordova for Windows platform is already native.

For many developers, such a thought still cuts off hearing. Native is traditional in C ++, C #, ObjectiveC, Java, etc., but not in JavaScript.

It had historical confirmation in mobile platforms, on which it was possible to write in JavaScript only inside WebView, which was just one of the controls within the application in the “real” native language. And it was slow.

However, the situation has changed: Windows 8 from the very beginning, Windows Phone from version 8.1, Firefox OS, Chrome OS and other platforms today offer the development of applications directly in JavaScript with direct calls to native functions, access to the file system, integration with OS capabilities, etc. P.

 // File system access on Windows platform from JavaScript // Get folder var picturesLibrary = Windows.Storage.KnownFolders.picturesLibrary; // Get folder contents picturesLibrary.getItemsAsync().then(function (items) { outputHeader(picturesLibrary.name, items.size); items.forEach(function (item) { if (item.isOfType(Windows.Storage.StorageItemTypes.folder)) { output(id(picturesLibrary.name), item.name + "\\"); } else { output(id(picturesLibrary.name), item.fileName); } }); }); 

All this is already today. The question is in the growth of the share of relevant platforms and the awareness of web developers that they have such an opportunity (by the way, this is a very interesting psychological aspect that I often observe within the Windows ecosystem: even web companies with a sufficient number of web developers , prefer for Windows-based applications to hire a separate developer on C # / C ++, because it is so accepted).

The situation is gradually changing. Surprisingly, smart TVs (for example, LG with Open webOS), as well as game consoles (for example, Xbox One) are unexpectedly becoming one of the growth directions of native JavaScript development. There is simply no alternative, and the market and demand is growing!

Finally, another important aspect is, of course, increasing the speed of JavaScript execution: this is a question for compilers / interpreters, and for typing in certain aspects, and for highlighting a subset of the language that can be guaranteed to be performed faster ( asm.js ).

What to expect in 2015: the growth of smart TVs and consoles with the development of JavaScript, web developers adapting the possibilities of native development on JS on many modern platforms (but not all).

5. Device API

An important consequence of the preceding paragraphs (native, growth of mobile platforms, erasing borders) is generally the expansion of the web stack’s capabilities in terms of interaction with the hardware capabilities of the devices within which it works.

We have already learned how to work with the most basic things like geolocation or device orientation, but much work is ahead on standardization and implementation in browser engines (for example, IE can be monitored on status.modern.ie ) of a large block of features available in the case of native development, but usually not subject to browser development:

• Vibration
• Battery status
• Sensors (eg light)
• Camera and microphone
• and etc.

A similar task is in terms of user input: from the touch input (hi Pointer and Touch to events) and ending with voice and gesture control (hi, in general, NUI and Kinect ideas, in particular).

By the way, about Kinect, if you have Kinect for Windows , then with the SDK you get the opportunity to work with the sensor directly in the browser from JavaScript.

Why this direction will develop next year? It's simple: browser developers, closely connected with the underlying operating systems, will throw native capabilities into the web context, and common aspirations should lead to standardization of approaches.

By the way, an interesting aspect about Apache Cordova, which in some form already does this: the API exposed by the project for JavaScript is also tied to the appropriate standards as they become available.

What to expect in 2015: the development of API access to the native capabilities of the device from JavaScript, the adaptation of NUI in JS. I am sure this will be delayed for several years.

6. Dealing with complexity

The struggle with complexity, or rather the desire to simplify the creation of complex solutions continues. The 10-year-old era of JS libraries ends up simplifying the lives of web developers for many years, filling the gaps between browsers and the insufficient speed of web standards development (by the way, in February 2015 there will be 10 years Prototype, if you remember this, in June - script.aculo .us, and in September - MooTools!).

Some of these libraries are still alive and actively developing, for example, jQuery. Many died or were driven out by competitors.

But the most important thing is that today new players are entering the scene, solving a new class of tasks: creating complex applications. As a rule, these are one-page solutions that require decomposition, templating, data binding, modular structure, etc.

Following the solutions for creating applications based on MVC concepts (Backbone, Knockout, GWT, etc.), new players entered the market, moving further towards the creation of the SPA: Ember.js, Angular (Google), React (Facebook).

In this whole movement, two points are especially interesting to me:

• Entry into the market of large players who, reinterpreting their experience and their infrastructure, create new solutions (Google and FB here are the most obvious examples). It is worth noting the experience of engineering, but also potential marketing levers that can restructure the market.
• Modularity and flow of experience: due to openness, some frameworks can include parts of others - take at least the same Mustache.

How will all this develop further?

Firstly, as we adapt and accumulate experience, we are waiting for the engineers to rethink their products and solutions. The second version of Angular is a good example.

Secondly, the creation of complex solutions requires an update of approaches and, when the possibilities of simple JavaScript are not enough, its refinement takes the stage. Microsoft rewrites WinJS in TypeScript, Google prepares AtScript for Angular 2.0 AtScript, Facebook writes ReactJS on Flow.

Thirdly, it is the desire for compatibility and interchangeability of components. For example, in the case of WinJS 3.0 , this is a clear desire to achieve compatibility with other libraries for creating a SPA. Want to use WinJS with React? Use .

What to expect in 2015: the release of new processed versions of popular libraries, increased competition for large players, an increase in the input threshold for creating complex frameworks, new opportunities for niche solutions based on ES6.

7. Web components

Web components - another look at the fight with the increasing complexity. If ES6 and TypeScript work at the language level, and frameworks at the composition level of complex applications, then web components give an insight into how to deal with complexity at the level of HTML elements and, in particular, the document object model (DOM).

Today, web components consist of five key components:

• Templates and Decorators - the definition and application of markup templates in conjunction with the data for the dynamic generation of HTML elements (in fact, we are talking about the standardization of existing practices).
• Custom Elements - creating your own markup elements with their own tags and the necessary interfaces for JS.
• Shadow DOM - the possibility of hiding parts of the DOM for individual markup elements (useful for widgets), one of the side effects - on the contrary, the opening of the DOM for standard controls, the styling of which is usually difficult.
• HTML Imports - packaging templates and custom elements and embedding them in HTML documents (there is a partial intersection with modules in ES6).

As a result, such a set of standards with proper implementation should significantly facilitate the creation of new controls in a closed form (without potential side effects on the rest of the markup), convenient for composition and reuse.

In addition to the major players making their own frameworks for their platforms, the developers of various control libraries are also critically interested in the development of this area, so we can expect that as the technologies adapt in modern browsers, we will see the growth of adaptation in the community as a whole.

However, in a certain sense, web components are a dark horse, about which it is difficult to say exactly when and how exactly it will shoot. Today, this area is perhaps the most actively moving Google through the Polymer project and the support of the relevant draft standards within Chromium.

And, of course, the struggle with complexity in one place, of course, gives rise to complexity in some other. 

What to expect in 2015: hopes for adaptation of the web component by other browsers, adoption of new technologies by developers of controls and various frameworks (including internal ones).

8. Packages and assembly

And as the final touch of packaging the code, we approach the JS code assembly and delivery systems. Although these are different tasks, in a sense, they begin and complete work with the code, thus forming a cycle (to the extent that they are managed in a single solution like the Component ).

With the build, everything is relatively simple: in recent years several leaders have settled on the market, based on Node.js. First of all, it is Grunt, Gulp and, to a lesser extent, Brunch.

However, in the course of the year several ambitious projects appeared (or became more active), which will be interesting to watch next year: Broccoli , Fez , Mimosa . It is unlikely that they will significantly press the well-established decisions, but they can occupy their niches. : , ( ), .

, - - , , ENB , BEM-.

. npm JavaScript - , Bower ( , Twitter 2012 !). , , Visual Studio npm, Grunt Gulp, Bower.

:

 bower install jquery 

, (, ), , npm , , Bower, .

, , Browserify, 2015 , Duo ( Browserify, Component Go) jspm ( , ES6).

2015: JavaScript ( JS), -, .

9. ,

, HTML5 , , WebGL, ( , ).

( , ). – - Assassin's Creed Pirates Dino Hunt TV .



, WebGL, , three.js Babylon.js . – d3.js .

: JavaScript , -, . :

• -: , - - - .
• : Flash, , , Facebook VK , HTML/JS.
• : .

, :

• JS ( Canvas SVG) . , , , , .
• -. ( Flash) Adobe (Edge-) , Flash ActionScript, , CreateJS .

, : . , - Flash. , 2015 , , , .

2015: JS, (, ).

10.

, JavaScript . , .

.

-, , , , . , 2d 3d- , , , , , , ..

, 2015 – Unity 5 . WebGL JavaScript ( asm.js).

, Unity3d – - , , WebGL .

.

-, . , , SDK . . , : , .

JavaScript - .

, : , , «» , , W3C GamePad API, .

2015: Unity 5 WebGL, 3d , .

11.

Node.js , . Node.js 5 ( !), , .

, (, , - ). , JavaScript .

, , Node.js, – - , , – JavaScript, ES6 JS .

( , Node.js TypeScript ), - , . Node.js – io.js . , , . 2015 .!

Node.js – , - . ( Microsoft Azure, ), Node.js , LinkedIn, Yahoo, Walmart ( , Node.js – Hapi ).

2015: Node.js , ES6 Node.js. .

12.

--! : , IoT. IoT , 2015 - , 2014 ( ) – : , , .

JavaScript?

-, . ? , Node.js. , , . , ( , ) JavaScript, (, , ).

-, Node.js, , JavaScript- Node.js. Cylon.js , . , , noduino .

-, , « » Node.js. JavaScript – . , Intel Edison Galileo.



, -, , JavaScript , JS. Tessel – , , , Espruino .

, , JavaScript IoT, IoT JavaScript – .

2015: JavaScript IoT , – Node.js, .

Summary

:

1. ECMAScript 6. , , .
2. TypeScript , .
3. - JS, .
4. JavaScript, JS ( ).
5. API JavaScript, NUI JS. ( .)
6. , , ES6.
7. - , .
8. JavaScript , -.
9. JS, ( — ).
10. Unity 5 WebGL, 3d , .
11. Node.js , ES6 Node.js. io.js.
12. IoT Node.js, .

, , 2015 !