Dajbych.net


Project Spartan, Part 4 – JavaScript improvements

, 5 minutes to read

spartan logo

JavaScript is a language loved and despised, fast or slow, depending on how programmers understand it, how they use it, and how much they are forced to use it. We cannot deny the fact that it is the most widespread, but this means a brake on further development on the web. A wide range of applications requires different requirements, which result in a variety of solutions. JavaScript is changing into an object-oriented language – ES6 – and into bytecode – asm.js. The Chakra JavaScript engine will support both.

In the last part, we talked about the new core of the next version of Internet Explorer. This part looks at the browser as a software layer that ensures the running of the web platform.

JavaScript is a common name, but first the language was called Mocha, later LiveScript, and now the correct name is ECMAScript, which is the name for a standardized form of JavaScript. Standardization does not fall under the W3 consortium, but under ECMA (European Computer Manufacturers' Association). JavaScript author Brendan Eich is now the CEO of Mozilla. He studied at the University of Illinois at the Urbana-Champaign campus, where the Mosaic browser was created.

ES6

The sixth version of ESMAScript allows you to use many new constructs:

asm.js

If we understand TypeScript as a superset of JavaScript, then asm.js is a subset of JavaScript. And it’s relatively primitive. There are probably no more than 5 people on Earth who can write valid asm.js code by hand. However, the advantage of asm.js is that it can be translated into bytecode immediately. This can bypass JIT and thus increase performance so much that the Unreal 3 or Unreal 4 engine can be ported to the browser.

All you need is a "use asm" switch and optimization in the browser. Because backward compatibility with JavaScript is maintained, asm.js theoretically works in all modern browsers today. In practice, however, not fast enough. Game engines written in C++ can be compiled into asm.js and rendered in a browser via WebGL. This creates a universal web gaming platform.

Pointer Events

A programming language alone is not enough. It is necessary to respond to inputs. Web APIs were designed for mouse control, but today the situation is different. The website runs not only on PCs, but also on phones, tablets and game consoles. Microsoft has therefore designed an API to handle various control inputs called Pointer Events. Mozilla has implemented this API in the Firefox browser.

This table lists the events that Pointer Events (HTML5) introduces and lists their closest equivalents from both the Windows Runtime (WinRT) and the .NET Framework (WPF).

HTML5 WinRT WPF
Pointerover PointerEntered TouchEnter, MouseEnter, StylusEnter
Pointerenter PointerEntered TouchEnter, MouseEnter, StylusEnter
pointerdown PointerPressed TouchDown, MouseDown, StylusDown
Pointermove PointerMoved TouchMove, MouseMove, StylusMove
Pointerup PointerReleased TouchUp, MouseUp, StylusUp
pointercancel PointerCanceled MouseLeave, TouchLeave, StylusLeave
pointerout PointerExited MouseLeave, TouchLeave, StylusLeave
Pointerleave PointerExited MouseLeave, TouchLeave, StylusLeave
gotpointercapture PointerMoved StylusInRange
lostpointercapture PointerCaptureLost StylusInAirMove

In the .NET Framework, each type of input device has its own special events. This approach has changed in the Windows Runtime. There are common events for all types of input. Microsoft would like to see this approach on the web as well.

You may notice that the event for enter and leave is differentiated between over and enter and out and leave respectively in HTML5. HTML5 distinguishes the event of the element itself (over and out) from the event of the element with all its nested elements (enter and leave).

WebRTC

Inputs are not only from mice, keyboards, styluses, or touch, but also voice. Voice inputs are mediated by the browser to a web application using an API called WebRTC. While Chrome, Firefox and Opera already support this API, Internet Explorer does not yet do anything like this. However, it is necessary. Bing can't enter a search query by voice. Therefore, Windows Phone Search launches the native app instead of the web app.

WebRTC has two versions, the older WebRTC v1.0 and the newer Object RTC. WebRTC v1.0 supports Chrome, Firefox, and Opera. Internet Explorer will support a newer variant of Object RTC.

Media Capture and Streams

Another API is navigator.getUserMedia, which is designed to display images from cameras connected to the same network as the workstation. This is also related to the support of the MJPG video format, which is popular in IP cameras. The camera data stream can be rendered in element video. The web configuration of the IP camera will be able to display its image directly.

GamePad API

Game consoles have specific hardware for input. While on a PC you play with a mouse, keyboard, joystick or steering wheel, a gamepad has two small joysticks and more buttons than a mouse, but not as many as a keyboard. The API for processing input from the gamepad navigator.getGamepads does not allow control of web games on PC using a connected gamepad, but rather the possibility of targeting web games to game consoles as well.

Pointer Lock

Targeting web games on consoles is nice, but so far you can't properly target web games on PC either. This is to be helped by the requestPointerLock method, which changes the behavior of the cursor. Instead of scrolling a boring arrow, the view of the scene in the game will rotate. This will allow you to control the player’s view in the game by moving the mouse.

Part 5 – Windows API for Web Applications