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.
32 replies on “How to Learn Web Development the Smart Way”
This was a great post. Thanks !
Thanks for the feedback, Saif!
Great post, thank you.
Nice Post!! keep writting this kind of stuff!
Very nice reading. I would be interesting to know your thoughts on other web technologies as well, for example Python-Django, or maybe Golang as a potential alternatives to Rails/NodeJS.
Thank you – maybe we can cover those other web technologies in upcoming blog posts 🙂
Nice post. I needed a path because I was confused between these two languages and frameworks. You have solved my problem. Thanks 🙂
Thanks for the kind words and I’m glad we could help you out, Gagan!
So glad I found this. This really helped clear up a few questions I had. Thanks for being so detailed!
Glad you liked the post, Alex!
Oh man, I was searching the whole web for this simple question, “Where should I start”. Thank God got your website in time. I’m in peace now. Grreattt article. Tons of thanks (^_^)
I’m glad we could help you out and thanks for the kind words, Adarsh.
If you’re interested in starting, take a look at our 2 week free intro course and get your code reviewed by us.
Very clear technical writing. Thanks for this great post!
Glad you liked the post, Tao.
Great article! You’ve cleared up some of my anxieties that have been keeping me awake lately.
I’ve been programming for a couple of years now in Ruby and JS. I finished Dev Bootcamp’s immersive program in January, and since then I’ve found a ton of technologies combined with a thousand ways to do the same thing. It became very daunting and distracting for me to decide which tools I want to commit to using.
I’ve been developing mainly using full-stack Rails alongside some JQuery like you mentioned. I’ve also developed an app using the MEAN stack with a team of developers. However I was recently told by a senior developer whom I sought for guidance a few times that I should deviate from Rails as a full-stack MVC framework to using it solely as an api (for managing the databases and such) alongside a front-end framework such as Ember, Angular or React + Flux.
Since then I’ve been questioning everything I learned and wondering wither my skills are still viable in the real world.
I love rails and how I can write most of my logic in ruby with a little JS or JQuery. I love ERB blocks 😀 and I don’t want to just ditch everything I know and move on to learning a completely new way of doing things.
While I think that JS is great, I kind of cringe every time I think I have to use it for anything more than DOM manipulations.
In terms of keeping up with the world. Would you advise for pushing down the decoupled apps route or will I still have viable skills as a developer if I continue to use Rails as my main framework with a few JS sprinkles on top?
Thanks for the kind words, Ahmed.
It looks like you’re still early in your web development career so trust your skills and stay open to new technologies.
That said, it’s always about the right tool for the job and IMHO Ruby, Rails and raw JS on top is the right tool for many jobs.
Thanks for the great informative post,enjoyed reading while learning.
Glad you liked the post, Vishnu.
Remarkable post. You’re a lifesaver. 🙂
Thanks for the great feedback, Ashish!
Thanks. Being a details guy, I find all the available options and keeping up with them an overwhelming proposition. These were nice and simple comparisons and explanations.
Thanks for the kind words, Mike!
I have 9+ years of experience in Rails and still trying to find some framework I can as smoothly create apps in JS as I’m doing it in Rails now.
Let us know if you find one! 🙂
Brilliant. A very clear understanding conveyed.:)
Walter, may you share your thoughts about Angular vs React working with Ruby on Rails?
Thank you very much for your post. High value content!
I’m still learning from you, as I’m making my way to the top as well. I definitely enjoy reading everything that is posted on your site.Keep the posts coming. I liked it!