An introduction to full stack JavaScript development

In web development, when we think of the word “full-stack,” what does it mean?

In a nutshell, think of a website as being made up of different layers: a backend layer and a frontend layer. These layers, when grouped together, make up a technology stack.

JavaScript was initially only a language for the web client (browser). But then, Node.js brought about the ability to use JavaScript on the web server, giving us full-stack JavaScript development.

With full-stack JS, every part of the web application, both client-side and server-side, are written with JavaScript and JavaScript tools. As of recently, many companies are actively seeking full-stack developers!

So, today, we'll learn more about full-stack JavaScript and show you how to get started.

We will learn:

• What is full stack JavaScript development?
• Pros and cons of full stack JavaScript
• How to become a full stack developer
• Most common JavaScript tech stacks
• What to learn next

What is full stack JavaScript development?

Full stack encompasses all of the layers of a web application, from the tech it runs on, to the database, to the user interface and business logic for the front end.

A full-stack JavaScript developer is able to work with code in the backend and in the front end to build a web app, all using JavaScript.
They are just as competent in creating databases and APIs as they are in creating what the user sees.

Companies that hire full-stack devs

Full-stack JavaScript is very popular right now. There are several companies that take advantage of the full-stack JavaScript convention and hire full-stack software engineers. Here are a few:

• Facebook
• Pinterest
• Apple
• Netflix
• Amazon (AWS)
• AirBnB
• Geomotiv
• TeleHealth industries
• JPMorgan Chase Bank
• Most start-up companies

Makeup of a JavaScript application

Typically, a server is created that runs on Node.js. Express.js, or a similar framework, is used to get a server up and running quickly. A SQL or NoSQL database is also built using JavaScript.

Finally, a frontend is created with JavaScript, HTML, and CSS. This frontend could be made up of JavaScript libraries or frameworks, CSS preprocessors, or other technologies in addition to the basics.

Pros and cons of full-stack JavaScript

There are definitely pros and cons to using JavaScript in the full-stack development of the application. Here are some to help you think about whether or not a JavaScript tech stack is right for you or your team.

Pros:

• Team Efficiency. There is no need to rethink the logic in another language that might expand the amount of time needed to complete a task. Similar concepts make writing the code a bit simpler. Teams also work better together if they all understand the codebase.
• Same language means less errors and less code. Since the client and server are both in JavaScript, there is less of a chance for errors in code due to syntax mixups. Using npm’s node_modules in both the front- and backend abstracts code away from your project to make the codebase smaller.
• Efficient. Asynchronous JavaScript, with the use of the event loop, makes it very much a desired technology due to its efficiency. It’s lightweight and fast, making it really popular among large tech companies today.
• Not niche. JavaScript is one of the most popular programming languages in the world, ranking alongside Java and Python. It doesn’t take too long to learn the codebase or to find someone to join the team if a new developer is needed.
• Active Community. The JavaScript web developer community is a vast community with many resources.
• Open-Source. If you were to take a look at the NPM homepage, you’ll see that we have a wide variety of open-source projects and modules available for us to use for projects. This lowers the cost-to-market for your application.

Cons:

• Heavy processing is not efficient. If your project involves heavy mathematical computation or complex algorithms, Node.js is not your best bet. You’re better off using a backend service that is more aligned with working with that type of dataset.
• Young. Node.js is a relatively young piece of technology compared to PostgreSQL or MySQL. Being young sometimes means a lack of experience in how problems are solved.

So, now that we know what full-stack JavaScript is and what it has to offer, let's learn what a software engineer needs to know to be considered a full-stack JavaScript web developer.

How to become a full stack developer

Obviously, a full-stack JavaScript programmer needs solid JavaScript skills. But there are many technologies that would be helpful to know when it comes to creating a full-stack JavaScript application with advanced functionalities. Let's break it down by the different facets of full-stack development.

Full-stack tech

• Asynchronous JavaScript: including Promises, Async/Await Functions
• How HTTP Requests work
• Using a Node Package Manager (NPM)
• Testing Libraries, such as MochaJS, Jest, and Jasmine
• Authentication vs Authorization and how to implement it
• DRY principle for OOP
• Software development methodologies: Agile, Waterfall, Kanban
• How to pair program
• Debugging and clearing up bottlenecks
• Basic security prevention measures
• Using environmental variables
• Version Control (Git)

Client-side tech

• Hypertext Markup Language (HTML)
• Cascading Style Sheets (CSS)
• Accessibility Standards defined by W3C
• Document Object Model (DOM)
• Differences between programming paradigms
• jQuery
• CSS-in-JS frameworks and libraries, like Bootstrap, Tailwind, styled components, Material-UI
• CSS Preprocessors including LESS and SASS
• JavaScript frameworks and libraries, including React (with and without Hooks), Vue.js, and Angular.js

Server-side technologies

• Node.js: what it is, how it works, why we need it
• Node.js frameworks: Express.js, Koa, Hapi, etc.
• Backbone.js: a JavaScript library with a RESTful JSON interface
• Cross-Origin Resource Sharing (CORS)
• Application Programming Interfaces (APIs) and how to write endpoints that interact with a database
• Difference between NoSQL and SQL databases and how to build one using JavaScript
• Cookies vs Tokens and how to implement both

This is not an exhaustive list, and you certainly don’t need to know everything on this list to start becoming a full-stack developer. Start small!

Most common JavaScript tech stacks

There are several different stacks that incorporate JavaScript both on the front end and the back end.

MEAN Stack

The MEAN Stack makes use of

• MongoDB
• Express.js
• Angular
• and Node.js.

MongoDB is a NoSQL Document-based database. Express.js is Node.js’s web server framework. Angular is a JavaScript framework that assists in creating performant front-end applications.

MEAN is somewhat newer, and many users flout its flexibility, CLI, and documentation. It is used by companies like Accenture, UNIQLO, and Fiverr.

MEEN Stack

The only difference between the MEAN Stack and the MEEN Stack is the JavaScript library that is used. Ember is what the second ‘E’ stands for here. Ember uses a component-service pattern to build web applications.

MERN Stack

Once again, the only thing that changes in the MERN Stack is the type of JavaScript framework that is used. In this instance, it’s a JavaScript library called React.

There is a large debate about what the difference between the library and the framework is, but generally, a library has more freedom.

You can pick and choose what you would like to use out of React’s library to implement and reuse, whereas with a framework you don’t have a choice in the matter.

MEVN Stack

As with all of the previous stacks listed, the only change here is the type of JavaScript framework used. This one uses a framework called Vue.js.

It’s a model-view-view-model (MVVM) framework that separates the UI from the business logic that makes the application functional.

PERN Stack

The PERN Stack uses the same structure as the MERN Stack, but it changes out the database. Instead of a NoSQL-based database, we are using a SQL-based PostgreSQL database.

You would use a SQL-based database when you are looking to be more ACID compliant when conducting transactions. MySQL would work just as well here too.

What to learn next

Congrats! You should now have a good sense of what it takes to be a full-stack web developer. As you build your web pages, consider implementing a full-stack approach. The next things to learn depend on your current skill level.

If you are new to web dev, start by mastering JavaScript. If you already know the language, consider taking on a framework or library.

Educative's course JavaScript in Detail: From Beginner to Advanced is a great place to start to get a handle on the frontend aspects of JavaScript. Throughout this course, you will be tasked with 4 projects that will test different parts of your understanding.

Happy learning!

Continue reading about JavaScript on Educative

• The journey to becoming a full-stack JS developer starts here
• What is jQuery? Learn the most popular JavaScript library
• Comparing the most popular frontend JavaScript frameworks

Start a discussion

Are there any full-stack JavaScript features that we didn't cover in this article? Was this article helpful? Let us know in the comments below!