{"id":196,"date":"2023-08-28T14:38:38","date_gmt":"2023-08-28T14:38:38","guid":{"rendered":"https:\/\/redmonk.com\/kholterhoff\/?p=196"},"modified":"2023-08-28T15:30:32","modified_gmt":"2023-08-28T15:30:32","slug":"frontend-has-become-full-stack","status":"publish","type":"post","link":"https:\/\/redmonk.com\/kholterhoff\/2023\/08\/28\/frontend-has-become-full-stack\/","title":{"rendered":"\u201cFrontend has become full stack\u201d: How GraphQL enables developers to rethink the backend\/frontend rift"},"content":{"rendered":"<p><img decoding=\"async\" class=\"alignnone size-full wp-image-198\" src=\"http:\/\/redmonk.com\/kholterhoff\/files\/2023\/08\/log_stack-scaled.jpeg\" alt=\"\" width=\"100%\" height=\"1707\" srcset=\"https:\/\/redmonk.com\/kholterhoff\/files\/2023\/08\/log_stack-scaled.jpeg 2560w, https:\/\/redmonk.com\/kholterhoff\/files\/2023\/08\/log_stack-300x200.jpeg 300w, https:\/\/redmonk.com\/kholterhoff\/files\/2023\/08\/log_stack-1024x683.jpeg 1024w, https:\/\/redmonk.com\/kholterhoff\/files\/2023\/08\/log_stack-768x512.jpeg 768w, https:\/\/redmonk.com\/kholterhoff\/files\/2023\/08\/log_stack-1536x1024.jpeg 1536w, https:\/\/redmonk.com\/kholterhoff\/files\/2023\/08\/log_stack-2048x1365.jpeg 2048w, https:\/\/redmonk.com\/kholterhoff\/files\/2023\/08\/log_stack-480x320.jpeg 480w, https:\/\/redmonk.com\/kholterhoff\/files\/2023\/08\/log_stack-941x627.jpeg 941w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><\/p>\n<p>I have made no secret of my position on the state of frontend engineering. TL;DR, the frontend is where some of the most interesting and innovative stuff is currently happening in tech. As part of my mission to dig into the rapidly shifting frontend landscape, I have been speaking with experts in this space about how they are thinking about the frontend\u2019s role in 2023.<\/p>\n<p><a href=\"https:\/\/redmonk.com\/videos\/what-is-graphql-how-aws-appsync-is-empowering-full-stack-developers\/\">This summer<\/a> I sat down with <a href=\"https:\/\/www.linkedin.com\/in\/mohitsriv\/\">Mohit Srivastava<\/a>, Head of Product, Developer Advocacy and Open Source Developer Experience for AWS Amplify, AppSync, and Device Farm. As someone who has seen frontend engineering grow and change firsthand, Srivastava is a tremendous resource for plumbing this subject. I was especially curious to learn more about how <a href=\"https:\/\/aws.amazon.com\/appsync\/\">AWS AppSync<\/a> uses GraphQL to innovate at the contested disciplinary nexus of frontend, backend, and fullstack.<\/p>\n<p>Historically, defining the line that separates frontend from backend has been a subject of controversy. We at RedMonk have seen the pendulum swinging back to more specialization from the jack-of-all-trades model dominant during the 2010s, with backend and frontend <a href=\"https:\/\/redmonk.com\/jgovernor\/2021\/11\/15\/the-great-smooshing-fragmentation-and-not-fragmentation-in-technology-infrastructure\/\">smooshed<\/a> into fullstack, and operations and development smooshed into DevOps. Yet, despite the desire from some developers to cast off their generalist hats in order to focus on one specialty (see Chris Coyier\u2019s \u201c<a href=\"https:\/\/css-tricks.com\/the-great-divide\/\">The Great Divide<\/a>\u201d), fullstack is still how many developers who write a lot of frontend code self-identify.<\/p>\n<p>Curiosity about the rapidly evolving experiences of frontend developers spurred me to learn more about AWS\u2019s serverless GraphQL service. Srivastava and I begin our conversation by discussing the top challenges that full stack web and mobile app developers face today. We then dig deep into the problem that GraphQL addresses, before Srivastava leads me through a demo of AWS AppSync: a tool for connecting \u201capps to data and events with secure, serverless, and performant GraphQL and Pub\/Sub APIs.\u201d<\/p>\n<h2>Fullstack\u2019s Challenges<\/h2>\n<p>Srivastava clarifies that there is no single problem frontend developers are facing, but rather a range. In his mind, these challenges include:<\/p>\n<ol>\n<li>\u201cfrontend developers have to support all kinds of devices and screen sizes\u201d<\/li>\n<li>\u201ca web app today is much more than a static page. There\u2019s a lot of interactive functionality.\u201d<\/li>\n<\/ol>\n<p>It is this second point that we focus on, and things get especially interesting when we talk about how this challenge of client-side interactivity is unique to fullstack development:<\/p>\n<blockquote><p>Imagine building an experience in an app where you sign up an app user and after you sign up the app user, you may want to send an email, right? So right there, you now have a scenario where you have to write some code that\u2019s going to run on the device, like the sign up experience. And you have to write some code that runs in the cloud, like sending that email. And historically you had two painful choices. One is the frontend or full stack developer has to maintain two developer loops, two toolchains. Or, you could have a dedicated backend team and a frontend team. And the problem is in both scenarios, you really run the risk that things can get out of sync. And when things get out of sync, you have errors. And the second thing that can happen in those kind of situations is the pace of innovation slows down. And it\u2019s not just about initial development. So imagine after you\u2019ve built that application, you now want to \u2014 in addition to sending an email \u2014 you now want to send a text message as well. So if it\u2019s two separate teams, you have to reach out to your backend team, get on their roadmap and backlog and get that capability built. So that makes life really challenging for a frontend developer trying to move into full stack developer.<\/p><\/blockquote>\n<p>Here, Srivastava offers a concrete example to underscore the difficulties that plague app developers needing to straddle the full stack (a problem I have called <a href=\"https:\/\/redmonk.com\/kholterhoff\/2023\/03\/27\/the-server-client-two-step\/\">The Server\/Client Two-Step<\/a>). So, we have articulated the problem, but we haven\u2019t yet identified a solution. Srivastava and I then pivot to a discussion of GraphQL, a technology that is helping developers meet the challenge of communicating with the backend in ways REST has been less able:<\/p>\n<blockquote><p>I mentioned in the answer to my previous question, the possibility of errors when your frontend and your backend get out of sync. So a frontend developer may assume a REST API supports a certain parameter, but in practice it doesn\u2019t. So what GraphQL does is it gives you a fully typed schema, so there\u2019s no guesswork in terms of what the API supports. The schema fully reflects the capabilities that are provided by the API and that reduces errors and it also allows you to accelerate development. The next thing is, you know, GraphQL is a query language. It\u2019s in the name. So what that means is you can get exactly what you want in a single round trip.<\/p><\/blockquote>\n<p>Strong typing and the elimination of overfetching are well-known strengths of GraphQL, recognized for the value they contribute to developers working across the stack. But what makes GraphQL a uniquely frontend technology is that it is client-side. No longer is data fetching the backend\u2019s purview, it can be accomplished full stack.<\/p>\n<h2>\u201cA fully managed GraphQL service\u201d<\/h2>\n<p>GraphQL has a lot going for it, but its notorious difficulty makes a managed solution desirable. AppSync joins competitors in the space such as Apollo and Hasura, all of which have leaned into WebSockets and strong typing. Of course, AWS\u2019s ecosystem play is probably what will recommend AppSync most strongly to consumers already using this cloud provider\u2019s services.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-199\" src=\"http:\/\/redmonk.com\/kholterhoff\/files\/2023\/08\/Screenshot-2023-08-17-at-3.34.42-PM.png\" alt=\"\" width=\"100%\" height=\"1964\" srcset=\"https:\/\/redmonk.com\/kholterhoff\/files\/2023\/08\/Screenshot-2023-08-17-at-3.34.42-PM.png 3024w, https:\/\/redmonk.com\/kholterhoff\/files\/2023\/08\/Screenshot-2023-08-17-at-3.34.42-PM-300x195.png 300w, https:\/\/redmonk.com\/kholterhoff\/files\/2023\/08\/Screenshot-2023-08-17-at-3.34.42-PM-1024x665.png 1024w, https:\/\/redmonk.com\/kholterhoff\/files\/2023\/08\/Screenshot-2023-08-17-at-3.34.42-PM-768x499.png 768w, https:\/\/redmonk.com\/kholterhoff\/files\/2023\/08\/Screenshot-2023-08-17-at-3.34.42-PM-1536x998.png 1536w, https:\/\/redmonk.com\/kholterhoff\/files\/2023\/08\/Screenshot-2023-08-17-at-3.34.42-PM-2048x1330.png 2048w, https:\/\/redmonk.com\/kholterhoff\/files\/2023\/08\/Screenshot-2023-08-17-at-3.34.42-PM-480x312.png 480w, https:\/\/redmonk.com\/kholterhoff\/files\/2023\/08\/Screenshot-2023-08-17-at-3.34.42-PM-965x627.png 965w\" sizes=\"(max-width: 3024px) 100vw, 3024px\" \/><\/p>\n<p>A number of things impressed me about Srivastava\u2019s demo, which I encourage folks to watch in its entirety, but I will restrict myself to one interesting section concerning authorization rules:<\/p>\n<blockquote><p>what\u2019s really neat about this is obviously different orders can be assigned to different customers. And then I can even go one step further. I can go inside the order object to order status and give permissions that are specific to order status. So I can say the driver has the ability to update and read the order status, but they can\u2019t create the order status. That\u2019s created initially by the customer themselves. So let\u2019s see now how Appsync can kind of suck this in and then spit out a GraphQL API that you can then work with.<\/p><\/blockquote>\n<p>The GraphQL space is moving fast, so I got a lot from Srivastava\u2019s expertise. If you want to watch our conversation, check out the link to below.<\/p>\n<p><iframe loading=\"lazy\" title=\"What is GraphQL? How AWS AppSync is empowering full stack developers\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/dKCQt3CjBHg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I have made no secret of my position on the state of frontend engineering. TL;DR, the frontend is where some of the most interesting and innovative stuff is currently happening in tech. As part of my mission to dig into the rapidly shifting frontend landscape, I have been speaking with experts in this space about<\/p>\n","protected":false},"author":50,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","footnotes":""},"categories":[8,33],"tags":[34],"class_list":["post-196","post","type-post","status-publish","format-standard","hentry","category-frontend","category-graphql","tag-graphql"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/redmonk.com\/kholterhoff\/wp-json\/wp\/v2\/posts\/196","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/redmonk.com\/kholterhoff\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/redmonk.com\/kholterhoff\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/redmonk.com\/kholterhoff\/wp-json\/wp\/v2\/users\/50"}],"replies":[{"embeddable":true,"href":"https:\/\/redmonk.com\/kholterhoff\/wp-json\/wp\/v2\/comments?post=196"}],"version-history":[{"count":0,"href":"https:\/\/redmonk.com\/kholterhoff\/wp-json\/wp\/v2\/posts\/196\/revisions"}],"wp:attachment":[{"href":"https:\/\/redmonk.com\/kholterhoff\/wp-json\/wp\/v2\/media?parent=196"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/redmonk.com\/kholterhoff\/wp-json\/wp\/v2\/categories?post=196"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/redmonk.com\/kholterhoff\/wp-json\/wp\/v2\/tags?post=196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}