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

in utopian-io •  3 months ago

dart-logo.png

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:
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:

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.

streaming_client.png

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.

client_elements.png

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.

minified-js.png

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

Proof of Work Done

https://github.com/tensor-programming

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Great work once again. This series will be fantastic for learners wanting to explore Dart. I appreciate your attention to detail. Keep up the great work.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

Hey @tensor
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Contributing on Utopian
Learn how to contribute on our website or by watching this tutorial on Youtube.

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Curious if Dart has some JSX like syntax workaround right now? I heard that they prefer Elm-ish syntax but I think it will slowdown the development process since there is many design tool with the ability to export as SVG and/or HTML. For example, animating vector design using React that is from Adobe Ilustration.

·

Dart is not like Elm, its more like Angular JS or Vue Js then JSX. You just put your "JSX" into an HTML document and it works that way.

Obviously, this makes more sense in the context of Dart since it is a language by google after all.

·
·

Thank you for clarify it. So it use templating (at least for webdev), feel strange that never see the templating syntax in Flutter.

·
·
·

That is because flutter doesn't use any web technologies. Many people make this same mistake in believing that somehow flutter is a hybrid technology because it uses Dart which can compile to JavaScript. Since flutter doesn't compile to JavaScript, there is no point in using HTML as a templating engine.

·
·
·
·

Last thing, out of curiosity since I do a lot of webpack configuration before create-react & vue cli 3 exists 😂, is it possible to use webpack within Dart project base? (cause I read that it can be interop with javascript libraries). If yes that's mean there is a possibility that I can interop Rust within Dart project base .