JAN MIKSOVSKY: OK.
Hi.
My name's Jan Miksovsky.
And for the next 10 minutes, I want
to give you a quick preview of a new part of the web component
ecosystem.
As you look at a new technology like this,
I think it's helpful to look beyond the technological
accomplishment, and consider the question,
how will this change what people can create?
And I think any time you have a space where people make things
and you introduce the idea of components,
you fundamentally change what people
can create at a really deep level.
And you're bringing a huge number of new building blocks
within people's reach that they can
use-- it'll amplify what they can already do,
so that they can create something new they couldn't
have made before.
In the case of web components, I think
it's quite interesting that because the material of web
components is HTML, the change that it'll bring
will not just be deep, but quite broad.
Far beyond the audience of traditional developers,
the benefits of web components will
extend to anyone who can use HTML.
And there are a lot of those people.
So think about all the people you
know who are designers, marketers, writers,
small business owners, individuals
that have at any point touched HTML.
There are a lot of those people.
The fact they don't even always--
aren't using traditional dev tools.
Many times they're editing a site
in the context of a hosted environment, so Squarespace
or Drupal or Wordpress.
And as long as the site gives them the ability
to edit bits of HTML inside that hosted environment,
they can create things.
And because web components are just HTML,
it means the technology has the potential
to amplify what those HTML-level authors can create.
All that's necessary is that the ecosystem
expand to include them.
And so a few months ago, a friend of mine and I
founded Component Kitchen, because we
wanted to help bring that about.
We think that this is going to be
fascinating, transformative technology.
And we wanted to help bring web components to a mainstream
audience so that we can help them understand what
the technology can do for them, and then
help them find great web components that'll
let them make their own work shine.
So tonight, we wanted to give the first public preview
of our service.
So I'm going to start by showing the basic thing
that we're starting with, which is a catalog of components.
There will be other catalogs, other registries.
Our take that we're going after is
we'd like to make this available to a mainstream audience,
so that starts by taking the ideas that have been proven out
in well-designed app stores and online stores
and applying them to this domain.
So for starters, we want to make it
as visually engaging as possible so people can understand
what they're looking at.
And we want to bring in the now-traditional community
aspects of stores, like ratings and reviews
and recommendations, along with tools like tutorials
to help them understand what this can do for them
and also help them find the components they're looking for,
things that will solve the problems that they have.
We're going to walk through just three quick examples.
So I'll start with a really basic component.
This one happens to put an interactive map
onto your website with a little bit of HTML.
And the author of this component didn't
have to do anything special.
They make the source available on GitHub.
And they register it with a service
called bower that makes it discoverable by our site.
We can go to that source repository
and extract data about this component, metadata
on the left, things like a read-me on the right.
So these are just basic details.
And by pulling information on all the components
that have been made available, and pulling that together
in a site, we can advocate for the consumer
of these components, because we can allow them
to quickly compare components and assess the value of those
so that they can quickly find the particular one that's
going to solve their need.
Now a read-me file tends to be something
that's written for a more technical audience, people who
want to understand the construction of something.
But here, this audience is primarily
interested in using components.
And they want to use them at the level of HTML markup.
That's what they understand.
So let's look at another example.
This is actually a component that Eric showed earlier.
This is the geolocation component he mentioned.
And what he's done in the source for his component
is he's annotated the source code with comments
that follow a particular convention.
And what that lets him do is then
those comments describe what attributes that component
supports, in language that's meaningful to a wider audience.
So for example, someone coming to this can see, OK, I get it.
There are going to be new custom attributes on this component
that other components don't have.
These are unique to this geolocation one, including
things like the latitude and longitude,
so they can make sense at their level
for what these components can do.
For the third and last example, I'd
like you to consider-- imagine for a moment
that you're not someone who's intimately familiar with web
development, but instead someone who works at the level of HTML.
Maybe you work in a small team or an organization that
doesn't have dedicated development staff.
And occasionally, you have as part of your job,
maybe it's not your primary responsibility,
but occasionally you need to go and edit some HTML.
And let's imagine you're adding a form to your website.
And you want to collect some data from the user.
And in this particular example, let's imagine
that you're going to have a text area into which your end
users can type in some text.
Maybe when you create this form, you'll
be surprised or disappointed by the fact
that the standard HTML text area doesn't
grow in size as your users type into it.
This is surprising or disappointing to you,
because when you go to a polished, large-scale site
like Facebook and you type in a status area,
you see that box automatically growing as your typing.
You thought that that was part of the web.
Silly you.
So you'd like to have-- you wish that you could give
your own users, the users of your site, that same ability.
So until now, that was probably beyond your abilities
as an HTML author.
In order to solve that problem, you need to know JavaScript
and you need to know how the DOM works at a certain level, what
events you need to wire up.
It's fairly complex.
The good news with web components
is that somebody can wrap up a solution like that
and create a thing you can use.
It's not a recipe like you might find
on a site like Stack Overflow, where
you have to follow a bunch of instructions.
It's a thing you can search for and then get a result for.
So this is an example of a component
that might fit the bill.
This particular page is one we're using as a proving ground
to test out some ideas that we'd like
to enable for all components in this catalog.
There's two interesting things going on here.
The first is the centerpiece of the page
is a live demonstration of that component,
because that's really going to-- that's
what's going to sell you on using it.
So here as an HTML author exploring the site I can see,
yeah, this is the kind of thing that I want.
I want that.
And then right below it, you can see the fact
that-- you can see the HTML fragment that
created that demo.
They're live, so you can edit one
and see how it affects the demonstration.
And as an HTML author, this is quite reassuring to you.
There's nothing-- aside from the fact
that there's this new tag you've never
seen before, the syntax is familiar to you.
The idea that you can set attributes
on it and type stuff inside the tags, that's all stuff you get.
So all you need to focus your attention
on are, one of the attributes here
that are unique to the component?
Again, we can extract information
about those attributes from the source code of the component
and create here on the right a little editor
that lets you experiment with them.
So perhaps in this example you want your users
to feel comfortable typing in a bit of text.
And so you decide that what you want to do
is give them a larger initial size to this box.
It's always going to be at least five lines tall.
As you edit this custom attribute,
you see it updates the attribute in the markup example
down below.
So you get, OK, this is how I'm going
to accomplish this in HTML.
And it updates the demo so you can
see how that's going to affect the final presentation,
the experience your users will have.
OK.
So now you've found the auto-sizing text
area of your dreams.
And you want to add this to your site.
So today, if you're not a web developer, the tools of web
development, things like GitHub or npm, these tools
that web developers get, those are unfamiliar to you.
So telling you to go use those tools is not
going to be very meaningful.
So now we get to the second part that we'd like to enable.
And that's to take advantage of a core web component
feature, which is HTML imports.
We can host on the Component Kitchen site
a copy of a component that you can
reference in HTML from any site.
So as the author trying this out,
you can click Copy to Clipboard and then go into whatever tool
you use to edit HTML.
It can be anything.
I'm going to just use the simplest one I can find,
so there's HTML on the left and then the output on the right.
And you come to an editor like this
and then paste in the code.
And here we see a live version of that running on your site.
So on the left, what's happened is
we've got the little bit of HTML which you customized
on the site to get it to look the way you wanted.
Above that it's also grabbed a script tag
that loads that platform.js library the Polymer guys talked
about, as well as an HTML import that references
a hosted version of this component hosted at our site,
so that you can use this anywhere.
All you needed was HTML.
So I want you to think for a moment about if you're
someone who deals with HTML in a site like Squarespace
or Wordpress, things like that, think about how transformative
this will be for what you can create.
Here's something you wanted to be
able to do that until yesterday was something
that was too difficult.
And now it's something, it's just a matter of cut and paste.
So you can see that this skill you have, just the ability
to feel comfortable looking at HTML
and editing it, that skill you have has suddenly become
amplified to be so much more valuable and powerful.
It's the existing skill you have.
And suddenly now you're able to create new stuff.
If you think about whatever it is
you do in your day job, your organization,
your company There may be some service or some interaction
that you would like other people to offer on their site.
I think a web component will be a great way for you
to deliver that.
And at Component Kitchen, what we want to do
is help you find that audience, help
people find your component, understand what it can do,
and then use it.
So that's almost all the time I've got.
I did want to point out-- I'd encourage
you to check out the site.
It's component.kitchen.
Yay for new top-level domains.
And there's a link to an RSS feed we offer.
We've already found this pretty useful.
It tracks all new components that are published.
So if you wanted to see what people are doing,
this is a good way to find out about it.
And then finally, I'd encourage you,
if you've got your phone handy, your laptop, go to Twitter.
Follow us on @ComponentK.
We'd love to hear what you think.
Thank you.
[APPLAUSE]
MALE SPEAKER: Thank you, Jan.
All right.
Thanks.