Hi.
I'm Phil Quitslund.
And I'm an engineer on Dart Editor, our lightweight and
powerful editor for Dart.
In this video I'll give you a tour of Dart Editor and its
many features to help developers be more productive
for writing larger, full-featured web apps.
Dart Editor helps you write web apps with Dart, the new
scalable web programming language.
The editor and language are part of the open-source Dart
project, which also includes libraries, a new virtual
machine, a package manager, and more.
Dart compiles to JavaScript to run across the modern web.
Let's see how to use Dart Editor now.
When you first start the Dart Editor, you're greeted by the
Welcome screen.
From here, you can create a new application, read more
about Dart, or run one of many samples.
For example, let's see what this Solar app does.
It simulates the planets orbiting around the sun.
Neat.
Dart Editor isn't a stock of clips.
It's a completely standalone editor optimized for Dart.
You'll quickly see that Dart Editor has clean menus in a
significantly simplified UI.
Even though things look more simple, we still have powerful
features, such as auto-update and configurable key bindings.
If you already use Eclipse, IntelliJ, or
WebStorm, you're in luck.
These IDs also have Dart plug-ins available.
Dart Editor can help you learn Dart with code navigation,
code completion, and more.
Let's see these features in action.
Here we are looking at some new Dart code.
I'm curious about this method here, and I wonder how it's
implemented.
I can simply right-click on it and choose Open Declaration.
Dart Editor jumps me directly to the methods definition.
Dart Editor indexes all the names in your project, making
it easier to find code.
Once you find the code, you can also easily find out where
else it's used.
For example, I'm not sure who uses this code.
I can right-click on the method name
and choose Find Callers.
The Editor finds all the code that uses the method so you
know where and how it's used.
You can use this functionality to help clean up your code.
For example, it looks like no-one else is using this
particular method.
So I can delete it.
Dart Editor also makes it easy to find a name if you know
what it is.
You can search across the project for classes, methods,
variable names, and more.
For example, the other day my buddy told me about some
reconnect logic she wrote.
I searched for reconnect.
And, sure enough, Dart Editor finds a method called
scheduleReconnect.
Along with navigating the code, Dart Editor also makes
it easy to explore new APIs.
Because Dart is structured and has optional static types, the
Editor can provide useful code completion.
Here I am working with an object that I'm not familiar
with, and I'm not sure what methods I can call.
Dart Editor knows what type the object is and can provide
me with a list of options specific to this variable.
Even if you don't use type annotations, the Editor can
often infer types, and code completion still works.
In this example I used var for my simple variable that holds
an integer.
Notice how the Editor still gives me useful code
completion proposals.
Dart Editor can help you fix a simple problem with a quick
keyboard shortcut.
For example, the Editor can apply various quick fixes for
missing methods or missing classes.
Here I've written some code that uses a method that is not
yet defined.
I clearly got ahead of myself, but we can fix it.
Simply use Control-1 to bring up the Quick Fix menu, and
you'll see a Create Method option complete with
parameters and types.
Once the method is created, the error goes away.
Other quick fixes include Create Class, Import
Library, and more.
Writing code is easy, but maintaining it as requirements
change can be challenging.
Dart Editor has built-in refactoring support to help
you update the code as the design evolves.
The name I originally picked for this
method can be more clear.
I want to rename it, but I also want to rename all
references across the project.
Right-click on the method and choose Rename
from the Context menu.
After I choose a new name, it's changed
all over the project.
Repeating the same code isn't ideal.
So if you notice the same code used more than once, you can
apply the Extract Method refactoring.
Here's code I've repeated twice in the same file.
It's a great candidate for extract method.
Highlight the code, right-click, choose Extract
Method, and choose a name for the new method.
Notice how the original code is replaced by a call to the
new method.
Quick fixes and refactorings are helpful features to keep
you more productive.
But what if you run into a bug in your code?
Dart Editor has a rich Debugger to help you find and
fix bugs quickly.
The Debugger connects to Dartium, our build of
Chromium, with an embedded Dart VM.
You can set breakpoints, step your code, inspect
variables, and more.
Here's a sample Dart app, which clearly has a bug.
We can use the Debugger to find the error.
I start by checking if this is a problem
with drawing the planet.
I set a breakpoint inside the drawSelf method of
PlanetaryBody.
The program stops when the breakpoint is hit.
Since the positions are wrong, I'm curious about the point
values of x and y.
Using the Debugger, I can inspect variable values and
set watched expressions.
I'm looking for anything out of the ordinary.
Here, I'm comparing x and y with the previous
frames x and y.
They're reversed.
Sure enough, the bug is in the code.
It's a simple fix, and I rerun the program.
It works.
You can avoid adding Debug.Print statements to all
of your code by using the Editor's built-in Debugger and
tight integration with Dart VM.
Dart Editor is open-source, and we like to hear from our
developers.
If you ever have an idea for a feature or run into a problem,
click the Send Feedback button.
Simply tell us what you're trying to do, click Send, and
the Editor team will receive your note.
We just scratched the surface of Dart Editor.
We look forward to hearing your feedback.
Please download it today and give it a try.