I frequently get asked questions like this:
Domain Specific 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
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?
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:
- Allow users to create an account
- Display user generated data
- Allow multiple users to interact with the same data
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.
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.
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
HTML communicates to the web browser the structure of a page. All websites on the internet use HTML to organize the content.
CSS communicates to the web browser the presentation of a page. This includes elements such as colors, fonts, and images. All websites on the internet use CSS to style the content.
- Gmail — Inbox: When we click on an email thread it loads the message without reloading the page.
- Facebook — News Feed: When we get to the bottom of the Facebook feed, it will automatically load the next status updates.
- Twitter — Stream: When new tweets arrive we’re prompted to update user feed without a full page refresh.
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 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 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.
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:
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.