An introduction to full stack JavaScript development
In web development, when we think of the word “fullstack,” 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. At the moment, companies are on a full stack developer hiring spree.
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
Become a full stack JavaScript developer
In this project-based course you will dissect every part of JavaScript from beginning concepts to more advanced.
JavaScript in Detail: From Beginner to Advanced
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 frontend.
A full stack JavaScript developer is able to work with code in the backend and in the frontend 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#
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:
- 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 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_modulesin 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 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 lack of experience in how the problems are solved.
So, now that we know what full stack JavaScript is and what is has to offer, let’s learn what a software engineer needs to know to be considered a full stack JavaScript web developer.
Become a full stack JavaScript developer#
Learn JavaScript without scrubbing through videos or documentation. Educative’s text-based courses are easy to skim and feature live coding environments. In this project-based course you will dissect every part of JavaScript from beginning concepts to more advanced.
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.
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 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 to become a full stack developer. Start small!
Most common JavaScript tech stacks#
There are several different stacks that incorporate JavaScript both on the frontend and the backend.
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 depends 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#
Free Resources
