Headless Drupal: Building blazing-fast websites with React/GatsbyJS + Drupal

does this record sound - yes it's everything so first some questions who here has really got to be before deciding to come here and so also so all of you build Drupal sites for like clients whether it's internal external pretty much ever okay and how many like are using your react or thinking seriously about using reacts on projects so Gatsby's a open source off in the next slide guess he's a blazing fast dioxide generated for react and project I've been working on for a couple years now and full time for the last year and Gatsby for the previous slide it has good integration with Drupal as well be shinier so it's gotten pretty popular it's up to fourteen thousand stars on github 2017 it's got over just like the last week or so hit a million downloads on NPM 300 certified plus contributors it's being used by some increasingly large number of people which is pretty fun to see like recently the react website a few weeks ago moved to a new website powered by Kathy Mozilla recently launched this as well introduction CSS grid and anyways there we have a good showcase on like to get have repo like a bunch of sites that people are building this the framework so yeah I kind of want to start kind of like establish kind of context to where it gets we came from so you know we think about the Internet the Internet is this massive thing it hit a billion users in 2005 and at twelve years ago since then we're after three point eight billion so something like half the world's population and it's still growing like SuperDuper fast and I think like a big part of that story though is that you know we here in the rich west have had the internet for quite a bit longer and we generally have you know fast internet connections and so on and so forth but most of these new people accessing the web for the first time they're on like decent smartphones but on you know crappy network connections generally speaking so some web technology trends the rise of you know JavaScript driven websites there's been huge investments by all the browser manufacturers and improving you know the JavaScript engines as well as the Joseph framer some tooling and also just kind of like we used to have like a very firm distinction between apps and sites but now kind of they're all boring together [Music] other trends come to rise the cloud you know used to like provision your own servers back in the day and now there's VMs and even VMs are kind of you know becoming a lost art you know mainly just renting compute resources from some generic SATs provider or pass provider just just the need to like move faster so you know techniques like continuous deployment they all like deploy multiple times a day and reliably keep improving your site through that and just the general trend is you know do more with less so we're scaling sites the more people and we have to build them faster at lower costs and like the competition like the quality of a site you know used to be 10 years ago you could build what would now be a terrible website and it'd be fine so just just just the expectations for what we're doing keeps going up and up and so anyway so yeah so that this is I've every building websites for a long time and kind of lot of these things kind of were on my mind when I was initially thinking about how to design Gatsby and then like since then as I've just just a few months ago I completed a major rewrite of Gatsby it's the one release and anyway so just like how do you build what's a website framework that you can build really fast websites that have really low operational cost and you can like it's very easy to build kind of the best websites that you can so yeah so let's actually look a bit it got to be so Gatsby is a command line it's it's an ode app and it includes so if he ran that Gatsby commands it has several commands it has that's really small let me bump it up a bunch can't even see that in the back okay so it has which when you run that it starts a development server and that does like Capri loading of all your all the changes you make so you like that it's something that hot reloads in the browser which is super cool there's a build command so it's a static site generator so when you type that it does like an optimized production build of your site which you then deploy to any sort of static site hosting place and there's a serve command which lets you like test the built command locally and then there's this new command which Gatsby has this concept of starters which are just like github repos of partially built sites and so you can like Gatsby new and then the name of a new site and then there's like a default starter which if you don't specify something I'll just do that or you can also specify one of the starters the community's done amateur service but anyways just for this initial look of gas beam we'll look at the hello world starter which is like the absolute simplest web site possible with Gatsby and so if you do an LS the important files are this package JSON so if you look at that if you've done anything with node if hope familiar this so there's two dependencies the Gatsby package and then Gatsby link which we'll look at later and then there's a source directory which has also a pages directory and then has one index jeaious so let's start up a development server and then pop over here okay who's that okay so it does some work and then does anyone here use webpack by chance okay okay so web package running underneath the hood of Gatsby and so web pack is a newish JavaScript build tool that's gotten really popular over the last couple years and its really powerful so it runs a lot of what gets me does so yes so now you can see that the site's compiled successfully and it's running at localhost 8,000 hello world cool so if we open up this file this is a hello world page components so if you've done anything with react you looked at you know sample react code you can see that you know at the top you're importing the react package does you have to do that on it and then this is the simplest way of defining a react component where it's like you export the default module and then react has the you know JSX which is kind of HTML like syntax for doing templating stuff in it so yeah so you say hello world [Music] let me just split screen here oh dear I know I think okay so yes so earlier I mentioned hot reloading so hot reloading is like you change something there you say that and then it's just boom updates so you go back yeah so you can like add onto this you can say we like change this to an h1 you say that yeah it's happening client-side and was also cool too is that it does like a very surgical replacement of your change so it actually only changes the exact like react component that you're editing and it also we won't get into it but like react can do like stateful as like stateful components and it can retain the state between hot realism so you can have like clicked around on something edit the code and then I'll keep actually maybe I'll show extents real quick saying so you do like inline Styles select color red whatever yeah it's red cool stuff like that yes so yeah so I have yes line set up to run just in them this is Ben and so if I made a mistake you know it Eric yell at me there's also something you might have seemed like the text jumping around it's like you can like change it and then oh yeah so this is something called prettier which is like automatically reformat your code it's super nice and so this is like one page but obviously when you do web stuff you want multiple pages that I clean to each other so gatsby you saw earlier the Gatsby link package so if you import that then you can do link to so I'm gonna put each wrap you do two for no particular reason basically I don't know somebody else to say that I made that convention a second page cool that was app see that's what happens when you do an error we can fix that okay so now we have a link and if we click on it it says oh no there's not a page there yet and but it helpfully tells you how to fix that so if you go here and go second that specific jaspion yeah yeah yeah reactors like very low level in Ottawa and so gatsby is like framework to kind of make it more it got to be the whole point is to make it really easy to use reactive websites so it kind of adds like website specific stuff that you want like Rupp's and you know other things that react doesn't have opinions on so we do the same thing here you should export deep second of age so if we say that then you know I really and so then we can do same thing here back [Music] yeah and so now you can click back and forth and so despite Cathy being like a static site generator it's like a full-on it produces like basically reactive web apps so when you're you know actually in a Gatsby site it's you know client side app but it doesn't like a really smart efficient way and that it generates HTML pages for you know each of your pages so that when you load the site it just loads as the HTML first and then it kind of loads in the JavaScript to kind of make it live into it like a react up again and then when you like load one page it starts prefetching the code and data for other pages around it so then you like click to the other pages and it's already there so kind of convention that you know react to the react web so this is now a gaffe to say so if you click on like get started it just it's almost instantaneous because the code and data for this page already there you know same thing like clicking around you know there's it's basically just a client-side route change and it's very quick and then also like on the front page you know it has so you can have like interactive stuff here so reacts embed some you know sample react code as make sense so this is like a counter here and so we can like change this so that instead of adding one second and every tick we adds like five and that's you know five so you know so schools that you know you have clients that say hey we want to say and we want like this you know some sort of interactive whatever thingy and they won't evolve Java Script D because I assume that's what most clients want these days with Gatsby it's really simple to do that where you build a site like normal but then if you want to interact to stuff you're already in kind of react world and you can just add interactive reacts stuff as needed so if we go back here and close out that if we run the build commands it does kind of like a multi-step build process build the CSS that builds production JavaScript bundles and then it builds the HTML so finished and so then if we open up the public directory so this has multiple built in to manage my name is now you can't get the point so it has to start at HTML it has just that one it has the index at HTML then it also has the second page index.html and then if we look at the JavaScript files there's some duplicates here because it has multiple builds have been done but there's a few different bundles that including a bundle for each page so that what's nice about that is like you can have a really big site and loading in the inia there's a page you're not loading like all the JavaScript for a little site we shouldn't get really slow if you have like 500 bytes of JavaScript or whatever so typically you know only be loading like 80 kilobytes or something like that so it's quite it's quite fast to get started with okay cool cool look do more got to be down stuff a bit later that's back to some slices and buy any questions as we go along feel free to raise your hand normally give talks that are much shorter than 45 minutes so I may or may not have that much material so if you have some question or want to send us up with some digression yes that's a good question yeah oh yeah I'll get there in a bit I'm just going to talk a little bit so well just just a jumble have a little bit so basically Gatsby so when guess we first started as kind of this typical typical static site generator where only works like markdown and like JSON other kind of like staticky on your file system type data sources but that's like a huge limitation because most sites need a CMS like there's very few sites that you can just go all hipster programmer and you know you use markdown so forth so the v1 and Gatsby it has a way of building connectors to basically any external data source so I'll demo the Gatsby Drupal integration but also works like WordPress and it works with a bunch of like random API is that people build integration with so it basically anything that has an API have some sort you can can I create a connection to gatsby so first a bit of you know just why is react so nice so react to mount in 2013 and it started it was an internal project at Facebook that got a lot of adoption there and then they open sourced in 2013 and then it's just kind of like taken over the kind of JavaScript world I started using a 2014 and I've been doing backbone for several years before that and anyways yeah so once I saw using to react it was just it just felt like night and day versus doing stuff with backbone I've been extremely happy with it ever since and so there's a lot of like really nice design ideas and react and so just looking at a couple of them so first is the mental models react is like super simple which is you can just kind of think of it as every time something changes in your app it's basically everything renders again and why that simple is like our brains are good at thinking about of like static relationships but once we have to have like lots of things moving off once it just gets very complicated and like we just it's hard to like think clearly about it so has anyone here done or have people here done like complex jQuery applications where you just like manipulating Dom I'll switch okay yeah we got a thumbs down over here yeah but it's not what yeah it's not pretty it's really hard it's doable but it's just like it's a brain it's just like it's like simple manipulations are fine but then you're like oh if the data comes from here then we got to change it this way and like oh we gotta handle these cases and you just ship stuff it's like buggy and anyway it's very complicated very quickly and react you just ignore all of that because it's just a simple you have like state do you have data and then you turn that into you know don't into HTML and you have to handle like different you know types of data and like different states of the data but it's always just like it's always like oh you know that is this sentence if he comes up this way you don't have to like worry about it like oh what if we get into this state then we have to like transfer transition this way and whatever it's just all that just kind of disappears you just think about it's like new data comes in and every renders which is cool because we've been doing that for a long time like that's how any like server driven application this hub Drupal works like they're not like normal Drupal it's like a request comes in you know you hit the database for data you run through templates spits out HTML and off it goes so it's a very simple way of thinking about it and react lets you do that which is awesome you kind of get away from the whole pushing Dom nodes around with your jQuery laser pointer so yeah well it's kind of thinking earlier too about like you know like a wooden stick in you're like trying to arrange rocks on the ground you know like pushing the rocks around and they bump into each other and you're like no and it rolls away come back and it's it's a mess and so the other really nice thing is react compliment model so components is like a really old idea and both you're not just like the web world but like art world and also to places it's kind of natural thing like you have like different pieces and then compose them together into like larger stuff and you can like take those compliments and reuse them in different places like if you have a button it's always a button and so on and so forth but the problem with just I don't know everyone tries to get there but no component model ever seems to really really work and react seems like the first component model that's like super solid and like really fun to use and I [Music] had a picture I was gonna show I think now here we go so his aim I've seen is this slide so I've seen you've heard of the whole little separation concern idea maybe is Amos it's it's a decent set anyways traditionally it's thought play your concerns with JavaScript CSS in HTML and you have those in different files and they're like different technologies and you like treat them in different ways and so on and so forth and react takes like a very different view of the world where it says can't really be these then says the real concern that you know that you should like be like splitting your thinking about is the actual different parts of your here of your sites or your application so this is like no media list I don't list modal yeah but and react lets you like take everything that has anything to do with one of those concerns whether it's you know JavaScript CSS or HTML and include it in one component so somebody wrote a blog post this week on the Gatsby website and he's like a wordpress developer and he was just talking about how nice it was like managing everything in one place is such a cathartic experience so like wordpress i have function files filter files template files sass partials often with similar names depend on the framework i'd be working in to build a citement needing to buffer the entire project for my short term memory not an easy feat to manage but then once everything's have one in one place like if you know client comes back says like hey this needs fixed you just like know that that's all in like the component that's responsible for that part of the site and then you just go there and then you like tweak the CSS you tweak the JavaScript HTML so it's really easy to debug things is really easy to like modify things and because you're like reusing that all across the site it's like all across the site it's like modified all at once and it's really fun to then with hot reloading it's just you just like change something and then it's like Boop [Music] yeah and so yeah so reacts taking off as you probably saw like the last the recent DrupalCon Draya said that they're looking at using the reactant core start rebuilding stuff there it took yeah so that's WordPress is doing the same rebuilding they've been rebuilding like the last year a lot of their administration stuff and react so yeah it's cool stuff so yeah so back to Gatsby um interval so Gatsby has a plugins you can add do plugins and so there's quite a few plugins these are like official plugins and then community plugins and people who go and then all these source ones are kind of I was talking earlier where you know you have some sort of API and then you can connect Gatsby to that API and pulling data so there's one for the tempo which is like a posted CMS Huggle CMS Drupal just normal file system stuff hacker news lever which is like a jobs application being medium grande mocha DB WordPress and there's some more down here plus there's just other ones that aren't listed on here that I've seen that people are building so in the Gatsby repo there's a using there's an example of Drupal site and so let's try running minutes Oh has some debugging I've been working on that boss dear son yeah it's a little extra bonus oops okay so um [Music] this sample data is being pulled from a headless triple so now getting blanking on the name it's like was it yes yes so they conveniently give me data that they can use to play with so yeah so so looking at the make this figure again so if we look at the directory structure again as an expectation which again you has the dependencies for the application but also has a couple other ones that we haven't seen before has this gatsby config and then got to be note so the gatsby config just look at that real quick it has basically it's where you define what your plugins look like so it has a cap resource Drupal plug-in and then you just tell it what's the URL to the API and yeah so and then an source you know has a few more directories that we haven't seen before has a layouts directory and then templates and then you chosen yeah we get into this but let's look at the pages directory okay so similar to what we saw before we're importing react at the top and then this is like the class form of react components confusingly there's two formats which it's kind of historical reasons they're going to consolidate it at some point in your future anyways as we're inside this we have the render function and so in here has come to guts it is we have the h1 like the recipes there and then this is how you interpolate in data into your compost and so we have this like total count of like all the recipes that working up and then we have an unordered list and then in here we have like all the recipes and we're mapping over tips and creating each list item so it's just a bunch others not that many but anyways there's like five of them so does this make sense any questions about how kind of this is doing and so you may be asking where does this data come from and question the answer to that is graph QL so who's here has like used Dracula okay we got three and a half fish oh that's all right that's okay so this heard of that Bell is there okay so that's poor people so graph Killa is another kind of like Facebook open source technology it's something developed internally to work with their mobile apps and base what it is it's like a kind of a UI centric query language that makes it really easy to describe the data that you need when you're building a component so you say so it lets you kind of like you have like a website you have all these different components it lets you say for each component like this is the data that I need to make this complement work which again you know makes it really easy to understand your application because you could just go to a single component and you can get what's going on so example here would be what else is on here oh yeah in greedy man this is kind of long everyone okay I'm gonna jump ahead and look at something okay preparation time so here you can just add another feel to the query and then you can go up here and you can say you just add note reparation time and then save that then you know then add it to it so it makes it very fluid to say I'm working in some part of my application oh I need more data you add to the query got to your you to the component and then you can see it right away what happens which really speeds up like development and so forth [Music] - sometimes you have to - like oh there's a twig catch yeah I can't emphasize with your pain Sonia nope no catches it just sort of does its thing yeah so which is cool because I don't think believer in that like you don't really I mean we all like to make fun of the waterfall process but we kind of still do the waterfall process because any time it gets too expensive to go from like an idea to trying it out yeah and then it goes somewhere yeah so if pulse it's basically like a sync process I like pulls the data into Gatsby and then it generates a graphical schema from the data it pulls in so actually let me jump to No yeah the reason so that's something that's possible to do but it's it's kind of nice to be able to mean we can control a lot of things to keep like the like graphical schemas across different stuff very consistent we can also do something that so gatsby has like built-in it has ability to like query images that makes sense so [Music] so if we jump down to the image file when the Gatsby source thing runs it actually pulls the it like downloads all your files from the site as well and so once then you have the images locally you can do like manipulations like I really simply do kinda like blur effects and auto create like responsive thumbnails and other things like that so you know like you have that whatever yes yeah so just just so just there's a lot of you guys that don't have grabbed those schemas like maybe like five years from now if I was building Gatsby and like everything was graphical if that happens you know then it makes sense to just like rely on whatever services using graphical instance is just kind of mirror inside Gatsby but right like when I started it and even still now there's not very many graphical schemas and so just the pattern has been you know pulled that in and then creates graphical schemas from that yeah so so let's play around here a bit so this is the graph graphic UL which is like an IDE basically for graph cool and this is just included with gatsby development server and so it lets you play around with your data and so as you can see here pretty much all the data yeah you would have in a Drupal site here so you do like all pages there's only one of them I guess Cedric Cedric has that like the rat the recipes content types so it has title as published created ads trying and it's it's really cool and it's it's a very fluid way of kind of like what data do I have well so basically how you like develop pages or components is you just think like you know what is the overall design need to look like and then you're like what data does it need and then you just kind of like play around and graphic graphic girl they'll like find that data and then you just copy over the query into the compliment and then you build out the template so it makes for a very kind of fluid way of doing things [Music] works seminary back to Lucy yes so so yeah kind of like there's decoupled Drupal this is like extra decoupled yeah yeah yeah yeah so when it got these sites deployed it's just it's like standalone and you know like all the data all the code all the HTML is just all the CSS is just like deployed of static files so you could if you wanted to you know have the same Drupal instance running and then do queries directly to that from the react code I mean once it's loaded you know what once once once it gasps be safe loaded it's like the react is ready and you can like make it Ajax calls if you want but yeah it's not set up by default it's not like that's not like the intended way of doing it kind of the natural yeah there's a number of services just like little sass tools yeah and yeah you just embed it and some of them have react components too so it's pretty straightforward to just drop it in there so yeah so the most simple stuff like you could just do like a hosted form tool there's a lot of those but yeah you could definitely use like the drupal graph to our arrest capabilities to do enjoy yourself as well so that's definitely possibility see ya so yes so so kind of exactly like what what are the limitations of gatsby there's that aspect that you know it is kind of read-only unless you set up some way of doing writes another one is that it does have a build stuff so if you're using Gatsby every time a content editor changes something you have to like trigger like a build server of some sort to rebuild it and another is is right now it's somewhat limited in the size of site that you could do probably around like two or three thousand pages it'll start to grow a bit and like five thousand they'll be dead but I guess PP one was just three months ago and I mean this is a noble notation and there's I mean it is designed so that it could scale it's just some work needs to be done it and that's gonna be our major focus like end of this year you know serve next year to make a scale and yeah it should be highly scalable like basically infinite as I say what we're planning to do yeah so that's that's that's gusty and yeah any more questions yeah yeah so I didn't quite finish it but I'm gonna be finishing this up like Monday and pushing it out there's an existing yes if you just go to yeah you just go to get hub to the Gatsby repo there's that was something here there's an examples directory and there's a whole bunch of different example sites and there is an existing Drupal I've been I've been kind of like completely rewriting the both the source plugin Drupal source plugin and the example site so this works but it's not that interesting yes so you can look at this now and then look for you know Monday or Tuesday the next room yeah yeah you know able to like does it automatically detect your content types and feel and your data structure no no yeah 20 cents yeah it's it's just using like the JSON API structure because it has like the relationship stuff and so it takes all the fields and discovers that and then it adds links between like the relationship so yeah yeah exactly yeah so so if you do like all recipes and then you open up relationships it just has kind of the existing relationships there so you know that category [Music] [Music] no so it's just there the Gatsby note process is doing that oh yeah yeah so what so what I meant by that is if you open up yeah so if you open up gasps Vijay s and look at the network tab and then we clear that if we go here well actually it so it lazy loads a to s interest so as we scroll down the page you can see it downloading the data for each of these pages that so each each time a link is like shows up on the page it pre loads the data for that so so that when you click on that it's like there already then what happens miss gasps me figure it out yes so what so what happens is that you have to have like a build server which like so when when data changes in Drupal it you need a trigger the site being built again and right now it's like you know 30 seconds to amend or something like that to rebuild and then you know with with the work we're doing it should be you know even for very large sites it could be on the order of like seconds for yeah what computer ship past and it's also like an incremental sync to so like it's like the initial the initial duplication is slower obviously but it's human scale changes so you know editor changes something and it's like 25 items so it's like it's nothing you've got to to pull that over yeah sure can so I've played a ton with the prefetching too like cousin having yeah that's been definitely a concern of mine that you don't want to like slow the site by prefetch and ever stuff you might not good be like you know I know there's an expression I forget but anyways um yes so what it does is it doesn't so if we scroll down a bunch it doesn't it kind of like it only prefetches one page at a time basically or one resource actually at a time so it kind of like limits that and then also if you click on a page that you know you need a fetch resource for it like stops loading prefetching until everything on that page is loaded so it's always like as fast as possible to move on to next and so ideally it's already like fetch something and then if not you know everything stops well the next page is loading and so it already is like pretty smart about not trying to prefetch too much but I want to build a service which will basically add analytics to your site so it just says like hey what page do people go to so I could you land on this page what are the top ten months ago - and then I know nobody ever cooks on these other ones it'll only prefetch the ones that people actually go to stuff like that so there's like some really good optimizations that can be there appreciate for ya three fish that the vision is attained it it's data in code yeah and that yeah the bundles well the bundles yeah it's possible the bundles have CSS there's CSS and J's which is like a way of like like splitting your CSS into the components and then you kind of like pull in the CSS along with the JavaScript bundles which is really nice because then you're not loading all your CSS for your entire site on every page just the CSS is needed for that page yeah right now it's basically just JavaScript and data but it should be possible also to prefetch like images and other things like that so you could say you have some header image on the next page and you can prefetch that so when you click on it's like that which should be cool set awaiting great question I just been consulting with companies who are using this so far and we're gonna start off right now so probably raised some money and so forth and then get customers where's Joe yeah so you just you just pulled down on this on the fullscreen and then you have you just drop it in one of the others it's like just like the latest are those yeah the latest yeah it's pretty cool yeah so yeah so that web pack is like what's handling all that building that stuff so web pack basically just says oh hey one of the JavaScript files changed and then a tree processes it and then pushes it to the client and then does that hot reloading thank you we're sorry what yeah web pack but it's like one word it does get slower at some point but I mean yeah up - yeah it's except for extremely large sites it's pretty reasonable right [Music] in any unless it's like a really massive you know site would like say 50 different screens you know you're gonna be just fine rather yeah recommendation for life in park developer order wait for the end user to simplify the process so you know locals house isn't doing that where you can just yeah so this is pretty nice this is an open source markdown CMS that's designed to work with deficit generators I know neckla is a start-up that's doing like hosting prosthetic sites and they've been putting a lot of work into this so I haven't use it myself but I know people talk about using it with Gatsby so that's something to look at assume Drupal has like a markdown editor hey seems like a reasonable thing to do but maybe you could write that you can write a really good Drupal markdown there's also contentful which is another CMS I don't know if it's blasphemy then bring anyways it natively supports markdown and it's so it has a pretty nice editor as well so if you want to give your clients like markdown this is another option and I do something like that yeah I mean this and also I mean every everything on the sites markdown so like this page is flashing out this page literally but that page this page is markdown cool I noticed so yeah we're actually past time I mean happy to keep talking to people but I don't want to make everyone say

Channel: Bay Area Drupal Camp

Views: 8,479

Rating: 4.8805971 out of 5

Keywords: BADCamp, Drupal, Drupal Camp, BADCamp 2017, Open Source CMS

Id: TuVeWTieJGI

Length: 50min 34sec (3034 seconds)

Published: Mon Oct 23 2017