Web platform: five technologies to look forward to in 2014

[2014-01-01] dev, webdev, javascript, webcomponents, clientjs, jslang
(Ad, please don’t block)
This blog post describes five technologies that will make 2014 an exciting year for the web platform:
  1. asm.js: near-native performance on the web
  2. ParallelJS: parallelized JavaScript code
  3. ECMAScript 6 (ES6): evolving the language, uniting the community
  4. Web Components: a standard infrastructure for widgets
  5. CSS Grid Layout: native-like GUI layout

asm.js: near-native performance on the web

What it is: a subset of JavaScript that runs fast on current engines (about 70% of compiled C++ code, at the moment).

Why it is exciting:

  • Near-native speed in web browsers.
  • Tightly integrated with JavaScript.
  • Already compatible with all existing JavaScript engines. An engine optimizing asm.js code takes more work, but can be implemented incrementally.
More information: “asm.js: closing the gap between JavaScript and native”

ParallelJS: parallelized JavaScript code

What it is: This project was born under the name “River Trail” and parallelizes JavaScript code that uses the array methods mapPar(), filterPar() and reducePar(), which are, as you may have guessed, parallelizable versions of map(), filter() and reduce().

Why it is exciting: You get parallelism without any pitfalls. Plans for the future are impressive, too – ParallelJS may eventually produce code for GPUs.

More information: “ParallelJS: data parallelism for JavaScript”

ECMAScript 6 (ES6): evolving the language, uniting the community

What it is: The next version of JavaScript. ECMAScript 6 will be a standard by approximately the end of 2014. By that time, most of ES6 will be supported by engines, but some features are already available.

Why it is exciting: ECMAScript 6 brings many new features, but I expect the following two to have the biggest impact. And it’s not because they bring something to JavaScript that wasn’t there, before – the inheritance APIs and module systems that we currently have work really well. It is because they unity the community.

  • Classes: Currently, almost every framework has its own inheritance API, hindering code portability. With ECMAScript 6 classes, there is hope that everybody will eventually use the same mechanism.
  • Modules: Roughly, the world of JavaScript modules is divided into Node.js modules and AMD modules. It looks like ES6 modules will change that.
Another big-impact feature is support for asynchronous programming, via promises and generators. Here, the kicker is that promises are already being used to design asynchronous browser APIs.

More information:

Web Components: a standard infrastructure for widgets

What it is: Implementing your own widgets for the web is incredibly tricky (encapsulating and packaging HTML, CSS and JavaScript, ensuring performance, updating views when models change, etc.). Which is why there are numerous frameworks helping you with this task. On one hand, Web Components profit from the work done for these frameworks, by adopting their best techniques. On the other hand, they can rely on new basic web platform features such as the Shadow DOM for encapsulating widget markup and Object.observe() for efficient data binding.

Why it is exciting: Web Components will enable a common ecosystem for web widgets. In the present, you may come across an exciting widget on the web, only to find out that it doesn’t work with your framework of choice. In the future, that problem will hopefully go away, because all widgets will be Web Components and all frameworks will support Web Components. Then frameworks can focus on new ideas and don’t have to reinvent the foundational infrastructure wheel.

Google’s Polymer Project polyfills Web Components for current browsers. That means that the APIs can be polished via experience gained from real-world projects before becoming part of HTML5.

More information:

CSS Grid Layout: native-like GUI layout

What it is: Quoting the standard:
This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a flexible or fixed predefined layout grid.

Why it is exciting: Desktop and mobile UI frameworks such as Android, iOS (Cocoa) and Java SWT are still ahead of the web when it comes to layouting graphical user interfaces. CSS Grid Layout will eliminate that gap. How about support in browsers? Internet Explorer already supports it, implementations in Firefox and Chrome are in progress. Here is hoping that it will be available on the latter two browsers in 2014. If you look at the editors of the spec, below, the signs are good.

Flexbox versus CSS Grid Layout: Flexbox is another CSS layouting mechanism, with broad support across browsers. It is great for fluid rows of HTML elements. When it comes to grids, it gets you quite far, because you can nest vertical and horizontal flexboxes. However, you have to decide on a dominant dimension (horizontal or vertical), making dynamic relationships in both dimensions impossible. In other words: true grids (as used for desktop-style graphical user interfaces) are easier in CSS Grid Layout.

More information:

Conclusion

That was a brief tour of web platform technologies that I’m excited about for 2014. What technologies are you excited about? Let us know in the comments.