Photo by Fili Santillán on Unsplash
The steps to take in order to become a Full-Stack JavaScript Engineer in 2023
The most in-demand engineers worldwide are full-stack software engineers. They are in high demand since they are capable of creating software applications from beginning to end, from initial prototype through deployment and making it live for the end customers.
If you want to pursue a career in full-stack engineering, you have made the right decision. Let me first warn you that the phrase "Full-Stack" is quite wide. Although there is no limit to the technologies a Full-Stack engineer should be knowledgeable in, there is always a minimum standard for qualifications.
We will thus concentrate on these and then consider what other talents we can add to our skill set to make us stand out from the competition.
Let me first describe how a straightforward Full-Stack application functions and the many components required. We will show various technologies that may be utilized to construct that component once we have identified the components required.
Let's start now.
What are the workings of a Full-Stack application?
We will take an example of a simple web application and try to understand how that works. So let’s take the example of facebook.
When you head over to facebook, you see a login form where facebook asks you to enter your phone/username/email and password to log in. So whatever you see there and interact with, as a user, is called User Interface or Frontend of the application. Remember, this is one (our first) component.
When you click the Log In button after entering your username and password, your request travels across networks until it reaches an facebook server located anywhere in the world. The username and password you submitted are included in the request that is sent to the server.
Who took the information and managed to get it to the facebook server is the question at hand. The response is HTTP.
The man in charge of facilitating communication between the server and the application's front end is HTTP (Hyper Text Transfer Protocol). HTTP is thus a further element.
The server then extracts the data, in this case the login and password, when an HTTP request reaches it. The server then establishes a connection to the database and determines whether the username is present there or not. If the username is located, an attempt is made to match the password that is stored in the database with the username.
There can be one of the 3 conditions in this case:-
The username itself is not in the database. Username exists but the password doesn’t match. Username exists and password matched too. ( This is a successful log in case).
The server prepares a response with the relevant message and data and sends it back to our Frontend over HTTP depending on the circumstance.
So far in this debate, we have only encountered two distinct components:
Server : It is a software program that takes the HTTP request, processes that, talk to the database if required, prepares an HTTP response, and sends that back to the frontend.
Database: Database servers are permanent storage to store and manage records, that can be user details or any other details required to run our application successfully.
The backend of the application is referred to as the server and database together.
The request-response cycle, in which a request comes from the front end and is sent to the server, which then processes it and sends back a response, is finished by what we have talked thus far.
A full-stack application can be seen as a collection of these processes in their most basic form.
Once the Full-Stack application has been created, you want to make it accessible to users. Deploying software means making it accessible to users. Deployment is thus a further step in the creation of apps.
According to our discussions, the most basic Full-Stack application requires the following elements.
- Frontend ( User Interface )
- Server
- Databases
- HTTP
- Deployment
Next, let’s discuss every component in detail and what different technologies are used to make them work.
Required Skills for Full-Stack Development As I told you earlier that Full-Stack is a very broad term. There is no end to tools and technologies you should know as a Full-Stack developer. Therefore, I’m dividing this article into two sections – The minimum required skills to be a Full-Stack developer and what to learn afterwards.
So, let’s first look at Minimum Required Skills.
Before learning anything, learn how the internet works.
Frontend Development
Building Frontend of an application requires knowledge of a few different technologies. Also, there are a lot of jobs across the world for Frontend Developers only. So, let’s take a look at what you need to know to build the Frontend of the web application.
- HTML: It is the most basic part of the user interface. HTML gives the structure to the web page. Whatever element you see on the web page is basically HTML; for example, buttons, input boxes, texts, etc., are all HTML.
You can get started with learning HTML with this link w3schools HTML
Practicing and writing code is the best way to learn rather than going through different tutorials only. So invest your time more into practice.
- CSS: CSS is the one that gives a pleasant look to the HTML. It adds colors and simple animations to handle typography, gives proper margin between two HTML elements, and makes the overall layout of the page more consistent and responsive to different screen sizes.
You can get started with learning CSS with this link w3schools CSS
- JavaScript: JavaScript is a very popular programming language, not only for building the Frontend of a web, rather it is used for a lot of things these days. It can be used to build web apps, mobile apps, desktop apps, build servers, do machine learning and AI, etc.
As far as Frontend is concern, JavaScript adds interactivity and dynamism to the user interface giving a better user experience. JavaScript is used to dynamically change the HTML and CSS of the web page.
It can be used to show pop-ups, perform some actions upon click ( or any other user interaction), change the colour/content of the page on the fly, and a whole lot of other stuff.
I highly recommend getting a good hold of JavaScript because it is used a lot in building applications.
Remember to become a full stack JavaScript Engineer you need to be very good in JavaScript
You can get started with learning JavaScript with this link w3schools JS MDN javascript.info
Now Choose a JavaScript Framework
When an application grows, it becomes quite lengthy and complex to write and manage vanilla ( Pure ) JavaScript. In that scenario, we must choose a JavaScript framework or library to build our Frontend.
There is quite a good number of frameworks/libraries out there. The most popular ones are listed below –
You might have got the question, which one to choose? The answer is – do your own research.
Look which one among these is more popular in the area or companies you’re targeting to get a job or do freelance. If you can’t decide on your own, I recommend learning React
You can start learning from this Youtube channel CleverProgrammer . It’s a beginner-friendly tutorial.
Learn Git and Github
Git is used for source control. It lets you store different versions of your code in a central place. If you made some mistake or maybe deleted your code mistakenly, you can recover the code from the central place.
Github is a place where you can put your code so that others can have a look. It is very important to show your skills. Learn Mosh Git and Github
At this point I recommend you to build projects and put your code on Github. You should also host them online so that people can take a look.
Additional Skills to stand out in the crowd
There are some technologies that are not required and many times not expected to know from an entry-level developer but knowing them will give you bonus points.
Learn a State Management library like Redux ( if you choose React) or VueX or Penia for Vue.js.
- Next.js – It’s a React framework ( Choose Nuxt if you’re a Vue.js developer ) to build fast and robust Web apps relatively faster.
- TypeScript – It has got quite a popularity in the last couple of years. It is called the superset of JavaScript. It adds type safety features on top of JavaScript.
I recommend learning these after you get good at the things discussed prior or maybe after getting a job.
Backend Development
You know what a server does, as we have discussed earlier in this article. Building, maintaining, and monitoring server is a crucial task.
There are a lot of programming languages out there to do server-side development but we are focusing on JavaScript ecosystem . You can choose any of them that is most in-demand at the companies you’re targeting to get a job at.
- NodeJs If you already know JavaScript, learning Node will be relatively easier compared to other choices available. If you want to know what Node is, check this
Choose a server-side framework
When you start developing server side applications, you will encounter that there are frameworks being used widely. The choice of a framework depends on you.
I’m listing down some of the popular NodeJs frameworks.
Database
Databases are used to store or information data permanently. I have already given you an example above about how it works in the combination with servers.
Databases can be broadly divided into two categories :-
- Relation databases
- Non-relational databases You can see a comparison and difference between relational and non-relational databases here
These two have their own use cases. Also, there are a number of options available in each of the categories.
In the Relation database, we have options like
- Postgres DB
- MySQL
- SQL Server
- SQLite
- Oracle database
- MariaDB
- and more
In non-relational databases, we have options like: -
- MongoDB
- Amazon DynamoDB
- Cassandra
- HBase
- CouchDB
- OrientDB
- and more
Lots of options there, but which one to choose?
The choice of a database is somewhat related to your choice to do server-side development. For example, if you’re doing Node + Express, you are more likely to use MongoDB.
Object Relational Mapping (ORM)
An ORM is a library written in your language of choice that encapsulates the code needed to manipulate the data, so you don't use SQL anymore; you interact directly with an object in the same language you're using. With an ORM library.
List of ORM (for relational databases)
Object Document Mapping (ODM)
List of ORM (for non -relational databases)
- mongoosejs
- and more
These combinations are not rules but just preferences I have observed from my experience in the industry so far. You should always do research and check the job openings around you. You can find there what skills companies are looking for.
The Frontend and the Backend of an application communicate through HTTP request-response. So knowing HTTP is very important. So knowing HTTP is very important.
You might have heard about HTTP methods, status codes and headers. These things have special meanings on which both the client and the server rely to understand each other messages ( request or response).
You can make research to learn more about HTTP.
One important thing you should learn while learning HTTP is Web Security. People don’t pay attention to this topic initially, but it is highly recommended to have a basic understanding of it.
There are a couple of architectural styles developed on top of HTTP to facilitate communication over the web.
REST API: It is widely used and I recommend you learn it first. GraphQL : This is gaining popularity really quickly because of its suitability in many cases over REST.
Mobile Application Development
With the knowledge of JavaScript, you can build cross platform apps that can work on both android and IOS using this libraries/frameworks
1. React-Native: React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces.
read more here
2. Ionic framework: An open source mobile UI toolkit for building modern, high quality cross-platform mobile apps from a single code base in. Ionic allows you to build app using Vue, React, Angular or pure Html-CSS and JavaScript
read more I highly recommend you choose React-Native.
Desktop Applications:
Build cross-platform desktop apps with JavaScript, HTML, and CSS
Deployment
Your project is just useless if it is not available on the internet to be used by people. There are many ways to deploy a FullStack app.
People these days use providers like Amazon Web Services, Azure, Linode, Digital Ocean or Heroku, etc. They provide a platform as a service to host your application on their platform. You might need to pay for it after a certain limit of usage.
You can host your app’s frontend on platforms like Vercel or Netlify. There are other various platforms as well.
This hosted frontend talks to the backend hosted on Heroku, AWS, or any other platform and complete the working of your FullStack application.
Note: At this point, you should practice a lot and try to build projects. After building a couple of projects and hosting them online, you should start looking for jobs.
What we have discussed so far is the required skills one should have to be a Full-Stack Engineer. But, the learning never ends. So, let’s look at what are the other technologies/tools you should learn next to advance your career.
What to learn next?
When you will look at a running application, you realize a lot of other tools and technologies are being used there. Let me list some of the most important technologies you can look into to advance your career further.
Caching Learn some in-memory databases, like Redis, used for caching for more performant and faster responses from the backend.
Docker Docker is used for containerization. This makes it easy to configure and manage the environment for development, testing, and deployment.
You should also learn CI/CD. This lets you build and ship features/bug fixings faster by automating various tasks involved in the software development life cycle
Testing Testing is quite an important task to do before making an application live for the end-users. As an engineer, you should know how to do unit and integration tests at least.
You might have heard the term TDD, which stands for Test-Driven Development.
Holla, always remember there are more tools to learn to be relevant in the industry
Conclusion
In conclusion, I would like to give you some tips to help you in your overall journey.
- Learn the core concepts of the JavaScript and Nodejs.
- Practice coding problems based on the topics you learn. You can choose a platform like hackerrank.com or any other platform, etc. to find and solve coding problems.
- Don’t rush to learn everything really quickly. It will take time. So, be patient and keep going.
- Accept the fact that nobody knows everything.
- Build proof of work. Build projects, host them online, put code on Github and show it to people so that they can trust your skills.
This is all I have for this article. If you have got some questions or need some guidance, you can always DM me on Twitter.
Thank you for reading ❤.