Gatsby FAQs – Kyle Mathews Keynote – Gatsby Days London 2019

Gatsby FAQs – Kyle Mathews Keynote – Gatsby Days London 2019


Speaker 1: (silence) Is this on? Hello? Hello. Okay. It’s on now. Okay. Sweet. Hey everyone. Really excited to be here. Let’s get this going again. So, this is fun. There’s a lot of people here. This is our third Gatsby Days, and it’s doubled
each time. Speaker 1: So, a few more iterations, and
we’ll fill the whole world. It’ll be big stadiums, all that sorts of stuff. I think that’s how the math works. Anyways. Who actually here has been to a previous Gatsby
Days? Do we have any repeaters? I mean, other than Gatsby employees. Oh, one in the back. Sweet. Awesome. Speaker 1: And a few other quick questions. Yeah. Just kind of like a survey of the crowd. Who here considers themselves a pretty experienced
Gatsby user? You’ve built multiple sites? Okay. So, a third. Who’s here working on their first sites and
feeling confident, but got still some stuff to learn? Okay. About a third again. Speaker 1: Okay. So, this is nice, even distribution. And I guess the last question is who’s here
like a rank beginner, has no idea what they’re doing, and they’re just like, “What’s this
Gatsby thing? Sounds cool.” Okay. Sweet. Okay. Speaker 1: So, we’ll hopefully have a mixture
of talks and presentations, whatever on … They’ll meet all of your different needs. Mine’s more intermediate-ish, but hopefully
I won’t lose everybody or anybody. Too many people. Okay. Cool. I’m going to switch my slides. Speaker 1: Okay. So, I don’t repeating talks too much, and
so, I always try to think of new angles. And so, I was thinking for this talk I would
try FAQ style where I just kind of answer common questions about different parts of
Gatsby. So, jump in first is what is Gatsby? And this is actually a surprisingly hard thing
to answer. I mean, I’ve tried to explain Gatsby a ton
of times. I see people asking all the time on Twitter
or elsewhere. Speaker 1: It’s like, “What is this Gatsby
thing? Could someone actually explain what’s going
on here?” And yeah. And we have an official answer, which is Gatsby
is a free and open source framework based on React, that helps developers build blazing
fast websites and apps. But I mean, it’s pretty vague. It’s like, “What’s a framework anyways?” Speaker 1: A framework could be anything. And so, I came up with some analogies of things
like other products, tools were sort of like. So, it’s Create React app in the sense that
Gatsby’s a pre-configured tool chain for building React apps. It’s kind of like Next.js, and it’s that it’s
a React web framework. You can build pre-rendered React apps. It’s really good for SEO and kind of speed. Speaker 1: It’s kind of like static site generators
like Jekyll Hugo, in that you build your site and then you deploy static files to the CDN. It’s kind of like WordPress and Drupal, in
that it’s an open source tool. Many people primarily use it to build web
properties on the website side of the spectrum. It generates PWA. So, it’s not really other PWA frameworks. Speaker 1: But if there was one, I guess there’s
a few. But anyways, so it’s kind of like those. You could also compare it to an operating
system, and that Gatsby doesn’t do much per se itself, but it coordinates plugins and
services to kind of all work together in concert. Speaker 1: It’s kind of like a compiler in
that it takes your code, and produces an optimized journal version of it. In this case, a website. But anyways, it’s not like any of those. Gatsby is really is a new thing. I mean, it shares elements with lots of other
systems, but it is a genuinely new thing, and it’s pretty low level, and you can use
it in a bunch of different ways. Speaker 1: So, it’s really kind of whatever,
that inkblot test thing. You can look at it and- Speaker 2: Warshot test. Speaker 1: Warshot test. Thank you. So, yeah. You can look at it and you kind of see what
you want to see. And the reason that it’s new is just because
the world is changing as it tends to. And so, over the last five, 10 years, how
we build websites is changing. Speaker 1: The fundamental architecture of
the internet was like the lamp stack. Kind of Linux, PHP, Apache, et cetera. But now, it’s moving towards kind of a cloud
serverless model. And because of that, Gatsby was designed to
kind of accommodate that shift. And because of that, it’s a fundamentally
new architecture. Speaker 1: One way we described the shift
is that we’re moving from the CMS to the content mesh, and CMS is our kind of one of the predominant
lamp stack era applications, architectures. They were invented in the ’90s, and now the
CMS is migrating to become a specialized modular services, which then Gatsby can pull in and
create sites from. So, this is my beautiful drawing I made. Speaker 1: I put a lot of TLC on this. Anyway. So, on the left side, you kind of have the
old world. On the right side, we got the new world. And there’s a front end and the back end,
and CMS is like monoliths that they kind of owned the entire vertical stack. But in the new world, CMSs are now just on
the backend. They’re like a managed content service that
you can pull stuff from, and a single Gatsby instance can pull from multiples of those. Speaker 1: So, Gatsby is the presentation
layer for the this new architecture, and then Gatsby is plugin layer, then connects out
to any number of these content source. And so, Gatsby does three things basically. It aggregates data from multiple sources,
which is the content mesh, and then it provides a dev environment that kind of makes sense
all this, and allows you to be productive and get stuff done. And then it prepares your site for deployment. Speaker 1: Okay. Next question. What does Gatsby not? Gatsby is not really a static site generator. So, in the earlier analogies I was like, “It’s
like a static site generator,” but it’s pretty different in significant ways. And we actually ourselves often compare Gatsby
to a static site generator because it’s helpful comparison. Speaker 1: But if you kind of take the comparison
literally, it leads to a lot of confusion. We frequently see or hear people saying that
like, “Oh, Gatsby doesn’t produce a React app. You have to do something special on top of
it or whatever. It just produce a static HTML and CSS.” Speaker 1: And I’m like, “Well, no. Actually, Gatsby is just a React app generator,
but we just pre-render each page to static HTML, so it looks faster, whatever.” But it’s just in an React app, and a lot of
people don’t get that because they’re thinking in terms of Jekyll Hugo, which are very different. Speaker 1: Those sort of tools, they just
take mark down and convert it to HTML, and that’s about … Well, I don’t know. I mean, they do other stuff. But anyways, that’s the essence of what they
do where you can build that on top of Gatsby, that same sort of flow. But that’s not what Gatsby is. Speaker 1: Gatsby is much of a lower level. So, it’s much more flexible, extendable and
so on. So, yeah. It’s not a static site generator. Okay. Who is Gatsby for? That’s a good question. Gatsby is a professional grade web development
tool. So, generally speaking, it’s … Oh. It’s good on my end. It works on my machine. Speaker 3: There it is. Speaker 1: Okay. There we go. Okay. So, generally for people who are professional
web developers, and the reason is that I kind of designed to build Gatsby, so that I can
use it myself, and I’ve been a professional web developer for a long time. And so, Gatsby is not meant to be like an
easy tool to pick up, but it’s meant to be simple if you’re familiar with kind of the
rich hickey sense of those. Speaker 1: And so, the goal is to be a professional
grade tool that kind of helps you build the best sites possible, and kind of avoid a lot
of incidental complexity on the way, so that you as a professional can deliver amazing
sites on time, on budget, that sort of thing. We do work extremely hard to make Gatsby approachable
to new developers. We have a full-time learning team, we have
1000 plus … Actually, I don’t know if there’s that many. Speaker 1: 1000 plus. Equivalent like 1000 plus pages of documentation
now at GatsbyJS.org. So, we work extremely hard to make it approachable
and usable, but Gatsby does take some work to muster. Again, given it’s a professional grade tool. So, who’s Gatsby for eventually? Speaker 1: So, right now, Gatsby is essentially
for developers. But our goal isn’t to help developers per
se. Our goal is to help amazing websites be created,
which of course enabling developers to do that is a big part of that. And this matters because the world runs on
websites. More and more essential services that everyone
relies on our websites, web apps, and we want to help with that. Speaker 1: And so, kind of how we think about
it is we get that … Yeah. So, developers are the key part of building
websites, but the actual process of building some sort of web property is an incredible
cross-functional job for an organization to take on as everyone has some play in building
the website. So, there’s developers of course, there’s
designers, project managers, product managers, marketers, content authors, whole bunch of
different, various business stakeholders that get involved for different parts. Speaker 1: And that of course, leads to the
joyful confusion that often results when you’re trying to build stuff is that everybody has
a say on what the front page should be or how different functionalities should work. And so, a lot of what we do is just we’re
thinking really hard about how we can help everyone working on websites. Not just developers. Speaker 1: So, we have lots of plans, but
a few examples. So, our first cloud service CMS preview, Gatsby
preview, it shows content authors immediate feedback when they changed content. And this is a very important common workflow. So, we have a number of customers now using
it, and what they tell us is that without preview, the non-technical people who are
editing content, they couldn’t kind of own changes because they would change things,
but not see how they worked. Speaker 1: So, they wanted to have a front
end developer get involved to kind of give them confidence that they were not breaking
stuff. But once they had immediate feedback, then
they could own it. Like that kind of workflow of if I changed
something, I see what it’s going to look, let’s restore it. Speaker 1: Another example is Gatsby themes
Theme UI. Theme UI is a kind of a design system library
that’s some of our team is working on, and the goal of this is that designers and other
kind of non-developers can build Gatsby sites without writing any code, which would be huge. So, improving developer workflows is just
the start of what we’re trying to accomplish. Speaker 1: Okay. Gatsby. What is Gatsby? So, different ways of looking at that are
Delaware C. Clark. It’s boring. Anyways, venture back startup raise money. We fund development of Gatsby Core. Many of the critical plugins in the ecosystem,
docs, Victoria’s example, websites, et cetera. And were also kind of governing the ecosystem,
and we’re also building key cloud services that people building Gatsby sites need. Speaker 1: So, what do we not … I do get
asked this a lot. It’s like, “Are you going to build sites for
people?” And I’m like, “No, we’re not. That’s y’alls job. We’re just here to help out with that. Provide drills and so forth.” Speaker 1: Okay. So, another common question is why is there
even a Gatsby company? What’s the reason behind that? So, one kind of big answer to that is that
it’s really hard to create open source tools, and yeah, it just takes a lot of people spending
a lot of time to bring any open source project. But in Gatsby’s case, it’s like, “We’ve been
working years on this now.” Speaker 1: And if you look at any large open
source project, they all have full-time people working on it. So, there’s somebody who’s paying their salary
for them to spend all day, every day working on the project. So, WordPress, Drupal get et cetera, et cetera. I’ll have teams of people working on these
projects. Speaker 1: So, several years ago when I was
first just imagining what Gatsby could be, it was really clear to me that this was not
a part-time project. This was very much lots and lots of people
working for a very long time to kind of build everything out. Hundreds of millions of dollars in investment. And you don’t just kind of pull $100 million
out of out of that, generally speaking. If you did, keep the hat. I don’t know. Keep pulling. Speaker 1: Anyways. So, yeah, so that sort of investment needs
a strong business model to actually work. So, basically the only way to get access to
that sort of money is to have a company around that that kind of makes sense to invest that
much in the open source project. So, basically, the goal with Gatsby Inc. is
that we create a virtual cycle between open source, and kind of the commercial side of
things. Where Gatsby Inc. has an incentive to invest
in making Gatsby better, and as we make Gatsby better, more people use Gatsby. Speaker 1: And as more people use Gatsby,
there’s more demand for kind of commercial services that we’re creating. And then as we make more revenue, we invest
that into Gatsby, and then kind of the cycle continues. And because such a huge shift is happening
in how we build on the web, this is a really large opportunity. There’s a very real chance that Gatsby can
be a very large portion of the web, kind of WordPress size with millions of users, tens
of thousands of customers in lots, and lots of revenue. Speaker 1: So, if we succeed at that, then
the opensource will also have tons and tons of investment, and both the OSS and commercial
efforts we’ll grow together. So, I mean, kind of example of this is coming
to London was kind of a fun/nostalgic because a year ago, there was just three of us who
were working on Gatsby OSS full-time, and we all got together here in London as one
of the team members. Speaker 1: Mike Johnson lives here. And we sat for a week in a not air conditioned
Airbnb, just just coding away. And anyways, it was great because we did 126
PRs in that week, and we made a lot of a lot of progress on V2. But yeah, there’s three of us at the time,
but in the year since then with the new funding that we’ve got and so forth, we were able
to hire quite a few more people. And so, now our velocity and our ability to
do things, and improve things has grown significantly. Speaker 1: Yeah. To the tune of $3 million or so. Yeah. Cool. So, that’s the end of the FAQ section. So, I was thinking now just, yeah, just kind
of go over some awesome things that are happening. So, one is we’ve been working on accessibility. So, Marcy, who’s speaking a bit later, she’s
done a lot of research around how Gatsby works with different screen readers, and found some
areas that we can invest in that. Speaker 1: And so, we made it a priority to
hire a new core member to work on focusing on improving accessibility within Gatsby. Is Madeline here today? Speaker 3: Not yet. No. Speaker 1: Not yet? Okay. Unfortunately, she’s not here today. She can’t make it today. I’ve been working a lot on improving the Graph
QL layer. So, kind of the core data layer of Gatsby
is what kind of pulls in data, crates a graphical schema, and exposes it to your components
and so forth. Speaker 1: There’s a lot of really interesting
challenges and opportunities in that kind of subsystem of Gatsby. And so, yeah, just a few things. Better supporting abstract interfaces. And so, this enables Gatsby themes to kind
of support multiple backends. We have a lot more work to do there, but that’s
really promising. Speaker 1: Materializations, spelled the British
way. Anyways. So, this is a huge refactor of the data layer
that McKellen Novikov was working on, and it has some nice speed benefits. But the larger long kind of longterm benefit
is that this will allow us to have kind of different backends for storing the data, one
of which will help a lot with larger sites is that we can build a SQL light adapter,
which will mean that it’ll be much more scalable than the existing kind of in memory databases. Speaker 1: We also added the ability to snapshot
your Gatsby schema. So, if you’re having a site that keeps changing
the schema or type of different fields, you can now have a snapshot and then kind of fix
it, so that it doesn’t change over time. So, David is one of our two native Londoners. He’s been doing a lot of work on the offline
plugin and released a V3 of that, which she has a nice improvements. Ward has been doing a lot of work on Gatsby
Web Pack config around kind of the JavaScript bundling. So, it has some nice optimizations there. Speaker 1: We added automatic dependency updates
using Renovate. So, for a few weeks, we had a swarm of kind
of PRs updating all of our dependencies, which was fun to watch as long as she could ignore
the emails. Anyways. But the upside though is now whenever one
of our mini upstreams changes, Gatsby quickly gets an update about that, and we can test
the things, keep working and so forth. Speaker 1: So, we’re always using the latest
version of stuff with bug fixes, and security fixes and so forth. And we know that everything keeps working
because oftentimes, Gatsby has hundreds of kind of upstream dependencies, and sometimes
Gatsby can break of one of those changes and does something unpredictable. And so, now we have kind of a very early alert
that something breaks before one of you installed Gatsby, and writes an issue saying that everything
broke. Speaker 1: Also, this is really exciting is
that we started to now work on localizing the Gatsby documentation. So, Nat, who just finished this with the React
docs is now helping out for a few months on that. So, we added Graph QL, we added a new code
exporter. Actually, wasn’t this working? Speaker 1: So, this is a new code exporter. So, you can be in Graph QL writing a component,
and then you click code exporter, and then you get the code that then you can copy right
into source pages to create the page. And we have a lot of … I think there’s a
ton of really interesting possibilities here of kind of sinking the queries back and forth
between your site. Speaker 1: So, imagine if you could just go
here and just say, “I want to edit the query for this page.” And then it just pops up, and you can do it,
and then it would sync back to the file system. So, a lot of cool stuff you can do there. So, Gatsby Image, a really popular part of
Gatsby. It has all nice features. Speaker 1: We added native lazy image loading
support, as Chrome just shipped that recently. And so, this is the nice thing. Kind of the nice thing about React components
in general is that we can automatically add support for kind of native browser features
as they should. We launched Gatsby Themes in early July, and
in July we also had a Theme Jam where hundreds of people submitted Gatsby themes. Speaker 1: And so, these are a few of the
top ones later today. Actually, Allen from Little and Big, he’s
going to give a talk about the theme that they created. Yeah. In general, we’re seeing tons and tons of
activity, which is really exciting to see. So, both from everyone all around the ecosystem. So, this is the last month we’ve had almost
400 merge pull requests, which is pretty insane. Speaker 1: So, this is our total count now. It’s getting into weirdly big numbers. And yeah. And then some personal news, Gatsby Preview
is now in open beta. So, if any of you haven’t tried that, you
can go to GatsbyJS.com and try it out. Speaker 1: So, if you see here, we have a
14 day trial. So, we’re actually releasing a new pricing
structure where we’ll have a free tier that’s forever free, and this will be for our kind
of personal hobby sites. And then past there will be kind of usage
based pricing. We’ll have more news about that soon. And then also, we’re getting close to a closed
beta for a new build service, which will include incremental builds. Kind of a long awaited feature. Speaker 1: Anyways. And it’s in alpha. We’ve been doing some tests with people, and
working super hard on that. And yeah. And so, everyone here will get early access. We’ll be emailing you at some point in the
coming weeks to sign up and give it a go. And that’s my talk. Use Gatsby. It’s cool. (silence).

Comments

  1. Post
    Author
    Monish Kumar

    Splendid, I Liked it a lot, See this New Album 'Monish Jasbird – Death Blow', channel link www.youtube.com/channel/UCv_x5rlxirO-WKjLIyk6okQ?sub_confirmation=1 , you might like 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *