You may have come across Ruby on Rails, NodeJS, AngularJS, JavaScript, and perhaps the “MEAN” stack — MongoDB, ExpressJS, AngularJS, NodeJS — in your research of the different programming technologies. Newcomers will often gravitate towards learning only JavaScript — a single programming language — but it’s often mistaken as a shortcut to becoming a full-stack web developer. Yet, the “MEAN” stack can provide simpler solutions to a wider variety of problems.

I frequently get asked questions like this:

If I learn JavaScript and not the “MEAN” stack — MongoDB, ExpressJS, AngularJS, NodeJS — will web development be 4x easier for me? If I focus my time on JavaScript, will I be 4x better than any developer who uses those four technologies?

It seems intuitive that we would be 4x better off as a full-stack JavaScript developer, but this is a common misconception. That’s okay, let’s explore why.

Domain Specific Knowledge

Learning JavaScript alone is not a fast track to full-stack web development. Learning only a programming language’s syntax — domain specific knowledge — doesn’t mean we’ll become a better full-stack web developer. Domain specific knowledge alone will make our skill progression a negligible amount easier in the grand scheme of any developer’s career. There is a better approach.

Procedural Knowledge

The smart way to becoming a full-stack web developer is by first learning how to figure out the things that we don’t know — procedural knowledge — and how to teach ourselves foreign concepts. If we want to make the long-term decision that will benefit the growth of our developer careers, we need to think of programming languages differently.

We want to find the best tool for the job and evaluate different technologies based on its merits. Here is a helpful analogy of a practical problem we can use to understand the types of problems we face in web development.

How do we build a bookshelf?

Solution #1 — Many Tools

We can use a wide variety of tools. We can use a saw to cut the wood, nails to connect the pieces of wood, a hammer to drive the nails through the wood, glue in some places that aren’t appropriate for nails. A drill can come in handy too, depending on the blueprints we’re using.

Solution #2 — One Tool

We can use a hammer. Instead of cutting the wood with a saw, we can use the opposite side of the hammer to split the pieces of wood into smaller pieces. We can connect the pieces of wood with nails we drive into the wood with the hammer. We can avoid using blueprints because that will mean we’d have to learn how to use a new tool.

In other words, I frequently get asked questions like this:

If I learn how to use a hammer and not the blueprint’s tools — saw, nails, glue, drill — will building a bookshelf be 4x easier for me? If I focus my time on how to use a hammer, will I create 4x more bookshelves than anyone who uses those four tools?

Sounds ludicrous now, right? Figuring out how to cut wood with a hammer is possible, but why would we want to do it, given there are special tools for the job out there? Learning one tool opposed to four tools is not the only consideration for deciding on a programming language.

Although NodeJS, ExpressJS, AngularJS and MongoDB are all excellent tools, in many cases there are other tools that will work better for a specific web development project. Before we can decide on a tool, we need to first understand the problem we want to solve. Then we can research for available technologies that best complete the specific job. This will help us make an informed decision on what to tool to use.

Where do we start?

It takes time to determine the tool that best completes a specific job. It involves learning how different tools solve different problems, how different tools work together, and how different web applications are built structurally.

When we shift our focus to understanding the purposes of different technologies, the hype around a programming language and its “number of Google Searches” suddenly become irrelevant. We break it down into four parts:

1. Key Concepts

What is a web application, a database, front-end, and back-end?

2. Front-end Development

What is a web browser, HTML, CSS, JavaScript, and front-end frameworks?

3. Database Systems

Where do we store data and what is a relational database and a NoSQL database?

4. Back-end Development

What is a server and how does it power our web application?

1. Key Concepts

There are a number of different concepts of modern web applications that all full-stack developers need to learn. But first, what is a web application?

Web Application

A web application is a program that generates dynamic — constantly changing — web pages for each web request. These will often have forms that accept user input. If we want to do any of the following, we’ll need to build a web application:

Examples of web applications are Facebook, Twitter, Instagram, Pinterest, and Yelp.

A database stores the information that powers our application. Our web application connects to our database in order to use collected data. There are many different types of databases, and ways to store user entered data.

Front-end

The front-end of our web application is what people see and interact. Front-end code is usually visually-oriented and changing the code at this level will impact what people see.

Back-end

The back-end of our web application is what allows a program to perform abstract functions; a person using a program on a web browser will tell the web application to store and retrieve data from a database. This is where the most complex logic lives.

2. Front-End Development

Web browsers like Google Chrome, Internet Explorer, and Safari, understand three different languages — HTML, CSS, and JavaScript — known as front-end code.

JavaScript communicates to the web browser the behavior of a page. JavaScript allows websites to create interactions — using data — on a page.

jQuery (JavaScript)

JavaScript is an inherently complex language, and an alternative called jQuery was developed to make JavaScript simpler to use. This implementation allows us to write a few lines of jQuery code to achieve the same result as a dozen lines of JavaScript code.

Web Application

A web application is a functional program loaded by the web browser using HTML, CSS, and JavaScript. When we build web applications, we may need a complex interface without having to reload the page. Web applications like these are called “single page applications”. Examples of popular single page applications are:

Front-end Framework

Front-end frameworks are useful for single page apps that have complex user flows and require fluid interactions without having to reload the page. BackboneJS, AngularJS, EmberJS, and ReactJS are some frameworks that can simplify radically complex user flows built into the JavaScript language.

A common mistake is to use a framework where it isn’t needed. Building a web application with a framework will make the development process unnecessarily complicated. If we use front-end frameworks in situations where they aren’t needed, it’s likely we’ll have dozens of files with 3-5 lines of “the magic incantation” to make our application work. In contrast, writing several lines of code in a single file is a simpler solution.

When we use procedural knowledge, we can understand if a framework is the best tool for the job.

3. Database Systems

Web applications need to store user data in order to function. Instead of saving data as individual files, web applications use databases to efficiently move data in and out of tables. There are two main categories of databases: a relational database and a NoSQL database.

Relational Database

Relational databases use a language called SQL — Structured Query Language — a programming protocol for databases. Data from web applications are stored in a table — columns and rows — similar to an Excel sheet. SQL requires us to specify the tables headings prior to storing data. SQL is a trusted database language used by many modern web applications. Google and Facebook both use MySQL extensively. PostgreSQL, MariaDB, Oracle SQL, and Microsoft SQL are several implementations that are generally used in production.

These databases are able to connect with most programming languages. SQL databases are identical, with each implementation having its own easy to pick up nuances. It’s much like learning English in the UK or US, there are some differences, but the fundamentals are the same.

ORMs — Object Relational Mappings — is a recent development in writing database driven applications, and exists in most programming languages. This system allows us to convert code written in one programming language, into SQL commands needed to communicate with the database written in a different programming language. ORMs make it simple to write commands that pull and push data in and out of a database.

NoSQL Database

NoSQL is a recent technology and is widely being adopted in the industry. This allows us to have lists of databases and push data into each without a structure. Because NoSQL is flexible, inconsistencies can exist in how the data is stored. There is not yet a standard for how data should be stored inside of NoSQL databases, so each NoSQL database type is considerably different and will not translate well to other implementations. MongoDB, CouchDB, RavenDB, and Redis are different types of NoSQL databases.

MongoDB is a popular implementation among the NoSQL databases. It has a few interesting features for scaling up an application to millions of users, with hundreds of database requests each — building applications at “WebScale”. MongoDB’s features make this an ideal solution for ad servers and other applications that need to handle hundreds of millions of requests per day. For websites that handle less than 10 million requests per day like marketplaces and most eCommerce sites, choosing another NoSQL database can be a simpler solution.

4. Back-end Development

A server powers a web application to store and retrieve data in a database, and load the program in a web browser. Servers understand programming languages and their frameworks, known as back-end code. We explore a few popular technologies.

A popular back-end code is Ruby. This intuitive language makes it accessible for beginners to understand the fundamentals of programming.

NodeJS (JavaScript)

JavaScript is a programming language that can also be used to communicate with the server. When used in the back-end, it is called “NodeJS”. JavaScript is an inherently complex language with computer science concepts like anonymous functions, callbacks, and prototypical inheritance.

Back-end Framework

Web application frameworks are used to simplify many lines of code to a few lines of code. This allows back-end development of a web application more efficient.

Rails — Framework for Ruby

Ruby on Rails is a back-end framework that focuses on “developer happiness”. The core principle of Ruby on Rails is “convention over configuration”. This framework is designed to make back-end development intuitive for teams to write together.

ExpressJS — Framework for NodeJS (JavasScript)

ExpressJS is a back-end framework that runs on NodeJS, known in the industry as an “unopinionated web framework”.

Which programming language do we use?

Comparisons between programming languages and their frameworks can be found all over the internet:

But if you are new to back-end development, JavaScript is a very complicated first language to learn. If you have yet to learn the fundamentals of programming, Ruby will be the best tool for the job.

By gaining the procedural knowledge from using a programming language and a framework, we can easily understand how to use other programming languages and their frameworks. If we’re good at Rails, we’ll be able to pick up ExpressJS very quickly. If we’re good at ExpressJS, we’ll be able to pickup Rails quickly.

As a beginner, to think like a full-stack web developer, we always use the best tool for the job. By understanding the problem and what each tool can solve, we can make development for a web application simpler.