Sessions is temporarily moving to YouTube, check out all our new videos here.

Gatsby 1.0!

Gerald Bauer speaking at React Vienna in September, 2017
39Views
 
Great talks, fired to your inbox 👌
No junk, no spam, just great talks. Unsubscribe any time.

About this talk

Build Blazing Fast (Static) Websites with React (and Markdown, GraphQL, WordPress & Friends).


Transcript


[Host] Please welcome Gerald. Thanks, so that's 1.0, last year anybody was at the Gatsby talk? Fantastic, so how many sites did you build? Let's look back the history 10 years ago. Who are the big website builders 10 years ago? WordPress is the biggest, Drupal, Joomla in 2007. So why would you build a static website with just HTML? There's a great WordPress documentation page. Create a rough view it's just a short sample what goes on if you try to get a WordPress page. It's like magic what happens and the magic that it's fast but you can see there's lots going on. So today, that's who are the big website builders today in 2017, 10 years later. So, there's something called JavaScript Fatigue everyday a new static site builder. But I recommend use WordPress PHP, nothing changed. 10 years later WordPress, Drupal, Joomla. So in 10 years who is going to the big one WordPress is growing 28% of the internet are WordPress sites and they want more and more. But now the big question static website builders. Who are the big guys, or let's say, who are the small guys. So in 1999 DreamWeaver, Microsoft FrontPage, Netscape Composer but today, what are the big ones? And React is kind of big, so hello Gatsby. So let's get start with Gatsby by Kyle Matthews. To get started it's in JavaScript, it's a JavaScript library and it uses all the it's not passwords it uses all the great functionality. So it's using, Webpack, React, React Router, React Helmut, for example, React Helmut is from the National Football League, it's managing your HTML page head. So if you do type or you want to add scripts to the head of your page, it's the Helmet, GraphQL, Markdown and much more. But to instal it's very easy, so you just instal npm or with yard Gatsby command line. Then you get the Gatsby tool and you can ask what does it offer? Gatsby help it's very basic, it has a new option to scaffold a new project, start a project then it has the development server and moat important is to build your static website this Gatsby build and to test your build production is Gatsby server. So that's really all. To get started the Hello, React World! It's if you sat Gatsby new hello and then the hello world starter it's basically nothing else than just cloning the starter repo in GitHub so you can actually do the same. Git clone the starter. Hello world! And then you change the directory instal gatsby develop and your site is live and that's how easy to get started. The smallest Hello world! Gatsby website is really in version 1.0, you don't need anything. Of course you need your Hello world! page. In this case the page is the index.js page. It's everything using JavaScript of course. You don't need HTML it's inside your JavaScript. Then Hello React World! Which is functional style for a React component, that is the smallest real world Gatsby website. And that's how Hello world! Startup if you clone it. Then of course you need a package JSON to pull in the Gatsby machinery. You don't need the Gatsby link because we're not using a link here, but I added a Gatsby link. For if you add a link later because what because what is a web without a link. You need links. So you instal it, you run it, you build it. That how easy it is to get started with Gatsby. The big hero is Kyle Matthews. So, in August, basically last yer in the summer he started working full-time on Gatsby. Of course it's open source like who is going to tie. How is he going to make money? So, of course somebody hopefully is going to sponsor and for addition. But the Trivia Quiz question is how many npm package do you think does Kyle Matthews had posted on npm? So the question is does he have 100+, 200 packages published, 500, or more than a thousand. To give you context, the Vienna React Mafia Nik Graf has 49 packages, who has more? And then Max is 35, and Patrick's seven packages. So click for the answer, so there then, the slide show is also online. So if you see the link above, anyway. Anyway, the answer is more than a thousand. So, pretty amazing. Example site it's called Stay Static. So I built a Stay Static site it has a post pages, about page and a data file for the bookmark link. So I collect Stay Static collectors. They just build it. And I've build it like every month a new one, and after a couple of yeas I have a collection but it's online, Stay Static on GitHub and that's the website to look into. So there's real life example. Stay Static GitHub so that's the about page. A simple page and then there's a blog. So that's the blog posting and then next page and on the front page it has the data list with the bookmarks. So these are the bookmarks, a super simple site. Before, why would anyone use Gatsby? So last year the big selling point of Gatsby was Hot Reloading development mode with Webpack. So you have your editor open, you change anything you CSS, your HTML, you don't even have to touch your browser it automatically gets refreshed in your browser life if you have a big screen. So that will be online. And it works not only for React components it works for writing in Markdown, even your styles. and even your configuration and it didn't work in the old version of Gatsby if you added new files it didn't pick up new files so you had to had to restart the server. Gatsby new version it's also working with new files, without restart it automatically includes new files, it's magic. And the new selling point version 1. Gatsby didn't have a website on its own. For almost like 1 1/2 years, just two or three months ago Gatsby got its own website. So now the main selling points, modern web technology, React, Webpack and the GraphQL and so there's really and Progressive Web App and the important part is out of the box it's kind of like create React App you don't have to do anything, it's all set up ready to use. So if you create a new website, that's the file structure for this example. We have that blog post in Markdown. And then we have the about.js that's the page and then the index.js that's the front page. We have a layout, and then we generate the posts the blog posts, there's a template, post.js that gets read inside the index.js in the layout. We have the bookmarks in link.js and still version two that's the exercise to for taking home to use CSS and JavaScript and that's just plain, vanilla CSS styling. Then of course some components. But the thing is everything is a component of course. The about.js is a component and the footer, the header. So, to get started again, the about page. How easy it is, you just add about.js, the important part is not HTML about.js. Then the export default is your web component which is the page that get read into the layout. So if you use HTML, so this looks like HTML but you know what it is? It's GSX, so it's not HTML, but it's the React, create React. And of course writing HTML is even even if you do it writing it's too much of a hassel you just want the text, so Gatsby out of the box you can use Markdown, and if you use Markdown you can also use for your metadata for your titles, tags, categories, from meta. Because it's the metadata up front. It's called the YAML format but basically it's just key value pairs. And you can add your key value pairs and even nest the key value pairs. That's how easy it is to create your blog. And Gatsby Markdown Madness, there are hundreds of Markdown flavours so the current version is using Remark. Because Remark is kind of post-CSS, it gives you and abstract template stream and again it's plug-ins, you can plug-ins to tune the Markdown with new features. So there's the Gatsby Remark plug-in has it's own plug-in system so it's a plug-in in the plug-in system for the plug-in. And it had for example, code highlighting, mathematic equations, or important part is if you have images in your post, you get linkedover or responsive images, iFrames for videos for example. You can add videos in your Markdown and they get super nice formatted. So super easy, the bookmarks data file just use JavaScript instead of JSON. And how do you use it? It's just three bookmarks, it's all just React components. So this component is called LinkList and I give it the links, and it looks over the links and it builds HTML like the list you have seen on the front page, so there's no magic. The next are the loops in your templates. So the template language of course is React with JavaScript so if you do loops, if you want to loop over the blog posting, the news posting, so this component is called PostList so as a property you've got the posts and then I loop over the posts and I have the title and then here you see the Gatsby link, that's the routing because it's a single page application it catches if you click a link it caches a ink and then it doesn't fetch it from the server it already has the page built in as a bundle, so you use instead of a link back you use Link to. The link to is imported from the Gatsby link. So that's also taken care of. Under the hood basically is the React Router. So the next one you want includes. If you have your master template, so this is the layout master template. It has a header, then it has the main body, and it has a footer, and you can add more stuff. But how difficult is it? It's all React so if you want to include building blocks in your layout of course everything is a component, everything is React, so you just import the header and you import the footer and then the magic is you get standard React. You get the children and the children is the body that gets passed in, and this gives us, it might be the front page or it might be the news, the blog posting or other page. And let's look at the header and the footer. The footer is if you see spaced out example site is the link, so there's not really much magic. And this one, the header, it's using the metadata for the site title, so the site title is not hard coded but you can in your configuration you have like the site of the site type like the component gets the data passed in the data property and the data property has the metadata from your configuration and have a classic table layout, sorry, it's not flexbox or anything, but you see it has the link. Link to the about page, and just like textAlign: "right" with 100%, it seems to work, yeah, no worries. And the settings, so the settings, in everything is JavaScript so in version 1.0 the setting is in JavaScript too. You have seen the type of the website, so the site metadata type and you can add whatever author and so on and forth. And a nice feature, you have seen the link to. If I host, I host the page on GitHub and so it's not the top level, but it's staystatic.github and it's sites Gatsby GraphQL. So if I had the path prefix here every link too gets the path prefix. In the old version you had to add the path prefix helper yourself in every link. Now it's like the link to, the Gatsby the link to has it's built in you just add it here and that's how easy it is. That's the summary I have for like the card for all the static site builders. The important part is JavaScript, JavaScript, JavaScript and React, React. So if you do templates, like how do you do templates with Gatsby? You got templates are React component in layout. React component you includes are React components and you're setting are in JavaScript. Data files in JavaScript and CSS processing I dare you, you have to use, there are lots of options for CSS laid out in CSS-in-JS. The recommendation write in plain text, Markdown is supported. You might write in JavaScript too. To build Gatsby build, the thing is it's not the production build is not super fast like this one, six milliseconds but it takes like 10, 15, 20 seconds, so that whole build for the bundle, because the new Gatsby 1.0 and the old version you got one bundled JS, one file but the new Gatsby is internet scale so every page gets its own little bundle, so it's not one JavaScript bundle for the whole page for offline, but it has the feature that each page has its own tiny bundle. So, it builds at production and build I think with React you get like a whole but you can use a Preact to make it smaller. And that's how it looks like, it looks bad you have to scroll down to get to the real, the magic. So that's the real magic. That's the HTML pages to the about, index page, the post pages and this is the magic JavaScript bundles for the offline and for the magic loading single page function already. So you get the best of both worlds, so if Google is hitting your page and you want search engine optimization or whatever the HTML pages exist, but because it's React you can also hit any page and then you have to complete that site so it can load and cache and work offline. To push it live, then the hosting options Git push on GitHub pages, GitLab pages, Surge, go live with six keystrokes. So you have to enter s u r g e enter in your public folder and you are live. You might have to enter your credit card number in the command line, but yes. Google Firebase, there's a free tier. Netify is getting more popular. And many more, you know, it's just HTML, FTP upload works too. Or USB stick, send it by mail, yeah. What's missing, Gatsby gets many more goodies and the missing part about the new Gatsby is GraphQL. You can create any data source at build time and much more so GraphQL, anybody know, anybody using GraphQL? So it's another coming out of Facebook. So Facebook actually invented it. It started 10 years ago with Facebook Query Language if anybody knows Facebook, like the Facebook Query Language it's just SQL, you can query the select frames and some other efforts. But then the modern version of the Facebook Query Language is the Graph Query Language and it's by example you have to tell it what you want. You only get what you ask for so every field and then you get the JSON. So, GraphQL and how does it look like? So GraphQL is built into Gatsby at build time so you can query everything, and this is a query example. So I queried a site metadata and I want the type and that's the result, so you see it's query by example you tell it what you want and here type the actual result. But it also can be of course a loop. So Gatsby has many sources, one source in the file system so you just add the file system plug-in source. And then you can query your file system in this case I allFile, and I want the birthTme, prettySize, relativePath and then in this case I get the my pages. The index page and prettySize and that's the JSON. Now the missing part is GraphiQL, it's not a spelling mistake, anyone know what is Graphi? Graph interactive QL so GraphiQL it's the in-browser development environment for exploring GraphQL. It's built in React I think but it's an open source project from Facebook so they are already using it. But you just can add it to your application. And of course Gatsby is using in development so if you start Gatsby develop you get the whole thing loading Webpack, but not only the Webpack and everything you get the GraphiQL and that's how it looks like and an important part of GraphiQL it knows your database schema so it has full auto-completion. Anything you add in here it always tells you all the properties you can select and then here it's the live thing you can create. This particular example that's a from the index page from the sample I want all my use postings and I want the Markdown converted into HTML. So I can create all my Markdown pages and Remark was the engine that's why it's called allMarkdownRemark, so I get all pages and this gives us just three pages. The magic is if I add this is just index but in the other thing I want to post the story if I add, there's a property called HTML and you think like what do you get when you put in here HTML, and you get the HTML for Markdown document. That's how easy it is if you want to format the date you just have to add the format to your GraphQL. The magic part is it supports Drupal and others. But it also supports WordPress so you just instal gatsby-source-wordpress plug-in and then to query the WordPress posts postings for example, you just say allWordpressPost and here's a collection what you can get from WordPress and in this case it's using the WordPress REST API, it's not going to the database but you have to have WordPress REST API running, but I think it's now built in into WordPress. There are many others and you can mix and match so it's a whole role and now the important part is like if you remember GraphQL Facebook is using GraphQL's 10 years in production for their application. And something called, I think, Relay. So Relay is you fetch the data with GraphQL and then you Relay, it relays your data automatically into your React component. But in Gatsby there's GraphQL but how does the data get into your website? And the magic is, that's the index page so all you have to do is in Gatsby that component can use GraphQL query. To use it all you have to do is you have to export your query in the JavaScript module. So in this case all you do is export the query and that's the magic, you don't have to do more, and it's working. So if you have done it's co-located which means in the React component you put the query and of course you also export that component but the important part is the matchiness of the magically your component new property gets passed in the magic data. Property and the magic data property is the GraphQL query. So, it gets passed in and in this case if you remember I get the allMarkdownRemark.edges and then if I want to build up my blog posts all I have to do is post map a loop over my postings but you know, it's flexible you can loop over anything and pass in anything. That's the magic of GraphQL built in to and the important part is it's build time. So everything happens if you build. Once you have build your website there's no GraphQL. It's just HTML and CSS. So anybody using CSS in JS start using CSS in JavaScript so there's an out of the box CSS module is built into Gatsby you only have to do name your CSS file this .module .css, that's the magic convention. If you want to use style components, that's basically the dinner out of Vienna from Max to use it you just use Gatsby plug-in style component. The tip is to get started with the tutorials. So the tutorial actually has all the samples So it does a style component a Glamorous and CSS modules and many more. Or you can old school I haven't used yet so I just used a CSS. So, who is using this Gatsby thing? Of course there's only one user that's Kyle Matthews. His first blog is How I Build a Blog. With React.js. No, just kidding, that's his first blog, which wasn't in WordPress maybe. 10 or 15 or 10 year ago. And now it's like, of course his blog is an example for using React.js and Gatsby has a great example for if you have, okay, let's see the live site, Chris. And it's open source, but the nice thing is you have the text so if you have a blog and you have text maybe I'll find text somewhere. And it generates all the archive type pages, automatically. So that's also a feature of Gatsby you can build you have an hook create node and create page and then you don't have to create that page like on your file system. But you can create it in JavaScript on the fly. Yes, but Hive page and tag pages and so forth. Let's get this next example. Some other great real world examples, so this was a personal blog, it's great for blogging get started, and that's a Gatsby blog starter package. ReasonML, Reason is like the next version of JavaScript or a functional documentation site from Facebook, it's built in on Gatsby and it's also open source, so if you click on the link and it has a documentation. It's not just a single page but it has really table of contents, and the API, let's try the API. So this is all Gatsby. So I have the, if anybody, the link here on GitHub that's the source link. And there are many more, there is How to GraphQL. This is a great free tutorial for learning includes videos, for learning GraphQL. Of course, it's built with Gatsby and the great part about this, it a running tutorial website intact lot's of React magic. So these are some examples, and of course I encourage you to on Gatsby showcase on the your website, your next blog, and yeah, if anybody's interested to compare, Hugo, Jekyll, Middleman so they Stay Static on the GitHub has all those examples, so if I go to this Stay Static on GitHub it's super exciting. It's the 22 MFC but the important part is you know, every site looks the same. That's the goal so there's Metalsmith's Gatsby, Hugo and Prettyboarding because you know, they all look the same. Yeah, Static Site builders, so who are the big guys? If you measure in GitHub stars, so Gatsby is actually last year it was pretty new but now Gatsby is the second most popular JavaScript So the Hexo is popular in China, it's like a clone of Jekyll, then Hugo is the big one that is growing and Jekyll is thanks to GitHub is still the biggest one with GitHub 30 thousand. But Gatsby has like 12 thousand stars. To get started, I recommend if anyone the tutorial is fantastic on the Gatsby site. Four parts, so if you go to Gatsby tutorial and it has all the parts too, it already has the style component, CSS modules and the exciting part, part four GraphQL and that's it. So that's the last recommendation. If you think you don't want to get what I recommend if you build your own site with site builder there's no shame you know, there are lots don't use Gatsby build your own. It's easy and there are lot of examples of React website builders, Phenomic, I think that's serverless, is anybody using Phenomic website? - Is that CSS to code? - Yeah, I think that's a fantastic tool too. I think it's new feature GraphQL in Gatsby. I'm not sure if Phenomic has GraphQL because GraphQL was actually inspired by Leo. Superawesomelabs/leo so this tiny React.js static website builder has the GraphQL was the inspiration for Gatsby 1.0 and then there's Next.js version three, it has a static export and I think there are many more and thanks for and questions?