Other noteworthy APIs and libraries

The goal of this book is not to go through all the APIs that come with HTML5, but there are some that are worth taking a look at, including some interesting Dart libraries. You probably won't use them on a daily basis, but it's good to know that there's such things available to you.

Typed lists for fast numeric computing

Even though everything in Dart is an object and the VM is very well optimized, there's a built-in dart:typed_data library, which we already mentioned in the audio visualizer app. This library contains data structures (mostly lists) with fixed size n-bit signed / unsigned integers / floats. In other words, lists that can contain only n-bit numbers and no objects.

In practice, if we knew we wanted to store only 8-bit values (that's 0-255) in an array, we could use the Uint8List class instead of List<int>. This could represent, for example, image colors:

import 'dart:io';
import 'dart:typed_data';

main() {
  const max = 10 * 1000 * 1000; // 10 million elements
  print("My PID: $pid");
  
  var objectList = new Uint8List(max);
  // Fill with values.
  for (int i = 0; i < max; i++) objectList[i] = i % 255;
  
  // Sum values.
  int total = 0;
  for (int i = 0; i < max; i++) total += objectList[i];
  print(total);

  // Pause here so we can check memory usage.
  stdin.readLineSync();
}

Its usage is exactly the same as a normal List object. This version with the Uint8List typed list takes 21.1 MB of memory while the version with List<int> takes 49.1 MB of memory on a 32-bit standalone Dart VM.

For more in-depth information, read https://www.dartlang.org/articles/numeric-computation/.

vector_math

The third-party vector_math package is a collection of 2D, 3D, and 4D vector and matrix types and collision detection algorithms. You're probably not going to use vector_math on daily basis, but it's definitely good to know that there is such a package if you were looking for high performance (in terms of browser capability) computing. Games and 3D graphic applications are the most common usages.

SIMD

Single instruction, multiple data (SIMD) is a set of instructions that can perform a single operation on multiple data simultaneously. When SIMD instructions are used properly, it usually means significant performance improvement.

Since August 2013, SIMD is available to you in Dart via Int32x4 and Float32x4 classes (https://www.dartlang.org/articles/simd/).

The current version of vector_math already uses SIMD instructions; therefore, you don't need to worry about implementing vector and matrix manipulations by yourself and you can leave all the difficult work to vector_math, which is already well optimized.

Of course, SIMD is available only in Dartium right now. The future looks promising for all non-Dart browsers too. Intel, in collaboration with Google and Mozilla, already runs SIMD code in JavaScript and is trying to bring the JavaScript SIMD API into the ES7 version of the JavaScript standard (https://01.org/blogs/tlcounts/2014/bringing-simd-javascript).

WebGL

WebGL and technologies around it are such a vast topic that they could easily cover the entire book.

The current browser version of WebGL is based on OpenGL ES 2.0, which is used in most of today's mobile devices (iPad, and iPhone 5S, and newer devices also support OpenGL ES 3.0).

The source code for this chapter contains a small demo with a rotating 3D cube and a triangular pyramid. We're not going to look into this example here because vanilla WebGL is crazy complicated, and in practice, you'd probably use a third-party library. By the way, this very basic example has 350 lines of code.

three.dart

Probably the most popular JavaScript 3D engine nowadays is three.js and three.dart is its port in Dart (https://github.com/threeDart/three.dart). Three.dart uses vector_math heavily.

If you're thinking about developing a game or any visually complicated 3D app, don't start writing it from scratch with pure WebGL, use a 3D engine instead. Even when it looks like writing everything by yourself will suit your needs and result in a better performance, usually it ends up the exact opposite. High-performance code with vector and matrix optimizations with SIMD is complicated and requires a deeper understanding of how CPUs and browsers' VMs work inside.

StageXL

Until HTML5 became relatively common, the only way to create rich web apps was to use Adobe Flash. Switching from Flash to JavaScript or Dart is very time-consuming because you have to rewrite absolutely everything from scratch. StageXL uses mostly the same API as Flash and is designed for easy migration from Adobe Flash to HTML5 and Dart (http://www.stagexl.org).

Box2D and play_phaser

Box2D (https://github.com/google/box2d.dart) is a 2D physics library that is a port of Java JBox2D, which is a port of C++ Box2D. It's been developed since January 2012 by Dominic Hamon, a former employee of Electronic Arts, LucasArts, and Google. It uses most of the features of vector_math that are currently available.

The play_phaser library (https://github.com/playif/play_phaser) is a full-featured 2D game engine with a WebGL renderer, physics, an audio mixer, animation engine, and so on—basically, all you might need.

Isolates and Web Workers

Dart supports multithreaded programming using the Isolate API. Isolates are execution contexts that can only access variables from the same isolate.

Isolates are similar to threads in that they can run on multiple CPUs (and cores), but unlike threads, isolates don't share the same memory, and therefore, all communication between them must be done by sending messages.

The Isolate API runs in both standalone Dart VMs and browsers where the browser implementation is based internally on Web Workers (therefore, there's no Web Worker class in Dart). We'll come back to isolates in Chapter 9, Writing Native Extensions for the Standalone Dart VM.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.145.70.170