ARMGDN - Build modern web apps using Apollo, React, MobX GraphQL, Db and Node.js - Vladimir Novick

ARMGDN – Build modern web apps using Apollo, React, MobX GraphQL, Db and Node.js – Vladimir Novick

n this talk, we will see how we can use modern javascript stack for writing serverless applications with GraphQL powered backend, Apollo, React and MobX client, Postgress or DynamoDb and NodeJS.

NDC Conferences

cool cool cool hi everyone little bit the echo need to get you stirred but that's fine I'm really excited to be here in in pole to actually my first time really enjoyed so far today we will talk about Armageddon in a sense of how we will build modern web apps with a polar react more based graph Gale the rest of databases and nodejs a little bit about myself my name is Vadim ah Novick this is my fancy logo which is basically copy paste from the S code into scheduler how it turned today I'm developer advocate at the IO and also Google developer X expelled author consultant and on a daily basis I work in web mobile VR AR and IOT field I probably should add AI in blockchain to be on top of buzzwords but still still not there you have my Twitter handle on the down left corner and my website so if you want to reach out and say hi feel free to do that and today we're gonna talk about lots of technologies so what all these technologies are basically about and what we gonna talk about today so we're gonna talk about a poll about some reactions about some world things called Mobile's types of graphs elephants and node doesn't make any sense right so let's start with react so how many of you have used a used react in in production great so you learned about tree or at least you use real at least you've heard about react so react is basically everywhere and if you've seen TV show Westworld there's actually a fragment from the from the show when they used react react grade class it's like all the version but yeah so something Westfold is not Facebook will talk about more weeks also so Mobile's is how many of you using Mobile's or have heard about more days few people so Mobius is Redux how many people have heard about Redux ok more people heard about Redux so Mobius is another version of state management basically state management solution that applies for functional reactive programming principles and today we will talk about mobile and mobile state 3 which is a different state management but based on Mobius so Mobius basically gives you the following flow we have similar to readers we have actions we have state we have some kind of computer values but automatically trigger reactions these reactions basically trigger a rendering and update of your state it looks like this we have a class to-do list and instead of class we have observable to do this and computed value whenever we will update these to do this array basically our component will render and we will get our state our UI updated so in a sense it works like magic but under the whole it uses JavaScript proxies for doing all this manipulation that seems to be basically mutable you can push into this array but in fact you create a new version of this array and use it on the client so on the on the UI level it will looks like this it will look like this we have observer which decorates to do list view and basically we map over how to do this and get a 2d view item so whenever we change these to use our component is rendered another concept in Mobius we can use action so anything but we we wrapped with decorate with action bound is basically considered as action and in a sense Mobius is different from redux Redux is more strict you have to use reducers you have to call your actions and everything works you know how about to debug the whole process but mobiles it's more like you can do anything that you want works like magic right so that's why I prefer for example to use mobile state tree so it's kind of a love child of both of them of Redux and mobiles and basically it gives you more structured way to work with your state management so it's a quote from official dogs I won't read it but it looks like this we create our model we have model erection and views whenever we trigger a trigger action we can update our model and views are the ones that we consume enjoy so whenever our model is updated the reaction is triggered and the whole component is rendered so it's more structured I cannot update my models without triggering these actions and it's more strict it has its specific type system for example here I define that my model to do has a title and done and titles of type string so it's more more structured way to do that and mobile Satori is actually considered one of the best practices for using would react not that Redux is not considered best practice so the both of them Mobile state tree and redux are the the solution for state management trying so G in Armageddon is basically graph QL how many of you have heard of using using graph kill right now okay few people so I will explain a little bit further about graph kill so what is Roth kill and before going into graph kill let's talk about rest how many of you heard about rest api is I want everyone everyone so rest api the core idea is good is to have URL for every resource you theory it's it's fine it works but not not at the real-world scenario we have like lots of coupling to implementation we have lots of problems like overfishing like under fetching for example if you want to get some resource let's say we want to get a list of posts and for every post we have a user ID and want to get the avatar image of the user we want to get its name so we are talking about another quest right now right so have already two requests and let's say a user has additional data so we basically couple in request or we creating specific endpoint that will serve the the very specific purpose of the of the web app or the mobile app right then we need to treat all this versioning and it doesn't end it just continues so we end up changing our request server and to get the needed data and the good example for it I won't go into it right now but you can check on the free time Star Wars API is basically an API to get in data from Star Wars universe and to get all films and directors and planets and vehicles you need to do tons of requests you just go and consolidate everything on the client and it's a tedious work right so what is graph here right and graph kill is a query language of your API and it's base it will basically works like magic all right so that's how it looks like it looks pretty much similar to Jason but it's not notice we don't have Collins here we have some domain-specific language for querying the data but you can notice here that I asked for all films films and the title and for the shape of my data returned to the client is the same shape I have requested so I can always know that the data that I request it will be the same when it's returned to the client so this was the simple example this is more complex example so here I am using fragments which are basically reusable parts of graphical queries and bunch of variables and what I try to do here I want to get all planets for each planet I want to get its rotation period I want to get all the residents of the planet I want to get what type of species this resident is these residents are I want to get all vehicles of the residents and in which films they appeared so if we do it through rest calls we have around like eight I haven't counted but it's around eight calls for every planet even more than that so in graph QL basically you define your types on your server you define your schema how basically your types are intertwined and connected and then from the client you can query your server and to get the data server work on the concepts of resolvers it resolves this data from different data sources or from one data source and returns it back to the client in the exact same shape that you defined so that's why it looks like like magic so how we basically so let's say we have a graphical API fine it's on the server someone created the server for us it's working how we actually consume graphical API in react application we are talking here about react application but we can consume graphical API even from plain JavaScript we can add script tag on our page we can send a post request provide its query and we'll get the data it's as simple as that but it would react we have additional graphical client which help us with heavy lifting so it's called a polo client and it has its own like sometimes has its own challenges like not like this ones but it looks basically similar similar something like this we install packages Apple client cache in memory reactor power on linkage TTP and what we do here we do when a link link it's our end point that we will query here in this example I will query endpoint I will do queries in mutations you can treat them as reading data and insulting updating or deleting data there is another concept of subscription that we'll talk a little bit later so I create this HTTP link and I create a new instance of Apollo client providing it with some kind of cache so I have in-memory cache and this is the additional cool stuff that Apollo clients brings us it brings us it's its own caching system and caching solution you can use in-memory cache you can use your Apollo cache persist and basically you can say all my data that's received to the client can be persisted to local storage and I have more performant requests and responses so for using it in reacts application we will wrap our up component with Apollo provider this provider will basically we provide it with client and pass our new instance of a client inside whenever we do that now we can use our graphical API for querying mutating or subscribing to the in this case for just squaring and mutating so what we do here we have graph kill target package and and react a polar package rough kill target package is basically your DSL for creating your queries of mutations so you it's basically target template string if if you look at this correctly so here we have the same syntax the graph kill syntax that I showed you in the previously in Star Wars API and stuff like that but here we have something pretty weird right so we have a query component and inside we have a function as its children so in react this patterns color is called render prop and basically a react Apollo supplies three components query mutation subscription with this render probe so inside here in this function basically we're component starts this like fetch fetch post request to the server to the server and returns either data error or loading so here we can treat our loading States we don't need to do like this action if it's loading or like what's like to understand what's going on we can just look at this loading and if it's loading we just return our loader if I have an errand we will return an error well in real-world scenario we'll probably present some kind of toast message something like that and if we have the data we can basically return our post list so this is queries mutations are not so different mutations are basically mutation component brought from reactor Paulo and inside you have the mutation function and the data so whenever we execute mutations in graph QL we insert update or delete data right we we get data back so this is what this data is stands for this function stands for the actual like calling the actual mutation and you would expect a commutation for example for forms of submit so that's what is actually happening here we we have this head post when we hit this add post with path barrage of variables and they go inside the mutation and create this and basically AIESEC admit mutation to the server I I'm going right now like pretty fast through the graph QL if you want you girl like more in depth in graph QL so I recently released the free bootcamp it's in YouTube it's four days 9.5 hours of studying so you can clearly check that all there are a bunch of additional info on both Apollo client and Groff kill in general so additional thing that I already mentioned several times so we have query mutation we have subscription so what subscription is subscription remember HTTP link we've seen earlier when we set up our client right so this was link HTTP link for basically our posts requests with queries or mutations subscriptions work through WebSockets and if you subscribe to changes then the data that is updated on the server is pushed from the server to the client through the WebSocket so we can get real time graph care on our on our client so here for example subscription looks pretty much the Cintas looks pretty much the same as query the difference though is that here instead of query we have subscription and over here we also have subscription the rest pretty much the same the difference in is in how it works these ones this one is working through WebSockets and data is updated instantly whenever you query something it's it's querying only one my component model was mounted and then it's basically stopped querying unless you use some additional tricks like for example in mutation you can pass this refetch queries and then it will mean whenever you update the form tell your graphical client to run this query again so sometimes you will use subscriptions for real-time data but sometimes you will just refresh your data again so okay so graph kill it's is a good thing right but what about mobile stay tree we've started with the state management right so a poll client actually comes with with its own solution for state management you can treat the same as you treat your data on the server you can trade the local data local state in a poll client but in most real-world scenarios you have already up with state management system that is working you have a bunch of state other in Moberg state tree or in redux and basically the concepts will be the same for redux here how i basically integrate between these two systems so we will start by creating a service or basically a function that will get two properties on error on response you want to call you can call them whatever you like and we'll have two methods inside we have will return to matters mutate or query so if you look carefully here what's happening I am calling client dot mutate and yes Apple applied not only exposes and react apple not only exposed these fancy components with render probe it also gives me the actual client that I can call the method on this client and call it to mutate to mutate my data or to query my data so if I want to integrate my graphical client with the car with existing state management system I will create some kind of wrapper that I will use in my state management solution for basically coherent data so in a mo big state for example we will have an action action of update post an ad post so our ad post will call our graphical service and provide two proper two properties basically on error and on response and each one of them will update model on the store and I remind you if you update something in mobic state tree the computed values the views differ that I define public story rerun reactions and then your component is rendered so in a sense you can just omit the query and mutation component and just use it inside any state management system in this case it's a small big state tree so fine we understood hopefully how we do this on the client but what about the in Armageddon and and how we what we'll do with database with node basically what we will do about our graph Cal Beckett and before diving into this I want to talk a little bit about architecture and how we architect our web apps so there is an architect or a software architecture proposal for creating modern web applications and it consists of three factors real time graph Gale we already understood the benefits of rough year hopefully and like how clients can benefit from moving from REST API to something more real-time something when we call our endpoint once and get the whole data that we need and basically giving all the querying capabilities to the client to the front-end instead of having lots of API endpoints and versioning them so another thing that is in there in three-factor up or tech chure is reliable eventing and reliable eventing means that whenever we update something in our database we want to some kind of event to be triggered to do our business logic which brings me to the third point asking service so let's look at older architecture we have enough we have API layer data base bunch of micro services so our API layer writes into database uses micro services for business logic and stuff like that so it's synchronous in a way because we want you we process something then we write into database then we'll return the response asking service work and in general three factor up works architecture works in the following way we have some kind of real-time graphical API and we have our state in database and whenever our update to database is triggered we want some kind of event system to trigger bunch of serverless functions and right back into database now because we are talking about real-time and because we are talking about subscriptions whenever our data is updated changes will reflect back to the client in me instantly so we don't need to like pull anything we will just return everything back to the client through the WebSockets only parts of data that are the client is subscribed to so factor first factor is real-time graphical and they're a bunch of solutions one of them is surah up sync you can write your own real-time graphical Sura of the graphical yoga you can write a pole server these are like bunch of solutions that give you that in a different ways and graphical yoga Nepal server you need to do things more like write things more manually write your own server and shorten up saying it's sort of like automatic so second factor is reliable eventing so there are bio three basically solutions event sourcing you can implement your own event something on your existing database or new database and basically whenever update or insert or delete is trigger the database you can call the event or you can use force or event triggers and the third factor is a sync service and for service functions you can use lambda cloud function as your on-site open files you blaze lots of lots of solutions so the question is what is Hazara because up sync you probably heard about graph yoga maybe something you so a surah is basically open source it's absolutely free engine it gives you auto generated real-time graphical API on top of new or existing Posterous database so basically you can take your database you can take the like the whole let's say you have a business and you have database with tons of data you can just take the engine run it on top of the other base it will auto generate graphical API don't need to run a server and then you can consume at lycée api so there are lots of features that gives you it can be deployed to any cloud and run locally because it runs in docker container so whenever you can run docker container you can run a server engine it's compatible of all the litigation solutions it I already mentioned that it can run on top of new existing Postgres its support but not only Postgres but also its add-on like pause gives and time scale DB i already mentioned that auto generates api and the thing is graphical queries are compiled to basically performant SQL statements leveraging Postgres features and we not over with the features there is a CLI tool that gives you migrations like rails like migrations that you can run and other bunch of other tools you can create your own sequel statements and make the engine to general let's say you create a new sequel view or new function basically the engine will automatically generate a query or mutation for you you can configure your access control for data really granular you can say I want this user with this roll B to be being able to update only this column in this specific table if conditions are met so you can go like really deep into granularity of the of their missions you can you are not limited in any way you can connect you can for example have your own graphical server let's say in dotnet or you can go or whatever language you prefer and you want you basically have the crud generated with engine but also have some custom business logic with your own graphical server you can stitch the schemas there is some concept so called schema stitching when you can take existing graphical server like two graphical server and servers and stitch the schemas we will see it in in the demo in a bit it also has a venting system which I already talked a while about that while several is function how events are triggered so the question is how basically to get started to just like get the hang of it obviously like the setup that I will show you right now is just playing around with that if you want you release things for production you obviously setup on proper cloud provider writer iwss your Google twelve functions Google Cloud but just for stalking you can go to IO you just click on get started click on this button you deploy things so here okay so when you click on that you basically have two things installed first the engine second poster said on that's what you will be presented after you run you up you will have some kind of console that we have graphical ID inside and we'll have a bunch of additional tabs it will have graphical it will have the data data will be pretty much simple pretty much similar to PG admin and will get you access to your data on database you can create tables you can add relations between tables you can do different things you can actually run your sequel statements there is a top of the remote schemas that I will already mentioned you can stitch your graphical schema and the event triggers for creating custom or service functions so graphical table will have bunch of additions like setting endpoint headers you can execute queries mutation subscriptions you can analyze queries basically if you have a graphic aquarium you want to see how it's compiled to performance sequel statement you can hit an analyze button and you will get the whole statement so you can show it to your DBA and ask if this is performant enough if it's not you can always create a view with like more performant and the engine will generate automatically for you queries on this view so data tab is for managing data it's for I already mentioned all of these it also has granular permissions control an access control remote schemas looks like this so we can add our graphical server URL and there we it basically the engine will stitch automatically the schema and event triggers we can do a bunch of things so to run sort of locally you basically just run docker container and you provide it with a database URL which can be existing one and you provide it with the environment variable graphical enable console so you will be able to access this development console and do stuff with it so the question is I already mentioned a lot Postgres but what about supported databases so is it only Postgres or it's not so first of all it is Posterous it is Postgres intention like postgis timescale DB but actually the first time I am sort of announcing it we are bringing my sequel support so it's coming soon very soon you can use no sequel databases through migration by using JSON to graphical tool so this tool basically gives you an ability to take the database dump the JSON file convert it a bunch of migrations to put all the data inside the Postgres database and then the in general Chan everything for you and we even have firebase to graff kill to that help skilled migration from firebase from existing firebase up into Postgres and yeah so the question is where is node in all of these right so node is in the service part and basically it's not only node it was just for fancy title to be honest but you can use your any programming language your kraut provider supports for writing service functions and this is for example one of the severest function that I will use right now for the demo this function basically gives me filters all bad words from post that I will submit through mutation so here is inside of my handler have a query which basically mutation I update my post and I update verified property on my post table and inside the handle itself I just run title and content through filter clean which I brought from Edwards package so let's take a look at the demo and how it looks like so so I click on get started I click on deploy so this is Rocco let's call it test and this see demo deploy an app it will be pretty fast so what is doing it's deploying the engine and starting the Postgres add-on for Heroku and that's it it's already deployed so if I go to my console and I look at my queries here I have nothing because I don't have any data in database but let's actually create one so we don't have any tables I will add a table I will call it posts I will add an ID of type unique identifier and I will create this is a helper function for generating ID automatically and I will have title of type text and content of type text so my primary key will be ID and I also have a user ID of type unique identifier so I created that so this is the so I don't have any data in database but if I go to my graphical tab go to my dogs I already have queries mutations or subscriptions and basically all of these automatically generated for me just from the data I just created so what we're gonna do now we will add another table we'll call it users have ID unique identifiers again with the auto generation and our user will have first name of type text and last name of type text so I select that my primary key is ID and here you go we have posts and users now what I would expect remember these like nested query that I did for Star Wars let's try to do the same here so I will get my posts and I want to get an ID I want to get a title let me just a little bit and I want to get my user so I would expect that I because I have users and post I will get a user first name a user and last name right but if I'll try to do that that's not the case so why is that because I need to search relations so I can give to my post and say that my user ID is a foreign key on users table and the reference column will be ID so now it's suggest me to add a relationship if I click on that I can say that here is my user now going back to graphical I can actually let me zoom a little bit I can actually get my first name and last name and obviously if I run that I won't have anything but let's run a mutation we'll add posts and we will use insult post mutation emojis for images so we have insert post and we'll pass objects and our object will be title of hello content of and it will return an ID so now for run that it was it won't work because I haven't said that my user ID and every post has to have a user I can obviously go to modify my data to have these like non audible fields or nullable fields actually but what I want to do here is something more interesting I want to say that I will have a user with data first name and last name and now since to work if I go to my users my user is created and my post is created and this happened in two different tables right so it's pretty neat feature right so we have these queries and mutations but what about your custom server and about remote schemas so I have here this Star Wars API server that I want to add actually yeah so this is the Star Wars API and has bunch of queries does have mutations so what I want to do I want to go to my di Explorer here to remote schemas and add my custom server let's call it Star Wars I will add a URL add remote schema now if I go to my graphical I can basically query all films so basically it gives me an ability to access my other graphical server through or schema stitching so now I want to show you because we don't have much time on like the whole thing but I want to show you another example with bunch of bunch of data already created here so what I want to do here and I have the same Star Wars API schema so if I go to my posts in addition to having its pretty much see a similar structure I have the author ID instead of user ID and timestamp but I have another field called verified right and we want to run our server list function whenever we insert our new pod book force and this will this is where our business logic will be it will be in service function right so what I gonna do I go to my lambda console and this is my universe lambda function here with the bad world and like although everything you've seen in the presentation right so I will take API endpoint for this lambda function go to my if I will find it where was it I think here go to my server console to events and I will add a new trigger I will call it post verify and will be on table posts whenever I run insult and this will be my server function let's add this event trigger so right now nothing happened let's insert a post so I don't know like if it will consider freaking as a bad world but obviously crappy will be a bad world right so let's add our post let's go into events and we see our event execute was executed we will see the payload of this event now hopefully it will work you never know with live demos but let's go to our apparently crazy and freaking is not a bad word so I have to be more so forgive me for the so let's call it shitty post let's run that and let's check that cool so it seems that it's working so this is how this is how my business logic works it's asking serverless it works by executing these functions on several s functions on updates database updates and that's how I can basically create my modern model apps so how much time we have left how much time we'll have left because I probably have time for questions right now let me just open it yeah so this was the demo and yeah thanks a lot this is my handle this is my website if you have questions just raise your hand and like ask I'm here come on don't be shy yeah yeah so I will repeat the question the question is if graph Cal can support nest and nesting to like to infinity basically like nested unlimited structures right that's the question so in general is like best practice to do yeah because of the resolvers how they resolve data but here like if you're used for example with a syringe and everything is compiled to sequel queries so it depends – like how performant your sequel query is so in the end it just it is compiled to sequel and let me actually show you how it looks like so for example add nodes here I'll get posts if I analyze my get post I will get a cycle query so basically if you're infinite infinitely nested structures are infinitely nested cycle queries it's not a very performant thing to be honest so then then probably it won't get the desired effect the question is why don't you want to get into infinity I hope it's answers more questions yeah so the thing yeah yeah yeah so the question is if there is any integration with the already existing REST API this is really a good question and this is basically the question that lots of people ask because okay in in a real world I already have something right I already have an application running with REST API is how do I start this migration process to graph Cal so the idea there is I will give you a github example for example so github use used REST API and they still using REST API as but have also graph K API so how they transfer to be both graph G on res so what they did they started to basically create graphical endpoints and while keeping their REST API is working whenever they finished their graphical API they rewrote their REST API to you use graph go under the hood it get them to more performant to be like more performant in a sense and also it it moved there to the realm of like right now we we have only graphical API working under the hood that we're supporting rest is just a facade for graph Keo so this is the the one of the optimal migration above another path that company can follow is to start releasing new features while working on graph QL but still supporting rest but at some point it will get you the same the same solution has get up gotcha you mean inside of like well worth it okay yeah so the question is if huh Sora will eventually change name convention to something more like more common in JavaScript or dotnet world right so this is the question unsteady now but one really really great thing about like being free and open source it has historic as disco channel which really open to everyone and everyone can join and suggest changes and if these changes are suggested by lots of lots of developers these changes will be implemented like for example my sickle support is coming because people asked ask for that it was not any initial idea to bring my sickle support but because people came to this called and asked a lot about like how they migrated from my sequel then I decided to add my sickle support eventually so I think if the this question is if like naming convention is a problem for like lots of people then it will eventually change more questions come on bring it on no questions cool then I will show you another thing regarding permissions that I actually forgot to show where there is a permissions field here in the console so I can say that for example I have a role that's called a test and I want to say that I follow test role I want to work I want it to be only read-only so I say that my select for title and content field are working here so let's save permissions and then if I go to graphical and let's say here will be test so if you can notice here that I don't have mutations anymore I have only queries and I have only subscriptions and my queries for my posts actually give me only content and title because I set intermissions that this role is allowed to query only title and content so this is for permissions and yeah and another thing like regarding authentication so I told you about supporting different authentication solutions so you can notice here we have Sora admin secret if you install her Sora initially you will have this warning for securing your endpoint and then the easiest way to secure endpoint is just adding secret key but you obviously know that it's not the production grade security if at all so basically when the engine starts it has authentication webhook that you can point to any authentication solution that you want whenever these webhook is returned back to the engine then if we go inside the same permissions tab that we had here you can add permissions Beit based on the ideas or JWT token or whatever is returned from your authentication solution so for example I can say that I want custom check I want my ID to be equal so a user ID or be equal to some other header that is returned from authentication webhook and pass to the engine and speaking of headers I can both paths all the headers that I want to the engine and use them here in permissions or if for example I have another server that I want to stick schemas I can add these headers here to like add additional like secure world graphical servers and stuff like that so yeah cool any more questions if not more questions no okay thanks a lot really enjoy it hopefully get also again

One thought on “ARMGDN – Build modern web apps using Apollo, React, MobX GraphQL, Db and Node.js – Vladimir Novick

Leave a Reply