Kyle Mathews: Building Beautiful Websites with Gatsby | js.la September 2018

course speaking on Gatsby as probably figured so who's here has used Gatsby some passion are they okay do you sit number cool so jump in so I'm Kyle Matthews I founded projects you follow me on twitter you can follow god scream Twitter so Gatsby for those who have use it it's for building blazing fast modern apps and websites with react so you want react and you want a website in one app and you don't want to like configure what back and bevel for days weeks whatever then and so it gets me it's a lot faster hey that's it that's the whole time we'd all go home and you know can relax a little bit yeah so Gatsby's gotten really popular it's like something around 26 thousand stars over 1/2 million downs a month thousand plus contributors it's going to be quite the little community which is really fun react just at work some of you might have been there it's built on Gatsby it's got some site so my background I did Drupal that's where I cut my teeth in the programming world then I did a bunch of backbone j/s kind of early real-time JavaScript web app days sometimes and then 2014 I started doing react and I'm presumably gonna be doing it for a long time after it so I really like react and yeah so I started working I built a web app in 2014 and it was amazing it was just so much better it's like it was like I was driving my car and somebody handed me the keys to a spaceship or something like that and that's what it felt like going from backbone to react to it's just it's really transformational and I didn't to use anything else there and then Gatsby came about because I needed to build a website and just the idea of building anything for the web but then I wasn't using you know react components sounded painful and so I built the first version of Gatsby so that I could build at my my little site with react and the whole idea you know from the beginning was you know you statically render you know react to static HTML so you kind of build them you know and then you build a JavaScript version of it so you have kind of two persons in sight like a static HTML version and then JavaScript version and then you load the HTML first and then you you know pull in the minimal amount of JavaScript that's necessary to kind of bootstrap the the site in the clients and then it turns into a full react out and then from then on your website is now actually a single page react out so it's like loads HTML Lutz JavaScript and then turns into a react app but still feels like a website and you're cooking around but instead of like being slow like a website it's fast like an app it's kind of the idea yes so and it's cool because like if you're just doing like a simple site type thing you know that's like just content whatever it's fine and great and awesome because you can react but if you need to throw in some forms you throw in some like you know activity stuff you know it's just react so it's like trivial where some other system it's like you have to kind of push and react through the side or something or whatever but yeah if it's all react trying to get go it's very simple to add to kind of go from like simple static site to adding any sort of interactivity so yeah so it's also known as universal JavaScript you know you run the same JavaScript everywhere and it works everywhere you know you write all your templates in one format reacts and so the initial version of release of Gatsby was May 21st 2015 so three and a half years ago for those who don't want to do math anyways and the initial use of Gatsby was pretty simple like it was like kind of like normal static site generators you know Jekyll Hugo heck so but for react that was kind of the intention and I rebuilt my blog and a little startup company website and you know the DX was really good and sacraments was amazing so I was pretty happy and then people started using it and so when people use something that you you make they they are never happy it's like that story of like the camel but stuck his head in the you know and then there's like a sip it was like a sandstorm camel stuck his nose in the tent instead of like hitting that nose and making him stay outside in the sandstorm they let him in and pretty soon you know it just that wasn't really woven but it's kind of like you know it's like you start you start feeding people something and they just want more features anyways so people are like hey I want to like use this with the stuff so initial versions like markdown so they're like hey what about like CMS's what about themes what about code and data splitting you know so that you know we could handle larger sites and what I gradually realized is that you know people saw potential in Gatsby for something much more than just like a simple little static site generator they wanted to use it as you know I now call like a presentation layer for their CMS so not just you know normal old sex I didn't and this got really excited because as I mentioned earlier my tech background as I started in Drupal and I did a lot of kind of heavy content complex content you know kind of sites and I realized that Gatsby could turn into something that saw a problem similar to Gatsby but using kind of all this modern engineering practices that you get with with Gatsby so a theory section so if you look at a traditional monolithic CMS you have kind of these two layers that are coupled together you have the presentation layer in the content backends the content backends where you're you know setting up your content models you're like there's like permissioning there's like admin screens for edit you know creating our editing content you know a whole bunch of different stuff and the presentation layer is like PHP templates or net or whatever you're using that it takes the content and then Jenna society it also includes like how you run the site and whatever and what we think was a CMS normally is that kind of all those things together and yeah so the trend kind of the last five years though is to kind of decouple the CMS where the CMS the content management part is now just fronted by an API and then you have some other system which is then pulling data and then presenting it you know to the web which is great because you know it allows you a lot more flexibility in how you build the site you can also use it like a multimodal kind of way where you can have like a native app you know which is like pulling in content as well as like your website and stuff like that so there's a lot of a really strong pushes towards this model and yeah and that's what people were like saying is like hey Gatsby is like this really sweet development environment it creates really fast sites I love being able to use react for websites but I need some way to like pull on the data from these CMS's so the question was like how do I connect gatsby to the headless CMS you know how to bridge that gap between your components and then the content wherever it may be and the solution I came up with is what you know called source plugins and graph QL and so so now you have the same two layers but in the middle you have this like build time graph QL layer that pulls in content using graphical queries and then kind of at Build time you know bakes it into the site so that you know the all of us all the content your entire site is kind of available statically and you can deploy it to a web server and it all you know runs really fast and that way I released in v1 was you know so v1 was support for sourcing remote data we've got girl came out last year and so now you can just install a source plugin for wherever your data is coming from and that's just on NPM and then using that your react components are glued to data for you haven't seen us so you can query your data from your react component so I do stuff like this where you have a normal reactant at the top and then down below you have a graph cure query which is grabbing like the HTML and the title and then putting it into the component and so now like the community has been really busy like building out source plugins for you know all sorts of different services and CMS's and so you know for all there's probably like 100 plus now I haven't counted in a while but some it's definitely over hundred you know in almost anything you can imagine just all plug-in and then you can use it to build a site with so including it so source plugins there's other plugins as well there's up to 466 capsu plugins so yeah so the goal of gatsby is your kind of reiterate is create a great developer experience you kind of like you know batteries included sort of thing you don't have to set up web pack you don't have to set a Babel you're building a react website or web app it's just everything's gonna take care of you just install it and then you just you know drop in your react components and you start building you need data from some external source you drop in a plug-in for that you start writing graphical queries and it all just sort of works and then we also then of course you know take that great developer experience in that on like a really really fast site builds that you know make sure that your sites are as fast as as I can possibly be so yeah so there's been really strong community growth for the last year so gay hub stars have been going up which is a proxy for something anyways so yeah so 11,000 or not 11,000 every nice eleven hundred and thirty nine total contributors we're getting some around 85 PRS per week which is a lot if you watch the repo it's a kind of a floodgate I like reading tweets about got see Charlotte Dan she said I made this website got to Jason till in love with it reacts set aside Jenner's are the future really loving Gatsby's tutorials and documentation seems like the perfect balance of depth in getting started quickly yeah we spend a lot of time on our tutorial and ducks my word got to be jeaious is impressive the sort of thing that's so well done you want to make up reasons to use it however preposterous it's a good word everyone say that and then bloody hell that loads fast that's fun and then who your users lighthouse on it or stuff everyone showed is built into chrome now it's super cool well it might not make you feel cool depending on your your site but so it's a performance audit tool from Google and you can like just point it at your site and then click run audit and then I'll tell you you know how bad or how good you are doing I guess it's really it's very affirming um anyways yes so we actually really love it and the Google Chrome team that works on this are awesome and anyway so we it's actually really helpful for you know we're gonna Gatsby because we can just like run audits on you know sites that gets reproduced and then figure out how to make things faster and so so to the point that you know a Gatsby site out of the box is you know basically perfect as far as White House is concerned so yeah so it's really fun to see you know all the sites of people with gatsby people use gatsby for docs for apps for blogs marketing sites e-commerce so here's just some sites that launched in the last once somebody running for governor in Colorado I hope he's doing well designed systems calm some of this from figma it's cool site so Nike they launched their just do a campaign relaunched it recently Legaspi which was very fun to see and then yeah edge DB it's a yeah new database and works this is an e-commerce store they sell sprinklers huh so if you want gatsby powered spring clothes you can coats and bucks a really cool tool you can like they actually just today they launched support for well if you don't know if they are there online code editor but they just launched support for Gatsby actually so now you can like go to code sandbox and say I want to like play with Gatsby and then use Gatsby in the cloud which is really really nifty then yeah tinder made of sites stitch fix calms and Gatsby yeah so yeah lots of cool sites we're also now a company so me and my best friend we started a company and raised money and hired some people so kind of you know make just feel like make more investment into Gatsby and to yeah just make the whole thing sustainable and what's better than would be without you know a actual business model yeah so how to get started Gatsby so there's a command-line tool you install it and then you just type Gatsby new and then the name of your site and then installs a bunch of things and then you have a kind of like a Foley you set up got to be thing and so you're right guess we develop and it'll set up hot reloading development I'll do a little demo later yes you do dope for a development environment was hot reloading all that jazz and then you type build to actually like produce your site which then you could do boy and then Gatsby serve starts a little local you know web server so you can like preview of the site before you launch it and we have a pretty comprehensive getting started tutorial that's aimed at we've like done a lot of like kind of user testing with people new to programming so we've actually there's a lot of tricky words as it turns out that need explaining for people who are you would program anyway so yeah we it's it's really great a lot of people use it a lot and I truly fund to see that yeah here's I'm not gonna try to pronounce his name so I'm following the lab fugacities tutorial so beginner-friendly recent news last week we launched gap TV 2 which was a long time in coming and super excited to get out this is a we had a little get-together so we're actually distributed team we have people Asia US Europe and but we get together sit like once a quarter so so this is us in Portland working on the v2 release it's fun yeah so so what's in b2 we did some upgrades to major dependencies so we went from web pack 1 to 4 react 15 to 16 Babel 6 to 7 and we did a lot of kind of optimizations around kind of the Gatsby's default and you know runtime so now we drop that down to 53 kilobytes and then we did some improvements to the development in virus is a we call ludicrous mode so this is like a editor set up to every keystroke to save let me run it again so it's kind of like a it was very fast now to update when you make changes okay then also we did a lot of optimizations around improving like builds beats so we have like a very simple benchmark site that is kind of like minimal of everything except so it's just like just kind of like a just testing how fast Gatsby can do very simple things basically say hey so we did a hundred thousand page site in 75 seconds which is not bad I say I say it's a benchmark site just to be clear your site as ten thousand pages not gonna be that fast but if you only have like a single letter on each page then he'll build in five seconds anyways um we also we we care about accessibility and so we must spend much a time switching to a new router so reach router is you knew read it from Ryan foreign to also I was kind of like the co-creator of react router if you're in the react ecosystem you know that is and he wrote it because it kind of like fixes accessibility like for screen screen readers blind screws for single page apps that kind of react apps and we switched to it and it's kind of been a big win not just for accessibility it's it's a much smaller package we saved like 10 kilobytes or something from doing that also has like simplified writing advisors I kind of prefer the new version actually wanted to open him he has a little video talking about how it works it's also real quick change this hey I don't think you're gonna be here at the SS right here so we can see no you're not gonna be here as focus well everybody it's not that important anyways go seek it out it tell us it kind of explains how it works yeah we also added a site showcase I'll just show it sensual eye so it's cool you can see the whole bunch of Gatsby sites here that you can look at you can also sort by category so if you're like what are the documentation site is built with Gatsby and then voila here they are that's her thing we also worked with some folks at Google on a project called guess GS this is a basically allows you to use your analytics data to create like a model of how people go through your site so if they're like if you're on page X which links are they likely to click on and then we can use that information to drive like the prefetching of information so like because you know gatsby so we load a site here we're actually prefetching behind the scenes the data for these things up here so you click on tutorial there's like no delay because you know the data is already there and we do it we kind of like a naive heuristic for how we do that but guest is actually lets us use like real information because a lot of sites have a lot of pages that you know despite how hard anyone worked on nobody ever visits so know it no offense to whoever works um they're not visiting anyways but yeah so you know you just like don't don't don't don't you know make people download those they don't have to so that's really cool feature to that we're all excited to bounce so react so people yeah so people VT has been really smooth and a lot of people are upgrading like the react jst org is already on gotta be - yeah so we'll jump into a quick demo sure okay a little split screen so so this is a Gatsby starter blog Gatsby has this concept of starters that you know you can like it's just like a get repo and then you can like do Gatsby new whatever and you'll just pull straight from there and start it so it's kind of like a boilerplate thing for you know different use cases so this is like got to start a blog for doing simple bot and so if you just run got to be develop then it starts up the development server and then yeah and then you know localhost:8080 and cull and then you know this is it's like a fully functional version of your site except it also has hot reloading so here we're on the component for this page here so this is like source though the coats coats probably pretty small huh only yeah so this is source pages indexed Jaso any component in the pages directory gets automatically turned into a page on your site so if we go to so this bio components if we copy that and save it then we have not two of them see it again your three of them and then yeah stuff like that you can add new one like hi Oh a just that if you want to add like you know some styles you could say color what's an L a car dr. Balu hey hey basil what teeth I'm just gonna do both sigh I can't okay so yeah so yeah blue we have pink we have to me I really like tomato Tomatoes my favorite one of all the built-in powers I think something I can't a Candice Oh docker blue Oh Dodger oh sorry I don't die sorry Dodgers blue I don't know what this is Oh okay sorry I'm just we got to do this now okay weights it's built into the browser no no hey how did you get your out wait who did wait who do who did you pay off to get that done I have it Wow okay I just that's amazing okay it's okay so we'll just we'll just leave that there that's that's really cool I that's really yeah no idea why not the Giants have their own color like this skills no he knows it's just it's just I mean I mean I anyways I'll think about this later okay so so so it's all so cool - it's like the queries all hot roads if you change the query then the data changes so you know you we have this date we're clearing the date which then shows up over here but we also have this like format string so you can like format the string of the date in your query which is cool it's like what if we you know change that to that and then what happened okay it goes just to go out yeah then we change it back and then you know kind of like flips back and forth yeah so this is all cool because you know most of building a site is just like trying stuff because you kind of have like even if you're given like you know quote-unquote pixel perfect specs you know it's not ever actually doesn't actually ever describe everything there's still a lot of like you know fiddling I guess you'd call it you just fiddle around with things until it feels right and so having everything set up and have everything being very responsive means that you're fiddling you're fiddling cycles you fiddle faster if you will be a fast fiddler yeah and so yeah and so that's most cats because cats just intended to make developer Spence really nice which is largely around smoothing out everything so that you just kind of can move very very quickly and when you try to do stuff it's also cool because so yeah and another another thing just one more thing I'll show up we can like if you know a big part to building our site just adding pages so you can another page page this is the built in link components so you save that and then we click on it and this says whoa there's no I paid you up there it was just not because I just made that so but what we can do is we can just add it and then we do import react from react export diva oh yo you see that no I misspelled it huh about page well we'll just go where I actually made it okay there we go okay as you can see you can add pages new pages really quickly Jim so that's the demo and yeah track I was awesome I think we have a few minutes if we have some questions I'm kind of pushing it but maybe is there any any big questions on any of this stuff yeah this is this stuff's amazing like your what what how'd you get here from the future it's it's actually Gatsby Gatsby in the future gets some time traveling yeah yeah yeah yeah you don't get just an NPM so everyone has it but oh okay yeah sure yeah sweet yeah was it was there any there's a question back there what's up I'm forgetting already yeah so first question was like is there using Apollo or anything else it's just using the the actual graph QL JSU no package which you know actually has all the graphical tween Paul is great I love appalled but this is just like it's our own kind of special thing so use grep gill but it's not really tied to any other higher-level graphical system server rendering we don't use next like next is a completely different system but both necks and Gatsby I mean we just do I get built-in to react just like render to string and so you pass in a react component and just spits out an HTML string so it's actually you know if I showed you the code that got three uses for you know server rendering it's very simple well it's actually not it's kind of simple well the line that renders is actually gross it's it's in between simple and very complex and so the third question was I forget what their question oh yeah plug-in system like WordPress yeah I mean that's kind of the idea though I mean WordPress plugins are WordPress plugins have too much freedom so sometimes they cause ruckuses so gatsby plugins we try to be a little more constrained so that you know they're like so generally speaking guess what plugins are much more it's pretty safe to use because they they're pretty constraining what they can do but the overall and the overall intent is similar in which is plugins are nice because it allows the community to develop solutions beyond what the core does and so you know the scope of what you know a tool can do can grow beyond what is capable for like one team that's maintaining core to kind of handle and I think that's really important because you know websites particularly or just there's gazillion different use cases and so it's nice to have a plug-in system to go to cover all those use cases and not try to because if you don't plug-in system it turns into this like battle like does the core get bigger as of course a small and everyone has to write the same thing over and over again in their own projects and so plugins kind of break that dilemma allowing the core to stay small in focus but still covering a breadth of use cases and it works as long as the plug-in system doesn't suck so that's our goal to make it no I'm sorry very cool sounds good give it up for Kyle - excellent ah thank you very much I come into town have a good night you

Channel: js.la

Views: 22,384

Rating: 4.9531617 out of 5

Keywords: js.la, jsla, js, los angles, la, javascript, reactjs, gatsbyjs

Id: U6SWCTrPtn8

Length: 28min 35sec (1715 seconds)

Published: Wed Nov 14 2018