Importance of Natural Resources

Coding a graph application from scratch with GRANDstack

– [Elaine] Welcome to this
10-minute lightning talk entitled Coding a graph application from scratch with GRANDstack,
presented by Christian Miles. You can start Christian. – Thanks Elaine. Hello everyone, thanks
for joining my session. Let me just share my screen. It’s really great to be part of this excellent conference today and hopefully you’ve been
enjoying the talk so far. I’m gonna be talking
again about GRANDstack. You may have seen some earlier– – [Computer] Your screen
sharing has been disconnected. – Can you still see my screen? I was told it was disconnected. – [Elaine] Okay, we can see it now. – Can you see it now? – [Proctor] Yes, we can see it. – Great. I won’t go full screen
anymore just in case it doesn’t let you see it. Sorry about that.
– Yeah. – So, yes, I’m going to be talking about the GRANDstack today. And talk about writing
applications from scratch using the stack. My name’s Christian Miles, I’m
calling from near Vancouver in British Columbia, Canada. So it’s nice to be part of
this global conference today. So I’ll be starting off by talking through what GRANDstack is. I’ll touch upon why you
might want to use it, and then I’ll walk through how you would build an app from
scratch using GRANDstack. So, GRANDstack is one of
those nice little acronyms that refers to a number of technologies that work well together. It doesn’t take too much to spot that it’s DRA and ND here. And the first that we have GraphQL. And for those of you who
aren’t familiar with GraphQL, it’s a real modern equivalent
or modern replacement or alternative to Rest API’s. So really is a query language for APIs, and it’s combined with a server runtime for executing those queries. And there’s a lot of
great benefits to GraphQL over Rest and I’ll keep
on finding these benefits in production environments. I think the biggest benefit potentially, is the strongly typed nature of the API’s that you can build with GraphQL. So what that means is you will always know what type of data you’re
returning from your queries because there’s a schema
that underpins the API kinda baked into GraphQL. Also, another benefit is
you can run nested queries. So you could say, get users,
as well as their posts in the same query. Whereas with Rest, you’d
have to build a whole API to serve right back in to work out exactly how to return that. MIMO GraphQL is very flexible for doing those sorts of queries. So just like GraphQL is a
modern approach to APIs, React is a modern approach,
that’s the R in GRAND. So React is the modern
approach to web development. It’s really just a JavaScript library but it really helps their web developers write applications with
things in mind like, state management, lifecycle
updates in an application, it really cuts down the boilerplate code they have to write again and again and helps you be a bit more consistent in how you write applications. Now Apollo, for A, Apollo is, it’s, I think of it as the glue
for GraphQL and React. Although, that does a
little bit of disservice because, of course, Apollo,
there’s a lot of other technologies that are supported by Apollo, and the great tooling that they have. But I’ll be showing you
some of that tooling today and whether it’s the client
side, the server side or even the nice little playing ID that I’ll be showing you a second. And then finally, Neo4J, I
don’t think I need to explain what Neo4J is. After all, you are at
a conference for Neo4J. But really, for the
GRANDstack, it really sits at the bottom level. It’s very much a storage layer, of course. And you get all the good
stuff that you’d expect from the index for your JSON. So it’s really, really nice. Now, the reason I’m here today is that I work with Cambridge Intelligence and we have a product called ReGraph. Now, ReGraph is a graph
visualization library for React developers. And that of course means
that it fits very nicely inside of the GRANDstack. So that’s what I’ll be showing you today. And the other benefit to ReGraph is that you don’t need to change the acronym. It’s all there. So it’s nice that you can
slot in there like that. So, here’s my basic
application architecture. I just drew up this
diagram to give you an idea before I show you the code. Also on the top right, this is my some sort of server side component and we have the node.js logo here, so it’s always nice to use
the same programming language for the front end and the back end. And we have Apollo here. You’ll see that I’m using
the Apollo server to host what is my GraphQL API. Down here, this is my clients. This is talking to the API. So that query is sent and
the JSON is in the response. And I have ReGraph in my application along with the client side, Apollo client, as well as the React in my frontend. And then finally, the API
itself talks to Neo4J, here in the top left. Really behind the scenes, this is using cipher, but it’s also using the bolt driver as well to get a nice efficient
connection to the database. But one thing to note here
is that the connection here, you know, there’s no
need to write any serve, any ciphering in your front end or even on a server side here. You can just leverage a
schema that you derive from your Neo4J database. So, when I talk about building
an application from scratch, it’s maybe a little ambitious to try and do that in what is now five minutes left in my talk. So what I have done is
I’ve given you an idea of the functions, the
commands you would run your command line, to really
set up your environments and there’ll be a blog post to follow with these details to tell you more about breaking this all down. But I didn’t think was worthwhile you watching me just install dependencies. So, this one on the
left here is an example of the sort of visualization we’ll get as a result of building
our API on our frontend. And then on the top here,
I have my client side. This is what I did to start things off. So I used Facebook’s Create React app, a great tool for starting
out with React development. I then added our visualization library, ReGraph, my environment. And then I also installed
some great plugins and toolings from Apollo. Apollo boosters is a zero configuration way to have your client side code. Also the end here I have a
GraphQL where this is actually the language definitions. And then finally into this slide, we have a server really, really simple. All I do is create a directory, I initialize it with Yarn, my sort of package management choice and then I add my dependencies, and I’ll talk about dot end in a minute, but it’s not necessary. It’s good practice. So let me jump to my code here. First up, on the left hand
side, I have my server, and I, again, I’m not going
to just type this all out so here it is for you. Very, very simple, it’s just 22 lines. We instantiate our driver, for example, we create our server. And this is where the main
bulk of actual work happens. And I want to point out two things. Firstly, I’m using a dot m file
so I can get my credentials from the database from disk
rather than having it in the runtime code. And here I’m actually
pointing to a nice little Neo4J instance there that will
put the last night of the, all the talks from today actually. So then on my server, I
use a really cool function that comes with their Neo4J GraphQL JS, and that is infer schema. So there’s no need hand write your schema. What you can do is you can actually infer that directly from
your Neo4J database, which is really nice. So, this is my code for my server. So let’s give it a whirl. So I’ll just use Node on my server side. It says it’s gonna take a
few minutes to initialize with that schema. Just as a side note,
this is typically used to prevent having to write any schema to start off with and then you would amend it and change
it, but I actually find it works quite nicely
just to write it directly just always just to write the schema, at least for the prototypes. So now that’s running. Let me check the actual
server that’s being run. And this is what I have here, so this is actually the playground that is now being deployed as
part of that little server. And even if you’ve never written a line of GraphQL in your life,
this is really, really nice because it allows me to actually learn more about the API just by
looking at these type hints here. So I’m, here I’m searching for speakers, and I’m getting back the
companies that they work for. So I’ll get that back here. And this is the JSON that
I get back as a response. So, that’s great. So that’s the server side
and I can also use this as my endpoint for my application. So let’s go back to my code. Here is my really, really
basic application here. I’ve just amended the
Create React app output and I’ve fixed all ReGraph
into the application here. I’ve defined really basic items here, which is just my nodes
and my link, a SQL link. And then I have this nice
declarative component here for my chart that I want to render. So again if I stop this
little application now, it’s going to load up that
red tab with this application and this is, it was loading (mumbling). Starting again, here
is that simple, simple, really, really basic app. So it’s just of those two links. And this is actually our first
look at our ReGraph today, in my application. For my application, I
just chosen to just have a simple chart right now,
but an extension to this would be to add things like sidebars and tool tips and things like that. So now I have my static chart. Let me jump back to my code. And what I want to do
is I actually want to talk to the endpoint. So I have some code here
I’ll just uncomment. And you probably noticed earlier or saw that there’s a
mention of React hooks. Here I’m using a hook called use query which is really nice way
to talk to the endpoint. Here’s my GraphQL query
that I’ve just written here. And then, in my code instead of having these hard coded items, what I’ll do is I’ll just get those from that hook that I installed there. So now that’s been updated. You see the query that’s
been running in the backend. And then this is my
application on the frontend. So this is great. This is actually all the
tags for the different talks, as well as the talks themselves as well as the people who are delivering those talks as well. So, this is really sort of
end-to-end up at the backend, for the frontend, what it’s
like to visualize the data there that isn’t that obviousl
from looking at the tables or from doing ad hoc
queries against the text. And so, yeah, this is a
nice little application. I think if you sat me
down, I would be able to write this in 10 minutes and you’d have something like this up on your screen, which is really, really powerful. It’s a real benefit of the GRANDstack. So let me jump back to my slides here. I have a couple of questions here that you might want to
answer on the Hunger Games, but I’m more than happy
to answer any questions you might have about what
I’ve shown you today. Or if you have any questions
about ReGraph itself, my email address is at the
bottom of the screen there. Thanks so much for time. – [Elaine] Did you see the question? – No, I didn’t. – [Elaine] Where can we find the blog? – It’s yet to be released,
but if you keep an eye out on our Twitter account or
online, it should be released in the next few weeks. But yeah, all the code will be available so you can follow along
with what I did today. – [Elaine] Okay. Just give another minute
for people to answer their Hunger Games questions. Okay. Thank you, Christian very much
for presenting to us today. – Thanks Elaine. – [Elaine] Okay. – Bye now. – [Elaine] Buh-bye.

Leave a Reply

Your email address will not be published. Required fields are marked *