Jamaica real time feedback into the behavior of your distributed systems and observing changes exceptions errors in real time allows you to not only experiment with confidence, but respond instantly to get things working again. Code hello everyone, and thanks for joining my talk here at conf fourty two. In this talk I'll be explaining how you can create a web application of the future using typescript and graphQl. So let's dive into the presentation. So, web application of the future using GraphQL and typescript. So when you're watching this talk, I hope you already have been using any of these languages. And if not, it's perfectly fine, because I will be explaining what both languages are and how you can use them inside your project to create a web application of the future. So who is the talk actually for? Of course it's for all of you. But I made some special use cases. So when I like to open this talk, I always like to see what people think could be a date. So December 7 is coming up, December 7 is an example of a date, and this would be the calendar date of course. But then you also have this dried fruit, which they also call a date. So a date is not only a calendar day, it's also a dried fruit. But then you can do more stuff like writing the word date using this dried fruit. So that's a third example of what could be a date. And of course then you have this scenic scene from the Disney movies, which is also a date of course, like a metaphorical date. So these are already four examples of what a date could be. And if you would go to JavaScript, you can find even more examples of what a date could be. So a date could be a date object definition a date could be a string that defines a calendar. Date could also be a timestamp. So this timestamp would be December 7, and date can be much more. Date could also be an object. And this is why you of course need to use a type system, and especially when using JavaScript. So JavaScript is a very versatile language, but means it's also error prone. So if you ever saw something happening in your console, in your developer tools, any error because something was undefined or string could be fined or maybe function doesn't exist. This is all because typescript doesn't have a type system. If you would have a type system, you would be able to catch these errors whenever you're building your code, instead of when someone is using your code in example to open your application. So a little bit about myself. So my name is Roy, I'm from Amsterdam and you can find me on Twitter using the handle edcad. And I work for a company called Stepzen, and at Stepzen we make it easy to build graphql APIs. So maybe later on in the talk, if there still is time, I will show a short demo with using a GraphQL API and then transforming the GraphQL API into typescript types that you can then use in your application. Besides this, I also work with my own company hack team to arrange. I do trainings and workshops and cool stuff like GraphQl typescript react, and also I write books about all these different programming libraries which you can find online. So first, what you already know about typescript. In the beginning I said, it's perfectly fine if you don't know typescript or graphql, or maybe both. So let's give me a short introduction about typescript and what it is and how to use it inside your application. So typescript is what we call a type superset of JavaScript. And the first time I heard about a type superset I also needed to Google this because I had literally no clue what they meant. So I asked the Internet and a superset is a programming language that contains all the features of a given language, meaning that if you have typescript, it contains everything that JavaScript also contains, but it has been expanded or enhanced to include additional features. And in the case of typescript, it includes static type checking, meaning that you also have a type system next to using all the features that JavaScript already has and that you already have been using for years and years, or maybe just months, because maybe you're a new programmer, could be both. So it type superset, and also it's important to know that typescript compiles to plain javascript, because maybe, you know, maybe you don't. Your browser cannot read javascript, cannot read typescript. Your browser needs to read javascript, otherwise it cannot render your website. So typescript compiles to plain JavaScript. So if you would have this code block which we see on the left, you can see we have a typescript fruit with two fields, name and variety, and then we have a function, and this function will loop over an existing array of type fruit and then creates a new array that only has the name of the fruit in there. So this is how we do it in typescript. But your browser cannot read or actually not parse this code. So what you do, you need to compile it to JavaScript in order to make it readable for the browser and the typescript compiler does this for you if you're using react, view, angular or whatever. They also compile this to JavaScript for you so it's readable in the browser. And if you're not familiar with typescript, if you go on the left side you can see the type fruits. It is a type definition, you can see the fields. So we're defining something as a string, and then if you go to the function, you can see we also assign a type to the input of the function. So this way typescript will know what comes in the function and it can also determine the output. So typescript in example will already know that item name is a string, so it will know the return of this function will be an array of strings. And also it uses the latest ECMAScript features. So we know typescript is a type superset, meaning it has all the features that JavaScript has, and meaning it also uses the latest ECMAScript features that you can find on ECMAScript. And if you look at the typescript library on NPM, you can see it's very active, it has tons of weekly downloads, and the versions are updating almost every week. And now we know typescript has types. Maybe you can guess what else has types. Of course you know this talks about typescript and GraphQL, so you could have guessed that typescript and GraphQl both have types, and these type systems can play along nicely, as I will show you later. But first I'd like to know what you already know about Graphql, because maybe you're already familiar with typescript, but you haven't used graphql before. Or maybe you're using GraphQl but haven't heard of typescript or the other way around. Of course, although both technologies have been around for almost ten years. So I'm pretty sure that most of you have heard about it, but maybe you didn't have the pleasure of using any of these inside your projects. So what you already know about GraphQL. So GraphQl is what they call a query language for APIs. So GraphQL is not a framework, it's not specifically tied to JavaScript, it can be used with any programming language, and it's most of all a query language. And how you implement that query language is up to the implementation that you use. So you can use node js for it. You can use typescript, you can use Python, PhP, go scala, Java, whatever you like. And this query language will look something like the following. So if you look on the left side you can see a query called GitHub queries. And this is a query I'm running inside my code inside a graphical playground. And GraphQl playground is a way to work with GraphQL APIs. In this playground you can see I'm running a query. So there are multiple operation types. In GraphQl you have query mutation and subscription. So there are three. And this scenario is a query. And a query is mostly relatable to a get request for rest APIs. You can say my query is called GitHub queries and my query name is GitHub underscore user. And in here you can see I'm getting GitHub information for a specific user. And on the right side you can see the return of the request. So this includes all the fields that are requested such as bio, followers, id and login. So how graphql works, you get only the data you ask for and only this data. So you already know that it might look a bit like this song from the Spice Girls. Tell graphql what you want tell Graphql what you really really want and you will get exactly what you ask for because that's the way the query language from GraphQl works. And of course there's much more in the query language for GraphQl that you could learn. So I would really advise you to go on Google if you're not familiar with GraphQl yet. Search for my name search for GraphQL and you will find more videos. And another characteristic of GraphQL is it offers a single endpoint for multiple resources, so you only have to query one endpoint and nothing more. And this endpoint can return multiple entries. So multiple resources. So maybe you get information for multiple data sources at once using one single endpoint. Whereas with rest you probably have different rest API endpoints for different tables in your database. So maybe you have product information and then you have reviews for the product. Typically you store this in a separate database table, meaning that in rest APIs it will also have a separate rest API endpoint. In graphql everything comes in one single endpoint. So what you see over here is I took the twitter rest API because Twitter doesn't have a graphql API, it only has rest. And I graphql this using stepsamp. So with stepzen can example you could import the twitter rest API endpoints and then turn it into GraphQl. That way you can just create a GraphQl API without having to need any prior knowledge about building GraphQl APIs and still get the pleasure of using GraphQl in a query language format, as you'll see here. So what I've done, I've graphql, the twitter search API. And with the twitter search API you can search for tweets that contain a keyword. So I searched for tweets that contain the keyword Einstein. And as you can see on the text on the right side, it actually contains the word Einstein. But what it doesn't do. So the twitter rest API, it doesn't return the name of the author. So the person that tweeted it, or maybe the bot, you never know. So usually it's a person tweeting, luckily. So it doesn't show the name of the tweet author. So what I would needed to do is I need to send a second request to the Twitter rest API to get the name of this author. But as I have GraphQl, this API, I can get everything on one single request. So this nested relationship with author can be loaded all in as one single request, instead of having to do two different requests to the tritarest API. And most of all, to get back to the original topic of this talk, it's based on the type system. So just as typescript, GraphQL is also using a type system, it looks a bit like this. So if you would go to a graphql playground, and this is a way to work with Graphql APIs and you saw it before, and here I'm doing this search again. So a Twitter search, I define a query and then on the right side you can see a documentation part. So this is actually the self documenting feature that GraphQL has. So GraphQl has a GraphQl schema as its top, and this defines all the type definitions, all the queries, and then it's being used by playgrounds like this to give you a way to introspect the GraphQL API. So let's compare these two type systems. So we know typescript as a type system and also graphql as a type system, and they aren't that different. If you look on the left side you can see typescript, and on the right side you can see Javascript, you can see GraphQl as you can see the way to define them. So both are called type product. You can see they have ids, title, thumbnail, price categories, reviews, and the same for the GraphQL type. And both have basic types or scholar types. So in typescript we call these basic types, everyday types. So these are the build in types, things like numbers, string. There are a couple more. And in graphql we have basic scalar types. So these are integer, string, float. And you can already see there are multiple ways to define numbers. In GraphQl we have integer and float. So integer is if you don't have any decimals, and float is if you have any decimals or a price in example, whereas in typescript everything is a number. So a number can be both an integer or a float. Doesn't really matter, and they also have relationships to other types. So in case you want to relate the categories type to a list of categories or an array of categories, you can do this in a similar way, you can note the square brackets. And in typescript there are actually multiple ways to define an array. I chose for this way because it's mostly related to the graphql way of doing so. And then the biggest difference actually is that in typescript everything is default, everything is required by default, whereas in graphQl everything is optional by default. Because with GraphQL we want to give people options. So maybe you want to reuse the same query, the same type for different clients, different screens. Whereas with typescript we try to make everything as types as possible. So that's why everything is required by default in typescript and optional by default in GraphQL. So how to actually combine the two type systems? So in typescript we saw we have types and they're quite similar to types in GraphQL. But you can imagine if you have a GraphQL API, you don't want to be manually typing the typescript types inside your applications. So for this we'll be using a library called GraphQL code generator. And GraphQL code generator is an open source library that helps you to generate typescript types based on your GraphQL API. It's a CLI and I actually like CLI first project, first products. So it steps in example, we created a CLI first tool to generate graphQl APIs. And with GraphQl code generator you have a CLI first tool to generate typescript types based on GraphQL APIs. And it takes a schema as a source of truth, meaning that your GraphQL API will always contain will of type system, whereas typescript will make a copy of the type system. Of course, translated to typescript that you can use inside your projects. And both the type definitions are quite similar. We already saw this. So we have type product, so we have type product. We have id, title, price, thumbnail categories, reviews, and they're quite similarly defined for both technologies. Once we take the GraphQl schema as a sort of truth. We can use graphQl code generator to generate these typescript types automatically instead of having to define them manually. So C has swapped them over. So you can see Graphql is now on the left and typescript is on the right. And we're going to be using this GraphQl schema to generate typescript types for our project. Because of this way, like I said, you have no duplication of code. You can also get to something which I like to call the holy grail of full stack app development. It is to get end to end type safety, meaning that your API is types, your project is types, meaning nothing can go wrong in between, because these projects are linked to each other and the data flows are consistent. So if you have an ID in your graphql API which is of type integer, it will always be of type number in typescript. And if you create the connection between the two, you will know for sure that these types won't be giving any issues later on. The same for title will always be a string, thumbnail, price categories. Everything should be type safe. If we do it like this, it looks a bit like this. So you basically would map in typescript, you would create a new type called scalars. So these are the basic scalars, the built in types for graphql. So Id string, boolean, integer, and float. And you would map these to the type you have in typescript for a product. And if you would do this manually, you can imagine if you add new types to your schema, it will get quite messy because every time you need to update your typescript code as well. Well, maybe someone else is making changes to your API that you don't even know about. So what we want to do, we want to auto generate these to make sure that we don't have any mismatches in our types. And we always keep the typescript code up to date based on what we have in the GraphQL API. So we're going to be mapping the basic typescript types to the scholar types we have in GraphQL, and then we're also going to be keeping the relationship to the non scholar types. So any of the relationships we have in GraphqL, we just copy them over to typescript. Or actually we're going to be generating them over to typescript without any additional work from our side. The only thing we need to do is run the graphQL code, generate CLI, and this will generate these types for us automatically. So let's try it out. I actually have skipped the next js part from this. We're just going to be using GraphQL code generator. We're going to be using a GraphQL API and then we're going to be generating typescript types using graphQL code generator. So let me head over to chrome where I have a cool graphql API set ready for you. So in here you can see a graphical playground. We have our GraphQl schema. You can see we have multiple queries, we have queries to get an article, to get a list of articles. And this is actually a graphQl version of the practical dev rest API because they also don't have a graphql API, they have a rest API. So as you can see these are the latest articles you can find on practical dev. So if you would head over to practical dev you will find these articles as well. And in example we can get a list including the id and then we can just display them here using graphQl, tiny bit smaller. So this is a complete list. We can use cool stuff like pagination. So maybe say we want to have page one, we say per page is maybe just one result just to see if everything works. Gives us the first go to page ten. We can see, we see in the 10th article. So this should be the last one if we're doing this as you can see. What's so bad about four week sprints? Well, I don't really like to work in sprints. I really like to work Kanban preferably, but never mind, not the topic. So this is our GraphQl API and what we want to do, we want to use this Graphql API inside a project. So I have something set up in vs code. Let me just clear this. So I'm using if you go to package json. So I've installed graphql code generator, it's CLI. I've installed a typescript dependency, I installed GraphQL and then I also installed graphQL code gen typescript react Apollo library and there's also plugins for view, Apollo for Oracle, for a couple of other GraphQL client libraries as well. And we're going to be using this to actually generate typescript types based on a GraphQL API. So this is our graphql API. I have a documents page in which I just going to put this graphql query. Let's put this query in there. Just name it query. And now the only thing I would need to run is run mpmx mpx graphql codegen take the config I have here in codegen jaml which has my graphql API. It has a place where my operations are stored and then it has a connection with all the different plugins. If I run this graphql code generator will start working and start generating typescript type definitions based on my graphQl schema. So depending on the speed of your Internet it might take a while because what it does, it first introspects my graphQl API, then it takes the graphQl schema, then it parses the operation I have in this file and it creates the typescript types based on both the schema and my graphQl documents which is this file. And then if all successful it will generate this file called GraphQl tsX. And in here you can find all the type definitions so you can see the mapping of the basics, color types which all looks good. You can see the type article which is all the fields that the practical dev rest API has that we graphicalized. So if we go back to graphql and we could go for query, we press article body HTML is a string canonical URL Id last comment organization. You can see the role there. So id description title and also the relationships are there. So if we find user an example is also there. Type user and type user will also exist here. If you click on it you can see what it looks like. Also if we click on it here, should be able to see what it looks like and then figure out if all the types are matching. I'm not sure what's going on here, but if we go up you can also see that it has created hooks based on my query. If you look here you can see use query, use lazy query, you can immediately spot a mistake. It says unnamed query. So let me just go back to my operations file and make this a based query. Let's do get articles, save this and what we're then going to do, we're going to regenerate this file. So now instead of the unnamed query I should have a named query there which makes my hooks look a bit nicer. Like I said, depending on your Internet speed it might not be that fast because it needs to send a request to the GraphQl API introspect all the information you have there, generate the typescript types and of course also take this operations GraphQl file into account. So once this reparses it will generate a new graphQl Tsx file with my updated file, updated typescript definitions and then of course if I start adding new types here. So instead of ID title I can maybe also add description in here, the body, HTML and whatever types I have inside my graphql API. Because we have two things. We have the graphql schema and then we have the actual queries that we like to run and the queries that we like to run. They are there because of course in your application you also will be running queries. You can see this is named now, so this is the type return and then you can see the hooks being created here for me as well. So no longer do you have to insert Apollo client inside your app. Instead you can just use these auto generated hooks for Apollo client that were generated by our graphQl code generator library. And there's more you can do of course. Well, if we go back you can see if I add a new file, a new line. So this description, because maybe my backend developer added this description to my rest API, meaning that all the things I have here, they should be updated, they should also include the description. Now if I rerun this graphql code generator, so this is pretty much how it would work. So every time you add more queries, you add stuff to your schema, you make a change somewhere. You can just rerun the graphQl code generator, and as it's based on the CLI, you can just implement it to work with any of your existing build pipelines or wherever you like to set up your code. So that was the demo. I hope you liked it and I hope you maybe are thinking right now, should I start converting everything to typescript right away? And I can imagine you're feeling this because, well, typescript is pretty awesome. And if you're still using JavaScript, you're probably missing out on all the cool things that typescript is doing for people. But then a little heads up, I actually start doing this once. So I started to implement typescript for my projects and I just renamed all the files. This is what happened. So everything imploded. My Javascript code base looked like this seconds after adding typescript to the project. And this is of course something you want to prevent. You don't want to do this, you want to make sure that your code is working. So if you want to migrate to typescript, I would really recommend you to do it gradually. Start migrating some files to typescript. Keep the rest in javascript until you know for sure that things will be type safe. And I can assure you it will be going faster than you think, especially if you're using GraphQL already. It's easy to generate the types, meaning that it's easy for you, relatively, saying of course, because, well, in software development really nothing is easy. But let's say it's straightforward to generate the typescript type definitions for your graphqL API. But most of hope, what I really hope that you took away from this talk is that you're interested in start using a type system for your application, your API, whatever you're building. So thanks for watching this talk, and if you enjoyed, make sure to connect with me on Twitter using the handle at get hack team. So thank you, and I hope to see you around next.