Tour of last week's news in Dartiverse

Last week was really rich in official news from Dart. In this blog post, I will summarize the things that happened last week in Dartiverse and yes, lots of things happened! Are you prepared?

REST API with Dart

Dart team released RPC package for creating RESTful server-side Dart APIs. Yay! This package will help you with data serialization and routing of requests.

Projects which are using RPC package at the moment are DartPad and TodoMVC, both are on Github. You can read how to use this package and download it either on pub or on Github.

Dart for the Entire Web

These were really important news for the community. Dart team decided not to integrate the Dart VM into Chrome and they are focusing on better compilation into the JavaScript. This makes sense to me because Chrome is not the only one browser on the entire world so the Dart application has to be always compiled into the JavaScript.

And what do we want? Why we are using Dart? We want to be more productive, have the possibility to use great tools and libraries. And this is exactly what Dart brings to us, we are not losing anything from that. So for us, developers, there is no change. But imagine even better tools, server side and Dart on mobile. And these are exactly the things they are working on now.

I am really looking forward to the Dart summit because lots of these topics will be covered in Dart Summit speeches.

And finally. Google Ads is using Dart. With million lines of Dart code - this is great!

async, async*, await, yield...

These mysterious words deserve more attendance. They are really powerful because they make you more productive.

Have you read this article about using async and await? No? Well, you really should. Take a look at this small example.

Instead of this:

HttpRequest.getString("animals.json")
    .then(feedAnimals);

you can now write this:

feedAnimals(await HttpRequest.getString("animals.json"));

But it is not now only about async and await. We have more power in our hands! async*, sync*, ... Take a look at the second article about new Dart language asynchrony support.

Dart 1.9

Dart 1.9 is probably one of the biggest releases after 1.0 and it was really worth waiting for. With 1.9 you can try the new Dart language asynchrony support and full support of enums.

I can't also forget the awesome formatter, which is now integrated into dartfmt tool and that's not all. You can read more news about 1.9 in the release notes.

Soooo. Have you already tried async and await in your code?

Happy coding!

I would like a sortable list for my Dart application, please.

I remember my days with jQuery. When I wanted to implement for example sortable list, I searched on Google for some plugin, included jQuery and the plugin, initialized it and it worked. And now I am working on some Dart application where I would love to have sortable list, so I have to implem...

OMG, wait! No, I don't have to!

My goal is to have a list (usually ul - li elements) with a possibility to reorder list items with drag and drop. In this blog post I will take a look at some libraries which interested me on pub.

The libraries are assortment and dnd.

assortment

assortment is a simple library, which can create a sortable list. Library is really easy to use, you just add import for the library:

import 'package:assortment/assortment.dart';

Create an ul - li list in HTML:

<ul id="sortable-list">
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
</ul>

Then you need to create new Assortment object with retrieved ul list as a parameter and then it is needed to add it retrieved children - li elements.

Assortment assortment = new Assortment(querySelector('#sortable-list'));
assortment.addElements(querySelectorAll('#sortable-list li'));

Usually you also want to do something after the change in the list (for example update model) so you can listen for prepared events from assortment:

• onDragStart
• onDragEnter
• onDragEnd

AssortmentEvent allows you to get the event and elements which participated in reorder.

For example:

assortment.onDragEnd.listen((AssortmentEvent event) {
  print("onDragEnd fired!");
});

That's it! You have a simple drag and drop sortable list. The library works with any elements, so you can normally use div elements instead of ul - li list.

And finally, you can find this library on pub and Github.

dnd: Dart Drag and Drop

Library Dart Drag and Drop allows you to work with drag and drop in whatever way you can imagine. You can create basic draggable object, free dragging object, dragging object using horizontal or vertical axis and more! It also supports creating of sortable lists which was the thing, I wanted.

http://code.makery.ch/library/dart-drag-and-drop/

For more demos of this library take a look at the official website.

How to create sortable list? Import the library:

import 'package:dnd/dnd.dart';

Then create Draggable and Dropzone object with AvatarHandler (this ensures visual feedback during dragging) which are using the retrieved li elements.

Draggable draggable = new Draggable(querySelectorAll('#sortable-list li'),
      avatarHandler: new AvatarHandler.clone());
Dropzone dropzone = new Dropzone(querySelectorAll('#sortable-list li'));

And finally define onDrop event on dropzone:

dropzone.onDrop.listen((DropzoneEvent event) {
    swapElements(event.draggableElement, event.dropzoneElement);
});

swapElements() is your implementation of changing position of elements in the list. For example take a look at the official example but your implementation can be different.

It is also possible to listen to different types of events for both objects.

Draggable object:

• onDrag
• onDragStart
• onDragEnd

Dropzone object:

• onDrop
• onDragEnter
• onDragOver
• onDragLeave

And that's also it. I really recommend to go through all the examples because this library can do lots of things. And a big plus is, that the list also works on mobile. You can use it also with div elements and the library is available on pub and Github.

That's all for today. I really like both of these libraries and I think that they can help a lot. Have you tried any of these libraries?

Happy Dart coding! :-)