Hey guys, I'm Eric Bidelman.
I'm a staff developer relations engineer
working on Polymer at Google.
So in this video I'm going to talk to you about how
you can use Polymer and Web Components to interact
with some of Google's most popular APIs and services
just by writing a little bit of HTML.
The other day I was thinking, how many APIs does Google have?
Do you now?
I actually did't.
I had to do my research on this one.
So it's over 250 APIs.
Things like Google Maps and Google Drive, Spreadsheets,
Calendar, Analytics.
You name it, Google's probably got it.
And of course we all know that creating complex web
applications requires you to interact
with APIs and services.
So on the polymer team we've been
thinking about this a little bit.
How do you combine Google's awesomeness
with the world of Web Components?
We really want to make working with Web Components as easy
as writing a little bit of HTML.
That's really the power of Web Components.
And it turns out, they're a great delivery vehicle
for wrapping existing content, libraries, and services.
Think of it as a way to declaratively provide
a declarative service area for the API that exists.
This is really where Polymer comes in.
For those that don't know, Polymer
is a bleeding edge technology.
It's a library built for the web that
allows you to create web applications based
on Web Components.
But to me what Polymer really does
is provide a thin layer of opinionated layer
on top of the Web Component APIs.
So we built in things like data binding, property observation,
[? jester ?] support, mobile support.
These are really important when you're building applications.
We want to make it easier for you to ramp up and use,
so we built that into Polymer itself.
A popular API is something like Google Maps.
It's very complex, it's very rich.
So let's take a look at how Web Components can actually
make your life easier using that API.
This is Google Maps' Hello World.
It's pretty simple, but there's a little bit of boiler plate
code that you have to write every time you want
to render just a map to your page.
You have to know to style it using a little bit of CSS.
You have to know that there's a container
div that you need to create.
You have to load the library, you have to remember that.
You have to work with loading and callbacks
and write a little bit of JavaScript.
The point is, there's a lot of process
you have to go through to get this thing kicking.
So let's see what we can do with Web Components.
In the world of Web Components, this is the Google Maps API.
It's a single tag you declare on your page.
That's ridiculous, ridiculously awesome.
You declare it and you're off to the races.
And it does exactly what you expect,
which is render a map to your page.
It's simple, it's declarative, it's intuitive.
I don't have to write JavaScript code.
I don't have to know about callbacks.
I don't have to read API documentation.
You get my point.
You just use this thing and it works.
But Google Maps is an extremely complex API.
So instead of writing JavaScript,
what we can do in the world of Web
Components is expose attributes on this element for people
to configure the different properties and methods
that the API exposes.
So for instance, a really common thing to do,
latitude and longitude.
Set the center of the map.
We can do that now using the latitude and longitude
attributes.
We can also set the zoom level of this map
just by setting the zoom attribute to 15.
That's really awesome.
Again, it's all declarative and super intuitive.
You can read this code and know what's going on.
And adding markers is just as easy.
It's just as declarative.
So we can drop in a bunch of Google Map marker elements
inside of the Google Map tag itself
and compose these in different ways.
The fact that the market tag is in the wrap is significant.
It knows to render that marker to the page.
I'm also reusing other parts of the platform here.
So you notice I didn't reinvent the wheel for the title
attribute.
Or I didn't reinvent the wheel for the drag and drop API.
I'm using the draggable true attribute.
So again, I can use parts of the web platform
that already exist.
I don't have to reinvent that wheel every time
I start a new project.
That's cool.
The other thing I really love about this element
is that it makes some of the API complexity go away.
So one thing that's really common
to do in the world of Maps is center
your map inside of the viewpoint of all the markers
contained inside of it.
Make sure they're available to users at all times.
It's a little bit of boilerplate code, a little bit
of JavaScript that you have to know
how to write every time you want to do it.
You add a new marker, you want to update the map.
Instead, what we can do in the world of Web Components
is again expose another attribute, this Fit to Markets
attribute.
So as long as I have on my marker tag, my map tag, boom,
the map just updates itself.
It knows to set the zoom property accordingly.
That's Google Maps.
It's super declarative, super easy to use.
But you could imagine a ton of other use cases
here for all the APIs Google has, whether it's
working which Charts or Spreadsheets, Analytics.
Anything can be a Web Component.
We can provide a declarative surface for people
to tap into that.
And that's exactly what we've done.
So we've been experimenting with this over on GitHub.
If you want to check it out, Google Web
Components us the GitHub organization.
We have a growing collection of awesome components there,
things for Analytics and maps you saw, Google Spreadsheets.
We also have base components for doing more low-level things,
working with the libraries that Google has,
doing OAuth2-- God knows that is very complex.
So just like Maps, these are super declarative, super
easy to use.
Check them out.
If anything is missing, let us now.
We're really interested in getting your feedback,
getting pool requests, and adding new APIs and services
all the time.
So actually, let's use this.
Let's combine-- proof in the pudding--
create an application that uses Google Maps and Google
Spreadsheets.
We'll create a Polymer element that wraps all that together,
and users can use that element inside
of their own applications.
Oh yeah, I almost forgot.
We're not going to write any JavaScript to do this.
We're just going to write a little bit of HTML.
So if you're curious, this data is
going to be coming from a Google Spreadsheet.
This is what the data actually looks like.
Essentially it's just a list of business in Portland, Oregon.
There's a little bit of metadata,
but the most important thing here
is that we have the latitude and longitude columns.
This is the data that's going to render those marker objects.
So the first thing we do, we've got
to bring this stuff locally it our app.
We're going to use Bio to install it.
We're going to Bio-install the Google Map tag.
And then you see the example here, which we've already seen,
so let's move on.
What you haven't seen is the Google Sheets tag.
This is an element for working with Google Spreadsheets.
We're also going to Bio-install that, bring it
in locally to our application.
And the second example here is how you actually
use this element.
So again, it's super declarative.
I declared Google Sheets, and boom, I'm off to the races.
It's got a Publish property, which essentially means,
hey this data is being published publicly.
Don't worry about doing authentication just there.
GID corresponds to the tab in the spreadsheet
that I want to interact with, so GID 0, first tab.
And the last thing that we're doing
is providing a spreadsheet key.
And you see the example here.
Where you actually get the key is in the URL bar
when viewing the spreadsheet in Google Docs.
So it's super easy to use.
And the last step, if you're outside of Polymer
you just have to write a little bit of JavaScript
to maybe listen for the event that this element fires
and then it will react accordingly.
So in this case, we can print out the data
that the spreadsheet return.
But it's really that easy, declare, go.
So that we have those dependencies installed,
Google Maps and Sheets, let's actually use them.
Let's create a Polymer element that
wraps that functionality together.
This is the entirety of the application.
Let's walk through these pieces.
So the first thing, now that we have the dependencies
installed, you want to listen at the top of your file.
So this is using HTML imports, which
is one of the Web Component APIs.
We're going to list Polymer as a dependency,
the Google Sheets as a dependency,
and Google maps as a dependency now
that they're in our application.
The second thing we're going to do is create a Polymer element,
so using Polymer's declarative sugaring to do this.
The name of the tag we're going to create is map-sheets.
This is what somebody's actually going to declare on their page
when they use our stuff.
The second thing you see here is this no script attribute.
That's essentially just a hint to Polymer to say hey,
I'm not going to add any properties,
any methods to this.
It's just going to be a little bit of markup
that we're essentially repackaging for users.
So it's a pretty simple element.
Inside the Elements template, you're
drop in that Google Sheets component.
This is what's going to talk to or spreadsheet.
You can see I've got the key there,
I got that publish attribute, and we're
data binding to the rows attribute
that this thing has on it.
More on that in just a second.
Right below it we have the Google Maps sheet.
This is your friendly tag that we already know about.
Notice that we're using that fit to markers
attribute that we talked about before.
So again, any time I have extra markers being rendered
in this map, it's just going to know
to set the zoom level to the appropriate level.
Lastly, what we're doing is we're
using [? Plamers' ?] declarative data
binding features to declare the [INAUDIBLE]
over the row data returned in the spreadsheet.
So again, I'm not writing any JavaScript code
to wire this stuff up.
I'm literally just declaring a template,
looking over the data, and stamping out Google Map marker
children.
And of course, we're data binding that latitude
and longitude property to the particular cell
that we're interested in.
So again, it's all super declarative,
and the surface area is just using HTML attributes.
So that's the entirety of the application.
If somebody wants to use this, it's
just a matter of bringing in platform JS.
These are the polyfills that actually
allow you to use the stuff in browsers
that don't support the native APIs.
Check.
You want to declare the Google Maps sheet as an HTML import.
That's going to bring in the element we just created.
Check.
The last thing you want to do is just
declare the Map sheets tag on your page.
And of course, what people get is this beautiful map,
marker data, all powered by Google Spreadsheets.
We didn't write any code to do it.
We used Polymer Web Components.
That's the bee's knees.
So if you want to see a live demo of this, go check it out.
It's at googlewebcomponents.github.io.
We have this demo, as well as a ton
of other demos for all the other components we've created.
So that's a small taste, just a small, small taste
of what Polymer and Web Components can do.
I really think Web Components are
going to lock a fundamentally new way to program for the web.
You've already seen, it's productive,
it's declarative, its reusable.
And you can vastly reduce the amount of code
you write as a front end developer.
That's really, really awesome.
So if you want to know more about creating applications
using Polymer, do check out Rob Dodson's video
and Addy Osmani's video.
These are some stellar guys with some really, really great
content.
Check us out at polymer-project.org.
This is our website, powered by Polymer, of course.
And follow us on Twitter @polymer.
You can also feel free to hit me up at any time, ask questions.
I'm always on Twitter.
I'm on Google Plus.
Oh yeah, one last thing.
Go componentize the web, guys.
Thanks for watching.