čtvrtek 7. ledna 2016

Dart RPC: Create RESTful API in couple of minutes

I am on the front-end mostly because I like to work with UI. But let's move on and try something new, a little bit of server-side...

In this blog post I show you how to create your RESTful server-side API in Dart really fast! :-)

How to start

There is a really nice library on pub called RPC. It is a light-weight package for creating RESTful server-side Dart APIs. And this library is everything we need.

Let's start with adding dependency into pubspec.yaml in our project:

  rpc: "^0.5.5"

And then call pub get to get the package into our project.
Now you can import it.

import 'package:rpc/rpc.dart';

Create API class

We need to create API class which wraps our API. It is a Dart class with special @ApiClass annotation from the RPC library. The annotation has one mandatory parameter - version where we provide a version for our API. For example v1. You can also optionally provide other parameters like name to be able to rename the API.

@ApiClass(version: 'v1')
class MyApi {
  // here will be contents of the class.

API methods

We want to be able to provide API methods like GET, POST, DELETE, etc. We put them in our already prepared API class with special annotation.

Methods can be put directly into our API class or API resources can be used.

Methods in API class

Here we create the GET all animals and POST animal method. Every API method has to have the @ApiMethod annotation with mandatory path parameter where we specify the path which is used for calling of our method. We can also specify the method parameter where we provide type of the method which will be used. If the method parameter is omitted, the GET is used.

@ApiClass(version: 'v1')
class MyApi {
  List _animals = [];

  @ApiMethod(path: 'animals')
  List<Animal> getAnimals() => _animals;

  @ApiMethod(path: 'animals', method: 'POST')
  Animal postAnimal(Animal animal) {
    return animal;

We are using List for saving of our animals in this example. And we provide two methods: getAnimals() which returns a list of all animals and postAnimal() which saves a new animal into our list. Easy. Of course we could extend our example API with other methods.

To have it working we also need to have our Animal class:

class Animal {
  int id;
  String name;
  int numberOfLegs;

API resources

Usually we want to divide our API into resources which wrap the particular API methods. We want to for example have one API resource for an Animal and one API resource for a Person. We can do this with the RPC library easily.

Create the resource class and move all the resource methods in it:

class AnimalResource {
  List _animals = [];

  @ApiMethod(path: 'animals')
  List<Animal> getAnimals() => _animals;

  @ApiMethod(path: 'animals', method: 'POST')
  Animal postAnimal(Animal animal) {
    return animal;

And then create the AnimalResource instance into our API class with @ApiResource annotation:

@ApiClass(version: 'v1')
class MyApi {
  AnimalResource resource = new AnimalResource();

Test the API

To be able to use and test our API, we need to create the server script in bin/ folder. We need to create the ApiServer there, add it our API and create a new HttpServer which starts listening on localhost:8080.

library my_server;

import 'dart:io';
import 'package:logging/logging.dart';
import 'package:rpc/rpc.dart';
import '../lib/server/api.dart';

final ApiServer apiServer = new ApiServer(prettyPrint: true);

main() async {
  Logger.root..level = Level.INFO..onRecord.listen(print);

  apiServer.addApi(new MyApi());
  HttpServer server = await HttpServer.bind(InternetAddress.ANY_IP_V4, 8080);
  print('Server listening on http://${server.address.host}: ${server.port}');

Then run the Dart script in bin/ which starts the server and explore the API methods. Our API is available on localhost:8080/myApi/v1. If we want to get a list of all animals, we call GET on localhost:8080/myApi/v1/animals. Or we can try the POST for the new animal on the same address localhost:8080/myApi/v1/animals.

Trying a POST method is more difficult because we need to either install a tool like curl or we can use some extension to Chrome (like Advanced REST client or Postman).

And that's all! Now you have a really simple Dart API created in a couple of minutes.

Where can I find more?

This library can do even more. You can find all information about this library on the official RPC's site on pub or on Github.

My server Code Lab

I was happy to be and talk at couple of DevFests last year, where I had also a Dart code lab. My code lab was about server-side and as you could guess, I used the RPC library :-) You can take a look at and try the code lab on my Github.

Happy coding!

čtvrtek 5. listopadu 2015

3 simple steps for Sass in your Dart project

I really like Sass and I can't imagine writing css without it. With Sass you can use variables, mixins, nest your css and do lots of things in css.

So why not use Sass in your Dart project? It's really easy. 

You need to have Sass installed and available on the path. For how to check the official website.

And now add Sass to your Dart project:

1) Install Sass package

Find Sass package on pub. Here it is: https://pub.dartlang.org/packages/sass.

2) Update pubspec.yaml

Add Sass dependency in your project's pubspec.yaml. Don't forget to add transformers too:

name: super_cute_app
description: My super cute app!
  sass: any
- sass

And then run pub get.

3) Use it 

Now you can create and use .sass and .scss files in your project and these files will be automatically transformed to corresponding .css files.

This package has also some more options.

Bonus: Live reload

Do you know Live reload? No? I am using this tool with css/Sass in my projects.

It monitors changes in your file system. When you change the (css or Sass) file, the connected web browser is refreshed. So I don’t have to do manual browser refresh after every change in my stylesheets.

And that's all for today and I hope you now enjoy Sass in your Dart project! :-)

čtvrtek 29. října 2015

DevFest Ukraine 2015

This year I and my friend Jakub Škvára were invited as speakers to DevFest Ukraine 2015. I watched their event on social networks last year and when I got an invitation to speak there this year, I was really super happy and made a proposal for both Dart talk and a Code Lab.

DevFest Ukraine 2015 took place on October 23 - 24 in Lviv. Because there is no direct flight from Prague to Lviv, we had to transfer in Warsaw. Everything went fine and we successfully arrived to Lviv the evening before. Organizers prepared for us a special city tour around the city center and we heard a lot about Ukrainian history and saw a lot of Lviv's historical beauty.

Lviv's beauty according to Google Photos


The event started next morning with the keynote followed by talks in three parallel tracks: Android, Web & Cloud and community. And there were 40 sessions during the whole event!

DevFest Ukraine 2015 just started!

I and Jakub both had talks on Friday and code labs/workshops on Saturday. I had a talk with name Let's play Dart! where I talked about why I love Dart and why working with it makes me so much happy and productive developer. You can take a look at my slides on Slideshare:

Jakub had a talk about Polymer vs other libraries. During his talk he compared Polymer elements with components from React and Angular and showed us lots of examples.

You can also take a look at his slides on Slideshare:

During the day there was a lots of great talks about Android, Angular, Firebase and more.

You could also taste Marshmallows:

Or all Android versions:

All Android versions to eat ♥

More Androids!

The first day ended with a great afterparty!

Code Labs

The next day you could see also a lots of talks and Code Labs. But for me and Jakub it was mostly a Code Lab day.

We both had our Code Labs after the lunch. I started with mine about Your first server-side application in Dart in which you could create a simple RESTful API with all speakers and sessions from the conference using the Dart's powerful (and really easy to use) rpc library and Jakub had a Code Lab about creating a Polymer front-end application for this API.

Dart Code Lab!

You can find both our Code Labs on Github:

I am planning to update my Code Lab soon a little, probably with integration to App Engine and a client-side app.


I am really happy that I could be part of a great DevFest Ukraine 2015. The event was nicely organized, had a great atmosphere and organizers were always helpful and took care about us really nicely. We had also a lot of fun with other speakers and organizers and we could taste a local food and beer in nice restaurants.

I definitely recommend going to DevFest Ukraine next year!

Next month I am looking forward to DevFest Silicon Valley 2015 and next? ... ;-)

And the last photo from Ukraine's Lviv:

čtvrtek 24. září 2015

Dartdoc: Generate a nice documentation for your Dart package

We developers love creating code. But this is not only about writing actual code but, for example, also about writing documentation for your code. Now you can say that code should be self-documenting. Which definitely should be but this is not everything.

Writing documentation for your code gives you a lot of benefits and it should be part of your daily coding job.

Documentation and Dart

There is a really nice article about writing documentation in your Dart projects and this my blog post will show you how to benefit from your documented Dart code.

Dart has a tool for generating nice HTML documentation for your Dart package. The latest Dart version - Dart 1.12 came with a new version of this tool, now called dartdoc, which replaces the old docgen tool.

Dartdoc generates a nice HTML documentation for your package easily and very fast. And it also looks really nice.

How to run dartdoc?

Simply run dartdoc tool from the root directory of your package.


Just that simple. No extra parameters needed.

And now watch how it generates a nice documentation into a doc folder in your project. Then just simply open the doc/api/index.html file in your web browser and tadaaa, you can explore your documentation :-) Nicely generated documentation available really fast.

For a usage information about the command add -h or --help option:

dartdoc --help
Generate HTML documentation for Dart libraries.

Usage: dartdoc [OPTIONS]

-h, --help            Show command help.
    --version         Display the version for dartdoc.
    --dart-sdk        Location of the Dart SDK. Use if SDK isn't automatically located.
    --sdk-docs        Generate ONLY the docs for the Dart SDK.
    --sdk-readme      Path to the SDK description file. Use if generating Dart SDK docs.
    --input           Path to source directory
                      (defaults to "/Users/janamou/Projects/my_super_project")

    --output          Path to output directory.
                      (defaults to "doc/api")

    --header          path to file containing HTML text, inserted into the header of every page.
    --footer          path to file containing HTML text, inserted into the footer of every page.
    --package-root    The path to the package root.
    --url-mapping     --url-mapping=libraryUri,/path/to/library.dart directs dartdoc to use "library.dart" as the source for an import of "libraryUri"
    --exclude         Comma-separated list of library names to ignore.
    --include         Comma-separated list of library names to generate docs for.
    --hosted-url      URL where the docs will be hosted (used to generate the sitemap).

Dartdoc tool is also available on Github so if you find any issue with it, you can simply report it. Or you can contribute to the project.

Dartdoc in action

If you want to see new dartdoc already in action, take a look at the official Dart SDK API documentation. Browse through it. Nice isn't it?

Have you already tried dartdoc? Is generating of documentation part of your workflow?

Se ya soon again!

čtvrtek 14. května 2015

Dart Developer Summit: Awesome two days spent with Dartisans

The first Dart Developer Summit took place in San Francisco's Google office at the end of April 2015 and it was two days full of Dart awesomeness! In this blog post   I summarize my feelings from the first Dart oriented summit.

Dart Code Lab

The evening before summit I led the 4 hour Dart Code Lab. Attendees had the opportunity to play with Dart through client-side and/or new server-side code lab, talk and get direct help from Dart engineers and see demos of some Dart projects.

I am really happy that I could spend nice evening with lots of Dartisans, talk with them and share my enthusiasm... about Dart :-D.

Photos by Faisal Abid

If you haven't seen the new server-side code lab yet, I definitely recommend to take a look! The code lab will help you to dive into Dart on server-side using the new RPC package really quickly.

Dart Developer Summit

Two days long summit with all about Dart full of talks, networking and more.

Dart cake!

The summit started with a Keynote: Dart Today and Tomorrow, where Dart co-founders Lars Bak and Kasper Lund highlighted motivation behind Dart, talked about topics such as Dart on Mobile and showed us the nearest Dart SDK roadmap.

Dart SDK roadmap

On what we can look forward to? Fletch, Dart Mobile Services, Dev Compiler, Dart SDK 2.0. Yep, and WebStorm becomes preferred IDE for Dart. Time to move out from the Dart editor.

And then the summit continued with talks from both Dart software engineers and other developers using Dart every day.

Observatory tool

We heard how to use Async in Dart (love async/await and definitely recommend using it, I wrote about it in my previous blog post), Observatory (I need to explore this powerful tool more deeply!), Reflection, Dart2js, external developers talking about switching to Dart and more.

Dart for the Web - SYODLAJS = Ship your own Dart Library as JavaScript

And the summit was not only about talks! It was also about networking and meeting other developers.

There were tons of Dart software engineers prepared to talk with you and help. Part of the schedule were also special breakouts sessions in which we were divided into smaller groups interested in some topic we proposed and voted for before (such as testing, Observatory, server-side,...) and then we discussed that particular topic.

The first day ended with lightning talks about not only Dart related topics (but the lightning talks are always fun).

Dart for Mobile

Next day we heard talks such as how the Google Ads team is using Dart (and makes their developers and users happy), moving from Node.js to Dart, and two Dart on Mobile talks: Dart for Mobile and Sky project. Pure awesomeness!

Sky experiment: No Java, just Dart...

And finally there was also a panel discussion as a part of a schedule. You asked questions, engineers answered. So interesting and fun!

Fun on panel discussion

You can find all the videos from talks at Dart summit online in this play list.

The Dart Developer Summit was really great event where you could learn a lot new about Dart, share same interests with developers from different parts of the world, meet Dart software engineers, talk with them and get help. I really hope that this event will also take place next year!

úterý 31. března 2015

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:


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!

středa 18. března 2015

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

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.


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