121 AiA Dependency Management for Angular Apps with GraphQL Uri Goldshtein

00:00 3101
Download MP3

1:40 - Introducing Uri Goldshtien


Charles:    Our next talk is one that I’m excited about Data Dependency Management for Angular Apps with GraphQL and it’s By Uri. Uri works at Meteor Development Group at the Apollo team. It’s is the creator of Angular-Meteor Library. Angular Apollo Library which lets Angular Developers integrate GraphQL into their apps. Uri travels around the world building infrastructure, applications and helping developers. He’s started with assembler C++ then C# then WPF before taking on the web a few years later. Since then he works to expand the Angular community to new areas like data integration with the server meteor and GraphQL. Uri, go ahead and take it away.Uri:           Thank you. Nice to see you. Thanks for inviting me. It’s the first time I had someone actually making this whole thing about me. Very embarrassing. Thank you. I see my job in the Angular community as trying to expand our ideas beyond only the front-end. I’m just really the suite guy that stands and says, “Okay, templates are great. Template compilation and bindings are fine. Components are great. But how do we communicate with the server? Or what’s the most efficient way to do it? And what’s the most efficient way to maintain it?” I think when we strive to make our apps as fast as possible or to make the mobile apps as fast in performance is possible, I think sometimes we are focused a lot of like about the bundle size and all kinds of things like that how can we put everything in the component? But then we forget that the very big part of our apps behavior is how we actually handle data from the server. How would we request it and how do we store it and when and how do we present it to the user? I feel like sometimes it’s part of the data that affects more of our experience than moving from pattern to pattern on the front-end. Today I came to talk about the technology that I think very revolutionary and very exciting. It’s called GraphQL.Charles:    Can we see the slides?Uri:           Soon enough.Charles:    Okay.Uri:           I prepared slides and also, there’s a new site that I’m very excited about that I haven’t done this site. But it’s a new site and I think that I will try to go through that site. It’s a GraphQL [00:04:00] just like few days ago we came up with completely newly design and the good thing about it is now we told probably most of the things that I want to talk about. I tried to actually work through the site. Mostly, also to link people into the site because until now I’ve sent people to other links that was scattered around and finally there’s one place like get all the information about it. It’s graphql.org. I don’t like preparing slides for the things that are already out there. I already have the slides from my previous talks but I’ll try to see if this site is enough and if not I’ll go back to my slides from my talk in Barcelona and my talk in Angular Connect.Charles:    Okay we just had the few of the speakers. They started talking and then they assumed that thing was shared and it wasn’t.Uri:           I just wanted to give an overview about why am I talking about it at all. I got a lot of people asking me, when I’m presenting talks about GraphQL they ask me but yeah it’s an Angular [00:05:08]. Don’t you want to talk about Angular? I think that this is a very critical part of our Angular Apps that we should be at least aware of.GraphQL in short like very, very short brief. It’s a protocol that Facebook is using internally since late 2011 if I remember correctly. At that point in time they actually created new mobile apps and they needed them to be very efficient but they needed it to be on top of their existing stack. This is interesting because this is a problem that usually as Angular developers we tend to come by. Whatever if we are likely just in a front-end team in a large company or we are consultant in a large company, those existing stack, that we come in as Angular developers and we are making the front-end much better whether it’s with Angular 1.0 or Angular 2.0. Everything I’m going to say at this stack is relevant for Angular 1.0 as well as Angular 2.0. I’d probably talk mostly about Angular 2.0 but everything is relevant to Angular 1.0 as well.                 We’re modernizing everything but then we need to work with existing stacks. Usually we can’t just rewrite the server. And GraphQL in Facebook was used into that. Facebook has this huge server infrastructure but they need to stack and make [00:06:51] for mobile apps. GraphQL is that layer in between of your clients and your server that lets you modernize the API between your client and your server.                 Now I’m going to dive a little bit into GraphQL, but again just the context which I think is really important is that the communication that we have with the server, there was a lot of benefits to GraphQL that are related to the server but that touch more about why is it important for us as Angular and front-end developers to use GraphQL or why is it beneficial for us and less about the other parts of why using GraphQL is amazing. I’m going to start with the new site. I’m presenting it because first of all, I’m excited about it and it’s a kind of a joined work between the GraphQL team from Facebook and people from I think the GitHub and also Apollo which is our team that were focused on building the tools for the server and for the client to use GraphQL more easily.Why GraphQL is great? First of all, what is GraphQL? It’s actually an API, it’s not the query language which means that it’s not instead of you database or instead of your old server, it’s just an API like REST on top of your existing server. But how is it better than REST? First thing that you can actually describe on the server exactly what data types are you exposing or are able to expose. You can see just here, I’m exposing the project, this exactly how you write GraphQL. I’m exposing the project and the project consist of nine tag line contributors. This how I build my API, it’s typed, it’s self-describable and I’ll touch on those points in a second. I’m just telling the client in development listen Mr. Client, this is what I can expose and it’s not like the guessing game that is the consultant I used to have where I’m creating my front-end and I’m getting to a REST Endpoint and I need to test out or figure out what data this REST Endpoint gives me. I don’t know sometimes it gives data, sometimes other data, sometimes it gives a certain data and then three months later it gives other data. With GraphQL it’s impossible. The API is exactly described exactly what it means and know exactly what you’re going to get.But then the second part comes which is an even more meaningful thing. The client asks for the exact data that it needs, so even though that GraphQL Endpoint exposes a project with a name, tagline and contributors as the client I don’t need [00:10:33]. That’s just a small thing mobile client, I want to start fast and I want to be very efficient. I want my data to load fast. I only need the specific project with the name of GraphQL and I only need its tagline. I don’t need the name and I don’t to fetch all the contributors. Over the network, I will only get this specific tagline and the server also knows exactly what I want to get so it can bring me that tagline more efficiently than other REST Endpoints. This is line in one head of the site why GraphQL is so important, I’m going to dive a little bit into each of those points then later on in the talk I’m going to actually show you examples with Angular apps and I’m going to compare Angular Apps that written which…          Let’s go at the light example and later on I actually make the lighter example but we can look at the website again. If you look here on the dot, this is how I write my queries from the client which is exactly how we think about querying the server like we want to query a hero and then we want to have specific type of fields. Instead of naming it to all kinds of strange REST API Endpoints and query parameters and all those stuff, we can actually just specify the data that we want and then get it, get exactly the data that we want.If we’re requesting just for a name, we’ll get only the name in the exactly the same structure. If we request the height, we’ll get the height as well and the mass, we’ll get the mass. We get exactly what we need. It’s very efficient and also the server itself can be more efficient because it knows exactly what we need. This is very powerful and very efficient and it gave Facebook an opportunity to write their apps more efficiently. Sometimes when people say it’s feels native, it’s true that some of that animation but also it’s how fast do you get the data from the server and what do you do in the process of getting it.Another very, very interesting part for REST API, for GraphQL API that is better than REST. I’m still online, that’s great. Is that we can describe our data in an IRQ, I have a hero with a name and this friends, I want the name of the friends of the hero. Usually what we want to do and I’ll show that a specific example in a few minutes is that I would request thinking about [00:15:01] in a regular REST Endpoint, I will request for the hero then I would get the hero, and then I will request for his friends. Then for the friends I will probably get a list of ideas and then each of those ideas I will have to request the data that I need. That’s probably around three request per one render of my page. Now think about it, I want to render my mobile page really fast and I’m sending three requests. Another option that I can do is that I can write everything in one REST Endpoint but then I’ll get tons of data and I will need tons of REST Endpoints. With GraphQL I just need to specify this thing, this structure in one request and I will get in one response all of the things that I need. It’s so much more efficient than using regular REST patterns.                 Another really cool thing. Let’s take this as an example. I have three different databases here. With GraphQL I can work with any source. Let’s say I have an old server that uses SQL Express and then I have another micro services for authentication that uses Mongo and then I have another server that I’m calling [00:16:32] in REST API. I can request it all, with one single request like that and get all of those information back, all those fields that I need in one response back from all those servers. This is very, very powerful.Another thing is, those request that I’m sending are tight unlike REST where our data bunch information probably have no idea what will I get but also, I would get fields that they be a string or an int or whatever. Just arbitrary information. With GraphQL, the server if you can look on the left here describes the information that I can give me not only which fields but for each field what is the type of the field. And then when I request that information on the client which is here on the left, then I know exactly what I’ll get. I can validate it before even running that or before even testing it from the server. I’ll show an example again. In production in a few minutes, but it saves me tons of time when I’m in development that usually bugs that happens when I’m in production. I will find all the weird things that I’m doing or all the weird things that the server is giving me when I’m developing and I have validation [00:18:13].In Angular 2.0 we really encourage people to use TypeScript instead of JavaScript. I see GraphQL as kind of like the TypeScript and REST is the JavaScript because I have no idea what will I get from the REST but with GraphQL I know exactly what queries do I get and I can validate it while I’m in development. This is very powerful. Because of all of that, I get really, really powerful tools like graphQL with our present right now but here you can see like an animation of it. I can just write my queries very easily on top of my existing server. I don’t need to write this tool called graphical UI editor. You write writings and the server doesn’t have any writings so it gives you a validation and it gives you here all the docs of exactly what you can’t query from the server. All of these is zero development from your site. You just get it for free. You get tools that are for your IDEs, whatever you need because of the technology and protocol itself. This is very powerful and another things that you don’t get from REST API.                 This is an advantage that’s just maybe more for several developers but it can also affect client developers. With GraphQL there is no real need for visioning. If you used REST Endpoints on work, with REST Endpoints sometimes with time you need to evolve the Endpoints. Suddenly you need to add the direction to your field. You make a version 2.0 of your API and then you make a version 3.0. In Facebook since 2011 they had one single version and they have I don’t know how many clients and how many fields has changed and they have apps that’s actually working live since 2012. And GraphQL uses the ability to just add fields and then also annotate them and deprecate them but it doesn’t need to change the client, the client is specifying only the things that it needs. Even though my client’s still uses the old API, that’s fine. I don’t need to have a lot of versions. It makes the process of maintaining the API both on the client and on the server much easier. The more you use GraphQL in production and for overtime the more you see how much time it saves.                 At this point, usually people ask me, “Do I need to migrate all of my apps or all of my existing code into GraphQL?” The answer is obviously not because no one will do that. In GraphQL again, for Facebook it was exactly for they have existing front-end and existing back end and they needed to make everything work and still evolve the platform. GraphQL lets you use any implementation you want on top of your existing implementation because what you see here, we have a type called character, this is a GraphQL specification but you can see here that each of those things, each of those attributes is actually, I get the information back through an arbitrary function. I can write this function in JavaScript, in .NET, in Ruby, in Python. In that function I can do whatever I need. I can query the database. I can call with the REST Endpoint of my existing server. I can do whatever I want. I don’t need to change my existing apps and on the client side as well, I will show you that in a few minutes. You don’t need to change your whole API on the client side from REST to GraphQL. You can gradually migrate parts of your front-end stack to use some REST and some GraphQL. f it doesn’t make sense for specific Endpoints to migrate from GraphQL to REST, you don’t need to.                 Now, probably the next question you’re going to ask is, is it a new thing? I heard a lot about it but who is actually using it? I mentioned Facebook since 2011 but two days ago GitHub announced that their public API is going to be GraphQL and they use it internally already. I suggest people to actually look at their announcement and the talk, it’s very, very interesting. But there’s tons of large companies that use it. Here is just a few examples, more on the bottom here but the Pinterest, IN2IT, Coursera and Shopify. Each of those companies presented how they use GraphQL in a very interesting talks.This is GraphQL for a very short intro. It’s not by chance that I went through this website because now this is a completely new website that personally I like a lot. There was a lot of people that worked about on this website from many different companies like Facebook, Meteor and Apollo and people as well that I’ve probably forgotten. I’m very sorry for that. This is the place that you should go. You can just get started here and you’ll have all the information. It’s very, very interesting if you look at code you could have the several implementations that you need if you want to write in JavaScript, if you want to write with Ruby, .NET, Python. You have everything here. And then also you have here the [00:25:22] which is a great tutorial for GraphQL. And I may engulf with a little bit in my talk but if you want to learn GraphQL I suggest that this is now the best source.If you looked at my previous talks where I reference all kinds of other sites, I really think that graphql.org and also graphql.com are the best websites to get your information from. There’s great tutorials for all the things that GraphQL gives you very deep and good explanations and then also there’s a lot of best practices. How to think? What are the best practices to use with GraphQL? What graph tells you to do? And what is the preferred way to do it.? How do you do authorization in GraphQL? Which is probably very common question. How to do [00:26:21] and cache. It’s all here. I guess the best thing that you could take out from my talk is just go to graphical.org and start learning. There is a community page, you can select channels or you can join in talks on Stack Overflow, of course. Twitter accounts, blogs and videos with…I’m going to show you a live example that you can go to. We are front-end developers and we’re going to start writing a new front-end. All revealed front-end and then we’re going to start up to the server. Instead of having an existing server in the REST land we have an existing server in GraphQL land. If we have an existing server in GraphQL land this is an example. This is a GraphQL example for its SWAPI API. We can just google probably GraphQL SWAPI. Swapi API is an example REST API for all the Star Wars films and on the characters and on the starships and everything you need. You can just probably Google it, try it yourself. But with every GraphQL server you get this editor. This editor is called GraphQL and it’s just a great demonstration of the power that GraphQL gives. I don’t know anything, right? I have no idea what’s going to happen. I will remove that but I need to start querying the server, I have the docs here and I can see everything that I can query. And nobody wrote this documentation. This is a very important thing because sometimes people say, “Yeah, REST also documentation.” But someone needs to maintain this documentation. With GraphQL, you just need to write the code and you get the documentation for free and the validations on top of this documentations. And it’s a tight documentation.                 Let’s start with a very simple query. I want to get all the films. By the way if I get all the films and I want to say which of the film that I need, I’ll get a compilation error here. This thing is happening in real time and while you are in development. Those are things that you can validate in development and not before that. I can go here and see what all films give me which is films connect ad and those connections actually gets films and I can get the films from all the films that I can get for each of them the title. I can get the episode ID and now that I’ll query the server, then I’ll get exactly what I need.Let’s say I’m going to add another field which exist but I didn’t query before the director. I will not query the server and I’ll get exactly what I need and not more and not less and this is very, very powerful. Let’s say I want to query for a canon. There’s no cannons so I’ll get the validation in real time. But now let’s say for each film, I’ll also want to get the starships. I’ll get the starship connection. And then I’ll get the starships. I don’t know what starship has, I’m going to look into what starship contains and I get the name of the starship and I don’t know, the length. Sending one request and then getting all of this information. Again, with REST API I would’ve called films endpoint with the title and the episode, the idea and director and probably more. All of that information that we saw here would probably get all of these too much information. But then I’ll also get the starships but probably their just ideas. And then I need to have a second REST API call to get all of the starships. This is very expensive. If you think about this is a very huge difference between how your app would look and how it will behave and we tend to not think about it too much and just use the APIs that we have.Now let’s go deeper. For each starships, let’s get the pilots. We have the pilot’s connection. Contained pilots and a pilot is a type of a person. I know a person has a name and it has a home world. Now home world is type of a planet. From the home world, I don’t want all the information from the planet. I just want the name and I just want to see how gravity it is there. And again, in one single request, I’ll get exactly what I need as deep as I need it throughout my information graph. And this is very, very powerful. Think about slow connections or even regular connections and think about your server as how do you process the information, how do you send it to the network, this is a very powerful thing that will give your application a big change within the behavior it used to have before and the behavior that you used to have then and that you have now.Next question is I want to start using it. How do I start? And I’m an Angular developer. How do is start using it with Angular? We have Apollo client implementation. Actually, everyone that saw my previous talks, we just released new talks, we’ve written all of our talks that are starting from being very specific to Angular and then more ideas, we think the docs are much better right now. You should check it out. Whether you knew them before or not. Apollo is a client that seeks on talk, if you want to get into that then you just Google Apollo Angular or GraphQL Angular and you will get there, and you get to this website. Here you have the documentation of everything you need from start to end. You can start with a very simple example inside [00:35:21] and then also how to start and I’ll show you that everything in a second nut you have here you need to start using GraphQL in your existing Angular 2.0 and Angular 1.0 apps. We also have a repository for Angular 1.0. Again, all the things that I’m saying here about network efficiency is relevant to Angular 1.0 apps as well. One of the things that is happening in our community is that we are getting a lot of good ideas for Angular 2.0 into our existing Angular 1.0 apps and I think Apollo and GraphQL are really good ideas that we should get into our existing apps as well. Again, you have everything here that you needed just [00:36:14] and install Apollo client. Angular 2.0 Apollo and you can start going. You have all the information here you need to get started.I’m going to show now an example app. If you remember this thing that I got before, I’m going to close it and I’m going to do something very similar but to graphical app runs locally in my machine. This is an example app that I’ll show you right now. It’s called Instagraph. It was written by our top contributor Camille. And you can see that the server I can do exactly the same. I don’t know what I need to query but there’s a feed and ideas and likes. I have all the information here of what I can do. I can query the feed and I can query a photo and the photo has the author and likes. If the photo was liked or not. Like GraphQL here, let’s go to the feed and see what more can I get from this. I took that idea and the likes, let’s also [00:37:32] the creator that, and I’ll query this thing and then I’ll get exactly what I need. This is an existing server that runs right now. And we wrote an Angular app on top of it. This is the app and you can check out the app as well. It’s open source and you can look at the website and there’s link into this example app. Just also a nice webinar that Camille has done I think a week or two ago and just really check it out.There’s three versions of that app and but it’s exactly one app that fetches the data in three different ways in one app. We can see that you can use a REST API and GraphQL API in the same app. Let’s look at how do we fetch data from a REST API. I’ll just open the network player here. Let’s go to these ads. First of all, look at the app, it’s an amazing app. You can see that app is just like an Instagram app. You have the photo of the person, you have how many post, how many followers, how many following you have and then these photos. And for each of these photos you have information on the photo. If we look on our app right now, on the network layer, you can see that first of all, I need to query myself. I get the users, I get a specific [00:39:16] then, I hope it’s large enough that you can see. I’m going to query some photos by their queries. Photo one till three. I get now photos and their IDs. And then for each photo I need the name and how many likes and everything. For each photo, I’m going to query again just call the REST Endpoint, I’ll show the code in a second. I will get all the information. This is like a very normal app, right? It’s very nice. It’s a good app, it’s more straight. But if you look at the time that took the render you can see, I need to have few request and those requests are synchronized. I can’t start asking for the information of the specific photo before I actually get all the information on the photos. And this is all back and forth between the client. The time that it takes me to render this app is much longer and you can see that obviously from the network layer here.Let’s look at how it looks if I’m going to use another REST Endpoint, but this time that REST Endpoint is like your everything Endpoint. I’m going to get everything I need which is probably the next thing that you would suggest. I’m going to call everything I need. I get all the information and I get here much more information than I, so I have less request here because I get all the assets already with my request but there’s so much information here that I don’t really need. Another thing is that at this situation, if something is changing in the REST Endpoint is like in everything Endpoint then let’s say now there’s another clients that need other stuff, all of the other clients are affected at the same thing. I need to keep now all the clients in sync even though those clients I developed a year ago and I don’t want to develop it anymore. Still not the best… TThe way that I’m defining the server Endpoint and there’s one single Endpoint with GraphQL.Charles:   Are you assuming that you’re [00:44:20] again?Uri:           Yes. Sorry about that.Charles:    That’s okay. I’m really fascinated by this and I want to see what you’re doing.Uri:                  After I [00:44:47] installed everything I need, first of all, I need to import the Apollo providers that I need and then I need to just define which Endpoints do I target. Think about it as like just a regular REST which telling Apollo clients which a GraphQL server do you use. You can see here that I’m just defining local lost 4300 in the GraphQL which is actually the same Endpoint that we use here local lost 4300 but query calling it that graphical Endpoint and we get this all great tool that helps us to figure out what we need to query and when.You can obviously configure the server not to expose it in production, right? This is just for development. Or if you have public phasing API you can actually expose like the top is doing for example so you can use GraphQL on top of the GitHub API. I just told Apollo that this is the Endpoint that we need to query and also it runs on the same origin than me. If you have like cross origin platform problems and everything you can use that tool to do that. Also, should batch, should batch means that if there’s a few queries that’s happening at the same time in few different components which is showing one in just a minute it means that I can, this should batch I’m showing them like it’s hard to explain without showing. That’s everything that I need to do.Now let’s look at our app. Let’s look at our components, we have follows component. Let’s look at it for a second. It’s a plain Angular 2.0 component. It just renders photos and it runs by a through the NG4 through the components and for each photo it renders the app photo the component. It’s very, very simple raw Angular component. It’s like a dumb component, you can call it, like a presentation component.  It gets inputs of photo and it outputs [00:47:53] and it knows what to do with those things. And then you can look at the photo components which you saw before and again it’s a presentational component that knows how to render a photo. Pure Angular presentational, nothing to do with data queries or data fetching.How do we actually fetch the data? Let’s look at how the components look when we use GraphQL. Again, let’s look at the photos component. You can see here, I have app photos, just completely presentational component but then I import the Angular 2 Apollo and Apollo for reabsorb able which I’m going to show you in a second. The only thing we need to do is just to define my query. This query, exactly here and you can see that I’m writing my query exactly what I need in the same file that I’m writing my component. If now suddenly I need more information here other than the photo ID, I can just change it in one single file. I don’t need to go into a separate service and to change it there. This is very, very powerful, it means that each component, let’s go into photo component. Photo component needs to have the ID and the URL and created that. What happens is now I’m changing here something and I want to render also another field. The only thing that I need to do it to change it here, just to add here a field. Let’s look what fields photo gives me. Let’s go here and let’s search for photos. We see that photo gives ID, and author and like and URL and I can see it already here. Let’s take the author. Let’s query this photo. We have photo ID of [00:50:44]Let’s do an experiment of real time development. I’m going to take a photo. I’m just copying it from here. [00:51:09] coming in getting to real time. Let’s query the idea of [00:51:13]. I need to specify the ID. The ID, I made it to be int. Now let’s query this thing and it works. You saw live debugging in real time which I couldn’t do in REST. In REST, I use to need to query the server then realize there’s something wrong and figure out the problem, most likely I would need to talk to the server developer. But this time I could have figure it out myself, I just look over the photo and understood what he problem was. Those are the things that I’m querying right now and it works. What’s the next thing Apollo can offer us to query? Let’s say one thing that we’re not querying here is the author. Let’s try to add that. We have the author, and the author is user and it has a username and let’s query the first name.Let’s try to do something very interesting. Let’s query the server. We see that it works. Let’s copy this thing back to our component. Let’s render its gear somewhere. Sorry I’m not the best HTML guy but let’s do the author username.Charles:    I’m going to interrupt you really quickly the Angular court team is up next and you’re right at the end of your time. If you use your time to wrap up that would be great.Uri:           Okay. The interesting that happened here is that, first of all, I was able, during development used those queries tested up in the server, learn from the server, exactly what it means and add another field. The second thing that I could have done is that I changed the inner photo component without changing any other component. I didn’t change the photo component at all and the server would fetch me exactly what I need and this means that my components are actually self-contained.I just released a blog post about it on Apollo Medium you can also google it or just go to the Apollo Angular thing and you can look and you can find these. Because I don’t have time here you can find this blog post that actually show you how little you need to do in order to change a component. When we now talk about Angular 2.0 and components and everything, we tend to forget all the other information and all the other things we need to do in our app. For instance, querying the data from the server and that means usually what we do is use a service and then our components are not encapsulated anymore. GraphQL and Apollo client give you the ability to keep your components self-contained which is very, very powerful. I don’t have a lot of time but all of those and more are public. The things that you need to do or to need to get out of my talk is basically graphql.org you can just check it out. graphql.com which gives you more events and graphical summit that is coming and all kinds of extra information to get on GraphQL. Those two [00:56:26] are everything you need and then when you Google Angular Apollo or Angular GraphQL you will find out how to use GraphQL with Angular and you will get to the Apollo client because this is the way today to use Angular 2.0 and Apollo. GraphQL in your Angular app whether they’re Angular 2.0 or Angular 1.0 today. I would love a lot of feedback from people if you need help or you have questions or everything, you can reach me out in our Slack channel that I think…Charles:    It looks like Uri is dropped out again. We’re going to go ahead and just head into the Angular Core Team Session. It sounded like he was saying if you have any questions you can ask in Slack. Anyway, Angular Team folks. I’m actually going to end this session and then start another one. Follow that link here in a minute and we’ll get you into your own session. Thank you Uri, I know you can’t hear me, but thank you.

Sign up for the Newsletter

Join our newsletter and get updates in your inbox. We won’t spam you and we respect your privacy.