Building a Simple Todo App with Client Side Development in Dart - Dart Tutorial Part 5

Repository

https://github.com/dart-lang/sdk

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

Requirements

System Requirements:

• 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)

Required Knowledge

• 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

Sources:

Dart Logo: https://www.dartlang.org/

Difficulty

• Intermediate

Description

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 dart:html at their core and many of them also interop with JavaScript directly. Dart's client based bindings are fast and reactive which makes them fairly easy to use without sacrificing performance.

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 dart:html library allows us to query the HTML document for a DOM node base on a group of selectors. This function is very similar to the function of the same name that exists in JavaScript. It is very useful to bind parts of your code to pieces of HTML so as to give the visual elements specific pieces of logic. Conversely, we are also able to programmatically generate our own DOM nodes and trees using 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 div and 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.

transpiling Dart to JavaScript with Dart2Js

Dart has multiple different methods of compilation. We've seen JIT Compilation which is what allows us to do hot reloading in Flutter and we've also seen AOT compilation which is what lets us build a Flutter application using iOS and Android bytecode. Dart also can be transpiled to JavaScript through the Dart2js tool. Prior to Dart 2, you would have to specify in the 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.

Above is an image of the JavaScript generated by the dart2js tool. This JavaScript is fairly difficult to read because it is minified by default and also has parts of the dart core library built into it so that everything will work properly. Also, the Dart2Js compiler also features various different flags that can be appended to the CLI command to change the structure and output of the JavaScript. This can be done through the 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

Video Tutorial

Curriculum

• 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

Proof of Work Done

https://github.com/tensor-programming