What Will I Learn?
- You will learn how to make client application with vanilla Dart
- You will learn about query selectors
- You will learn how to use event listeners with Streams
- You will learn how to add and remove DOM nodes
- You will learn about Webdev and Dart2js
- You will learn how to use Stagehand
- IDEA intellij, Visual Studio Code with the Dart/Flutter Plugins, Android Studio or Xcode
- The Dart SDK on the latest developer build for Dart 2 support.
- An Android or iOS Emulator or device for testing
OS Support for Dart:
- Windows 7 SP1 or later (64-bit)
- macOS (64-bit)
- Linux (64-bit)
- Some knowledge of basic programming
- Some understanding http and tcp protocols
- A fair understanding of development and Imperative or Object Oriented Programming
Resources for Flutter and this Project:
- Dart Website: https://www.dartlang.org/
- Dart Awesome GitHub Repository: https://github.com/yissachar/awesome-dart
- Dartpad Tool: https://dartpad.dartlang.org/
- Dart SDK repository: https://github.com/dart-lang/sdk
Dart Logo: https://www.dartlang.org/
Outline and Overview
In this Dart Tutorial Video, we take a look at client-side development with Dart. We build a simple Todo application using the core Dart libraries. Dart features some fairly prolific and popular client-side frameworks like AngularDart and Overreact. All of these libraries use the
Streams, Streams and More Streams
As we've seen in Flutter, CLI development, server side development and now client side development, the Dart language relies heavily on Streams as a first class abstraction. On the client side, it is not uncommon to want to listen to a DOM node for changes from the user and Streams are perfect for this particular use-case. Dart Streams are bound to every interactive HTML element by default.
In our Todo application, we use an input box and two buttons. The input box allows the user to create a new todo object. We listen on this input box using the
onChange property listener to determine when a user has submitted some text. On our buttons, we make use of the
onClick property listeners. In one case, we just delete our datastore and the DOM tree connected to the entire todo list and in another case, we actually use the
mouseEvent to delete a specific DOM sub-tree.
Querying DOM nodes and Building Trees
The top level
querySelector function in the
Element object and the various HTML objects which are associate with it.
Notice the use of the Element name constructors to create specific types of HTML elements.
Element.div() allows us to create a
div where as
Element.span() creates a
span. This is possible because the
span HTML tags have very similar properties and no inherent interactivity. To create a button, we make use of the
ButtonElement() constructor which creates a new ButtonElement Object. The ButtonElement is actually a descendant of the superclass for the Element class; the Node Class.
pubspec.yaml file that you wanted to use certain transformers and dart2js with your project. With Dart 2, we are now able to write client side dart code simply by putting it into a web directory on the root level of our project and by using the
webdev CLI tool.
webdev CLI tool which also allows us to watch the Dart files and build for production.
The source code for this project can be found here
- Asynchronous Structures in the Dart Programming Language - Dart Tutorial Part 1
- Object Oriented Programming and Classes in the Dart Programming Language - Dart Tutorial Part 2
- The Fundamentals of Zones, Microtasks and Event Loops in the Dart Programming Language - Dart Tutorial Part 3
- Building Basic Backend Servers with Dart's Core Library - Dart Tutorial Part 4