Episode 25 • Joel Hooks

Eve Porcello on GraphQL

Today we are joined by Eve Porcello, who teaches Javascript, React, and GraphQL with Moon Highway. She is also the author of the books Learning React and Learning GraphQL.

Eve explains her process in preparing her conference presentations and how she uses techniques she learned in her theatre and improv background to really bring something professional and engaging to the stage.

Why is GraphQL blowing up recently? Eve says she believes it's because people realize that are a lot of clients that need data and they only need to load the smallest amount of data that's necessary.

Everyone always says to have a project app to learn something new but what do you even build if you have "no good ideas"? Eve talks about what makes a good learning project. Keep the scope really small. Some variant of a to-do app is a great project.

Finally, Eve talks about her work with the High Fives Foundation. High Fives works with injured extreme sports athletes to help them pay for the high health care costs of an injury.

Transcript

"Eve Porcello on GraphQL" Transcript

Resources:

Eve Porcello:

Joel Hooks:

Transcript

Joel Hooks: Hi, Eve.

Eve Porcello: Hey, Joel. What's up?

Joel Hooks: Oh, you know, just getting by. I saw one of your recent conference presentations. It was at ReactRally in 2018. It was actually amazing. I really enjoyed it and was thoroughly entertained. Frankly, blew my mind because I've given ... My presentations are boring, but yours was amazing and not boring.

Eve Porcello: I'm sure that's not true about yours, but thank you. I had a lot of fun doing that. Yeah, I think when I first put together that talk, I'd never really went to conferences before last year. When I did, I was watching the fluent keynotes. I was thinking like, "Oh, this is a show." I understand what this is. I have a background in theater and sketch comedy and improv and stuff and I was like, "I've done all these shows." I've been to a million shows. I've In a ton of bad shows. I've been in a ton of good ones. I just approached it from that angle, like theater techniques. I want people to learn something. I want them to have fun, but I also want them to remember it. That's why I was crashing scooters and doing that thing.

Joel Hooks: Well, I mean when you're live coding was amazing. You're typing and live coding on stage, which, by itself, is like it no small feat, but then you start audience participation. You actually have people come on stage with you, which, at that point, I'm just like ... The mind blowing, mean going in my head because not only was it informative, right? We're learning about GraphQL and we're seeing how it works in an amazing way on stage, with presence. What I'm thinking the whole time I'm watching this, I'm like, "What's the process? How do you even start to come up with a presentation like that. We'll get into more technical stuff, but I really wanna chat with you about the like your conference talks and how you approach that sort of thing. Given your background in theater and improv and that sort of thing, what can we do? If we don't have that background, what are some approaches that you think people might take to give a presentation that engages the audience at that level?

Eve Porcello: Yeah, totally. I would say I had helped Alex, my husband and co worker. I plotted out what we wanted to cover. I knew we had 30 minutes. I wanted to just have ... My main goals were having people learn something, making something approachable. Then, we tried to figure out what to do for the live demo. I thought if we could use this idea of collaboration ... it started as something we have tried to do in our classes is like, how do we get people in this classroom environment, which is sometimes a little awkward to start interacting with other people. How do we get them to engage? That's where the idea of the demo came from. Then we just heightened that to the extreme of trying to host it over a free Heroku dyno and have all this stuff that could potentially go wrong. But it was a lot of work behind the scenes for. That's a workout.

Eve Porcello: Then I just practiced it a lot. I hesitated from doing that at the beginning. But two weeks out, I was just running through that thing over and over again. It was horrible many of the times. I was stressed out every day. It just came from a lot of preparation, boiling everything down to what I wanted to cover. Then just making sure that I was down to having the perfect notes about what I was supposed to cover in each minute. It was a lot.

Joel Hooks: You can tell. When I'm watching, you make it look easy on stage. The practice and preparation, and that sort of thing; that has a lot to do with that I would assume.

Eve Porcello: Yeah, totally. It does. I definitely had run through the live coding bit of it quite a bit. I think with live coding, there can be a tendency to overcomplicate things and to have hundreds of lines of code on the screen. You'll notice in that, that I never had more than like 20 in every file. Having less to look at, it made it such that there was a lot less room for error. If I had added on any complexity or had anything there that could have gotten in my way, then I would have started making mistakes. Keeping those files super small was critical to crashing and burning up there.

Joel Hooks: That reminds me of our videos on [inaudible 00:04:41], right? The idea is to keep it short. We want people to see the code. Once you have 200 lines of code, it's really you can't parse that visually, watch and understand what's going on. Especially if it's a new concept that you're literally trying to learn on the spot.

Eve Porcello: Yeah, absolutely. If I was just scrolling up and down, then people would feel like it's hard. They can't go do it. I thought if I do this and I have a simple example, then maybe some people pay attention in the audience, first of all, look up from slack. Then they'll think, "Hey, maybe this weird person can do it so maybe I'll go work with Apollo server on Monday." Tat was the goal.

Joel Hooks: Yeah, you had because there's obviously there was also some pre-built stuff, right? You had, under the hood, some components and styles and all that stuff setup, which they're not germane to the topic at hand of demonstrating GraphQL and how that works. We jumped from nothing into a full demo of how it works. It really good though, Eve. I really, really enjoyed it a lot. It was about GraphQL. That's what this talk was about. You've just released a book with O'Reilly titled ... what's the ... Is it Learning GraphQL?

Eve Porcello: Learning GraphQL, yeah.

Joel Hooks: Learning GraphQL. It's very, very specific and on-point title. GraphQL just lately has blown up. It's been around for several years. But in the last, even a year, it's just really seems like it's picking up traction. Why? Why is everybody talking about GraphQL now?

Eve Porcello: A couple of reasons. I think people are finding that they have a lot of clients that they have to load with data. We need to make sure that our requests for this information are as simple as possible and are small as possible. With GraphQL, we're just getting one response with all the data that we need versus all these extra fields and making things slower on our phones. We also see that the tooling has come a long way in the last couple years. GraphQL was only open sourced in 2015. All these tools are starting to emerge, but we're still at the really early stages of this. I feel like there's so much potential for GraphQL. I feel like any situation where you're trying to get some data to a client quickly, GraphQL, it's just better. It's just going to do this more quickly for you.

Joel Hooks: When you say better, I assume we're talking about better than our traditional, RESTful, REST, REST API's that we might all be used to using.

Eve Porcello: Yeah, exactly. Ultimately, we're talking about the same thing. We're talking about with REST and GraphQL, and HTTP requests and a response. We're going to get a lot of efficiency if we work with GraphQL, because another nice thing is we can put a lot of the sorting, the filtering, the connecting of data. You can move a lot of that work to your GraphQL server. It's just something that you can't do with REST.

Joel Hooks: Both of these things; we have REST on one side and GraphQL on the other. They're both specifications versus people will think, "Oh, GraphQL," we're talking about Apollo or some specific client relay or whatever. But really, we're discussing like a specification. To me, in my observation, REST has a specification that was very academic. The specification itself has been debated endlessly on the internet causing intense and never-ending confusion, right? People are just like, "What's this? How do we do it?" Hypermedia, RPC, what are we doing with the REST? What's real REST? What's RESTful? What's a REST like? I don't see that same debate going on with GraphQL. Is that something you've observed as well?

Eve Porcello: Yeah, I think so. The GraphQL spec is pretty, pretty clear about what it defines. It defines how you should write a schema. It defines how you should write a query. It gives an overview of what a GraphQL server should look like. Then it leaves it at that. The ideas in there are fairly simple. You can look at the spec. I encourage you to do so because it's pretty cool. Yeah, the spec is fairly minimal. Then Apollo and Prisma, and Relay and other folks who are creating tools around that, they agree on that. I don't know if that's just because the spec is good, which it is, but it could be something that maybe people start fighting about that down the road. For now, people seem pretty aligned on it.

Joel Hooks: I noticed that it's cool with the different clients that exists. They all same and feel similar but have just opinionated approaches or slightly different API surfaces for you to work with. There's like a continuity that flows through them. That's interesting to me.

Eve Porcello: Yeah, exactly. I think, again, the ideas and the spec are pretty, pretty good. People seemed to follow that pretty closely when they're designing their own solutions around it.

Joel Hooks: I should be ripping our REST API out and switching to GraphQL. Is that the short story?

Eve Porcello: Yeah, I would do it today for sure. I would say, yeah, you're gonna get a lot of great benefits from it. You can also stand up. This is how a lot of people move to GraphQL is they stand up a GraphQL gateway in between all of their REST API's and the clients. You can use GraphQL to fetch from REST endpoints. That's a great way to get started because that can use all of the setup that you already have, but then you can get some organization from the gateway.

Joel Hooks: Yeah, I was kidding. We already started doing that. [crosstalk 00:10:12] For us, it's been really great. Just like you say, we're using ... We have Rails, and there's a really nice GraphQL Pro Plugin for Rails that we purchased. You start setting it up. Now, not only can we use existing endpoints, but we can also start adding different data sources and just this amalgamation of data in the background. We're augmenting right now. We didn't have to go full bore into GraphQL and did REST altogether because frankly, I still like REST for some things. It was amazing for other things. I can see a world, where we're all on GraphQL. Right now, we're able to use it and leverage this power but we aren't having to go full on into. It's either one or the other, black and white situation.

Eve Porcello: Totally. I like to make jokes about burning it all down, but there are a lot of great things with maybe somebody has a great REST API setup for authentication. They don't wanna rebuild it. You can use that in conjunction with a GraphQL service as well. You can get a lot of benefits without having to burn it all down.

Joel Hooks: Have you use Gatsby much at all?

Eve Porcello: I've played around with it a little bit. I'm excited to learn more about it, but I know that people are really loving that. The GraphQL angle makes it even better.

Joel Hooks: Gatsby's a platform for building static websites. In my view, it has this potential to really eat into WordPress, which I'm honestly a little stoked about. The cool thing to me is that the whole thing is it's really GraphQL forward, right? They've embraced it fully, and they built this platform and this tool that we can use it's open source and free to use. You can actually take and then build a new blog, a static blog, but then also use your existing WordPress as an API and bring that in through GraphQL and grabbed from all the different data sources to build your static website up, which I think is pretty fascinating.

Eve Porcello: Yeah, totally. I think there's gonna be tons of new tools like that. That if they put GraphQL first, will be particularly interesting because we have Apollo, we have Prima, we have Gatsby. There's a lot of room for others to start doing things in a GraphQL way as well. It'll be fun to see where it goes.

Joel Hooks: Yeah, I see that a lot. It's across different platforms too. We're mostly I think, in our conversation, talking about Node and that related ecosystem. People embracing the spec across different languages and different back ends and that sort of thing. I'm really pumped on the future of GraphQL and the whole ecosystem. I think it's gonna be something that we're gonna see a lot more of. Now's a good time to start learning GraphQL.

Eve Porcello: Absolutely.

Joel Hooks: Talk about learning a little bit. We're talking about this new thing, right? We have this hot new thing on the internet. We have GraphQL. Behind that, we have React which everybody's excited about. It continues to be phenomenon. Not to mention, you also have a book Learning React. Is that the title?

Eve Porcello: That's right, yep. Learning React, Learning GraphQL, very creative.

Joel Hooks: I mean, they're great, right? If I want to learn those things, it's going to come up well on Google, which is [crosstalk 00:13:14]. Then, it also suggested this is a thing that's more focused on somebody that's just starting. That's a pattern with both of your books, right? You're focused on entry level or beginners or somebody that's new to these concepts learning. Is that an intentional approach that you've used?

Eve Porcello: Yeah, I think so. I think if you have the fundamentals right, you should be able to do everything else. A lot of folks wanna dive into the most advanced thing first. Then they get overwhelmed, and then they bail out on the whole thing. GraphQL, in particular, is so new that if I can teach the fundamentals well, then people are gonna have what they need to go build the next great GraphQL tool or build their own projects using GraphQL. It's a little too early to say that this is the right way, but we're focused a lot on the spec, and on the current tooling. Just getting people in the door should make them be more able to survive in the sea as it gets more crowded with options. That's what we go for. I think fundamentals are the way to get advanced. If you see code that's written really well, that's really simple, that's a dream. The person who wrote it probably knew the fundamentals pretty well.

Joel Hooks: When you're approaching something, it has a new camera, right? It feels you approach a lot of different technologies, and you're a lifelong learner. Somebody that likes to learn things and figure them out. What's your own process when you're approaching something complex that you want to learn more about, and perhaps eventually teach or use professionally?

Eve Porcello: Yeah, I like to follow the video tutorials a lot. Then I try to read the source material. When I was learning GraphQL, I looked at the spec and the React docs is where I started with that stuff too. Then, from there, I'll try to just build something. I think when I started in my career into web development, I would take a tutorial. I build the activity that was part of the tutorial, but I wouldn't really take it beyond that. Now, I feel until I can really build something with it, I probably can't answer the questions that our students will ask. That's what I tried to do. Because we're teaching so much, we can build all sorts of ideas and just we can continue to practice things out. Figure out what are really the things that developers need to be able to do with this thing. Hopefully, I can save people time when I go teach them in person or in a book.

Joel Hooks: One of the struggles for me especially when I was a newcomer and even now, it's the idea of, "What should I build? I don't have anything interesting to build." I wondered, "Do you have any approaches to fighting that?" Are good ideas raining constantly down in your living room when you're Alex or ideating?

Eve Porcello: Yeah, just a constant storm of ideas. Not really, but we do have little ideas, just things that would make our lives a little bit easier. The thing we built for a React class was, it sounds very stupid, but a ski days counter. Alex and I are obsessed with skiing. We just wanted an app to track our ski days so that we could brag about them over the summer and stuff. We put that together. Just small ideas that we can use to test out what we've learned and figure out where the gaps are.

Joel Hooks: Yeah, I think people, a lot of times when they're starting, the ideas are too big. Instead, if we can narrow that down into something that's just useful, or even goofy and silly, or mildly entertaining. I think this is another way to look at stuff.

Eve Porcello: Yeah, I always go for mild entertainment.

Joel Hooks: Well, I see my kids. They wanna make a game. Their ideas basically a triple-A rated mega game versus the, "Hey, let's focus on a single mechanic." This one little nugget of something that's cool. At the end of the day, a lot of examples end up being to-do lists, which I actually think is about the perfect example because it covers a lot of ground, but people get bored. It's not fun and entertaining.

Eve Porcello: Yeah, totally. Well, ski day counter is basically a to-do app. It's super simple, but yeah, still manageable enough to put together that you feel you did something, but not something that you have to quit your job to do.

Joel Hooks: Right. Honestly, to me, professional web development is mostly lists and forms.

Eve Porcello: It is, yeah.

Joel Hooks: What do I mean by that? I mean there's a lot of other stuff that goes on to. At the end of the day, it's, "Okay, you're gonna make a list. You're gonna make forms. You're gonna update those lists with these forms. Then check things off when they're done."

Eve Porcello: Yeah, totally. That's so funny.

Joel Hooks: Modern internet and all these frameworks are built to create fancy to-do applications.

Eve Porcello: There's a lot of to-do's. Then the one over sockets is chat. It's all to-do list in chat app. [crosstalk 00:18:12].

Joel Hooks: Those are another good ones. Yeah, for sure. What are you learning? What's next? You have React and GraphQL. I'm sure those are gonna continue for years. I'm personally confident of that and probably going to be great in terms of business. What else is on the horizon? What have you been looking at lately that's interesting?

Eve Porcello: Yeah, just staying on top of all those GraphQL and React things. Then we've been getting into a lot of server lists stuff lately, which came about because we're working on this volunteer project for a nonprofit organization. It's called the High Fives Foundation, which supports people who are injured in Tahoe doing extreme sports. They have this website that isn't very accessible. They have a form to collects all the details about the injury and to vet people for getting grants. Nobody can really use the form. We're trying to figure out how do we get all these people together to build this project using all of the latest stuff. We're trying to use serverless. We're trying to push accessibility. I'm learning a lot about that. Also, how do you manage an open source project with people all over the place? There's definitely a learning curve to that, but we wanna support people as they get into open source and support people to learn new things so that they can slap a GraphQL API on their resume to get a better job.

Joel Hooks: Yeah, I love that. I love that approach. One I really like the idea of the extreme sports thing. People might be like, "Oh, well, people are out there doing extreme sports." But these are folks that they don't have a lot of money and they're out there trying to do a thing. When they get hurt, they can get severely hurt, and they don't have a support network. That actually just sounds a great project to work on.

Eve Porcello: Absolutely. High Fives is really cool. I think people in that industry are constantly, they have to do something bigger. They have to do a bigger trick each and every time. Then, once they get injured, there's not a lot of support for them. That's really scary. Anything we can do to help people out, the better. It's not just for people who make their living doing that. It's for people who are skiers or snowboarders or mountain bikers, who just get into a bad situation.

Joel Hooks: It's even you break two ribs. It's amazing how long that'll ... I mean that's non trivial. There's nothing you can really do. You just miss work and all the medical bills, stuff like that.

Eve Porcello: Yeah, totally.

Joel Hooks: I also really like, and I've been hearing that a lot lately, it just seems it's getting a lot more focus. The focus on accessibility in terms of building websites has really been getting a lot of air time lately. I'm so stoked on that. I think it's one, a great career path. To niche down on accessibility is probably a good idea for a lot more people. Then just what it means in terms of building web pages because I haven't been hearing a lot about that until recently, it feels like.

Eve Porcello: Yeah, me too. I think it's something that has been of interest to me for a long time. It's something that is such an important thing. Until I really saw High Fives athletes trying to click through this form, that really personalizes it for me. It makes me want to learn more about how I can make these experiences better for people. One of the cool opportunities that we've been able to have and will continue to have is that our focus group for that site is injured athletes. They tell us that they can't use the forum, and then we see them not be able to. They give us great ideas of how to be better at our jobs. It's one-on-one feedback that is so valuable.

Joel Hooks: Being fully able is something a lot of us probably take for granted. Seeing somebody that's actually, physically not able to use your web form has to be startling.

Eve Porcello: Yeah, it's very startling. People will tell you exactly how bad it is for them. That's just the best feedback that you can get. It helps you. I'm sure that will help me throughout the rest of my career just thinking about that first.

Joel Hooks: Especially, seeing it and getting that depth. That's awesome. That sounds a great project and a great way. I think also another thing to think about, when people are learning. Projects like that are such awesome way to one have a fulfilling thing that you're doing and helping others. But also, like you mentioned, you can build your resume and work in open source and learn a lot of skills in a way that is approachable and useful in professional capacity down the road as well.

Eve Porcello: Yeah, absolutely. Not to be too much of a salesman, but you can contribute to the projects doing anything. Documentation, we've had project managers help out. It's been exciting to see people make their first git commit at the hackathon and stuff. All sorts of different people are coming together to build something cool, which is awesome.

Joel Hooks: I built my career writing documentation for open source. That's how I initially broke into web development in general was writing documentation on open source projects. I can't discount that approach enough. You'll need to do it, right? If you can write, if you can correct typos, if you can add images or update things to be more current, that stuff is all a great way to get started too, I think.

Eve Porcello: Totally. I posted something on Twitter about a friend of mine who is looking to get into contributing documentation and the internet exploded with people asking for help. There are tons of projects. They are getting involved in any capacity. That was pretty cool.

Joel Hooks: I get confused with the low-level code often on these open source projects. Documentation is often the level that I feel I can contribute the most traditionally. Especially as I started out, but still there's limits to my programming capacity. I think there's something for everybody. It takes a village to build an open source projects if thinking about it. [crosstalk 00:24:16] Big opportunity out there. What do you have going on? You have your Moon Highway. You do training, and you have your books. Where can folks find out more about what Eve has going on professionally?

Eve Porcello: You can follow me on twitter, @eveporcello. Our company, Moon Highway, does corporate training for JavaScript, Node, React, and GraphQL. Then, we also have new thing, GraphQL workshop, which is a two-day workshop that teaches basically everything you need to know to get started with GraphQL with Apollo server and Apollo client in React. We are on a constant road trip doing those classes in various places around the country. You can check that out too.

Joel Hooks: Awesome. Thanks so much, Eve.

Eve Porcello: Yeah, thank you. It's great.

More Podcasts

Browse All