{"id":3135,"date":"2021-10-19T08:45:26","date_gmt":"2021-10-19T15:45:26","guid":{"rendered":"https:\/\/coderpad.io\/?page_id=3135"},"modified":"2022-06-23T10:26:54","modified_gmt":"2022-06-23T17:26:54","slug":"leverage-visuals-in-back-end-engineering-hiring","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/interviewing\/leverage-visuals-in-back-end-engineering-hiring\/","title":{"rendered":"Leverage Visuals in Back-End Engineering Hiring"},"content":{"rendered":"<p>The best interviews are subjective and allow a candidate to express their thought process. Whether that\u2019s expressed through their code, comments, or via a conversation in code review, it can give a good insight into how they\u2019ll function within your production codebase.<\/p>\n\n<p>Unfortunately, most instructions provided within an interview &#8211; particularly those of back-end engineering &#8211; tend to be step-by-step instructions with little room for creative interpretation.<\/p>\n\n<p>However, there\u2019s a way to improve this: Add visuals to your back-end engineering interviews.&nbsp;<\/p>\n\n<p>They\u2019ll allow your candidate to provide more insight into how they think with their answers. How? Let\u2019s explore.<\/p>\n\n<aside class=\"\n    cta-banner\n     cta-banner--bg-green      cta-banner--has-media \"\ndata-block-name=\"cta-banner\">\n    <div class=\"inner\">\n        <div class=\"content\">\n                            <h2 class=\"headline\">Ready to start interviewing?<\/h2>\n            \n                            <div class=\"cta-buttons\">\n                                    <a href=\"\/sales\/\" class=\"button  js-cta--get-a-demo\"  data-ga-category=\"CTA\" data-ga-label=\"Ready to start interviewing?|Get a demo\">Get a demo<\/a>\n                                <\/div>\n                    <\/div>\n                    <div class=\"media\">\n                <img loading=\"lazy\" decoding=\"async\" width=\"238\" height=\"146\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/illustration-of-two-people-chatting-in-app-windows.png\" class=\"attachment-large size-large\" alt=\"\" \/>\n            <\/div>\n            <\/div>\n<\/aside>\n\n\n<h2 class=\"wp-block-heading\">UI Isn\u2019t Relational<\/h2>\n\n<p>One of my favorite ways to assess a backend candidate\u2019s capabilities is to provide a UI mockup and ask a user to implement the APIs required for the page.<\/p>\n\n<p>Okay, wait, I can already hear your argument: \u201cHow can a UI mockup help test a developer\u2019s ability when said developer is not in charge of the UI\u2019s code?\u201d<\/p>\n\n<p>Well, take an example of this shopping app mockup:<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/img_616ee168066a5.png\" alt=\"\"\/><\/figure>\n\n\n<blockquote class=\"wp-block-quote\"><p>Thanks to <a href=\"https:\/\/www.figma.com\/community\/file\/1027873079125230851\" target=\"_blank\" rel=\"noopener\">the Figma community for the mockup<\/a><\/p><\/blockquote>\n\n<p><\/p>\n\n<p>While the backend developer may not need to know how the state is maintained in the app itself, it\u2019s important to know how said data is stored in a database.&nbsp;<\/p>\n\n<p>In this mockup, we can see a list of food ingredients, coupons available to the user, categories, and more.<\/p>\n\n<p>Let\u2019s focus on the list view mockup. How would you expect a candidate to build a backend capable to handle this UI?<\/p>\n\n<p>Does all of required server data get sent through a single <code>\/api\/home<\/code> <code>GET<\/code> request?<\/p>\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">{\n    <span class=\"hljs-attr\">coupons<\/span>: &#91;<span class=\"hljs-string\">\"1239-2313\"<\/span>, <span class=\"hljs-string\">\"5323-2123\"<\/span>, <span class=\"hljs-string\">\"2345-8593\"<\/span>],\n    <span class=\"hljs-attr\">categories<\/span>: &#91;<span class=\"hljs-string\">\"Vegetables\"<\/span>, <span class=\"hljs-string\">\"Fruits\"<\/span>, <span class=\"hljs-string\">\"Meats\"<\/span>], <span class=\"hljs-comment\">\/\/ Potentially objects?<\/span>\n    <span class=\"hljs-attr\">bestSelling<\/span>: &#91;\n        <span class=\"hljs-comment\">\/\/ ...<\/span>\n    ]\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<p>Alternatively, maybe they have dedicated routes for best selling and categories? Similarly, how should the database store these values? How should the images be stored and how should they be associated with an object?<\/p>\n\n<p>It\u2019s important to remember that just like user tickets should have limited scope, so too should your interview questions. You should limit your expectations of solutions to just a few items from the mockup.<\/p>\n\n<h2 class=\"wp-block-heading\">Networks Are Complex<\/h2>\n\n<p>Standing up initial projects is a powerful skill that a backend developer can have, but it\u2019s not always the most important one for organizations. After all, most projects in an organization are long-living; maintenance, scalability, and communication can be more important for those projects.<\/p>\n\n<p>To this point, there are questions you can ask a candidate that will highlight these capabilities.<\/p>\n\n<p>First, let\u2019s start with data migration &#8211; while it can be difficult to meaningfully have a candidate spin up a data migration system for their interview, showcasing the differences between two schema versions and asking them to draw out how they would build a system to convert between the two can be super helpful.<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/img_616ee168d5f12.png\" alt=\"\"\/><figcaption>Thanks to <a href=\"https:\/\/www.figma.com\/community\/file\/999008812984283340\/UML-Diagrams\" target=\"_blank\" rel=\"noopener\">the FigJam community for this design<\/a><\/figcaption><\/figure>\n\n\n<p>Likewise, querying large datasets can often be a difficult but necessary task to add new features to your app. If you want to add a filter functionality with the ability to check against values that are grabbed from a many-to-many entry &#8211; how would you do that?<\/p>\n\n<h2 class=\"wp-block-heading\">Documentation<\/h2>\n\n<p>When dealing with large codebases, particularly those where teams are remote and separated along front-end and back-end lines, making sure communication between front-end and back-end is fluid is mission-critical.<\/p>\n\n<p>In particular, API changes need to be communicated effectively in order to prevent breakage. With so many communication tools available (email, direct-messaging, tagging the group in chat, and automated notification tools just to name a few), it can be challenging to do.<\/p>\n\n\n<p>While yes, an automated tool (like <a href=\"https:\/\/www.apollographql.com\/blog\/tooling\/apollo-codegen\/typescript-graphql-code-generator-generate-graphql-types\/\" target=\"_blank\" rel=\"noopener\">Apollo Codegen<\/a>) can generate typings to facilitate that process, it\u2019s important that types aren\u2019t the end-all-be-all to communicating how an API is meant to be used.<\/p>\n\n\n\n<p>Tools like <a href=\"https:\/\/swagger.io\/\" target=\"_blank\" rel=\"noopener\">Swagger<\/a> or <a href=\"https:\/\/github.com\/graphql\/graphiql\" target=\"_blank\" rel=\"noopener\">GraphiQL<\/a> can be a great first step to making sure your APIs are discoverable and documented. While simply listing out your routes aren\u2019t enough, both of these tools enable you to add comments and other forms of documentation to your endpoints.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/img_616ee169d3d78.png\" alt=\"GraphiQL showing the schema documentation\"\/><\/figure>\n\n\n<p>This all can be difficult to add to an interview process, however. To see a pattern with a developer\u2019s documentation, you need to have a good gauge of a candidate\u2019s thoughts on API shifts and inter-team communication.<\/p>\n\n<p>To make this easier, you can provide a frontend mockup and a representation of what will be changed in an upcoming API release.<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/img_616ee16b35f1a.png\" alt=\"A database diagram next to a UI helps understand the nuance of both\"\/><\/figure>\n\n\n<p>Then, you can ask your candidate to write or talk through what they would do to communicate the changes to the frontend team, prevent the production environment from being impacted, and communicate why changes were made.<\/p>\n\n<p>Remember, you shouldn\u2019t be asking a candidate to do an essay. Simply explanations or simply having them walk through how they\u2019d go about this process is oftentimes the way to go.<\/p>\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n<p>Not enough back-end interviews leverage a visual medium to convey information to a candidate. Adding visuals can provide open-ended questions to gain insight into the candidate\u2019s problem-solving skills.<\/p>\n\n\n<p>While you might think setting up these backend visuals would be complex, <a href=\"https:\/\/coderpad.io\/blog\/product-updates\/figjam-coderpad-a-more-visual-way-to-interview\/\">we\u2019ve made them simple by adding the ability to integrate a CoderPad interview directly within Figma\u2019s FigJam<\/a>.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/img_616ee16c93e77.png\" alt=\"A database table migration visual next to the CoderPad widget in FigJam\"\/><\/figure>\n\n\n\n<p>Just as visuals can be beneficial for back-end interviews, they\u2019re <a href=\"https:\/\/coderpad.io\/blog\/interviewing\/improve-front-end-coding-interviews-with-mockups\/\">extremely well suited for front-end interviews as well. <\/a>They provide the same open-ended problem space while also testing a candidates\u2019 influence on a micro-scale project\u2019s front-end.<\/p>\n\n\n<p>Regardless of the type of interview you\u2019re conducting, we wish you the best of luck finding a candidate that fits your company. Happy hiring!<\/p>","protected":false},"excerpt":{"rendered":"<p>Add visuals to your back-end engineering interviews. They\u2019ll allow your candidate to provide more insight into how they think with their answers.<\/p>\n","protected":false},"author":1,"featured_media":3349,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[12],"tags":[],"persona":[],"blog-programming-language":[],"keyword-cluster":[],"class_list":["post-3135","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-interviewing"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/3135","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/comments?post=3135"}],"version-history":[{"count":12,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/3135\/revisions"}],"predecessor-version":[{"id":8046,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/3135\/revisions\/8046"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media\/3349"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media?parent=3135"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/categories?post=3135"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/tags?post=3135"},{"taxonomy":"persona","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/persona?post=3135"},{"taxonomy":"blog-programming-language","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/blog-programming-language?post=3135"},{"taxonomy":"keyword-cluster","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/keyword-cluster?post=3135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}