Skip to content

Latest commit

 

History

History
378 lines (296 loc) · 12.5 KB

ch01.markdown

File metadata and controls

378 lines (296 loc) · 12.5 KB
Raw
layout title subsite description prev-chapter prev-chapter-title next-chapter next-chapter-title
book
Quick Start
Dart Up and Running
Read Chapter 1, Quick Start (from Dart: Up and Running, published by O'Reilly).
preface.html
Preface
ch02.html
Language Tour

{% include toc.html %} {% include book-nav.html %}

{{ page.title }}

Welcome to Dart, an open-source, batteries-included developer platform for building structured HTML5 web apps. This chapter tells you why Google created Dart, what’s cool about Dart, and how to write and run your first Dart app.

Dart provides not only a new language, but libraries, an editor, a virtual machine (VM), a browser that can run Dart apps natively, and a compiler to JavaScript. Dart aims to be a more productive way to build the high-performance, modern apps that users demand.

Why Google created Dart {#why-google-created-dart}

Google cares a lot about helping to make the web great. We write a lot of web apps, many of them quite sophisticated—think Gmail, Google Calendar, Google+, and more. We want web apps to load quickly, run smoothly, and present engaging and fun experiences to users. We want developers of all backgrounds to be able to build great experiences for the browser.

As an example of Google’s commitment to the web, consider the Google Chrome browser. Google created it to spur competition at a time when the web platform seemed to be stagnating. It worked. As the following figure shows, browser speed has increased immensely since Chrome’s introduction in 2008.

**Note:** The JavaScript engine known as _V8_ is responsible for much of Chrome’s speed. Many of the V8 engineers are now working on the Dart project.

Browser speed (V8 benchmark suite v7; higher numbers are better)

The number of new features in browsers has also increased, with APIs such as WebGL, FileSystem, Web workers, and WebSockets. Browsers now have automatic update capabilities, frequently delivering new features and fixes directly to the user. Mobile devices such as tablets and phones also have modern browsers with many HTML5 features.

Despite these improvements in the web platform, the developer experience hasn’t improved as much as we’d like. We believe it should be easier to build larger, more complex web apps. It’s taken far too long for productive tools to emerge, and they still don’t match the capabilities offered by other developer platforms. You shouldn’t have to be intimately familiar with web programming to start building great apps for the modern web. And even though JavaScript engines are getting faster, web apps still start up much too slowly.

We expect Dart to help in two main ways:

  • Better performance: As VM engineers, the designers of Dart know how to build a language for performance. A more structured language is easier to optimize, and a fresh VM enables improvements such as faster startup.

  • Better productivity: Support for libraries and packages helps you work with other developers and easily reuse code from other projects. Types can make APIs clearer and easier to use. Tools help you refactor, navigate, and debug code.

A quick look at the Dart language {#a-quick-look-at-the-dart-language}

It’s hard to talk about a language without seeing it. Here’s a peek at a small Dart program:

{% highlight dart %} import 'dart:math';

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 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)}'); } {% endhighlight %}

Of course, Dart’s main use case is building modern web apps. Programming the browser is easy:

{% highlight dart %} import 'dart:html';

main() { var button = new ButtonElement(); button ..id = 'confirm' ..text = 'Confirm' ..classes.add('important') ..onClick.listen((e) => window.alert('Confirmed!')); querySelector('#registration').children.add(button); } {% endhighlight %}

You’ll learn about the Dart language and libraries in Chapters 2 and 3.

What’s cool about Dart {#whats-cool-about-dart}

Dart may look familiar, but don’t let that fool you. Dart has lots of cool features to help give you a productive and fun experience building the next generation of awesome web apps.

Dart is easy to learn. A wide range of developers can learn Dart quickly. It’s an object-oriented language with classes, single inheritance, lexical scope, top-level functions, and a familiar syntax. Most developers are up and running with Dart in just a few hours.

Dart compiles to JavaScript. Dart has been designed from the start to compile to JavaScript, so that Dart apps can run across the entire modern web. Every feature considered for the language must somehow be translated to performant and logical JavaScript before it is added. Dart draws a line in the sand and doesn’t support older, legacy browsers.

Dart runs in the client and on the server. The Dart virtual machine (VM) can be integrated into a web browser, but it can also run standalone on the command line. With built-in library support for files, directories, sockets, and even web servers, you can use Dart for full end-to-end apps.

Dart has great tools. The Dart SDK has all the command-line tools you need to write, launch, and debug Dart apps, including the Dart analyzer and the pub package manager. Dart plugins for external tools—such as WebStorm, IntelliJ IDEA, and Sublime Text—allow them to support features such as Dart code completion, detecting potential bugs, debugging, and refactoring.

Dart supports types, without requiring them. You can omit types when you want to move very quickly, aren’t sure what structure to take, or simply want to express something you can’t with the type system. You can add types as your program matures, the structure becomes more evident, and more developers join the project. Dart’s optional types are static type annotations that act as documentation, clearly expressing your intent. Using types means that fewer comments are required to document the code, and tools can give better warnings and error messages.

Dart scales from small scripts to large, complex apps. Web development is very much an iterative process. With the reload button acting as your compiler, building the seed of a web app is often a fun experience of writing a few functions just to experiment. As the idea grows, you can add more code and structure. Thanks to Dart’s support for top-level functions, optional types, classes, and libraries, your Dart programs can start small and grow over time. Dart plugins to IDEs help you refactor and navigate your code as it evolves.

Dart has a wide array of built-in libraries. The core library supports built-in types and other fundamental features such as collections, dates, and regular expressions. Web apps can use the HTML library—think DOM programming, but optimized for Dart. Command-line apps can use the I/O library to work with files, directories, sockets, and servers. Other libraries include URI, UTF, Crypto, Math, and Unit test.

Dart supports safe, simple concurrency with isolates. Traditional shared-memory threads are difficult to debug and can lead to deadlocks. Dart’s isolates, inspired by Erlang, provide an easier to understand model for running isolated, but concurrent, portions of your code. Spawning new isolates is cheap and fast, and no state is shared.

Dart supports code sharing. Traditional web programming workflows can’t integrate third-party libraries from arbitrary sources or frameworks. With the Dart package manager (pub) and language features such as libraries, you can easily discover, install, and integrate code from across the web and enterprise.

Dart is open source. Dart was born for the web, and it’s available under a BSD-style license. You can find the project’s issue tracker and source repository online. Maybe you’ll submit the next patch?

Up and running {#up-and-running}

Now that you know something about Dart, get ready to code! These instructions feature the open-source DartPad tool, which runs in any modern browser.

Step 1: Open DartPad, and run some samples {#step-1-open-and-run}

  1. Go to dartpad.dartlang.org/.

    A sample appears on the left, with its output on the right. If you've played with DartPad before, you can click New Pad to get back to the original sample.

    **What about mobile?** DartPad has a slightly different user interface on mobile devices. To run an app, click the red button, which takes you to the output.
  2. Click **Run**.

    The sample runs again, updating the output.

  3. Choose an HTML sample, using the **Samples** list at the upper right.

    For example, choose Hello World HTML. Again, the output appears to the right. By default, you see the HTML output—what you'd see in a browser.

  4. Click **CONSOLE** to view the sample's console output.
  5. Click the **HTML** tab to view the sample's HTML markup.

Step 2: Create a command-line app {#step-2-server}

To create a simple command-line app, use New Pad.

  1. Click the **New Pad** button.

    The source code for the Hello World app appears under the DART tab.

  2. Change the code. For example, change the `main()` function to contain this code:

    {% highlight dart %} for (var char in 'hello'.split('')) { print(char); } {% endhighlight %}

    As you type, DartPad shows hints, documentation, and autocomplete suggestions.

  3. Run your app.
  4. If you didn't happen to have any bugs while you were entering the code, try introducing a bug.

    For example, if you change split to spit, you get warnings at the bottom of the window and in the Run button. If you run the app, you'll see output from an uncaught exception.

  5. Save your app by clicking **Share**.

    DartPad gives you links to the app, both in DartPad and in gist.github.com.

Step 3: Create a web app {#step-3-web}

To create a simple web app, start with the Hello World HTML sample.

  1. Click Sample, and choose Hello World HTML. If you've already edited Hello World HTML, click Reset to restore the original version.
  2. Edit the HTML:
    1. Click HTML to view the HTML code.
    2. Change the text inside the h2 element from Hello world to something else—perhaps Hola mundo.

    The display under HTML OUTPUT updates as you type.

  3. Edit the Dart code:
    1. Click DART to view the Dart code.
    2. Change the value displayed by count.text. For example, change '${i}' to '#${i}'.
    3. Click Run to compile and run the Dart code, updating the HTML OUTPUT display.

What next? {#what-next}

Now that you know the basics, you can learn more about Dart.

Follow a code lab {#follow-a-code-lab}

{:.no_toc}

Go to dartlang.org/codelabs to find step-by-step instructions for writing apps. The first code lab guides you through using DartPad to build and run a pirate name badge generator.

Download Dart {#download-dart}

{:.no_toc}

Go to dartlang.org/downloads to download the Dart SDK. Try it with your favorite IDE or editor. WebStorm comes with the Dart plugin, or you can install a Dart plugin into another IDE or editor.

Read tutorials {#read-tutorials}

{:.no_toc}

The Dart Tutorials teach you how to build web applications using the Dart language, tools, and APIs.

Join the community {#join-community}

{:.no_toc}

Visit dartlang.org/support to find mailing lists and other ways to get help and learn more about Dart.

{% include book-nav.html %}