Tip:
Highlight text to annotate it
X
>> MASTRACCI: My name is Matt Mastracci. I'm the founder of dotspots. At dotspots, we allow
users to create dots or miniature blog posts with media that are attached to news articles,
and then we distribute those dots automatically everywhere people are talking about the same
thing. We've, we've been using GWT for a couple of years now. When we originally picked it,
the reason was because we, we wanted to share code between our Java back end and whatever
front ends that we were going to build in the future. So, GWT, of course, is an obvious
choice for this because you get to use one language for everything, you entire code base;
back end, front end, and compile, compile a whole bunch of things from one code base.
So, why don't I--I'll show you our product here. So I've got Firefox running, and you
can see the small icon up here. This is actually our GWT application compiled as a Firefox
extension. So, a Firefox extension is just JavaScript and of course, GWT is Java to JavaScript
compiler so, we just take the output from our GWT compile and we load it up in Firefox
and it appears in the browser. Now, what this lets us do is we actually listen for selections
in the browser, so we bring up this tool kit here. Now, I've done an article here, it was
written a couple of days ago on Google's busy week. Now, if you look down here on Tuesday,
they say that, the Chrome for Mac data finally gets released. Now, you'll notice that there's
nothing about GWT 2.0 here so, I'm just going to add a dot here just to, to correct this.
So, you can see here as well. We've already, we've, we've seen this article before and
we know of three articles at least where people are talking about this, this specific thing
here; so I'm going to add this dot. Okay. So, I'm just going to--I took a picture earlier
these cool little campfires so, I'm going say, here's a picture of the campfire, one
of the campfires. And I took this picture as we were setting up. Now I'm going to upload
that file from the pictures directory, okay, here we go. Try that up, and we'll publish.
Oops, here we go. Okay. So now you've seen--what I've done is I've actually added a dot to
this article, that's going to be visible every time somebody, every time one of our users
comes here. Now, it's actually distributed to a bunch of other pages here a well. You
can see Washington Post seeking alpha.com, so. Basically, that's what dotspots does.
We try to, you know, magnify the stuff you're doing as much as we can. So, one of the big
advantages of GWT is as I mentioned before, you can compile a number of different targets
from the same code base. So, you can see here, we've compiled our Firefox extension. We also
compile a Chrome extension. We've actually, you can find that on the Chrome extension
gallery. We've got a script version that publishers can include and basically, what that does
is it turns on dotspots on their site without, basically so anyone coming to their site can
optionally add but definitely view dots on their site. And, you know, we've got, we've
got something for our word press users as well so they can do the same thing with a
very simple word press plugin. So what--another big advantage of a GWT especially in GWT 2.0
is this new development mode plugin that they've just launched. Now, development mode lets
us make changes very quickly without having to felt having to go through the entire, sorry,
the entire GWT compile process which of course is slightly slower. But, anyways, let me just
quickly bring up our website here. Now you can see our website is based on GWT. The dot
that I just created is sitting right here at the very top. It's being rendered using
the same code that we use in the extension. Let's say that we want to make through our
website; just the example here. The, if you click on this profile image here, we actually
haven't hooked it up yet. So, I'm just going to show you how easily I can change this behavior
of our website using this development mode. So I'm going to back to Eclipse here. I started
the development mode from this run target. I've actually I already got it running; you
can see down here the development mode console's already going here. It gives us a URL that
we can copy. I'm going to bring that back to Firefox and paste it in. Now, it just takes
a second to load here. Okay. So, you can see this label up top here. We just add a label
while I'm running in development mode, it just helps us to know, it just reminds us
that we're running. We're now running against the code that's, the Java code that's in eclipse
rather than the live version of our website. So, the change I'd like to make right now,
we've got this small little profile image here, you know clicking it doesn't do anything.
We'd like to pop up a big version of this profile image. Let me go over to eclipse here.
Let's see how hard it is to make this change. I open up the code for the sidebar that I
just showed you. I'm just going to find the part of the code where we're setting up that
profile image now. I've already got the code written ahead of time here to make this change.
I'm just going to uncomment it and save it. So what I'm doing it here is, I'm just using
a bunch of GWT building blocks. So, I've got a pop-up panel, I create an image, I stick
it in the pop-up panel, you know, set some sizes. Set a flag to auto hide when you click
on the page, and then we show the pop-up panel close to the user thumbnail. It's--you know,
these are a bunch of really powerful building blocks under the hood and you know, GWT is
taking care of a lot of really cool infrastructure here. So let's just go back here, I'm going
to refresh. This is the refresh, you know, the development refresh cycle they're talking
about. It just make things so easy because now, after a simple refresh, I can click that
profile image and you can see the full size version of that image that--this is the change
I just made now and eclipse is running live. So I mean that, it's really fast, it's really
easy and you know it, it's made us super productive, so we're so happy to use it. I guess if we
could just go to the slides. So, in summary here, you know, GWT has given us a whole bunch
of really useful tools, you know, it makes our life easier. We developed a lot of client
facing applications; the Firefox extension, the Chrome extension, things like that, and
we literally have, you know, one code base where we just set different flags on compile,
and we get the Firefox extension, the Chrome extension or the script version for the publisher,
so it makes it very easy. It's all written in Java. You know, we use JUnit for testing
and things like that; a very, very familiar, convenient environment. Multiple browser debugging,
you know, this, just being able to load up any browser on my machine or as Andrew mentioned
in a virtual machine and connect it to your local code. You can just kind of step through
it, it's, it's fantastically useful. I mean, you don't actually have to run--you can run
IE on it just in a virtual machine on your, and connect to you Mac, step through the IE
code which is often troublesome and it makes life a lot easier having to work with those
browsers. And, of course, the code size savings; I'm just kind of give you a taste. You know,
we saw a 20% reduction in the output size of our appli--our website just by recompiling
with GWT 2.0, I mean, that was huge for us. Like--and we didn't have to make any changes.
Now when we actually did make the changes for the code splitting which is coming up
later, we sat way bigger savings as well but, you'll see a bit more of that later. So, anyways,
if you want to know more about how dotspots uses GWT, take a look at our website, dotspots.com/gwt.
We've got a little bit more info up there as well some small tips for Google web toolkit
developers that will hopefully help you out. All right, thanks very much.
>> ANDREW: Thanks, Matt.