 I think we'll get started now because we have a lot to cover but first of all thank you for attending a session which is titled easy decoupled site building with GraphQL and Next.js obviously easy is relative thing if you know how to do it then it's easy so maybe in the beginning I'd like to have just the view on how many of you have used or know what GraphQL is okay good so fairly few what about how comfortable are you would react in JavaScript in general not so much okay good but in any case never mind the details in this talk I mean the technical details if you need to go back to them please do do later because it's going to be a lot of things in a quite a short while good so let's get started with a brief introduction of myself so I've been working with I'm Janne Tarbinen I've been working with web development things for over two decades at least 12 of those with Drupal also maybe not so much recently but in any case I work mostly with the the current day job so in my company called Easy Systems which creates content management tools for for enterprise customers and I usually use TypeScript, JavaScript, Symphony and PHP so pretty much the familiar stack for for Drupal developers nowadays as well so but in addition to my day job I do believe that you have to try things to actually learn things and to minimize the risk I do them during my my evening job so Malak and this talk is about an exploration of mine into some technologies that I I chose to try and that's my Twitter handle and that's my official personal branding image so if you see that somewhere that's me good so briefly about the agenda so what is the coupled site building we'll go through that briefly then a very quick introduction to both GraphQL and XJS what are they and then to the actual meet so a brief overview of what I've built using these technologies to give you a hands-on idea and then finally a few experiences or things that I could consider good bad or maybe even ugly about these different tools good so decoupled site building has been quite popular at least as a hype term for some years now so it's technically that you build a website based on some kind of content feed nowadays as in today's keynote was also discussed there's also many which only offer a content API and those are very popular but in many cases still the traditional back end is used to build websites and maybe the coupled way of using using is not the norm and I'm sure there's many reasons for that one obviously is that then you might want to spend too much time fine-tuning something which is not really relevant and so on but in any case there's always room for improvement and here a brief introduction to these two technologies so GraphQL and XJS there are two separate technologies which I thought that they will work well together they're both three opinionated so they kind of decide a lot of things for you as a developer I like that because I like frameworks not having to decide details so so I just kind of like to work on on that and the key here is that we create a decoupled site with the server side rendering so the first render is done on the server side and then the GraphQL API and the client picks up from there so you can imagine there's some complexity there but I think we've come a long way in just a few years you could already do this a couple of years ago but now with these technologies being more mainstream and more mature nowadays actually if you look into it soon you'll imagine that it's something that you could also take into use without too much overhead so I always like to have options so there's obviously other options for both GraphQL and XJS but I chose to to try these so GraphQL two years ago so it's as announced by Facebook so it's an API you can make queries in JSON format or something that looks like JSON and then you get JSON back it's a little bit different from REST mostly that doesn't focus on the whole verbs thing that you you get when you want to read and you post when you want to create and patch when you want to update and so on so there's obviously discussions which is the proper way and so on but this is I think interesting in many cases. There's many options for CMSs and content APIs for this talk I tried a number of different tools. The content APIs at least CosmicJS and GraphCMS were too limited to my taste so I didn't choose to use them I choose to use easy platform but that's something that then for Drupal you also have the GraphQL module which is being developed I checked that it's only inactive user in 40 sites so it's really not mainstream but from what I read it's it's maturing fast so that's kind of what GraphQL is then about Next.js. Next.js is a JavaScript framework so it's a framework it by default decides a lot of things how you want to route things how you want to render things and so on. This is something which is unlike maybe kind of more traditional frameworks which work on the framework on the browser or in the client. This framework both works both on the client and on the server so it's some challenges there but it's anyway the key. It does use React as a universal view layer and it does run as said the same code on the server and the client and it's quite flexible you can actually modify modify it quite a bit but you don't need to. So this is the brief introduction to these two technologies. Then to the kind of hands-on demo so I built a demo site for well it's not a demo site it's real website for the largest finished speaking React conference in the world called Rauma React so React Rauma 2017. The end result is rather straightforward looking website I didn't want to get too complicated because I wanted to learn the basics not get all in but the idea here is that there's an API GraphQL API and backend which drives the site it technically is a very limited site it has the front page and then a navigation which works like this. So in any case you can see now that here the GraphQL API picks up and if you go to another page you can see that it does more queries but if I do just look at the source it already gives me the source rendered in HTML so if I use an alternative browser such as links the site actually works just as well even without JavaScript which is good for SEO and the first load speed. So that's kind of the idea of what I built and how it works is the GraphQL as I said it's an API format or method standard more or less if you see something like this this is called graphical it's a client for the GraphQL API. The GraphQL API one of the key things is that it tells you what the what the API can do so you get automatic documentation which you can use for example with this client but any other client there's modifications as well so mutations is when I want to write but when I want to read which is in my case I just wanted to read I use the query and from this list you can see a number of different options anytime you use a GraphQL API these will obviously be dependent on your application domain so in Drupal you may have something like views or fields or whatever so in any case that's not it doesn't define this but how it works is that what you can do is write queries and because we have this kind of type information about the API we can actually do queries such as location children and the API can give me information then this what I'm writing here this is actually the GraphQL syntax so I can find a location children for number 668 and then I always get the result in this case what I exactly what I asked for so if I want let's say I want the content for from this API you could see that we have a very shallow simple content model and then from the content I want to name so you can see that opposed to creating new endpoints it's quite straightforward and so on at least in the query method you can also alias things so menu items and then I say the menu items then I get the menu items here and so on and I can also perform multiple queries so if I just want the location one single location which is sort of the front page I can do a query for that and then obviously I need to pass an ID I will use 68 again and I will get results from here and this is then when you use GraphQL the query language this is what it looks like so you will make different kind of queries and so on and when you think about how you want to create decoupled sites so you have kind of different queries that you want to use and then render use so just build quite a basic website like this so the key part here is then if you're familiar with react next js is very very simple to get started with so for each page you have a single entry point which maps directly to the URL so for pages slash about js so in this case if I have something like about here the framework will handle that it loads this page then it loads my react component so this kind of really low barrier to entry and then you get already the server side rendered functionality as well as the front end taking over so this is really really the kind of meat of it is the low low barrier to getting started with then obviously if you consider like PHP to something like this so we had index js or something like that if we want to pass parameters so in this case we have the single page which is activity 71 here I wouldn't get caught up in the code but we simply need to pass the activity and then we get the parameter and then we can perform a query to get the content for this specific page so in this case one single image is one single page where GraphQL in this sense comes in is that if we think about the query language that I typed here it's very straightforward I don't need to send some specific headers or something I can just do queries and the result is pretty nice or simple to manage so the query language is simply written in line for example in my index js what I actually do in the back end the code is by the way available then for you to see how it works but in this single query I get first the front page information and then I also get the navigation information so I can do these in a single query which may have been something like unorthodox just a few years ago to do something which looks like this let me see so the code for that specific page obviously we have some imports in the beginning but this is the front page so I perform the query here obviously you don't now see any results but you could technically build the query in the tool and then copy paste it here I do pass one parameter which is my root location ID which is 68 which I used and then I also get the activities which is in this case used for the menu and for rendering obviously because this is built on react if you like react it's very kind of familiar to you so you just have your own types then you output the values here and you get you can also then create reusable components so in the previous talk we talked about tweak components but in this case obviously then you can have a navigation component and then you can reuse that navigation component from page to page which is sort of something that you can use then the this is just the simplified view of that template and then the navigation JavaScript is also here just in line so it's very simple I get the items and then they get a title and I loop them through and so on so this is nothing really as said it's nothing exciting in the sense that it's it's still it's essentially the end result is a website and you do need to kind of find the use for something like this so it was more of an exercise but I did find in general that I was pretty happy with the setup it creates something like a single file if I go there I can see the query the query is simple to read the templating my personal liking is now that actually the react is a really good templating language because it forces structure it forces you to have components within components as opposed to something which is just outputting JavaScript or sorry HTML so it's good another nice thing is that you can export so you don't need to run the node server which you normally would need to run a node server to actually serve this information out so you can export just that HTML I also found that the framework the next JS framework it is flexible enough for me and as opposed to sort of front and only decoupled option it's obviously better SEO because you get server side rendered for free essentially and it's also then that you can build really non-compromise UIs if you have rich front end functionality well you can use this together with anything else that you would use with react and so on so you can integrate really really well into these kind of standard JavaScript current or contemporary things so then going forward to the bad things so as said I said the title was easy decoupled site building but if you don't know JavaScript or JSX for react it's not necessarily very easy to begin with but this is a really good place to start in my opinion as opposed to two years ago you would have first spent some time trying to figure out how to get server side rendering to work you kind of get that out of the box then you do obviously lose CMS capabilities so if you build site like this then you will need to build some kind of layout management system which is not necessarily something that will return any additional value to create in this kind of a way also some simple things are really complex so if I want to do Google Analytics on a regular site I put the code there on the site I navigate from site to site it works here you have that same code running in the browser and in the server and then you have to just take things into account this is obviously for every site like this but sort of something which is just interesting another thing is obviously the development because you're working with a rendering system that works both on the server side and on your browser client there's some things which will bite you for example just cores headers if you load the site like really on a page load the server won't care that you have cross site origins headers or not it will work but then next time you click from that page then you will get an error so I'm sure there's situations where very simple things will become very hard because you decided to build it in some fancy way so that's one thing then obviously one thing which was current for React also until recently last week so the for React there's no more patent drama at least in theory but there is still some people like to FUD about graph QL patents so Facebook has some patent of using something like this for social media applications but whether that's really a problem for you it depends probably not then going to kind of the ugly things so as said it's really nice it was a nice exercise to do but I'm glad I tried it before I tried it in production well obviously the site is in production but in any case so does it really provide any value the initial page load is actually bigger because you need to send all the extra JavaScript things so the initial page load if you just go to one page is actually bigger it doesn't give you much advantage and because you're doing caching both on the client side and then on the server side I can imagine that you will have a world of weird things which you never either you do on site on in browser or then on client or sorry on server rendering or on client rendering but when you do both and mix them I'm sure you'll get into all kind of interesting situations and then yeah because if you're running without cache then you're actually rendering react nodes all the time and that's CPU bound so you're not just sending out an HTML blob you're rendering doing a lot of work that could potentially be something of a performance bottleneck probably not in a low volume site such as this but in general it could be and then obviously because I do server side rendering if my first request to the back end is really slow to the API because the server is doing it first then I don't get anything before that so it might be also then that the performance is not better it's worse if you have something like things and then yes the caching especially if you have sessions or things I can imagine there's all kind of interesting things there then something which I think before you get all kind of intoxicated as I did just looking at this query and then looking at queries I can make I can nest things and you know get all kind of things in a single query I think it's healthy to remember that all of this data is then obviously available also to any person walking on the street so if you just expose all the end points here that you can search for users then before currently maybe a Drupal site you know the URL to find users but with this it will tell you straight out that here with my users so what I would probably do if you were to build a decoupled site using GraphQL or just expose any GraphQL endpoint just limit to those that you really need not necessarily everything such as here I have everything including users and probably I wouldn't so you can obviously have many GraphQL URLs where to get information from and then obviously because the queries can be very complex there's a mechanism that allows you to create queries that don't overload the server by kind of calculating a score how complex is the query but I'm sure you can still take shortcuts and not calculate and then you do a DOS because you can just do any kind of a query there and then one thing which may or may not be a very valid concern is just GraphQL and SQL injections because technically I'm writing a query here in line then I'm not sanitizing this parameter but I could technically I guess escape this and then just start doing something else fetching users or whatever obviously will always be locked down to the specific API user but I'm sure it's still something to consider when you think about that well it's really fast to build but then usually then there's a downside as well that those can be complicated and because somebody will will be looking if you have a high profile popular site what does your API actually tell me that I can do so somebody will just be knocking on the door so first of all we have a few minutes left I think we managed to get quite a lot of information as said if you want to go to that website and find the source code well you can either find the slides or then if you go to react.nu which is in Elvish language which is Finnish you can find on the view source and on GitHub you can actually execute and see how the whole application works and hopefully then learn from something what I did and as said this is a very simplified example and on purpose but as a kind of ending note I think I would build something simple at least now and who knows then in a few years whether this will be the regular thing or whether this will be a curiosity that remains to be seen so do we have any questions? Good I guess that was too much information maybe and then we have a contribution sprints on Friday I was told to remind about this and then obviously feedback as well so you do use the feedback information whether there was too much information too little information or my hair wasn't so nice anything works good so thank you