MATT GAUNT: So we begin.
SAM SACCONE: When we're building
websites, we love to use tools.
I use something
to watch my files,
I use frameworks, I just
use this mountain of tools.
And the thing about tools
is that typically they're
like, so far in
front of the platform
that we're building on.
So I use a library
just like dominoes,
and that gets around the
fact that different browsers
have different implementations.
So like, how to get
elements by IDs and classes.
And I use things to compile
other things, and it's great.
But if you imagine
your tools as a boat.
MATT GAUNT: Yeah, but you've
got cars on the screen, right.
SAM SACCONE: Yeah.
Just go to the
next slide for me.
If we imagine our
tools as a boat--
MATT GAUNT: That's beautiful.
Well done.
SAM SACCONE: OK, and the
platform is this slow boat,
it's sort of behind.
This fast boat has
an anchor and it's
kind of like, just full
throttle going ahead.
MATT GAUNT: OK, this
analogy I don't like.
You drop an anchor to stop
the boat from moving, right.
SAM SACCONE: No, no,
it's a sea anchor.
You know, the sea anchor.
Anyone know what
a sea anchor is?
Obviously, a sea
anchor, because everyone
knows-- we'll just tell
them that there's a storm,
you put the sea
anchor in, it keeps
you pointed towards the
waves so you don't tip over.
Sea anchor.
MATT GAUNT: But you can
still move the boat,
with the anchor down.
SAM SACCONE: Yeah, sea anchor.
MATT GAUNT: Right, OK.
Tooling is the boat.
The platform is the anchor, the
push, still moving, got you.
SAM SACCONE: OK.
So in this analogy, which is
really solid if you ask me.
Speedboat.
OK.
These tools are racing ahead.
But the cool thing is
this anchor, sea anchor,
as we know,
#SeaAnchor, it's good,
that eventually catches up
where the boat was at one point,
you know.
So the platform
catches up to where
the tools were at some point.
And that's good.
MATT GAUNT: Yeah, and it can
happen super quick as well.
So we all know ES 2015, right.
Yes? ?
SAM SACCONE: Yeah.
MATT GAUNT: So a year
ago, we would have been
looking at something like this.
So this is the feature set
list across a whole range
of browsers.
And the top one is about
68%-69% of feature completeness,
in engine Firefox.
So realistically, if you wanted
to use this stuff in 2015,
you needed something
to compile it.
SAM SACCONE: Yeah, I mean
that is a lot of red.
MATT GAUNT: Yes, it's not good.
SAM SACCONE: I'm a
fan of the color red.
But it seems like if I wanted
to use arrow functions, array
destructuring, etcetera, insert
feature, feature, feature,
I would have had to use a
tool that would turn that
into ES5 or lower.
MATT GAUNT: Yeah, you wouldn't
even be able to just--
SAM SACCONE: All
right, I got it.
I'm in 2015.
OK, that's the state of things.
MATT GAUNT: Now, it's
really nice, it's green.
So now you're
looking at like, well
over 90% across all
of the browsers.
So you don't actually
need that tool
that you had before, you can
just run it in the browser now.
SAM SACCONE: Yeah, right I can
open up the dev tools console,
and type arrow
function, and it just
works, just magically
works inside of dev tools.
I don't have to
precompile, like I
use ES 2015 or ES6 as it was
known in 2015, which is weird.
MATT GAUNT: I still wish it
was ES6, it doesn't make--
SAM SACCONE: But, I don't
have to use a tool to compile.
MATT GAUNT: Yeah,
that's the point.
In the space of a
year, we have one tool
we had to use-- we
needed to rely on it.
Now it's not needed.
So my name's Matt Gaunt, I work
on the Developer Relations team
for the web--
SAM SACCONE: Matt.
Can we do that again?
I feel like I did not get to
know you in the introduction.
MATT GAUNT: You didn't
get to know my soul.
SAM SACCONE: Very boring.
Can you do it again?
MATT GAUNT: OK, my
name's Matt Gaunt.
I'm from Britain.
I like my tea in the
morning with a little bit
of milk, no sugar.
SAM SACCONE: With milk.
MATT GAUNT: Builder's tea, yeah.
Little bit of milk.
SAM SACCONE: You put
milk in your tea.
MATT GAUNT: But that's
how you do it, Sam.
SAM SACCONE: Seems
a little strange.
MATT GAUNT: A little strange.
SAM SACCONE: My name is Sam.
And I like my tea
in the morning just
with nothing, just a tea bag.
And I just like it
where it's really hot,
and you know your just-- and
then you burn your tongue.
And then I'm really awake.
So that's how I like my tea.
MATT GAUNT: I don't want
to use the word masochist,
but it feels right.
SAM SACCONE: No, you're just
really jealous of my life hack.
MATT GAUNT: Super jelly.
So this talk was something
that Sam kind of concocted
in his head to a certain degree.
I'm here to balance
it out I think.
SAM SACCONE: Yeah.
So I can relate to you.
To this reality of
web development.
MATT GAUNT: See I
don't think you can.
But you're going to
say you do anyway.
SAM SACCONE: So
we're in this world
with the reality
of web development,
and we use a ton of tools.
You have your watch process,
your compile process,
et cetera, et cetera, et cetera.
And things are fine.
And this is how things
have always been.
Just more and more tools.
And so you're working
on your project.
And it might look
something like this,
like I made a teeter totter.
Yeah, I like this a lot.
Tools, platform,
and every time we
add a tool we get further and
further away from the platform.
So, you know, you're
using a framework,
and you're compiling your
JavaScript or maybe not
JavaScript or some other
language to JavaScript.
And you get an error in your
code and there is a fog of war.
I'm playing a
video game, I can't
see what's in front of me,
it's just this huge call stack
error.
And I'm like where's my code,
where did this error come from.
And that's the
thing, we add tools,
you get further
and further away.
There's more
abstractions between you
and what you're actually
trying to compile to,
which is the platform.
So it seems like a bad thing.
MATT GAUNT: Yeah, so the
point you're trying to make
is the fact that we
have all these tools,
and it's kind of abstracting
away from the platform.
SAM SACCONE: That is
the point that I said,
but I'm glad you repeated it.
Thank you.
MATT GAUNT: So the reason
I'm skeptical of this talk
with Sam, and I use the word
skeptical to be polite to him.
SAM SACCONE: You said something
a lot nastier the first time.
But that's fine.
Skeptical, I like
that, that's better.
Skeptical of my ideas.
MATT GAUNT: Yes.
Because I looked at the
past couple of projects
I've been making for
over the past year or so.
And when I look at that,
the first thing I do,
is if you take [INAUDIBLE] build
process, or something that I'm
used to using in a
previous project,
and moving it over into the
new one, that's what I do.
Or I'll take something like
Web Starter kit, which comes
with a prebuilt build process--
SAM SACCONE: You
have tools in there,
like to compile your
JavaScript, to compile your Sass
or something, and
responsive breakpoints.
But this is like
the Web Starter kit.
So can I order this
from a catalog,
and then I can build the web.
MATT GAUNT: You know,
if you send me a check,
I will send you it
in the post, yes.
SAM SACCONE: So I can build
the full web with this?
MATT GAUNT: Yeah, the whole web.
I promise.
It will be the web in a box.
SAM SACCONE: That sounds
like an awesome kit.
MATT GAUNT: Little LED that
blinks on top and everything.
But this is how I
started, and it--
SAM SACCONE: Wait, Matt, Matt.
You have commits
on this too, right.
So are you just
bragging right now?
MATT GAUNT: No.
SAM SACCONE: You're
selling yourself.
You're like, my
name is Matt Gaunt
and you should use my tool.
MATT GAUNT: I see, I
see what's happening.
It's a beautiful impression
of me, thanks Sam.
SAM SACCONE: I worked on it.
MATT GAUNT: But the
point I was getting to,
was this is how I started.
And I end up using these tools,
I come to know these tools,
and I come to love these tools.
So this is just how
I create projects.
And to go back to the
previous point of lite Babel,
you don't actually need it
if you want to run something
in the browser's today.
And it kind of comes with
this weird side effect, right.
If you're going to
pull in all these tools
from the first thing
and you run NPM install.
SAM SACCONE: That seems really
fast, so that seems fine.
MATT GAUNT: Oh, this is
GIF time, by the way.
This is about a
minute and a half
and I've sped it up
because I figured you
didn't want to watch paint dry.
SAM SACCONE: Is that
another module, GIF time.
Can I install that to like
speed up my [INAUDIBLE] payments
install?
MATT GAUNT: I
wouldn't be surprised
if Sinda has a module
out by the end of today.
Gif time.
SAM SACCONE: Gif time.
I like that.
That's good.
MATT GAUNT: But this is
the weirdest thing, right.
We start our projects by
installing half of the internet
before we even do anything.
And yet, you'd think that
when we start the web,
this is probably what we
all know and love, right.
SAM SACCONE: Yeah, I
mean I remember this.
I remember I think I
got a book or something.
And I was like, I'm
going to make a website.
And so I saw that I had to
open these tags or something--
these words.
And then I said, OK.
And then I had to
look on the keyboard,
I was like, OK, where's the
hungry alligator, and the not
so hungry alligator.
MATT GAUNT: I genuinely hope you
write a children's programming
book and that's
how you explain it.
Seriously, that's a good idea.
SAM SACCONE: So
once I figured that,
and then there was
a slash that was
the opposite of
forward backslash,
but it looked forward.
I didn't understand it.
But I found it.
So OK, I press that, I saved it.
And then I went to my browser,
and I reload the page,
and I saw my website.
And then I could go
back and type it--
[INTERPOSING VOICES]
SAM SACCONE: And then reload.
And then I had this
awesome developer workflow,
and I was like 8.
Live reload.
No tools.
I didn't install anything.
It just worked.
And this was awesome.
But as you pointed out--
MATT GAUNT: We're in
a really bad state.
SAM SACCONE: That
is-- that's a nice way
to put that-- bad, terrible.
MATT GAUNT: It's
a different way.
SAM SACCONE: Different.
MATT GAUNT: There we go.
SAM SACCONE: Sure.
MATT GAUNT: So that's the
premise of Sam's talk.
He wants to get back
to the 8-year-old Sam.
SAM SACCONE: So let's
suspend reality for a moment,
as I think any of my
ideas require you to do.
MATT GAUNT: Yeah,
you don't really
live in the same
world as us, do you.
SAM SACCONE: No.
So we're in this
suspended reality state.
And we are going to go
all in on the platform.
We're going to not
use tools, we're
going to just use these platform
primitives, these really
powerful things.
MATT GAUNT: We don't even need
to suspend reality to do this.
We've seen this kind of stuff
happen in the past, right.
SAM SACCONE: Yeah,
time and time again.
And I think everyone
can relate to-- I know
one of your favorite things.
Rounded corners.
MATT GAUNT: Yeah, like I had
a sweet way of doing this.
SAM SACCONE: So it's 2004.
And we are in the state
of suspended reality,
and I am your client.
And you are going to make
a button for my website.
MATT GAUNT: Obviously Sketch
existed in 2004, right.
SAM SACCONE: Well, obviously
vectors were so hot in 2004.
MATT GAUNT: But you'd start
off, and you'd make your image,
and you're like cool, I
got my rounded corners.
That's sweet.
And then you cut it
up, and you're like,
you only need one corner.
And then you got to reproduce
a little bit, seems good.
You do the right thing and
you create a sprite from it,
because you want
to be efficient.
SAM SACCONE: How many
slices do you have in that?
Like nine slice, right?
MATT GAUNT: I don't do
nine slices, that's too
New School for me right now.
But you've got to
drop it in your page.
Obviously, I'm using tables.
SAM SACCONE: 2004, yeah,
that's what you got to do.
MATT GAUNT: You got
your CSS sprite sheet
and you pick out the bits
you want, and it's awesome,
it scales and--
SAM SACCONE: So you
delivered your button.
I'm not so happy, though.
Because I don't like
the color, blue.
Can we change that to red?
I really like red.
MATT GAUNT: That's fine.
But I'm going to-- I
got to start again.
Right.
SAM SACCONE: You know, OK.
While you're in there, I was
looking at this on my phone.
And it looked kind of blurry.
So I think that my phone screen
is better than my computer
screen or something.
So can I--
MATT GAUNT: Maybe
your phone's broken.
SAM SACCONE: No, I think
it's just like-- more pixels.
MATT GAUNT: No.
SAM SACCONE: No, it looks fine.
MATT GAUNT: Well, that's fine.
We got pixel ratio, we can
do some Javascript fun.
And then maybe make a
second sprite sheet,
and then we got one
for the one next.
SAM SACCONE: OK.
OK.
And while you're
in there, you know,
like my users have
been complaining
they don't really know they
can touch on these buttons.
So can we make it so when you
hover I get a drop shadow,
but then when
there's a drop shadow
I'm going to use a bunch
of different backgrounds.
And so that background
needs to blend in correctly
with all these different colors.
Do you think that'd work?
MATT GAUNT: No.
How about no.
How about your
designer just doesn't
force me to cry at night.
SAM SACCONE: Well,
I am a great client.
All right.
No, well.
So as the web platform
sort of identified,
people wanted these
rounded corners.
MATT GAUNT: Yeah, and
obviously the spec authors
came and saw this, and
there was a regular pattern,
and it was painful.
So they came up with
a solution, right.
SAM SACCONE: That's
CSS rounded corners.
MATT GAUNT: To go with
the angry alligators.
SAM SACCONE: CSS
rounded corners.
MATT GAUNT: Yes, it was
called border radius.
But yeah, fine.
SAM SACCONE: CSS
rounded corners.
You use CSS to round--
MATT GAUNT: Equals
border radius.
SAM SACCONE: Border
radius, right.
So a border radius
kind of emerged.
There was this desire from
the community to be like, hey,
we want to do these
rounded corners.
MATT GAUNT: And then, how do we
as a community respond to that.
SAM SACCONE: Well we said,
oh, like flat UI is way in.
So rounded corners
are totally lame.
Thanks to the president
of the super awesome thing
that's a little bit too late.
MATT GAUNT: But the point
we're trying to make here,
is ultimately there was
a gap in the platform.
SAM SACCONE: Matt,
did you draw that?
MATT GAUNT: Aww, yeah.
SAM SACCONE: OK, I'm just
picturing myself standing
at the precipice of that gap.
And all I can hear
in my mind is, please
mind the gap when
alighting from the station.
MATT GAUNT: I've
been teaching him
how to say that over and over.
SAM SACCONE: I watched
the videos on-- I
got a lot of those,
they don't have
those in the New York subway,
just kind of like, get off!
Please mind the gap when
alighting the train.
MATT GAUNT: Anyway, there's
a gap in the platform.
We want rounded corners, it
was insanely painful to do.
So we as the web developer
community do what we do best,
and we made a tool that we
found a way of doing it.
SAM SACCONE: That is
a nice rope bridge.
Did you draw that?
MATT GAUNT: I got to say,
my Photoshop skills the day
I made this was top.
SAM SACCONE: OK, so we
have this rope bridge
and the rope bridge
in this case was
like Photoshop or some
image editing program
to do the slices.
So as a community
we're like, here
are these tools and these
methodologies, how to do this.
OK, I'm with you.
MATT GAUNT: And then
we got border radius.
So the platform is
providing us another bridge.
SAM SACCONE: That's
a good bridge.
MATT GAUNT: Thank you.
[INTERPOSING VOICES]
SAM SACCONE: Platform.
OK, the platform had
border radius, great.
Here's the solution,
the platform came in,
we didn't need tools,
things were awesome.
MATT GAUNT: I'm going to say,
if you're sick of this analogy
by this point, just leave.
No, I'm joking.
I'm joking.
But this is the point
we're trying to make,
and we keep on seeing this
pattern over and over again.
So let's take something else.
SAM SACCONE: Oh, Sass.
MATT GAUNT: Preprocessors.
SAM SACCONE: Yeah, because where
better to be a programmer than
in your CSS files.
MATT GAUNT: Dude,
with clients like you
that want to make changes
every five minutes,
you can't blame us.
So I love you.
So obviously I still use Sass.
I still love Sass for the
variables and mixins and stuff.
I need variables and mixins.
And this is literally the
reason why you use Sass,
this bit at the top,
background color green.
It would help if this worked.
SAM SACCONE: Seems like
you have a syntax error
in your stylesheet.
Oh no.
MATT GAUNT: Sorry.
That's a terrible demo.
There we go.
I can't even do simple codes.
All right, but the point is this
is basically all I want it for.
See like a variable
at the top, it's
background colors, whenever I
want to change it, I can do.
And then we've also got mixins,
which again I still love.
Add include around
it, and then boom.
Just a mixin, so I can
reuse it everywhere.
SAM SACCONE: OK, so
you have variables.
And you have this
idea of mixins,
which lets you kind of re-use
chunks in multiple places.
Seems like a good thing.
So is this a gap
in the platform?
MATT GAUNT: And there's a
tooling solution for it.
SAM SACCONE: OK, I'm with you.
MATT GAUNT: So now we
have CSS variables.
The platform is caught up.
So a variable just
starts with dash dash,
got background color red.
And then at the bottom
we've got background,
and we're just using
var, the variable name.
SAM SACCONE: And the
cool thing about this
is, we have JavaScript
access to these variables,
so we can change them
on the fly, right.
MATT GAUNT: Yeah,
and then it'll just
change all of the
references as you go along.
SAM SACCONE: That
seems pretty useful.
MATT GAUNT: And this is spec,
this is in browsers now.
Like there's nothing going
on here, it's just working.
And there is also an early
spec for mixins as well.
So here we've got the
rounded mixin, super obvious
what it's doing.
But at the bottom
we can do @apply.
And this is @apply draft
spec, this is basically
saying that this is a
kind of solution to mixins
that we've been seeing from
other CSS preprocessors.
SAM SACCONE: OK, but
this is even better
than what Sass was doing,
because instead of inlining
that code everywhere
I use to extend,
what this does is it just points
a reference to that mixin,
right.
MATT GAUNT: Yeah.
SAM SACCONE: So I can
actually ship less bytes
to my user, which seems
like an OK thing to do.
And p.s.
I just want to applaud you
for your use of a pink color,
because it's--
MATT GAUNT: I think there's
something more to applaud here,
the fact that I haven't
enabled the web platform
flag in this instance.
It's on your machine
that does it.
Sorry folks, this is actually
in Chrome, believe it or not.
But it's behind a flag,
because it's a draft spec.
But it is going to work.
SAM SACCONE: I still
like it, it's nice.
MATT GAUNT: But again, the
point we're trying to make
is there's a gap in the
platform, we had these tooling.
There's an off
ramp here, where we
don't need to use it anymore.
So I think people
are sort of getting
where we are driving at.
SAM SACCONE: Yeah, but like, OK.
So I saw that I have
some CSS things,
but like, I'm a
programmer and I want
to see some JavaScript things.
MATT GAUNT: You want
to see some JavaScript?
SAM SACCONE: Yeah.
MATT GAUNT: OK,
well how about XHL.
Can you write an HXL off the
top of your head, right now.
SAM SACCONE: Yeah, totally.
I've programmed.
MATT GAUNT: I mean you--
SAM SACCONE: Yeah,
let's just do it.
It's fine.
I get it, you're challenging.
MATT GAUNT: You understand the
reality of web development.
So XHL.
SAM SACCONE: OK, so let me
just get into that space.
OK, I see it.
So we start with
XML, all capital.
Because XML is capital.
MATT GAUNT: Yeah.
SAM SACCONE: And then there
is a capital H then t-t-p.
MATT GAUNT: Capital H,
the rest lower case.
SAM SACCONE: Request.
OK HTML XML it
should be request.
Got it.
And then we pass the URL in
and we need to open the--
[INTERPOSING VOICES]
MATT GAUNT: Then
you need listeners,
I don't remember
what the listeners.
SAM SACCONE: OK, I can't do it.
I'm sorry, I forgot.
MATT GAUNT: OK, well
how would you do it.
SAM SACCONE: Well I just use
jQuery, like $.get right.
MATT GAUNT: Course you would.
Because--
[LAUGHTER]
Yeah.
SAM SACCONE: Matt, I like
that you quoted yourself.
MATT GAUNT: Well, it's
actually a retrospective
on-- what I'm saying is
jQuery, the number one answer
on Stack Overflow, I
just quoted myself.
SAM SACCONE: But
wait, you didn't
say like the dash or the
pound symbol or the asterisk.
MATT GAUNT: I hate
you so much sometimes.
But the point is,
that Sam's getting
at is jQuery is super nice.
You can just do
something like this.
It's all awesome and happy.
SAM SACCONE: Yes,
so the community
created these libraries that
got around the craziness
of that XMLHTTP request thing.
And there are great
things like .get, .post,
and then if you're really hard
core you would just use $.ajax
drop down right
to the bare metal.
$.ajax I love that.
MATT GAUNT: The other
side of this is,
the main reason I say jQuery is
the number one answer on Stack
Overflow, is the
fact that it's got
tons of extra functionalities.
We can't knock it.
Things like .map, .each, things
that the JavaScript spec world
didn't have until--
[INTERPOSING VOICES]
SAM SACCONE: Each and map they
flipped the iterator, the i
and the value so you had
to remember to flip it back
when you were going in
between them, right.
But yeah, sure, sure.
MATT GAUNT: Why do
you hate me so much?
SAM SACCONE: I'm
just pointing out,
you're saying wrong things.
MATT GAUNT: But anyway, jQuery
solved a gap in the platform.
It was a great tool.
SAM SACCONE: All right, so
when does the platform come in.
[INTERPOSING VOICES]
MATT GAUNT: Who here knows
how to Fetch, the Fetch API.
The Fetch is basically
super similar to jQuery.
So Fetch, this is it.
You're going to
make a GET request,
returns a promise,
which means you
can do some happy promising.
SAM SACCONE: And jQuery
will return the promise.
Like a deferred thing.
But it was like a promise.
So, OK.
This feels very similar to what
the community had come up with.
We have $.get and now
it's turned into a fetch,
that returns a promise,
that gives you a value,
that you have to call
JSON on our text,
and handle the stream.
And then you get some value.
OK, great.
That's a lot better,
because I can type Fetch.
I can't really type x.
Well, HTTP requests--
Seems better.
MATT GAUNT: Yeah,
that's how we type.
Just sing it.
OK, this is great.
But one of the main
things to kind of point
out here is with jQuery, you're
kind of tied to jQuery, right.
Like you write-- you
rely on the dollar sign.
If the dollar sign isn't
there everything goes-- well
it just doesn't work.
It doesn't go anywhere.
So there's kind of this
weird thing, we use jQuery
and we should because it
made our lives easier.
But when the platform
catches up and gives you
something comparable,
it should really
be the preferable
thing so your code just
runs wherever you want.
SAM SACCONE: And since
Fetch is a JavaScript thing,
and Fetch isn't a reserved
word, we can just polyfill that.
It should just work.
MATT GAUNT: But since we're
talking about retro things,
we're talking about
jQuery and I haven't
used that in such a long time.
I want to go further
back in time.
I want to go to the year 1997.
I think Sam, you
would have been eight.
SAM SACCONE: Eight, a
good eight years old.
MATT GAUNT: I would've
been about nine.
I think I would have
just got my Nintendo 64.
SAM SACCONE: I
had it for a year.
I was really getting good
at Goldeneye by then.
MATT GAUNT: And you used
to race me in Mario Kart
and win because you
cheated by playing so much
more before I got mine.
SAM SACCONE: Yeah, OK.
So '97.
I'm there, I'm in
that head space.
MATT GAUNT: Awesome.
And this was a time where
everything was much simpler.
JavaScript was used for
sparkles on your cursor.
SAM SACCONE: Well
Brendan Eich was like,
oh, I'm glad you guys
finally figured it out.
JavaScript's true purpose
was to add sparkles
behind your cursor.
MATT GAUNT: I don't know
how Brendan Eich would
feel about that.
But, sure.
SAM SACCONE: He's fine with it.
MATT GAUNT: But it was a peak
for JavaScript at this point.
SAM SACCONE: Yeah,
definitely, definitely
a peak moment for me at least.
But some other people that
were building websites
were like, hey, these
sparkles are really awesome.
You know what would
be even better?
If we fixed up like our forms.
So we don't have a gigantic
table of input fields
that I have to fill out
and then hit Submit,
and hopefully we don't get
like 500 from the server,
because I filled the
date format out wrong.
Maybe we could give
some feedback to users.
MATT GAUNT: There
and then in the page,
rather than just use
it as a document.
SAM SACCONE: So what did we
see the community sort of do.
There was this desire
from developers
to have these kind of
rich widget primitives.
And so people came in like hey,
I'm going to make jQuery UI,
I am going to make Dojo,
I'm going to make YUI.
And I'm going to create
these primitives,
these JavaScript
primitives, but still
like these really
powerful widgets
and knobs and dials that
make the web awesome.
MATT GAUNT: It was
ultimately something
that every developer
wanted, they wanted
to be able to make
these rich components,
because there was no
alternative on the platform.
SAM SACCONE: I don't
know about you,
but I pulled in
that date picker I
think on every single project.
I was like, well, I guess
I'll pull in all of jQuery UI
and the whole theme
files and everything
and just-- I have a
date picker, though.
So it's worth it.
MATT GAUNT: It's awesome.
SAM SACCONE: It was a
really good date picker.
MATT GAUNT: I'm pretty convinced
this is still the number one
thing that I'll see everywhere
on the web, is the date picker.
SAM SACCONE: But you
love the accordion.
You're like I have
an awesome website.
MATT GAUNT: That's
actually the only memory
I have of jQuery UI, was
just that I wanted it
for that accordion, that
sweet, sweet accordion.
SAM SACCONE: But
your whole website
was an accordion, actually.
MATT GAUNT: Shh.
It was that good.
But let's take an example
of a Dojo component.
SAM SACCONE: OK.
Dojo.
So this was like, you could
create a little counter
widget with this.
But what I find fascinating
about this markup,
is that if you squint
just a tiny bit,
you can turn that
into a web component.
All right, web components are
this new thing, relatively new.
And they're basically
the platforms answer
for these primitives.
These is awesome
little components
that give you lifecycle events
like, when I'm attached,
when I'm detached, when
an attribute changes.
Which is like
basically all you need
to create something awesome.
So we have created our
fancy counter web component,
which what I love
about this is Dojo
had this idea with attributes.
And we would
basically use the Dom
and then progressively enhance
the Dom into a component.
And then web components
come in and says,
OK, well let's just
make that standard,
so you can define
your own types.
And you can just
put in your Dom,
and things are instantiated.
And that's really good.
MATT GAUNT: Yeah,
because ultimately it
means if you wanted to
share that component,
you just share it.
By someone taking
on that component,
they aren't suddenly taking
on all of your tooling
or whatever other decisions
you made along with it.
SAM SACCONE: So the platform
came in and standardized
and created this new
primitive for us.
MATT GAUNT: So we're
kind of in this scenario
for a lot of these tools.
We have a tooling
bridge, because that
was the first way we did it.
It's how we showed we had a
desire, a need for something.
And we have this platform
bridge right next to it.
The interesting
thing is everyone
is still kind of using
the tooling bridge.
SAM SACCONE: Still, everyone
is using the tooling bridge.
When I start a project, I
have a gigantic NPM script
that I run, and
watches everything
and compiles it, and moves
all my files around it.
It runs Lin and
reloads my browser.
I have this huge tooling bridge,
and I just sort of ignore
the platform bridge.
Because for forever,
it never existed.
MATT GAUNT: So there's kind
of this interesting dichotomy.
Because there's also if you
take some of my border radius,
we had that tooling,
it was so painful
that we basically
burnt it, right.
I don't think
anyone in this room
would ever go to Photoshop
just to get that effect.
So we should be doing this
for every single project
that we start.
Is going do we actually
need this tool,
or has the platform given
me something equivalent?
SAM SACCONE: But since we're
in this state of suspended
reality, we're just going
to take the platform bridge.
MATT GAUNT: Yeah,
but there also comes
another point of, we're not
in suspended reality, right.
I have to ship stuff to people.
SAM SACCONE: Well, OK.
So if you're saying I work on
a real project though, Sam.
And what you're saying
doesn't make any sense.
MATT GAUNT: So I like
how you're making
me sound unreasonable for that.
It's kind of a trick.
But I hear you.
So let's take some
of my border radius,
we all know that we burn that
bridge, because hey, guess
what, supports really amazing
and it doesn't matter.
But if we take from the
other things we talked about.
So CSS variables,
oddly enough it
actually has pretty good
support in all the browsers.
Thing is just that
[INAUDIBLE] would probably be
the one that would put me off.
So now I need to worry about
how do I support those browsers
because if CSS variables don't
work and I'm relying on them,
it's not going to work
too nicely for them.
And then if you take something
like fetch, it's even worse.
It's Firefox and Chrome that
has it, not the other ones.
So I still need a
solution for this stuff.
And normally this is the
reason why we go for tools,
we want that wide support.
But at the same time we
don't need it in the browser
we're developing them.
SAM SACCONE: But what I've
noticed about these charts,
and I think that's
interesting to take away
is that Chrome and Firefox
and these newer browsers
have support for these
features today, which
means that as a
developer working
on my website and my developer
workflow of 2016, title drop,
we can use these things.
In development mode, I'm
just using these primitives
and I don't have
any tools running.
MATT GAUNT: You don't
need to compile anything,
it's back to the notepad days.
So what I think you're
trying to say is this.
SAM SACCONE: Oh,
that's nice, right.
So a developer workflow should
always prioritize speed.
And what I mean by that
is I want that experience
that I had when I was eight.
Of editing a text file,
reloading my browser,
and it works.
It doesn't get any
faster than that.
And when I ship to my users, I
should prioritize correctness.
But what is correctness
really mean?
[INTERPOSING VOICES]
SAM SACCONE: And I would
argue that your user doesn't
care what framework
you are using,
your user doesn't care
what the underlying API is
and how they're
working, they care can I
order my falafel on
the website and get
it delivered to my house.
Does that work or
does it not work.
MATT GAUNT: Yeah, the thing that
I really liked about this slide
is Sam was able to do
the upside down question
mark without actually glimpsing,
he just kind of did it
from muscle memory.
SAM SACCONE: Well, it's
kind of my favorite symbol.
Because it's like the
non-committal question mark.
You don't know if the person
is going to talk back to you,
and you're like
how are you doing,
upside down question mark.
So if they don't reply,
you're totally OK.
But if they do, it's like
oh, that's provocative.
MATT GAUNT: You gave
me the weirdest look
when you said that.
I didn't like that.
But luckily we have
tools for this stuff.
So the idea of
rather than jumping
into these tools the
minute we're developing,
we can actually just do
it as a production step
to give us this correctness,
as Sam likes to put it.
So CSS variables, you can
use something like CSSnext.
And this is a super nice tool.
What it'll do is it'll
inline the CSS variable
value that you've
predefined, or you can even
make it do a
fallback where it'll
define first, the value
in just the normal value
or whatever you want, followed
by the CSS variable one.
So in the browsers
that support it,
it will just use the first
one and ignore whatever else.
And that way you can still
read the JavaScript thing.
SAM SACCONE: There's even
a postCSS transformer
they can layer on to give
us that mixin support.
MATT GAUNT: Yeah,
if you want to.
SAM SACCONE: Yeah, I mean
it's still experimental.
But it's cool that it exists.
MATT GAUNT: Yeah,
just as a thing
if you desperately need it.
So that's kind of cool.
So then we move
on to JavaScript,
so we've got Babel,
which is basically--
SAM SACCONE: Babel.
MATT GAUNT: Babel.
SAM SACCONE: No, no.
It's Babel.
MATT GAUNT: It's Babel.
Like seriously,
I've had discussions
with [INAUDIBLE] on
[INAUDIBLE] tips, it's Babel.
SAM SACCONE: No, no, no, no.
It is definitely Babel.
MATT GAUNT: It's Babel.
What are you going to do?
You going to call
the creator of Babel.
SAM SACCONE: Yeah.
One sec.
MATT GAUNT: Seriously, you
are doing this right now.
SAM SACCONE: Yeah.
Let me call Sebastian.
MATT GAUNT: You know
when you were saying,
no, you're humble bragging
about web starter kit.
You're doing the same right now.
Oh, I know Sebastian.
SAM SACCONE: See
if he'll pick up.
MATT GAUNT: See this is what
happens when you try and call
someone in London.
They just don't like you.
SAM SACCONE: Well,
you know, I just
need to switch my SIM
card over to work.
It's going to work.
MATT GAUNT: It's not.
You're really--
SAM SACCONE: Let's see.
There we go.
MATT GAUNT: What are you doing?
Are you actually doing it?
SAM SACCONE: Yeah,
hey Sebastian.
Hey, what's up.
OK.
He's on the phone.
So my friend, Matt and I,
were having this debate.
Is it babel or babel?
Yeah, yeah.
All right here, just.
I promise.
MATT GAUNT: It's not.
SAM SACCONE: Yeah.
MATT GAUNT: OK, it's
actually him on the phone.
Sadly, I thought you
were making it up.
SAM SACCONE: No,
no, it's really him.
MATT GAUNT: OK so I am
SAM SACCONE: All right.
Sorry, sidetrack.
I just needed to--
MATT GAUNT: Fine.
You have problems with Babel,
Babel, anyway, don't you, Sam.
SAM SACCONE: I do.
Oh, this is good.
You took a picture of my tweet.
MATT GAUNT: Yeah, I did.
It was a sage tweet.
SAM SACCONE: You even
replied, so sage.
MATT GAUNT: So sage.
SAM SACCONE: I like that.
OK, this is my issue
with Babel today.
We use these ES
2015 transformers,
and it takes all
your code that's
written using any of our
functions or whatever.
And it compiles it to
ES5, regardless of what
you're shipping to your users.
Like your users are
using imagine like only
Chrome in this
hypothetical world.
And we're still
compiling everything,
even though Chrome,
you don't need it.
And so what I like about
tools like autoprefixer
is that you can specify a
range that you want to support
for your CSS prefixes.
And then slowly, there are
less and less prefixes,
because all of the browsers
kind of standardize and things
get better.
So I want the same
thing for Babel.
MATT GAUNT: Yeah, so previously
you'd go like, I want Firefox
and I want to support
minus 2 versions
before the current stable one.
So then it looks
at the spec tables,
and it goes we've really got
features support for that.
So I'll stop fiddling with it.
So yeah, if you could
get this in Babel,
that would be pretty cool.
SAM SACCONE: Yeah,
and I was talking
to one of the guys
that works on Babel
and he said he's
working on it now.
So that's great.
MATT GAUNT: So then things
like fetch, JavaScript.
It has a polyfill
because it's JavaScript.
SAM SACCONE: OK, so
that means that I
can pull in this polyfill and
I can use fetch in my browser
on all my websites today.
MATT GAUNT: Yeah, so
this one's from GitHub,
it's super awesome.
He's done a ton of
different projects.
He's also someone who's wrote
this for a node module as well.
So I'm pretty much
using it everywhere now.
It's really nice.
And then web components.
SAM SACCONE: Yeah, just
like we just talked about.
This idea of web components--
these primitives on the web
that I can create,
that have life cycles
and know when they've been
attached and detached,
and I can run
JavaScript, and it's
all isolated and beautiful.
There's a polyfill and I can
use them today, everywhere.
MATT GAUNT: Yeah, just detect
whether it works and then
load it.
SAM SACCONE: Oh, well
that sounds really good.
MATT GAUNT: So ultimately
we're in this scenario where
we've got this
massive tool chain
and there's a certain
degree of tooling fatigue
where it's just like great,
the first thing I have to do
is install the latest stuff,
and then it kind of works.
And then if it
doesn't work, then I
need to go change
something, and then
the configuration is broken,
or something else has happened.
We want to change that, so--
SAM SACCONE: Instead
of building with tools,
and using all of these
tools to build our website.
And we ship all the tools
to our user, essentially.
What if we would write using
the primitives on the web,
and then what the users get
is just a slightly augmented
version of that depending on
what their browser supports.
So it's like our tools become
part of our deploy process,
but not part of our
development process.
And there's this
really interesting win
that happens when you do this.
If we write things using vanilla
JavaScript using web components
and things that the
platform has support for,
that means that when
I say, hey, Matt.
I have written the
best date picker ever.
And you're like oh, cool.
Totally rad, I'd love to
use that on the project.
I don't know why
you became Luigi.
MATT GAUNT: Yeah,
you went really--
SAM SACCONE: I wanted
you to be Luigi.
But you can just
pull it right in.
You don't have to
pull in my tool chain
for building this date picker.
Like with
[INTERPOSING VOICES]
MATT GAUNT: Yes, so Material
Design Lite is well,
it's Material Design,
built with Sass.
So the thing is, if you wanted
to take just the ripples
from the button, that's cool.
But suddenly you have
to take all the Sass
with that to just use that one
thing, which means if you're
using less or styling
for something else,
you've got two preprocesses
rather than one.
Whereas if it was
in CSS variables,
you could just take it as
is, drop it in your web page,
and you're done.
SAM SACCONE: OK, so we build
with the primitives on the web.
Your code becomes
portable across projects,
which is awesome.
You don't have to pull
in extra libraries.
And so then when we
ship to our users,
we add a slight tooling
tweak to polyfill support,
and that means everything works.
MATT GAUNT: So in a
kind of round about way,
you're saying
embrace the platform.
SAM SACCONE: I'm saying
embrace the platform, exactly.
So when we embrace the platform.
I think everyone wins.
The developers win, because
the developers no longer
have to worry about
their tool chains
during their
development workflow.
And the users,
actually eventually,
will get the most
optimal solution,
because they're getting
these primitives, which
are optimized at a browser
level not at a tooling level.
And so the users walk away
with a working website
and a website that probably
takes less bytes to function.
MATT GAUNT: Because you're
not morphing everything just
for the sake of it.
SAM SACCONE: Exactly.
MATT GAUNT: So thank you
everyone for listening.
SAM SACCONE: Thanks.
[APPLAUSE]
[MUSIC PLAYING]
