Full-stack web developers are the Swiss Army knife of the code world. Having that designation means you can produce an end to end solutions, which is a highly marketable and agile skillset. But what does it actually take to achieve that status?
Whether you're new, seasoned, or specialized in one end of the stack, there's a lot to digest here. Feel free to dive in from the top or bounce around to where you need the most support.
First off, what really makes a developer full-stack?
It’s fun and buzzy to say any front end developer is a full stack developer, but being able to deploy a website to Netlify doesn’t make you full-stack.
This isn’t meant to be discouraging – just realistically, only having that experience won’t hold up well to that job title in your next interview. While you’re technically creating and deploying your work from start to finish, Netlify, Zeit, and other providers give you the power to do this with their magical tools that take the majority of the stack operations to work out of the equation.
That’s not to take away from what we’re all able to accomplish now as front end devs. The growing movement to compile and deploy static websites has just made this process simpler on the later half of the stack with benefits across the board.
Additionally, with the flexibility of tooling options like being able to run JS on a server, our skillsets are able to transfer to more use cases than ever before.
Where we came from
The web development landscape has been changing rapidly. Wordpress has been king CMS for a little while now, representing over a third of websites that use a CMS and helping PHP gain popularity. But others worked off of homegrown solutions.https://trends.builtwith.com/cms
These represented a more traditional web stack like LAMP. In these cases, you had web servers usually running some kind of content management system and a server-side language (like PHP) that would interface with the databases and produce the code that would ultimately be delivered to the browser.
Where we are and where we’re going
While Wordpress isn’t going anywhere, the serverless and JAMstack architectures are building momentum. For those unfamiliar, the idea isn’t that there are literally no servers, but it’s more about using servers that are managed for you in the cloud.
Services like AWS Lambda let you build a “function” that processes simple input and output. Attach that to API Gateway and you immediately have an endpoint you can interface with without ever having to actually manage a server.
Others like S3 let you dump HTML, CSS, JS, images, and whatever other static assets into storage and serve the site directly from it. Nothing gets processed on the server, you’re simply serving the static files to the client.
The brilliant part about this is there’s a lot less overhead and it's typically a whole heck of a lot cheaper. Many cases, you’ll also get a huge performance boost, where serving a site from s3 will require less processing to get that first response to the browser, which can directly equate to improved user experience.
Thumbs up to good user experience!
This isn’t to push you to the JAMstack, but to show that the full stack paradigm is shifting and it’s something worth looking at. There still is a traditional sense of the difference in work, but it’s becoming a bit different.
While there is still a split sense of duties, the line is blurring and makes it more manageable to spread your focus.
Before we dive in, let’s talk about that focus
It can be pretty tempting to want to dive right in and cover the full spectrum of a full stack developer, but there’s something to be said about focus. This is the basis of the expression “jack of all trades, master of none,” where you try to learn a little bit of each part of the full stack and never really master anything.
This can be dangerous when starting off trying to build your strengths as a new developer. So try to evaluate what type of learner you are and lend your focus where it matters. If you’re struggling with a spread out curriculum, that might not necessarily help get you the experience you need to land that first job or that dream job you’re reaching for.
A novel approach, for example, could be having an individual focus, but building the full stack skills around that strength. This might be a front end developer who can deploy their own web apps and continuing to build on that fundamental knowledge.
On top of that, part of being a full stack developer isn't necessarily being able to say that you know x, y, and z languages. Understanding code and software design concepts as well as being able to tackle any challenge at hand, stack aside, is what makes a great developer.
The bottom line, try to figure out what's best for you and don't let your high ambition get in the way of mastering your journey.
Mr. Miyagi approves
So where do we start?
For the purposes of this article, we’re going to keep with the traditional breakpoints of what breaks up the stack (front end, back end, etc.). Though some people say it's not really a thing anymore, realistically, there are tons of jobs for full-stack developers, and day to day, they refer to the traditional breakpoints. "Full-stack developer" definitely isn't going anywhere.
As far as the stack goes, we’re going to lean on the serverless / JAMstack architectures, as that’s just going to keep growing. And if you learn them, it will only make you more marketable with the number of jobs popping up around it.
As you'll notice below, this isn't meant to be all-encompassing with every type of database and every type of rendering solution. A strong developer should be able to be flexible with their tooling, reaching to understand the concepts of their work rather than being single-minded and only being able to be productive in one framework.
While you may be working in React and comfortable with it in your current job (that's okay!), your next job could be heavy on Vue or "surprise!" your team lead wants to rewrite the app in Svelte. Try to understand why you're using a UI framework in the first place and how it's helping you solve the problem at hand.
Now let's get into it...
Using these UI frameworks will allow you to create “components”, essentially blocks of code, that will end up producing HTML with the ability to create interactions and dynamic states right along with your code. This becomes really powerful, and while there might be a little curve to start, it becomes pretty delightful to work with once you get the hang of it.
So what should I learn?
It will also make your life easier when you’re trying to understand some of the complexities of different patterns and the concepts behind the frameworks you’ll use.
Speaking of frameworks, React and Vue are probably the best candidates given their popularity. React is the most popular out of the bunch and is just going to keep growing. Its team is constantly working to mature the framework and produce APIs that will help build modern, fast web apps.2019 State of JS Frameworks
Getting started with Create React App or Gatsby will even help you easily spin up a React app and immediately get into a position where you can tinker around in the code.
While there would be benefits to call out CSS preprocessors and tools like Sass, there are a ton of solutions now for CSS including CSS-in-JS.
While putting CSS inside of JS has some pros and cons, it isn't necessarily worth pointing out what to use in a particular direction, as it's really going to be team dependent.
Understanding the basics and power of CSS and how to use it in its vanilla form will help prepare you for utilizing it no matter the framework.
In the JAMstack world, the back end will generally refer to the APIs that our front ends to use to create dynamic experiences by interacting with endpoints from the client (like those in CRUD APIs). Being able to make those requests from the client will remove the need to have to do any of that processing before the page is served to the browser.
NodeJS is a common runtime that you’ll find in most cloud environments as an option and will give you a similar experience to what you’d expect in a browser. The main difference is that you won’t have access to certain browser APIs nor will there be a
window object and the APIs associated with it.
With the language of your choice, your best bet will be learning how to create cloud services that your applications can interface with.
Creating a simple lambda that you can play around with, whether in AWS, Netlify or any other cloud provider, will give you a good experience as to what you might expect when working in the field.
And even if you may not develop directly in a lambda in the job you find, you’ll be able to start getting familiar with concepts that are fundamental to working with the back end. And you'll ultimately use those functions to connect with other services and databases to create your own dynamic services.
So what should I learn?
With your language of choice and first function, try to start working with other services within your code to get experience working with 3rd party APIs.
Maybe build an endpoint that can send out a tweet using the Twitter API (but don’t abuse it). Learn how to create a database and set up your function to interface with it in a CRUD pattern, which will give you a more realistic use case for how a typical app might interact with a backend.
Your goal here should be creating services that your front end will interact with via an endpoint to perform operations for the person using your app. The good news is given the momentum of the cloud, you’ll have a ton of options, and free options or tiers, to start playing around with.
DevOps and the cloud
DevOps stems from the need to be able to create solutions that smooth out and speed up the process of getting code from the people writing it to a deployed state.
This work can range from a lot of responsibilities to a few, whether it’s writing bash scripts for a custom solution or writing a CloudFormation template that creates all of the resources needed for an app to run.
You’ll typically find this included as part of a larger orchestration of CI/CD workflows which automate the build and deploy process.
CI / CD Pipeline
And this is constantly changing! Given the serverless boom, the serverless framework popped up which manages a lot of this for you in an easier way, which even leads AWS to create their own solution SAM. Tools like Jenkins have been around for a bit for the CI/CD part of things, but now you’re seeing Github, Gitlab, and other source control providers provide their own solutions and tools like CircleCI that hook right into your project.