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.

Check out the newest target on forms, inputs, and client-server interaction: Target 10: Get input from a form. This target puts together the concepts from the first 9 targets.

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 synchronize Dart data with UI elements. 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 an Iterable Dart object, such as a list or map.
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.
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.
Dart Target 10: Get input from a form
Most Web apps use forms and input elements to gather data from the user and submit that data to a server. The example in this target has a client-server pair that shows how to use forms and input elements, and how clients and servers use the classes in the Dart libraries to communicate. This target brings together a lot of the information you learned in the other targets, including the use of Web UI to sync the data in the form with Dart data.
...more targets coming...

Version: 25 May 2013 (Happy Birthday, Sophie!)

Send feedback
Get Started