MIKE FAIRHURST: Hi, everyone.
I'm Mike Fairhurst.
I've been working for a little over a year on a analysis
plugin for AngularDart.
Let's see.
And next-- there we go.
So the analysis plugin is a plugin to the Dart analysis
server, which is a common back end for all of the IDEs
that are supported by the Dart team and the community.
So by plugging into the analysis server,
we're able to expose some of the same language features, right
in the IDE of your choice.
This can include autocompletion and things like that.
The API that we're using is--
we're the first user, so the API may be a little bit unstable.
But we are excited for other potential uses of it as well.
For our plugin, we are fully open sourced.
And so we're hoping that people will see this demo,
they will want to give it a try, and give us feedback.
Because we think it's really, really great,
and so we're hoping we can make it part of the core AngularDart
offering.
So yes, it's static analysis, so it catches your errors.
But as a creator, I think it is a little bit more than that.
So it can actually serve as a form of documentation which
is right at your fingertips.
So autocompletion is like doing a Control F,
except it's context-aware, right?
And more than simple lookups, if we talk semantics,
Angular templates have some interesting rules
you might not be aware of, maybe you've never bumped into.
This plugin's gonna know all them.
Its really hard to document some of that behavior,
so instead we can have it right at your fingertips.
If you trip one of these corner cases,
then it's going to alert you right away.
And we're hoping that it gives you
actionable feedback, or at least googleable terms,
so that you don't have to go to Stack Overflow.
And then, luckily, AngularDart is
a very, very static framework, much more static
than Angular JS.
So we think that we can catch a lot of your issues,
though we do avoid dependency injection.
Because yeah, someone once proved that it was NP-hard,
so we didn't touch that.
So I did have technical problems,
but I have slides here.
That's what you get for using Linux on a laptop.
So this is basically just the Angular Quickstart Project.
I've made some additions to break things
so we can see how it works in an invalid app.
You can see all of the errors are
highlighted in red, which is my little template
on the right side.
So we use Dart because we want static type checking
when it's available.
So just the ability to find this length misspelling,
it's underlined in red, you can see it instantly--
super, super easy to fix.
But it can catch more complicated errors too.
So it says here, you know, "that bound [INAUDIBLE] keyrelease
does not exist on any directives."
So the immediate question is, what does exist?
And maybe we would go to MDN.
Maybe we would go to ask our coworker, look at code
we've written before.
Well, now you can just autocomplete.
So you can instantly see just--
[APPLAUSE]
So you can instantly see that it's key up, not keyrelease,
and instantly fix it.
Additionally, once you have this event configured correctly,
it's going to catch something which I bet money none of you
caught when I showed the earlier slides.
So the Angular plugin is going to be smarter than you.
It catches a mismatch in the event variable type itself,
something you never write down yourself.
But it's going to track that through the program
and say, your component defined close window with a mouse
event, but key up was a keyboard event.
You no longer have to run your tests to find the failure.
It's right there.
It also catches missing directives.
A really, really critical thing that happens all the time,
people put in a behavior that just doesn't do anything.
Because you didn't include the directive.
And now it's super, super easy to fix.
And then many AngularDart users here
probably went quite a while before ever
learning about transclusions.
So transclusions are defined by this template down here.
So it's actually going to be in the template of a component
that you're using in your own template of your own component.
And it's kind of configured in a way
that's great for writing a component, but nothing else.
You are always going to be really lucky
if someone documents the way that this stuff works.
And now you don't have to worry about whether you're lucky
or not.
Because you can just autocomplete,
and the plugin itself is going to know
you're inside of a dialogue.
It's going to know what transclusion selectors are
available, and it's going to generate a HTML
tags-- complete with properties, in this case, which
are required in order to get you working productively
right away.
Yeah, so hopefully everyone tries it out.
Anyone who's using AngularDart, you just
have to add these four lines to your analysis options.
Restart your analysis server and give it a few minutes.
It's going to download and it's going
to use pub [? resolve ?] dependencies and stuff
like that.
But yeah, we're on GitHub.
So we hope you like it, and if not, definitely let us know.
File bugs and questions, and you can email me.
And then, best of all, while I'm here,
take some time, if you can, to fire this up on your project.
Some of its errors may be confusing.
I would love to help you out with it,
if you bring a laptop over, and see what it catches for you,
and go from there.
Thanks.
[APPLAUSE]