A Game of Darts—Tutorials

What's the point?

  • This blue box shows page highlights.
  • Learn Dart here: No web experience required.
  • Dart is an open-source platform for building structured HTML5 web apps.
 

Welcome to your guide to building great web apps using Dart.

A Game of Darts is a collection of tutorials, targets, that teaches you how to build web programs using the Dart language, tools, and APIs. You can either follow the targets in order, building your knowledge of Dart and web programming from the ground up, or customize your learning experience by choosing just the targets you need.

You should already know how to program in a structured language like C or Java. It helps to be familiar with object-oriented programming.

You don’t need to know JavaScript or the DOM (Document Object Model) to use these tutorials. The DOM is key to web programming and you will learn about it here, starting with the basic concepts in Target 2.

Dart Target 1: Get Started
Download the Dart software bundle, discover which tools and libraries come with the Dart software, and use Dart Editor to run two apps.
Dart Target 2: Connect Dart & HTML
Use Dart Editor to create a stripped-down Dart program that simply puts text on a browser page. Though simple, this tiny program shows you how to host a Dart program on a web page and one way to manipulate the DOM. You will also begin learning about the Dart language, Dart Editor, HTML, and CSS.
Dart Target 3: Add an Element to the DOM
The small app in this target responds to a user-generated event by adding an Element to the DOM.
Dart Target 4: Remove DOM Elements
In this target, you will modify the little todo app from Target 3 to remove elements from the DOM.
Dart Target 5: Install Shared Packages
Packages help programmers to organize and share code. Many open-source Dart packages are hosted at the pub.dartlang.org repository. This target walks you through the steps to install one of those packages.

Dart's Web UI package

Web components and templates are the next great ideas in web application development. Together they provide the building blocks to create richer and more dynamic web applications. With the Dart team’s Web UI package, you can get started using web components and templates now.

Target 6: Get Started with Web UI
This target starts with the logistics of installing the Web UI package and setting up Dart Editor to automate the build process. Then it shows you how to use one- and two- way data binding to embed mutable Dart data in your web page and describes the use of watchers to keep the UI in sync with the data. Finally, you learn about template expressions and declaratively attaching event handlers to UI elements.
Target 7: Use <template>
This target shows how to use Web UI templates to conditionally activate UI elements. It also shows you how to use template loops to create a UI based on a collection of Dart objects.
Target 8: Define a Custom DOM Tag
Continuing your introduction to the Web UI package, this target shows you how to use custom elements to define a new DOM tag. Custom elements are one feature of the Web Components model proposed by the W3C consortium.
Dart Target 9: Fetch Data Dynamically
Your Dart web app can load data dynamically, either from a static file or from a server. Web data are often formatted using JSON (JavaScript Object Notation)—a text based, human friendly data format.
...more targets coming...

Version: 30 Apr 2013

Send feedback
Get Started