Hello, I'm Brian, a developer on the Google Drive Realtime API.
Everyone loves memes, especially when they've
got pictures of cute cats in them,
but not everyone's an expert on coming up
with great meme ideas.
Maybe you know the perfect background image
to use for a meme, but you need a little bit of help
coming up with the perfect caption text.
Why don't we build a collaborative meme editor app
so that you and your friends can meme together?
Now, what would a collaborative meme editor app
actually look like?
It would look a little bit like this.
You'd have a box where you can select the image that you want
to use for the background, and then we'd
have text boxes where you could enter the top, middle,
and bottom caption text.
And because this is a collaborative meme editor app,
we want to have character by character collaboration just
like Google Docs.
And what that means is, when one user types or deletes
or edits one of these text boxes,
we want to see what they're doing in real time, character
by character.
So how do we actually build this collaborative meme app
the old-fashioned way?
Well, the first thing we have to do is design our server.
And because we have this character
by character collaboration, this server
needs to deal with a lot of load.
Every time someone types on their keyboard,
we're going to get a request, and that
means a ton of traffic to our database and a ton of requests
to our application server.
Once we've got the server figured out,
we need to figure out how to deal with collaboration,
and that means resolving conflicts.
If one user inserts text and another user deletes text,
we need to resolve that in a way that causes everyone
to end up with the same result.
And then of course we have to deal with all of the minutiae.
We have to deal with authentication and access
control, and we have to deal with the network code
and write a bunch of glue code to bring all this stuff
together.
Once we're done with all of that,
then we can get on to the fun part
where we build a great user experience
and build a great meme app.
But we're not really here to talk
about how to do this the hard way.
We're here to talk about how you do this with the Drive Realtime
API, which looks a little more like this.
All that hard stuff?
We just replaced it with the Realtime API.
And all you have to do is build a great meme application,
build your user interface, and figure out
how to make your app wonderful.
But how easy is this really?
Well, as it turns out, with the Drive Realtime API,
building a collaborative app is really, really easy.
It's so easy that you can build a collaborative meme editing
app with less work than it would take
to build a traditional non-collaborative app.
And that's because you don't need server-side code.
You don't need to deal with any of the persistent storage
or authentication or anything like that.
You just build client side HTML, CSS, and JavaScript
and focus on making your experience great.
So let's go step by step through how we would actually
build this meme app using the Realtime API.
The first thing we need to do is we
need to include a little bit of boilerplate
to load the Realtime API.
We then need to read and write data
from what we like to call a Realtime data model.
And then we have to handle changes from other users
because this is a collaborative app.
So let's go through a little bit of this boilerplate,
and I promise that this is painless.
The first thing we need to include
is the standard Google API loader script.
Now this is the same script you'd use if you wanted to load
the Google+ button, or the Google Drive API,
or really any other Google API.
And this is just something you copy and paste.
Now the next thing we do is actually
called the JavaScript function to load the APIs.
This is called gapi.load.
We provide a list of the Google APIs that we want.
In our case, we want the Realtime API,
but we also might want something like our authentication code,
or we might want the sharing dialogue or the Drive API
or something like that.
We can provide as many APIs as we need.
Once all of that's loaded, we get a callback,
which we're just going to use to wire up our UI.
And that's it for boilerplate.
Now we can get on to the really cool part, which
is where we actually read and save data
from the Realtime data model.
Now what is a Realtime data model?
I've been talking about this.
Well it's kind of a fancy term, but a Realtime data model
is just a collection of data structures
just like an in-memory data model.
And the kind of cool part about a Realtime data model
is that Google handles all of the collaboration
and all of the storage work for you.
So you just read and write from this Realtime data model,
just like it were in-memory, and you write a user interface
on top of it and then all the rest is handled for you.
So let's go through a couple of examples
of how this Realtime data model's built.
We're going to build it using a variety of objects,
but in our case we're going to use collaborative maps
and collaborative strings.
Now a collaborative map is just like a JavaScript associative
array, except we automatically merge changes
on a key by key basis to handle collaboration.
And a collaborative string is just like a JavaScript string,
except that we do character by character diffing to figure out
the results of that everyone gets the same text.
So let's actually start building up our data model.
So at the root we're going to have a collaborative map which
we've creatively called root.
And in fact, every Realtime data model
has a collaborative map at its root.
This is something that we create for you automatically
as a sort of convenience.
And this is where you can store all the data
that you need for your application.
In our case we need three different strings, the top,
middle, and bottom text.
And we're going to use collaborative strings for this
because we want that character by character collaboration.
If we didn't want the character by character collaboration,
which is the case for the image URL,
we can just use a plain JavaScript string here.
And we'd just put that in a collaborative map
like you were a local data structure.
So let's look at actually reading and writing
from this data model.
So to read, let's say we want to get the image URL out.
We just call the get function on the collaborative map,
just like it's an in-memory map.
And we get back our image URL, our little picture
of the cute cat.
If we wanted to update that, say to replace it with a cuter cat,
all we have to do is call set.
Now, this looks fairly simple because it is simple.
This works just like a regular old JavaScript object,
but under the covers what we're doing
is serializing this, sending it to the server,
handling collaboration, and handling persistence.
All of this is done for you automatically.
But there's one thing that you need
to do that's a little bit different from building
a non-collaborative app and that's
that you need to handle events from other users,
not just the local user.
So in the Realtime API, we provide event listeners
on collaborative objects just like dom elements.
But you could add listeners to collaborative strings,
and you could add listeners to the HTML input elements,
and wire all this up together with some glue code.
But if you don't want to do that to connect
the strings to the text boxes, we
provide this clever utility called the string binder.
And what a string binder does is it automatically
wires up all the events for you between a collaborative string
and an input element.
So all we do is call bindString and provide
the collaborative string and the input element,
and we wire up all the events and all the collaboration
works automatically.
But there's one thing we need to do in addition to making
the text boxes work, and that's we
need to make the little preview image update.
And to make the preview image update,
we want it to update when anything in the data model
changes.
And to do that we're going to use something
called an object change event listener.
And an object change listener is just
a listener that fires any time an object
or any of its children change.
And in our case, we're going to add it to the root.
And by adding it to the root, what we're doing is
we're making a listener that fires anytime
anything in the data model changes.
Now all we have to do is update our little preview image.
And that's it.
We've built a collaborative meme editor app.
So if you're ready to get started writing code,
we have a great quick start guide on our developer web page
where you can go through, step by step, the actual code
that it takes to make a little demo app.
And if you're interested a little bit more
about the technical detail of how the Realtime API works,
we have a great presentation from Google I/O last year,
in which we go through all the conflict resolution and undo
and things like that, in great technical detail.
Thank you very much.