Break Free from Agile Pt. 2 | A Budding Adventurer’s Guide To Frontend Development

Enter Your Startup

You are a humble newly-hired front end developer. Perhaps you’ve faced the gauntlet of higher education and triumphed over a handful of carefully-designed course projects. Perhaps you’ve embarked on every developer’s ultimate vision quest and crafted a personal portfolio site. Perhaps you’ve even saddled your trusty steed and traversed a few Udemy courses.

But now… you find yourself in a whole new world, a terrifying, overstimulating landscape; where the project specs are vague and nothing is ever “finished,” where technologies seem to change faster than you can learn what they do, where collaboration is king… you’re in the real world now, and you work for a tech startup.

The High Council has already given you your first quest: you must construct a page for the app. It seems simple, but don’t let yourself be deceived…

Begin Your Work

You are surrounded by mentors: wise old sorcerers perched cross-legged atop staggering mountains of experience. They look down upon you with gentle smiles, their robes billowing in the wind. One look in their eyes and you can sense that what would take you weeks to accomplish, they could conquer in a few keystrokes. But they will only help you so much, for they are occupied with the greater demons which threaten the kingdom, and this mission is yours to stumble through.

They will be there when you need them, to lean over your computer and type mystical commands you didn’t even know existed into your terminal, but they will not make this mission easy for you. Don’t forget that they were once just like you, back when they were just starting out: when people used to write code on stone tablets and power computers with hamster wheels. If they hadn’t struggled back then, they would never have summited their mountains. You must begin to climb.

Suit up and cast the age-old incantation: git clone. You’re suddenly transported to a terrifying labyrinth. You’ve seen React code before, but never at this scale. Pages upon pages, components upon components. You can’t even begin to understand how it all holds itself together. And what’s this? TypeScript? Since when did you have to worry about types?! Don’t let yourself be overwhelmed! You don’t need to master every corner of the repo — chances are, nobody has. Start by finding where to look. Unsheath your Chrome DevTools, command-F like a madman.

You’ve found where your page needs to go! This is the spot, obscured behind seven layers of ambiguously-named folders. There should really be some documentation for this. But remember, this is a startup: the documentation is in your heart.

Oh! What’s that you’ve written there? “Hello World!” Look into the divine orb of your local environment and you’ll see it there, written out in the app! You made that happen! You’ve already navigated the maelstrom of typescript and contributed to a real-life app! We’ll make a wise old sorcerer of you yet! Now, surely, you’re ready to begin building.

Every builder needs a blueprint. Venture out, humble developer, to the land of Design.

Acquire Your Mockup

You climb a thousand ivory steps leading up into the sky, and emerge in a palace of clouds. The feng shui of the furniture is immaculate. The air smells faintly of sandalwood and hums with the gentle notes of a distant harp. This is where The Designers live. They worship a divine spirit known as Figma. One of the designers glides towards you and unfurls a scroll to reveal a mock-up of the page you need to create. You almost have to look away, it’s so beautiful. Every text block is perfectly sized, every icon meticulously aligned.

You take the mock-up and hurry back down the staircase to your desk, almost stumbling over yourself. You won’t let the designers down!

You begin crafting the page exactly as the designers envisioned it, one piece at a time. You find existing components within the repo, you even create your own when you need to. You’re on a roll now: making commits and watching the hours fly by. You wind up at a new part of the page. Perhaps it’s a table of users, or a list of tasks, or some conditionally formatted settings. Whatever it is, it’s chock-full of data that you don’t have! Suddenly, the quest feels much more daunting.

How will you get this elusive data? It’s time, humble developer, to visit the caverns of Back End.

Uncover Your Backend

You don your spelunking gear and travel 100 fathoms underground through a system of booby-trapped caverns. Here you are, in the impregnable fortress of the back end developer. The walls are covered with massive futuristic screens displaying precise metrics, self-deprecating memes, and high-stakes infrastructure-related Slack debates. The air-lock doors close around you and a scanner ensures you have all the necessary dependencies installed before granting you access to mission control. A developer appears before you in the form of a ten-foot-tall hologram. Every single one of these developers hosts a wealth of constantly-evolving knowledge, and they communicate using strange alien words from another planet: they speak of WASMing the Styra Docker into the Cloud Rego and microservicing the Mongo Harness deployment through the binary CI/CD archetypical archetype binaries.

The hologram reaches into their cloak and produces a stone tablet of data contracts. It’s all the information you need to harness the power of the API within your code. They hand-crafted these API endpoints just for you, so that you can seamlessly access and modify the massive streams of data coursing through their underground fortress of logic, bridging the gap between backend and frontend.

You clutch the tablet to your chest and clamber out of the underground tunnels. You won’t let the backend developers down!

Hit Your Roadblocks

Back on the ground, you find that even though you thought you’d assembled everything you’d need, you’re stumbling more than you’re making progress. This is when a harsh lesson surfaces. Those designs, those API endpoints? Well, they’re actually works in progress, just like your page is. You’re so used to the world of planned-out courses, where every project is handed to you prepared to be completed from start to finish. Here in this new world however, everyone’s projects are rubbing up against one another.

Some API endpoints are returning errors. Some parts of the design mockup are either outdated or impossible to implement. Sometimes the designs call for a wealth of data which the API endpoints you’ve been provided with just aren’t able to provide. Other times, the format of the designs don’t seem to align with the page’s purpose as it was explained to you by the project manager. And if only those endpoints were built a tiny bit differently, it’d save you a hundred lines of code!

The days go by, and your progress dwindles. You can’t imagine yourself summiting any mountains or slaying any dragons any time soon. You wake up and mount your trusty steed every morning full of frustration, knowing you’ll just be waiting to get unblocked from two different directions and praying that by a stroke of luck, those updates to the backend and the designs will actually give you the resources that you need to build this page.

You find yourself thinking: Shouldn’t this be somebody’s job?! Making sure these different teams are actually on the same page? Making practical decisions about what needs to be done so that the page can actually be built any time soon?

That’s when it hits you. There’s more to this adventure than you thought.

Advocate for Your Work

The designers are up above you, casting down rays of beauty. The backend developers are below you, adding structure to your world. But only you are on the ground, where the humans (for revenue purposes: customers) live. Don’t let yourself underestimate your importance, humble developer! In fact, you’re responsible for the only part of this whole system that the users are tangibly interacting with! Remember that they create those API endpoints for you! They design those mockups for you!

They are lofty sorcerers full of wisdom, to be sure. But you are one too.

Once you recognize that these intimidating sorcerers are your colleagues, and that you are theirs, you can realize your true power. You are the Frontend Developer. You are the bridge between design and backend, harnessing their infinite powers in the mortal plane. You don’t just answer to them, you work alongside them. If you think they should do something differently, for the sake of the app, let them know. They would do the same for you.

If only your quest could be as simple as to build the app. You could wrap it up in a few days and move on to the next adventure. But the reality isn’t so simple: your true responsibility is to make the app happen. You have to build it, sure. You also have to bring together the pieces you need to build it. You have to make sure that they’re the right pieces, and let people know when they aren’t. Sometimes you have to compromise to get something done sooner rather than later. Sometimes you have to ask other people to compromise. Sometimes you have to stretch yourself beyond what you thought capable: learn enough Figma to design your own mockup rather than waiting or use another free mockup generator; familiarize yourself with the backend code enough to understand what’s causing bugs and help to fix them. Whatever it takes, make the app happen.

A long and dangerous road awaits you, humble developer. Don’t lose sight of your own power, and you’re sure to reach the summit…

Also, maybe don’t wait too long to submit a pull request because you’re scared of getting your code reviewed, leading to a request that’s way too big to review in a reasonable amount of time. That’s what I did, and people got kind of mad at me. So that’s probably some good advice too.