Building a web app – introduction

What is this series about and who is it for?

Hello!

Welcome to this series of articles. In this series I hope to demystify the technology and architecture choices of building a web app. I’ve been building applications for the web since the mid 1990s and over the course of the years technology has changed (surprise, surprise!) – but certain fundamentals remain the same. In this series I’ll share my experiences to guide you on your web app building journey!

What is a web app?

Wikipedia says: “A web application (or web app) is an internet technology term used to describe a computer software program that is run on a web server, unlike computer-based software programs that are stored locally on the Operating System (OS) of a device. Web applications are accessed by the user through a web browser with an active internet connection.“

However, I don’t think this definition gives enough clarity on the difference between a website and a web app. Take a look at the following diagram:

A static website just shows the same pages to whomever visits. There’s no functionality or customisation for any visitor. A dynamic website adds in functionality and changes for each visitor. However, all the pages and processing is done on the webserver. The browser is just a “window” to the dynamic website.

Jumping over to a mobile app – all the code for that app is (usually) installed on your phone and as such it can provide a lot of functionality as it runs on your device. Similarly a web app runs the code on your device. But in this case it runs the code in your browser and stays connected to the webserver to download each piece of code as it needs it. 

I consider a web app to be one step removed from a dedicated mobile app but provides more functionality than a dynamic website. We’ll go into more detail in the next article.

Who is this series for?

My aim is to share knowledge with people who are interested in full stack development. In other words, developing all aspects of the web app from the front end to the back end and getting it hosted so that people can use it. I assume you understand the fundamentals of coding and I am not intending to teach those basics. But I will cover the basic architecture of a web app that is built to scale and I intend to explain why I have decided to do things a certain way. This should help you as you make decisions for your project and for your situation.

What technology did I choose?

I’ve chosen to build these web apps using React for the front end and Node.js for the back end. In this series of articles I will also cover using MySQL as the database. The reasons for this choice were:

• They’re popular technologies so there’s plenty of resources when you need help
• Both front end and back end are in the same language (Javascript) so there’s less to learn
• They have been around long enough so that most of the teething bugs should have been sorted out
• React is backed by a large company (Facebook) so unlikely to disappear any time soon
• Some of the code might be able to be reused for a mobile app in the future (React Native)

How is this series structured?

When I started out building web apps in React and Node.js I found a lot of articles that would attempt to explain the entire app in one long article. They would also list out every command that you needed to type but didn’t explain why you needed to type them. I intend to do things a little differently here. Instead of one incredibly long article I will break this out into bite sized chunks. This will give us enough space to go through why I am building the web app in this particular way. Hopefully you’ll find this easier to absorb (and hopefully it’ll be easier for me to write it this way too)!

I will group these articles into different sections. One section on the front end (React), one section on the back end (Node.js and MySQL), and another on hosting it all.

So that’s the background behind this series. Thanks a lot for reading and I hope this will be useful for you. As you read through these articles please let me know if it is helping you or if there’s something missing or needs further explanations.

Let’s move on to the architecture of a web app in the next article.