Decoupled Drupal + Gatsby

[Music] so I'm here to talk about Gatsby which is cool and yeah sure so my name is Kat Matthews and I'm the founder of the open source project and yeah follow me if all got to be on Twitter if you do that sort of thing so what does Gatsby we call ourselves a blazing fast accent Jennifer react or that form simple where we're at you know react for websites our websites react yeah so gets these grown up a lot it's about three it's a bit over three years old and got a lot of stars gundog downloads a lot of contributors which is all very surreal having gone from me sitting in my couch one day so I got a bit cool idea to something a lot of people care about so some cool sites use it the react box the react official site actually use it they switch over last fall so my background is actually Emma I guess you'd say former Drupa doesn't solo the harsh it's like it's like a emeritus maybe I got retired but yeah anyway so I did Drupal for a while I went to some Drupal cons all that jazz and then I did got into the JavaScript world was backbone.js 2011 ish and I worked at Pantheon for a couple years to now Peter and he used their dashboard like I did the original version of that name is and now since 2014 to the immediate future I've been using the react yes right do host ever and so yeah I start a so I actually left Pantheon Oh too early 2014 so it had a kind of my eye on react around that time and then after I left I was like huh this react thing looks really intriguing let me dive into it and I spent like several weeks working on it and they're just incredibly good it just addressed pretty much all my concerns that you know all the problems that we've seen with backbone and I was just wildly productive and it was just so easy to think about problems with reactor just like you just have UI problems and then in solutions just sort of follow that you know which is a really good indication of good design and did ever want to use anything else so gatsby came around basically because you're elated 2015 I wanted a tool that make it easy to use react to the websites because I was like I needed to build a new website I was like oh yeah what am I gonna use and the thought of using anything I've been react you know bothered me and saying hey so I ended up building gets me yeah and the idea forgets what the beginning was react has this ability to like render out your app to a string so an HTML string so you can take your you know a rack component and then say rendered string and I'll put an HTML thing and so you can actually hook things up so that you know you take your whole site and you can render out every page to an HTML thing and then you know kind of wire it all up so that when the HTML page loads it then turns into react up so it has all the benefits of you know a static site which is like extremely fast you know tiny first bite and time to first paint and all that jazz but you're also kind of like full-on react once it loads so it's very easy to do client-side stuff so there's no awkward like okay we have like the static site but oh we need some interactivity now and then you have to like figure out how to like throw in a web pack process or something and kind of like make it all work so yeah so it's like yes I just said that so if you've heard the term universal JavaScript back in back in the backbone days you know ton of people were talking about this like how do we like isomorphic or Universal JavaScript now how do we render our JavaScript app on the server so that's you know faster and all that jazz and then Rick came along and turned out it's actually pretty easy once it's built in yeah huge benefit is there's no awkward jumping around to different styles the templates it's just react components all the time which assuming like react thank you that's very awesome so yeah so this release 2015 version v-0 was pretty similar to other static site generators if you use them you know have like first-class support for markdown it's very simple you know have a pages folder and you add a react component turns into a page you know that sort of thing pretty simple pretty awesome and I rebuilt my blog and my company website and it's cool but then as sometimes happens with open source people start using it and and a lot of people are like asking how to use it was like WordPress or you know content for Drupal like themes and code splitting scaling to larger sites and I was like hmm obviously they want something other than I do and I gradually realized that people wanted to use Gatsby for like CMS projects but as like kind of this presentation layer for their CMS they're like we wanna use react like I love how easy guys who makes it to build stuff but we need to like hook it up to a CMS you know we need to have fast builds we need to have you know have it to scale past you know a few hundred pages which the first version have got to do is pretty limited too so not just a static site generator with markdown yeah this got me excited actually once I realize this because kind of like brought me back to my Drupal days I was like okay like you know the more I thought about was like okay Gatsby can actually be a really good fit for kind of complex e in those projects because you know reiax ability to kind of decompose complex UI problems and do like very simple components you can compose them together and all sorts of different ways it actually solves a lot of problems with like okay like we're building all these different screens and like we're sharing some code across it and we have all this like different design questions you know design separate random forest eccentric cetera and reactors like a really awesome fit for that so I was like okay sweet like this this could actually be a great kind of solution for CMS type stuff and so how's conceptualizing is that the traditional monolithic CMS name your CMS of truth it has like a presentation layer and a Content backend this course is vastly simplifying the actual what's actually going on anyways it worse we're at decoupled CMS is you split them so now you have the CMS which is now had its head chopped off so tell us and then you have this presentation layer which could be done in all sorts of different ways and yeah so the question was and so and also be zero Gatsby didn't really have a way to like can it I mean that's what we were asking it's like there wasn't any easy way to do that other than like writing custom scripts which pull down and stuffing whatever so it's like okay how do you make that how do you bridge the gap between gatsby and the headless CMS and an easy reproducible way so that you know you spent up a new project and it's not like hey that's been you know three weeks of R&D solving a whole bunch of problems but what is the way that we could like as a community kind of build these integrations between different CMS's and gatsby so that it's trivial to get started and so the eventual solution I came up with was something I called our call still call that source plugins and graphical and so these two source plugins in graph kill they work together to kind of bridge the gap between your data source or sources and their presentation layer you know your rap components and so it lets you basically on different pages you know add a graphic you'll query which then pulls in data and inject it into your component yeah we'll get into let some demo time waited for them anyway so release be one with that support last year and now - like integrates react with you know some data source all you have to do is find the appropriate source plug-in install it and then presto change-o your compounds are not glued to the data without any custom code so this is like a simple example of how it works this is actually just clearing markdown file but what's interesting about this model actually is that we treat like local data source like like markdown add a stone or gamma whatever files exactly the same as remote data it's like all the same thing internally anyway so at the top you have like a normal reactant and down below you have a graft 12 query and it's getting passed in a slug to identify you know which markdown file to get and then it grabs the HTML like the transform HTML for that page or for that markdown file and then like the title and then a top it puts the title in the h1 and then it puts the HTML and a div and so anyway so fast forward here and there's actually I need to check for this talk but it's easily anyways a hundred plus source plugins now been written for I think one of the latest ones I saw was a some dog API base so you can build a site with like beverage source is pretty cool see and like total number plugins you can have plugins for other stuff too so if you want like sass support or less support or whatever you know there's a plugin for that anyway so yeah right - 397 plugins as of this morning yes so community keeps growing hit 124 total contributors the last few weeks we've been at 100 plus PRS which is a lot twitter twitter twitter loves gatsby so made this website you got to be jeaious I'm totally in love with it reacts text and generate future super excited the next version Gatsby the first graphical power Generosa now really loving gatsby JS tutorials and documentation seems like the perfect balance of depth and getting started quickly my word Gatsby Jason impressive the sort of thing that's so well then you want to make of reasons to use it however preposterous I like them and then on a site bloody hell that loads fast and then who here uses lighthouse did you hear u s-- lighthouse okay some people yeah so it's a cool new product tool performance IV tool that Google added the dev tools but what's fun is like Gatsby with very little work is pretty much a perfect score across the board yeah so some sites but what gets me it's from thigma ecommerce store this was just launched like really like last week or so yeah so anyway so meanwhile gets became a company and so me well just basically I don't know just a segue like open source is like card it's like it's like a lot of work you know to actually build step and you can even get decently far and like you know fostering a good community and all that jazz but at the end of the day anything that's like significant needs multiple people working full-time just moving the project long balance it's very limited and you know what the project can become and so as Gatsby started to grow I was like kind of realizing that either I abandoned the project or I figure out a way to work on a full-time get it people are going full-time and anyway so that led to a lot of investigation as to what kind of company could be built around Gatsby which area so we raised meet me and apparently who found the company and raise money and launched it earlier this year so which is great because now we have ten people working on it yes yeah so yeah how to get started with Gatsby pretty easy there is if you have no dissolved you just install a Gatsby CLI and then you create a new site no typing got to be new and the name of the site and then Iran guess we developed which starts up a development server and so forth actually if it's going a bit so give yourself too much we also have a pretty comprehensive tutorial that's aimed at people who have not used reacts and graph QL eccentric cetera and a lot of people really love it and have gone through it so if you're kind of not used reactor graphical much this is a great place to start just that familiarize with the different tools they cusp uses cool so that took 15 minutes and 50 minutes is a long time I normally do like 15 minute talks or 30 minute doesn't sound like mm-hmm which I guess goes to say if you have questions just just ask them because I mean now particularly questionnaire they all got some degree in that next can do a static export but they're not really focused on that it's not very optimized I guess they're more focused on kind of they you know they're kind of like trying to be like the Express or the PHP of react if you will so that kind of like a simple lightweight web framework of sorts where they don't have any plug-in system they don't have you know any anyway they'll try to do a lot more stuff like we're trying to do and they're not really optimizing like the web sizing so you can't do website stuff with it just like you can use you know raw PHP to build websites if you want to but anyways it's more a little more do I do I I guess then got to be wants to be so many questions nada okay so let's let's let's try to building running some sites first actually oops here's a site I built Instagram clan doesn't really need to go here but anyways it's right here so if you go to the website so so I kind of talked it you know you do get to be new so guess we knew it uses like let's call it the default starter there's also a bunch of other starters that we'll get into in a bit so there's a bunch there's a few officially maintained ones and a bunch of community maintained ones so let's first try out the default starter yeah it's making some changes here so hopefully they're breakfast and intestines before so tape gasps we developed it does some terminal things cool thanks Linda cool it's nice atmosphere okay so yeah so that says open up locals house and look at those 8,000 in your browser so you copy that and then voila welcome to new guess we're safe let's just go to page two okay go grab some fish you can get trapped here so if we then yeah so if we just look at the file Oh see that's mine can't ignore okay so anyways you look at the file structure there's a this gatsby config file and we'll get that bit and that's cool I didn't know if did that I just I just set up a new computer and apparently I added a new feature anyways you double-click on a file and opens up this thing so anyway so this is the gatsby configure like lets you add plugins and like metadata and like a few settings get the trace do not have too many settings because settings are just configures annoying and then there's a few you can like add api's to get get so sorry I guess we know to cast your browser but we don't get into that too much so we just jump into here you know we have react components so this is source pages indexed ideas and it just becomes you know the home page and so this is you know we're running gaps we've developed so if we want to change anything about our site we just edit it it's like hey decoupled Drupal rockstars so then we'd save that butt up in a live updates if we say rock stars it's passe [Music] anyways so it's very easy to like try out different things and make changes you know you can like add in line pink whatever cool anyway so editing in react was like hot reloading at what we call it you know setup it's like super fast super nice you can do stuff like say you wanted to add a new page just to page three let's go to new line okay anyways he's like oh no this what page F what you can just do is just do page yes yeah so anyway so it's really easy just to like kind of quickly prototype out your saying you know you can start from nothing and just start adding pages and kind of get a feel of like how things will work really quickly and its design Guthrie is designed just to be able to like prototype and move very quickly when you're doing stuff and then also of course you know when it's actually built react is really nice because you know there's a bug or something's wrong and it's very easy to isolate that problem to the exact component which is crazy man because components are self-contained yeah at that man off you go so it's cool it's the idea cool so this is a yes this is the basics of gatsby you're in gets to develop you had components you do stuff off you go then it comes time to see it's like now you're like I want to like deploy the site somewhere so how does that work so gatsby has a built command so it's a you know quote unquote static site generator so it doesn't have like a running server that you deploy somewhere that like serves the site instead you you build it into a bunch of files which then you deploy those files somewhere and they make things happen so we run gatsby build and it says building production javascript and CSS bundles it has like a full kind of web pack babel you know uglify kind of optimized production javascript set up you know already for you Wow Yeah right it's really good no no actually I think I do I was I think I was editing okay I was playing with us a few days ago and they did let me yeah I was I was testing a changing here I think I left it in the program today so let me I just installed plates packages anyway so yeah so so you run a build process and then it creates a folder with everything needed to run the site you know the HTML CSS and the JavaScript and then you deploy those to any number of yeah static site hosting so github pages kind of traditional one there's a few companies that kind of specializes like aerobatic kaneto Phi you can just like an s3 bucket etc etc and sneak peek we're actually so company might my company we're actually launching a kind of gatsby specialized oh what's going on socket hang up apparently I'm having Wi-Fi drums no it doesn't have yeah oh really like well it stinks well we can also ignore this set and go on to the next one because we have other sites we can okay so other starters yes let's just go start a blog so this is another starter that has kind of like the basics of a markdown block so let me clone it but if and PM has bought here somehow that's nice work anyways yeah we'll jump to another one in the meantime so so as I mentioned earlier Gatsby can pull data from basically anywhere anything that has an API and so what I was showing you two before I was like just using straight react components but with no data and that's fine for like simple site so you can just you know write all the content like straight here in your rack component and that's cool but you know any any side of any significant size you eventually want to kind of split out the the content management into another system which generates call for CMS anyways and then and then you need some way of course of pulling that back into Gatsby and into your react components okay actually wait okay hold that thought so we got back here so we'll go back to the build process so yes you just tape got to build hopefully this doesn't break again and then does the JavaScript CSS blend we cool so it took ten seconds now so yeah I guess it creates a directory with all the files necessary to run your site so those are that directory is the public directory and yeah there's a bunch of different files here bunch of Java scripts and like mapping files yeah anything if you look at if you look at you know the generate HTML file and it has actually inline CSS for speed and it has you know the actual HTML for your react component or has you know decoupled Drupal thought-leaders welcome to your guests as a centrist it yeah and then you can test this locally they're running gatsby surf which loads are not that serviceworkers yeah okay anyways so now you're here we have the site that we're working on but you know if you look at the network tab it's you know pulling streak HTML and is pulling the JavaScript and so forth but it all works exactly the same way as it did during devote it's like a light switch cool okay so let's so if we look at the start of blog yeah I was like I was getting to you know if you like split out the content you know you need some way of pulling it back in so kind of the the first way that oftentimes with people try to do that was like markdown is a very simple way of doing that so the starter blog is set up to write blog posts with markdown which is sort of CMS's arts so if we look at the gaps the config file it now has a bunch of plugins in to handle this and so it has this thing called source file system and then has transform remark which is like who actually does the markdown transformations Cedric Cedric South Iran gets to develop here okay [Music] refresh this you have a blog and they click on it and like you know just kind of flies around whatever but same way that we have like hot reloading for react components if we go here and we say you know new what is one of them yeah like this hello world so say hello NYC then just you know updates and yeah we could like change the dates so it's like the newest post and then it would just reorder so it's kind of like a live view and your data so as you're editing data that's also kind of live updating on your page but actually was the oldest cool um so yes so let's and if we look at it like the front page for example index GS we again we see a component you know extend react component but if we skip down to the bottom we see kind of this graph QL query that we saw earlier in the sites and this is querying two things is clearing the site title and then squaring all markdown remark which is the way of saying like I want all markdown files basically and yeah and so that again you know it gets inserted up here and we kind of pull off the post and the site title and then we map over the post so let's look at what's so so Gatsby shipped with a tool called graphic Cuba and it's kind of a graph QL IDE 4x yeah there we go yeah this is also if you when you start up it says you know physic graph feel in browser ID to explore your data is data so your spikes data and schema so yeah so as cool as that when you're building out a gatsby site you have this there's base like you're creating a page there's kind of like two ways there's two basic tasks it's like first you have to like what is what is this page even going to do and then once you kind of figure that out and the next is like okay what data do I need and then once you figure out the data you need you then and like start you know actually flushing about and so forth and so this fits very nicely into gasps because the first step is like you know the existential line was like what is the purpose of this page but then you can jump into graphic UL to figure out okay and I kind of know roughly what I need now I'm gonna start playing around how to get the data that I need here and so graphic ql has a autocomplete and you can pull this up and you can say okay I have I can query my site pages and query files and query directories and query markdown and query images I which is interesting and so forth so if we say all files you know then we can see ok well here's like all the triplets you know we can query all switch properties on that you know path do internal media type it's like just JavaScript it's markdown and a JPEG and so forth so generally don't pretty fast anyways you can query like markdown and then you know this has you know get the HTML ok that's cool we get like an excerpt which is actually what yeah this gets because you see here has an excerpt we also you know get the date so if you like say yes so all the frontmatter fields are on this front matter object so we give date we look at the day it's in ISO 8601 which is cool for us but nobody actually really wants to read it so gatsby includes a way to formats your dates in the query so you can just say a year year let's do a mum here you here then we run that and then presto change-o the dates are formatted and whatever you want so that's cool so let's make a little tweak here so we have this like front page and showing you know our posts and they're sorted by you know the the newest post is first we have a title we have an excerpt that's all cool but we actually want a kind of a time to read sort of thing there's a lot of blogs have that it's like whoa that's ten minutes not gonna read that you know sort of thing kind of pre-warm people who can't read very long things so if we if we look around in here we have a school we have a time to read oh we also have a word town that can be interesting so time to read in word count so we run those and paragraphs words yeah so let's add those to our front page real quick so yeah we want the time to read and then we want yeah let's just add the word to count for some reason probably like genre's this is very good who knows okay so you can say that and nothing changes so we changed the data that we didn't change a component so nothing actually changed so let's actually before we get into changing the component let's just [Music] yeah it's just yeah I'll just look at the data see make sure we got what we want so if we do console that log you can see everything that we did so we have okay cool so we have the time to read on each node and we have word counts so cool so that means that this post also has that's endeavour I guess we could just walk out the post anyways so now when we map over the post we have the node and so we have the date here and the small thing so let's just let's just add it here no yes yeah that looks cool so well okay I never say what's bad the number of minutes node word count that words okay yeah so you know again like as you're designing out you know different pages you know you can be exploring here your your schema like okay what data go how accessible and then you can quickly make changes to the query you quickly make change to the comp on it so it's a very fast kind of iterative cycle for building things okay cool so let's go to the final demo Drupal so the last the the markdown blog we use something called Gatsby source file systems to pull in data from class of stuff and if we look at the Drupal example Drupal site not surprisingly we have something called Gatsby source Drupal and it's pointed at a kind of a live so Kent content to CMS which probably many of you know about anyway so we're just actually pulling straight from there kind of demo there live demo to build this example site so if you're on again Gatsby develops clothes everyone so yeah so unlike the other ones we now have this we actually fetch data from the Drupal API live as we start and it's taking longer than yes we'll see how long it takes over on the Wi-Fi here my name is no I pay yeah yeah I just ran it really out there and it was pretty quick but no no say what yeah but it is weird though because they did runs earlier and like it caches the files locally so I'm subsequent runs it should be downloading them again yeah just trying here earlier and it took well it took 26 seconds I guess that's still some time well well that's doing its thing look at the light version of it see if we can open that yeah just failing okay you want a hot spot yeah now actually I'll just catch my thumb okay boom nice okay so let's just go okay cool so this is a Gatsby site that I'd built using the content of CMS data and if you haven't looked at their kind of demo site it's just a bunch of recipes so we have all these recipes and there's kind of this like sorta nice not very nice design and if you if you kind of looked as I was growing down it actually had like a blur up effect that you can do really easily what got to me and then if you look like click on one you know it kind of transitions immediately I cook I'm not going on so it's like very fast to click around click on all recipes you have all down No so yeah so one little thing I'll show up here it's like Gatsby tries to be like really smart about lazy loading things so if we refresh with the network tab open you can see kind of like pulls in some initial JavaScript and then it actually starts prefetching other pages immediately which is why when you click on something and the like loads immediately is because it pre fetches the data for that page but it doesn't just prefetch the entire site because you could be like 10 2328 for prefetching a page when it sees that the link is like visible on the screen so i cleared the network tab and as we scroll down see it starts pulling it immediately these uh these little JSON files which is what's used for the data for each page and so now you know like when we click on that it's like already ready to go and so they clear it again yeah and say yeah it's pulling those in so another cool example this is huh this page group anyway so we also do the same thing for live images if you use a component probably gets the image we like lazy load images and then already loaded so yeah this that's too tall so as you scroll down this page it starts pulling in images as they get close to the viewport you know which again I capture say like feel a lot faster because you don't have like a complex page with a lot of images you want to lazy load the images further down the page so that you know the network isn't being congested you know with like downloading dozens of images or something like that so this is something that like Gatsby tries to make pretty straightforward to do cool so let me jump back to my slide but first any questions about the demos yeah yeah so once it's in the browser it's just the normal react at that point yeah v1 we use react router and v2 which is coming up soon we switch to company saw something called reach router which is like pretty much the same thing it's booked by the same person but it's a new version it's a new router because I was like accessibility better accessibility bacon baked in oh yeah refill basic questions and this seems like it's still making Network requests so you're still doing it got to build yeah so it is actually because the so going back to this slide and the graphic you all that we saw it's like a build time usage so we fit we at Build time we kind of take a snapshot of the data at that point and then write it out to JSON files using graphic you'll and so it is it is live loading data but it's not like quote-unquote live it's like a snapshot in time yeah so did I think about that of course is that you know everything your entire site can be on the CDN and so you don't have to worry about scaling the Drupal back-end for like heavy traffic because it's like completely cached the downside of course is that then you have to rebuild it every time content changes but generally speaking those are pretty quick so if you have it automated you know with like a web hook or something from like when you click Save you know you can have stuff live in like a minute or whatever yeah the point the goal of gatsby is that you know if everything is completely cached then everything is like very scalable and very fast yeah can you make dynamic installer for this yeah yeah super coming yeah you just think of it yeah because like once again like once once it's five in the client it's just a reactive so you can make Ajax requests and render however you want you should think it like the static build part as basically an optimization it's like you should think of it I'm building to react at but it's incredible it has incredibly optimized kind of you know initial loading the app stage you know where it does code splitting it does you know the HTML rendering Cedric Cedric but once it's live it's just a reactive at that point so you can compare it it's more fruitful to compare it to something like just a normal reactor that you know Llosa JavaScript and render or something where Gatsby it does the same thing but if first renders you know a statically rendered HTML version of that so that what appears on the screen is you know it so that the site looks much quicker and whatever I [Music] don't know because the only thing so yeah well I'll take a step back a little bit so there could be the case where data is changing you know all the time like you know every you know 30 seconds or something like that are minutes you know and that rebuilding the site constantly would be too much overhead so that would be a case that next would be more useful but other than that I mean Gatsby is always going to be faster and has a much richer ecosystem and you know it produces reacts apps just like you know next does so it's pretty much the same thing at that point but as I mentioned earlier we're building actually a kind of a a Gatsby published service that will have like incredibly optimized like build process and so we'll be able to bring build times you know down to like seconds so basically make the bill disappear in which case you pretty much always miss it yep there's this another question say it yeah right it just exactly yeah if it's client-side it's exactly it's just a react time you know at that point and so guys you can have client only routes you can do log in and all that jazz would just be just fine question over here yeah yeah exactly yeah that's all the same like really optimize build process will be doing incremental builds also available like paralyze a lot of the builds in kind of a cloud environment across you know however many workers is necessary to kind of chew through your site and get a build really quickly so there's question here's yeah how do I manage what's a WYSIWYG multi-language say yeah a lot of people build yeah yeah a lot of people build multi-language web sites we've got speeds it's I mean generally they just kind of have a prefix you know en - us or whatever to kind of distinguish between the different versions of the site but oftentimes you can use the exact same components for all the languages and so it ends up being pretty straightforward just also I guess he has a way to programmatically create pages so basically you'd say what are my language is what all the pages and then you just spit out you know the URLs for each one yeah there's some starters that kind of demo how you can do stuff like that yeah with structured recipes blogs admins [Music] generally not because even like page builder type stuff it's like individual things it's just like the order could be change you know different and so generally you know your component with then it would just take you know bring back the data and then say it just kind of looped through whatever the the content editor did and then say okay like this is a image gallery and so I'm gonna like render this data out to the image gallery component and then like the next thing would be like okay this is a you know a you know little content thing so I'm just gonna like use the component thingy content thingy you know component to render that out and so forth so yeah there's a lot of people that use page of logo type stuff some get sweet and they do patterns like that where they just say okay this page can have all these different types of data in like different types of little things and then have comp components that can render each type and then you just look through the data and render it all out so yeah yeah so the tricky thing about Drupal starters that Drupal doesn't have a predefined schema which means that then the starter would have to make some assumptions about how your Drupal site is set up and so forth so the best we can do basically is have the content example because that already has like you know content is an example dad well that Jess said that but getting started it's really straightforward it's just basically you you have the JSON API module installed and you add the gatsby source Drupal plug-in and then point to that you know wherever your site is hosted and then and then at that point you know you started up and you have you can look at graphics well like we showed earlier and then just start you know writing queries and say that I'm not sure ok yeah yeah I mean I go servers hundreds appears so the exact I don't see every PR these days yeah I go away and try to like rehab the evolving website in group that's hard to know sure but it'd be the order of minutes I mean yeah it kind of depends like very complex pages take longer to render so that can create build time also just syncing with Drupal can add time as we saw earlier but yeah I'll repeat builds with everything's cached it should be seven minute generally speaking or around like a minute and a half for like cold builds it could take it should be definitely set ten minutes at the most but off maybe like five minutes the range yeah just just during the build so what does with development you know it's like I said earlier it's like it's just it's all live basically the build processes when it like actually goes through and dies to do like a bunch of optimizations on your saying and so that takes longer develops pretty lightweight yeah nope I haven't seen any issues about it I mean III I don't build sites all the time it gets me Drupal so there might I mean basically my feeling is that the integration is it's it's being used by people it gets like 5,000 downloads a month but I don't think it's to a you know rock-solid stage still so I would think you could I think you could like pretty confidently go into it without expecting too much trouble but I won't be surprised if you do an ambitious project with like Drupal and Gatsby that you'd run into some issues that would need to be fixed it's it's kind of at that stage it's not rock-solid but it's also not you know wildly broken it'll certain obvious ways but yeah if there's specific things MGI like specific problems potential problems and I gotcha yeah yes okay I think we've pulled that in music it's cool yeah and yeah yeah authenticated yeah yeah I mean yes oath indicated stuff you wouldn't you know kind of the discussion earlier about you know what if you have like user dashboards or whatever stuff like that so authentic gated data you don't want to build static like static is just optimized for non logged in users it's like how do we how do we get pixels on the screen as fast as possible for non logged in users but if you have like a fennec aidid data you would want to you know have client you know client stuff that's query Drupal so you have like you'd have a person login and then you'd start you know just querying from the from the client to get that information you won't want to do it static like built aesthetically because then anyone can access it which would defeat the point yeah actually that is something that we're very keen on because a year and half ago there's very few native kind of third-party graphic you all data sources and so that's kind of like the source plug-in concept came to be it's like okay baloney graphic you all but we have to integrate it with the rest api so how do we like bridge that gap so we can you know set on the source plugin because we just download the data and then kind of automatically create a graphical schema from the data and so forth but now like more and more systems to have native graphic you all support and we've been working on adding what's called graphic UL stitching support to gatsby which basically that says pull in a remote schema and like stitch it in to our local schema and anyways long short of it is that once that's ready it's kind of a we have an experiment to release out you could try it but if you're going to try it it's like you wanna help make it better not because you wanted to necessary work completely anyways so we have we have experimental support for that and like there's someone that's been working on that though you unfortunately can't start work we're actually hiring him but he's went off to finish up some other contract work before he can like completely finish it anyways he'll be coming back a little bit this year well I started is that once that's ready you'll just be able to point at your Drupal graphical schema and then start writing the great book race which is both cool because then we don't have to do all this like extra work to make things happen it's also cool because yeah like the whole like pulling down data to make it you know build a sacrament gets slow you know what's some the size of site like you can have a 50 thousand nodes hundred thousand notes whatever it just sorta becomes unfeasible to try to sync all the data dynamically and so this this this graphical stitching allows us to kind of only pull down and we're actually building the site so during development you just like only run queries on demand basically to pull down the data that you need but then during builds of course you would have to fall down to that about to you know actually bail out the same there's a lot of advantages to doing things with that method it's I just like yeah it's great that's why I was like there's all sorts of funny puns you can use that basically no it's it's basically I like reading I like got a chair and I wanted a good name that nobody ever picked already and so I went off looking at you know literary names and Gatsby was one of the cool it sounds like sweet that's me yeah well what are they take location that you have to do a full site rebuild and it just basically that redesigns global navigation changes of the situation yeah so it's so you think of Gatsby is like okay how do we create the fastest eye possible and create the fastest sight possible as you create a perfect cache where everything is you know you don't have to do any sort of dynamic lookups or whatever because if you have to do that then you know there's all sorts of potential problems from you getting overloaded by traffic or having some sort of cash what does it call that cache like one one cache braking effects another caste whatever it is there's also substantial problems when you have dynamic lookups that you know which makes running a site hard and so because of that at Gatsby's like no like everything has to be kind of you know any change has to be you have to rebuild the site basically so you change content you change the code you change anything it has to be rebuilt so that you can have a perfect cache it's it's not CDN and it's super fast but like I mentioned earlier working on incremental but so anyways yeah obviously that game gets kind of silly because like you fix a typo and you have to rebuild a little site I think that seems silly so we're working on incremental build support which we'll be adding to our publish platform which means that you fix a typo and then only the pages that are affected by that change and we'll also be able to say well you didn't change any code so we don't have to rebuild your code we'd have to rebuild your CSS it's only rebuild the HTML for these few files are these few pages that were effective so we all don't like to do those sort of things like very efficiently very quickly even for very web sites yeah some years ago one of the thing that was just to rebuild everything different ones build at different speeds Hugo is well known for being the fastest because it's like go slash it doesn't do very much anyways um but even like you go like X M size it still slows down pretty dramatically and so the only real solution is incremental belts which is you know you only actually do the work that's necessary and because of how Cassidy's bought we actually can do that you know fairly well it's possible it's not easy it's possible yeah yes do you common or successful in these cases for like it just exists content psychos incorporating athlete they've been doing a poll you know migration but maybe like picked yeah I've seen it a number of times do the whole page yeah exactly yeah you you you can I mean get to be it does have to like own the page you can't just like fitting Gatsby Department cuz you whatever but yeah like picking out like subtrees of the site to rebuild a Gatsby is is pretty common and quite doable so yeah okay let me actually jump to the sides I think we're over time and yeah hungry [Applause] [Music]

Channel: Decoupled Days

Views: 1,427

Keywords:

Id: fx2Qo3D47tI

Length: 60min 33sec (3633 seconds)

Published: Sat Aug 25 2018