Transcript
This transcript was autogenerated. To make changes, submit a PR.
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.