Channels ▼
RSS

Design

Dart: Build HTML5 Apps Fast


Dart helps developers build fast HTML5 apps for the Web. Currently in Technology Preview (with a Beta release planned for this year), this open source project is building a "batteries included" developer platform that integrates a new language, libraries, an editor, a virtual machine, and a compiler (with JavaScript output).

History and Rationale

Before starting the Dart project, engineers Lars Bak and Kasper Lund were responsible for building V8, the original high-speed JavaScript engine now found in Chrome and used as the underlying technology in node.js. Their experience building high-performance virtual machines (including previous work on Java and Smalltalk VMs) led them to conclude that Web application performance and Web developer productivity could be significantly improved by introducing a new language and runtime for the Web. The result was the Dart project.

The Web is advancing at a tremendous pace: For example, the Chrome browser is updated every six weeks to include the latest HTML5 features. The development cycle for Web programming is highly iterative, with the reload button acting as your compiler. However, it should be easier to build larger, more complex applications. It has taken far too long for productive tools to emerge, and there's still much more work to be done. Even though JavaScript engines are getting faster, Web app startup performance can be drastically improved. In addition, it should be easier to understand the program structure and work with larger teams. For large, complex Web apps, we need more structure and tools.

The Dart project was initiated to address these issues and to fulfill the needs of developers from all platforms, not just dedicated Web developers. The engineers on the Dart project want to make it easier to meet the new user demands of full-featured, beautiful, 60-FPS Web apps.

The Dart Language

The Dart language is designed for mass adoption, so it should be easy to use for a wide range of developers. It is an object-oriented language with classes, single inheritance, lexical scope, top-level functions, and a familiar syntax as shown in the following example.

 class Point {
   num x, y;
   Point(this.x, this.y);
   num distanceTo(Point other) {
     var dx = x - other.x;
     var dy = y - other.y;
     return Math.sqrt(dx * dx + dy * dy);
   }
 }
 
 main() {
   var p = new Point(2, 3);
   var q = new Point(3, 4);
   print('distance from p to q = ${p.distanceTo(q)}');
 }

Listing One: A small sample of Dart code.

The code in this listing includes the following:

    Line 3: A constructor with handy sugar for the common "this.x = x " pattern found in constructors.

    Line 5: Omit the type annotation, because the editor can infer the local variable's type.

    Line 11: Every Dart program starts with main().

    Line 14: Notice the string interpolation for easy string creation.

While keeping things generally recognizable, Dart also introduces a few features that haven't been seen in a mainstream programming language.

Optional Types

Optional static types are perhaps the most interesting feature of Dart. Instead of the "guilty until proven innocent" experience that you get from mainstream statically typed languages, Dart trusts the developer. Think of Dart's static types as annotations or documentation. Tools such as the editor can use the types to give you early warnings and errors. But you have the option of using var for dynamically typed variables when types can be inferred or when the developer can't express what they need to with a traditional type annotation. Gilad Bracha has provided more insight into Dart's optional static types.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video