The Product Manager's Guide to Coding

Learn to Code. Unlock your Superpowers

May 02, 2020

The Snippet is a Weekly Newsletter on Product Management for aspiring product leaders.

This is a sequel to the previous post on learning to code. Part 1 was about my journey with code & Part-2 is about (a) Learning to code and, (b) Popular technologies that are widely used that you might want to learn.

There is a lot of debate on whether or not one should learn to code. Naval Ravikant, who is arguably one of the greatest thinkers of our time believes everyone should learn to code or at least know some coding. I tend to agree.

But the ability to Code—what does it even mean?

It can mean many things. To me personally, it means is that you can write computer code to solve a problem that you’ve always wanted to solve.

The solution could be anything — an excel VBA macro, a simple “prototype” or a highly sophisticated app. It really depends on the problem.

The good news is that if you can write an excel VBA macro, you can almost certainly build a web application. The technologies and programming languages may be different, but the core skills are the same.

So you see, the underlying skill is problem-solving. Every piece of code you write should solve a problem.

Should Product Managers be able to code?

My experience is that as a Product Manager, the ability to code gives you superpowers. It imparts a deeper understanding of the products that you manage and enables informed and involved conversations with your software team. The ability to code gives you the chops necessary to build quick prototypes to help sell your vision & secure funding for your product ideas or features.

For instance, In my last “corporate” job as Product Manager for Wi-Fi Thermostats, I hacked together a “LIVE” prototype of a product, “demoed” my vision to the management, and ultimately got funded to set up my own software team and launch a real product.

So if you happen to be a Product Manager reading this and you’ve always wanted to learn to code, this post is about how you can get started.

If you are not a Product Manager, but simply want to learn to code — of course, this post is for you too!

Let’s talk about a simple web application

Typically, “Hello World” web applications are the simplest of them all. The user enters a URL on their browser and the server returns a page that says “Hello World”.

Most “Getting Started” guides start with a Hello World tutorial and they are a good way to getting to know a technology stack. Of course, Hello World applications are not very useful for practical purposes.

Another quite simple, but more practical web application may be a To-do app or Task Management application that helps you to be more productive by allowing you to record your daily tasks and then show these tasks to you when needed. Additionally Task Management applications will also let you Edit & Delete Tasks that are complete.

To build such an application, you will need to provide a way for users to create an account and log in, you will need a web page where users can add, retrieve, edit & delete their tasks and a database that will store their tasks.

So, how would you build a web app?

First, Choose a Programming Language. If you are starting out learning to code, I highly recommend you learn Javascript, as it will help you cover a lot of ground when it comes to building web applications. I also very highly recommend that you read this series of posts to understand how Javascript really works under the hood. It's fascinating.

GitHut Stats: Javascript is the most popular language and there is a reason

There are several ways to build any web application, and there are several technological choices that one needs to make depending upon the target user, your level of expertise, functional complexity, etc. But over the last few years, there have been a few technologies and frameworks that have emerged as popular choices to build a web app.

As you can see there are a ton of ways to build a web application. You will typically pick a front-end technology, back-end technology, some frameworks, and a database.

In this post, I am going to be discussing one tech ‘stack’ that is quite popular → The ‘MEAN’ Stack.

A “tech stack” is simply a set of technologies that are generally grouped together to build an app.

MEAN is fast, efficient, and very flexible for building things quickly. Most importantly, you can use Javascript to build the front-end as well as the back-end of a web application.

Since I am a Javascript programmer the MEAN stack is my go-to app to build simple apps and prototypes. For our example of a simple Task Manager web application, MEAN is perfect.

The MEAN Stack, Let’s dig deeper

 M →MongoDB, E →Express JS, A →Angular JS, N →Node JS

These are all technologies that collectively power a lot of the web applications that we use every day. As I said earlier, you can simply use Javascript to build the end to end web application, (and you don't have to be an expert in it).

Let's briefly look at each of these component technologies and see what they generally allow us to do. We’ll first look at Nods JS, then Express JS, followed by Angular JS & finally MongoDB.

1. Node JS

Node JS is an open-source, “Runtime Environment” for developing web applications. Node JS applications are written in JavaScript and can be run within the Node runtime on OS X, Windows, or Linux. It is used to write server-side scripting code.

Node basically creates an environment such that your Javascript program can send instructions or commands to the processor and access other system resources such as RAM. In other words, your program can “run”.

It is ‘powered by’ Google Chrome’s V8 Javascript Engine. This Engine is the one that converts your Javascript code (a.k.a High-Level / Human Readable) to codes that the computer can understand (Low Level / Machine Readable).

The good news? You don't need to know any of the deeper technical details to actually start building simple web apps on Node.

Here’s Node’s Official Getting Started Guide that you can follow. This is how I got started too. Just start building and learn the latest concepts along the way. this way learning is much more meaningful, faster, and goal-oriented than to read about computer science concepts all day, especially when the field moves so quickly.

I didn’t mention two important things about Node JS in the previous section First — Node JS allows you to create a WEB SERVER in about 10 lines of javascript code.

A Web Server is software that reads your “request” when you type in a URL in the browser, and returns a “response” such as an HTML page.

Second — Node JS also provides a rich library of JavaScript modules which greatly simplifies the development of web applications. One such Javascript module is what we will discuss next, Express JS.

2. Express JS

When building a real web application such as a To-Do App, you will be faced with many questions — here are a few the basic ones that come up every time

Routing — Perform different actions based on the HTTP Method and URL “routes” requested by the user. e.g. if the user wants to “add tasks” take them to the “Add Task” page. If the user wants to delete tasks, take them to the “Delete Tasks” page.
Dynamic Rendering — how to pass user data from one HTML Page in the application to another?
Cookies — How to make sure the user doesn't have to log in every time they want to use the application

This is where Express JS comes in. Express JS is a web application framework that works with Node JS to help organize your web application as well as significantly speed up development time. Express JS does a lot of the heavy lifting for you that you’d otherwise have to do yourself — such as parsing the payload, cookies, session management, routing, etc. Without Express JS, your development time will be 10X or more.

Express makes it very easy to manage the challenges above keeping the overall web application organized and easy to debug in case something isn’t working right (which will happen a lot no matter how good you are).

Express JS is THE most popular framework for Node JS. If you are learning web development on Node JS, there is no getting around it and for good reason!

3. Angular JS

Angular JS helps developers build data-driven, interactive Front-ends/Client-Side of web apps (vs. Node JS which specializes in Server-Side of web apps), which makes it one of the most preferred front-end JavaScript frameworks today.

Learning Angular can get quite involved, as it needs a deep understanding of prototyping, scope, and various other JavaScript aspects. But I recommend learning these concepts anyway because it will help you become a better developer and create highly specialized apps.

Getting started with Angular is easy though. If you are a beginner or don't know much about Angular JS, here’s a great tutorial that you can follow to get started.

If you are creating real-time applications like instant messaging or chat apps, Angular JS is the way to go. For a simple Task Manager application, you may not need it, but if you do — Angular will help make the user experience much better!

4. MongoDB

If you want to create a web application, it’s definitely going to be interacting with some data, and if your web application needs the data to be stored for future reference, it’s going to need a database too.

Mongo DB is a database where all data that a web application may need can be stored. Data is stored in the JSON(JavaScript Object Notation) Format that your web application can ask for.

This is good because a lot of the data transfer between web applications already happens in the JSON format. We can convert any JavaScript object into JSON, and send that JSON to MongoDB to be stored and retrieved as necessary.

MongoDB has been a very popular choice for web developers if the data needs are relatively uncomplicated. It's open-source (so it's FREE), and has great community support too. The latter is rather important, in case you get stuck with a problem that you have no clue on how to solve.

Here’s a quick Mongo DB getting started tutorial that is super simple to understand and follow

So there you go. That is the MEAN Stack for you.

Once you play around with each technology a little bit, you will start to get the hang of it. The best way to learn these is to do the following

Watch a few tutorial videos. There are a tons of free tutorials out there.
Build “Hello World” applications. This will help you get a general feel for the technology.
Slowly add complexity and build an app that you have always wanted to build. In other words, a solution to the problem that you’ve always wanted to solve.
If you have questions or need help, reach out on my twitter and I will help you get started!

Thanks for reading & Stay safe!