If you’re new to the web development realm, there’s a good chance that your path may be starting to look something like this:
- Learn HTML & CSS
But what comes next?
It can of course be a little bewildering to figure this next step out, there are so many languages, frameworks & tools to grapple with!
This article will focus specifically on the route a full-stack developer may want to take, so we’ll cover both frontend and backend technologies in this article.
With that said, let’s begin!
1. Learn React, Vue or another frontend framework of choice
React is used on the frontend, it’ll typically be used in conjunction with some sort of backend technology which would be responsible for fetching, storing & updating data.
As your app grows, this would inevitably become problematic and time-consuming to maintain.
Using a professional, scalable out-of-the-box solution like React (or Vue, or any number of other candidates) is the logical solution to this problem.
2. Learn server-side scripting with Node
Node is a fantastic server-side language.
Can I learn a different server-side language instead?
Of course. If you have your own particular reason(s) to use a different server-side language, such as PHP, for instance – then feel free to pick up that language up instead.
3. Familiarize yourself with a database technology like MongoDB
With server-side technologies such as Node, you’ll typically want to hook up some sort of persistence layer.
By that, I mean you’ll want to be able to store data in a database, and interact with this data as and when required via your frontend application. This is a fairly typical requirement among web apps in general, it’s fair to assume that most apps would have some sort of persistence layer in some form.
This is where a tool like MongoDB would come in.
NoSQL vs SQL
I won’t go into the pros and cons of NoSQL vs SQL in this article, however, you should know that (generally speaking) MySQL is more structured, whereas NoSQL tends to be less rigid and more flexible.
I’d recommend this particular overview on the MongoDB website: NoSQL vs SQL to inform your decision with regards to which type of database you’d like to look at first.
It could be argued that a “typical” combination (as of the time of writing) would be Node + MongoDB, but it’s really down to personal preference and use-case.
There’s no particular reason why you can’t pair a Postgres database with Node, too, for example.
4. Acquaint yourself with version control
Version control (or source control) is basically the practice of managing and tracking changes and updates to your software (or project).
Git (and GitHub) would be one of the prime examples of version control software.
Whether you’re wanting to work in industry, amongst a team of other developers, or whether you’re looking to work exclusively on your own projects — you’ll definitely want to familiarize yourself with the basics of version control.
How does version control actually work?
In terms of a brief overview, here’s how version control works in principle:
- You create a
repositoryto store your project
pushyour code to this repository, the code now exists remotely outside of your machine
- During the push, you’ll supply a message like “Added the about page”
- You make another change to the project, and push again
So you contribute changes, or
commits, to your own remote repository. This effectively creates a backup of your work in a remote location, but you’re also getting a snapshot of the codebase every time you push updates.
As you may expect, you’ll have a full history which details all updates and changes that have been made to your project of it’s lifetime.
Working with others
Alongside this, another key aspect is the ability to share your project with other developers. This would work something like as follows:
- You invite your buddy to your repository, he can now access your code and
pullit down to his machine
- He can propose updates, now, too
- You can approve these updates, and
mergethem to your project
You can see via these basic principles how it becomes easy to share and collaborate with other developers. Each of you contributing to the same codebase seamlessly and in an organized manner.
Version control in general is extremely powerful, and this simple overview is barely scratching the surface. It’s well worth seeking out the many resources available on this topic, such as this great introduction to Git.
5. Start to learn about unit testing
One of the hallmarks of an experienced and capable developer is the ability to write testable, maintainable code.
By testable code, we mean code that is clean, easy to reason about and can be tested in a (somewhat) modular fashion. Ideally, you should be writing unit tests for both your frontend (React) and backend (Node) code!
When starting out as a developer, at first you may feel that manually testing your code is all you’ll need. This is simply not the case, this will become more apparent the more experienced you become.
It’s simply much more effective and efficient to also write unit tests covering the main functionalities of your software.
Unit tests provide peace of mind when adding new changes, as they provide a quick mechanism to easily verify that something hasn’t inadvertently been broken at some point along the way.
The tests also promote better coding practices in general, as you’ll need to more carefully consider how to lay out and structure your code. As stated, the code should be somewhat modular and thus easier to separate out and break apart.
If your code is hard to write unit tests for, it may well be the case that it’s poorly written or not very well organized to begin with.
Enforcing unit tests can put a stop to unorganized, unclear code and make your app much more robust in the process.
There’s a lot more to debugging that dropping the occasional
console.log in your code!
For instance, you can take a look at the React Developer Tools.
This extension allows you to more easily identify the components (and their children) that have been rendered on the page.
Often times, you don’t need to look any further than the in-built browser dev tools. If you’re unfamiliar, you’ll perhaps be surprised how powerful these dev tools can be and how many (useful) features they actually feature.
It’s well worth dedicating the time to learning these dev tools inside and out, as this will play dividends in the future.
7. Learn TypeScript
A quick example of how TypeScript works
As a brief summary, here’s one example of this.
const name = "Thomas"
But in TypeScript, you must define the type of this variable. This ultimately leads to much more robust and less error-prone code:
const name: string = "Thomas"
As a trivial example, enforcing types for your variables via TypeScript would prevent this kind of problem:
const firstNumber = 20 const secondNumber = "22" console.log(firstNumber + secondNumber) // "2022"
We’re adding a number to a string, perhaps unknowingly/unwillingly, which can lead to unpredictable results.
We can’t make this same error with TypeScript, as
secondNumber would each be initialized as
numbers to begin with.
Think about branching out…
There are, however, a few other distinct paths that may be appealing or desirable to you at this point. Paths that can still effectively leverage the skills you’ve been building up to this point.
Let’s take a look at those!
8. Look into app development with React Native
Not only that, you’d need to learn the iOS equivalent in this case, provided you want both an iOS and Android version of your new application.
You could also consider Flutter
It’s worth noting that React Native is not the only tool that allows you to “white once” in this manner.
You can use other tools, such as Flutter, to the same end.
9. Explore serverless technologies
Serverless programming is a break from the traditional approach — you’ll not need to manage servers or manually handle any of that infrastructure yourself.
One popular provider in this domain is Amazon Web Services (or AWS), it’s well worth acquainting yourself with what they have to offer in terms of serverless facilities and features.
Enter Node, again…
You can use many different languages in your serverless applications, but most notably for the purposes of this article — you can use Node.
I hope this article has been useful and somewhat of an enjoyable read!
I hope the list above has shed some light on the various avenues available to you.