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!

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

Dart Designer: Diagrams for your Dart application

Recently I wanted to create diagrams for some Dart application and was curious if there exists some tool dedicated directly to Dart. And after some searching I found Dart Designer which is available on Github.

http://dartdesigner.github.io/

Dart Designer

Dart Designer is the graphical tool based on Eclipse which helps you with creating diagrams like package diagram, class diagram and more. It comes with integrated Dart Editor so you can also develop in it.

To start working on diagrams you just need to create a new Dart Designer Project and then you can start working on diagrams. Dart Designer also knows Dart language features like Mixins.

This is how you create class diagram in Dart Designer

To explore how to use the designer, I recommend to take a look at the official video.

Dart Designer looks like a great tool for creating diagrams because it knows Dart. The only thing I am missing, is the possibility to create diagram from existing Dart code and vice versa.

Happy Dart diagramming! :-)

Happy to be Dart Google Developer Expert!

It's a big pleasure for me to say, that I recently became Google Developer Expert (GDE) for Dart language.

Who are the Google Experts?

Shortly said:

Google Experts are a global network of experienced product strategists, designers, developers and marketing professionals actively supporting developers, startups and companies changing the world through web and mobile applications.

You can read more about them on site: https://developers.google.com/experts/about

What does this mean to me?

Besides of developing in Dart I really love meeting and helping to other developers so I will continue helping the community.

I have some experience with co-organizing Dart related events like code labs (to learn Dart), hackathons (to code and have fun with Dart) and I love talking about Dart. So if you plan to do some Dart related event and want to help or you are looking for speaker, don't hesitate to contact me! :-)

dart_style: How to make your Dart code even better

Recently I noticed a package dart_style which helps you have your code according to the Dart Style Guide.

It is a formatter/linter for Dart code which you can run on desired files from the command line. It then outputs formatted code directly to the command line or you can let overwrite existing files with formatted code.

Update: dart_style package is a new Dart formatter dartfmt!

How to install?

We need to activate globally the package via the command in command line:

pub global activate dart_style

I personally use it directly from Github to have always last (dev) version via the command: 

pub global activate --source git https://github.com/dart-lang/dart_style.git

How to use?

And now the magic begins with the command dartfmt. For example:

dartfmt index.dart

This outputs formatted index.dart in the console. But usually I want to directly format all my files in the folder and overwrite my existing files with formatted code. The parameter -w does this trick for me:

dartfmt -w lib

This command goes through all the .dart files in the lib folder and tries to format them. In my case the output may look like this:

Formatting directory lib:
Unchanged controller.dart
Unchanged model\user.dart
...
Formatted view\app_view.dart
Formatted view\menu_view.dart
...

And that's it! Your code should be now nicely formatted. And it is possible to use the formatter not only via the command line but also programmatically.

Dart style formatter is now one of my favourite tools used during Dart development and it helps me to have my code even better.

What do you think about Dart style formatter? Have you tried it?

How we did Dart and Polymer.dart Code Labs

Last Saturday me and Jakub Škvára participated in DevFest Kraków as Code Labers for Dart and Polymer.dart. I am really happy that we had such opportunity to visit this event, meet other developers and finally visit Poland.

We did this Code Labs after our Code Labs in Prague and we wanted to do them differently. We wanted to show some easy application in Dart and then rewrite it directly into Polymer.dart to show how easy and great it is. Each Code Lab was 1.5h long.

Code Lab Applications

So we did two simple Note-taking applications, one in Dart using dart:html library and Twitter Bootstrap for styles and the second one in Polymer.dart with Paper elements.

Both Code Labs are available on Github divided into some steps.

Dart Application

Sources: https://github.com/Janamou/dart-codelab/

Code Lab text: https://github.com/Janamou/dart-codelab/wiki

Dart application

Polymer.dart Application

Sources and Code Lab text: https://github.com/jskvara/dart-polymer-code-lab-krakow

Polymer.dart application

Code Lab best practices for future Code Labers :-)

Do you also plan to do some Code Lab? After our three Code Labs I can share some best practices which worked for us:

1. Do a short presentation before the actual Code Lab. Answer on these questions: What is it? Why/when to use it? How to use it?
2. Try to code some basics with people before the actual Code Lab: Let's code our first "Hello world!". Which value is in int count;? How to write method/class/constructor/inheritance etc.?
3. Ask people if they have any problems or questions after each bigger step and help them solve it. Communicate with them.
4. Have fun! :-)

And finally, I am sharing some photo from beautiful night Kraków.

Beautiful, isn't It?