This is a series of tutorials for a person who has absolutely no experience in programming and does not even has a computer or software engineering degree.

The end goal is to enable a person to be able to develop web frontend apps including both the user interface design and also how to communicate to a back API service using GraphQL. The series will cover installing all the tools required to setup a complete frontend development environment and also provide brief explanation of the tools and their purpose.

We will also discuss some fundamentals involved in the whole software development process, even if we are not going to be implementing the said features, because it is necessary to understand all entities we will be even communicating with.

The first article will cover basic programming concepts, to familiarise a person with no programming experience with what they going to be dealing with.

The second article will help a person setup a complete programming environment on their local machine (in programming terms, the laptop/computer you are using is referred to as a local machine).

The third article will show how to design and build your first web UI page.

The fourth article will show you how to communicate with a backend service from which you can get the data. It will also cover the backend entities in a software app in a bit more detail.

The fifth part will deal with how to setup and run native mobile applications.

After completing all these steps, hopefully you will be able to have your first steps into the world of programming and who knows, you might be the next Mark Zuckerberg!

Setting up the environment

The first phase is to setup a development environment. We will start from scratch. The only thing you need right now is a laptop/computer and an internet connection.

Let’s begin your journey into the programming universe.

Why code? What is the potential of software?

First, let’s look at the paycheck. Software programming related jobs are some of the best paying jobs in the world. You can find the average pay for software related roles.

Also, many software jobs had the remote work culture long before came into the picture. You can work from anywhere in the world if you setup this clause in your contract with your employer.

You can build your own apps that can change the world, if you put in enough grit and zeal into it.

And finally, the ability to build. To build things that last and are used by so many people to make their lives better is the best work you can do in your life and software does just that.

Mind you, understanding and building software needs a lot of time, commitment and also interest. It takes time and effort, there is no easy way around it. You will have to put in a lot of work and will also have to do it consistently. The longer you stay away from programming, the more time you will need you get back on track. On the contrary, the more you practice coding, the more you will be good at it. Your abilities will start to rust out. Even if you spend 1 hour a day five days a week, that is still good enough. The more hours you spend daily, even better. But always stay consistent. Keep doing it to become a better programmer.

Enjoy the journey on becoming a programmer. Focus on learning and building things and work as hard as you can.

What is a computer programming language?

A computer only understands machine/binary language (consisting of only 0 and 1). As this language is impossible to understand for humans, languages in plaintext, human readable format are created which are easy to comprehend for us. We write computer programs in these languages and these languages are ultimately converted to machine readable format. Thus, these programming languages are our means to write instructions to instruct the computer to do what we want it to do.

Every programming language has syntax (form) and semantics (meaning). Syntax consists of the words that the language understands, semantics are the meaning that is conveyed by an instructions. When you choose a programming language to code in, you have to write within the boundaries of that programming language. The syntax has to be correct otherwise the compiler is going to throw an error and the program execution is going to halt.

In our series, we are going to use the programming language Javascript. It is highly advisable to use TypeScript which is a superset of Javascript, i.e., it complements Javascript. But we won’t make things complex right now.

It is highly advisable to go through this article that explains the basics of Javascript.

After you write a program in a programming language, you have to run the program to show what it does. To run a program, you need a runtime environment; a runtime environment that supports that language.

What is a runtime environment?

A runtime environment is an environment that is used to execute software programs. The runtime environment is typically responsible for compiling and running the program. It is a software program itself that runs other software programs. Runtime environments have features such as garbage collection, threading, interacting with the underlying operating system, environment variables, directory structure, networking operations etc.

Every runtime environment targets a specific framework(s) and programming language(s). So it is specific of the tech stack being used. A runtime environment cannot run software written in any framework or any programming language; only the set of frameworks and languages that it targets.

In case of a frontend web app that runs in the browser, the runtime engine is built into the browser itself which runs the Javascript code. In case of Google Chrome the runtime engine is V8. So the code written in javascript for the a frontend website is run by the browser itself.

To run Javascript code outside of the browser, there is a popular runtime engine called NodeJS which runs Javascript outside the browser and on the server. NodeJS is also powered by the same V8 engine used in Chrome.

What is a software framework?

Think of a framework this way: suppose that in order to construct buildings, instead of building it from scratch, you had a reusable foundation, a skeleton of the building which is built using state of the art design principles and you can use this foundation to construct your own building with the shape and features that you want.

A software framework is a reusable foundation, but it is a foundation for building software applications in a much more fast and efficient way. We enhance and extend the features already provided in the framework to build our own software better. The framework contains a set of libraries, package managers, build instructions and everything needed to support building software with a head start.

Some of the types of frameworks include:

• Backend Frameworks – for building backend systems that run on servers
• Frontend Frameworks – for building software that runs in browsers, as web app frontends
• Mobile Frameworks – for building software that runs on mobile devices

We will be building web app which runs on the browser, so we will be using the Frontend Framework ReactJS.

What is an IDE (Integrated Development Environment)?

Think of an IDE as the toolbox you need to build a house. This toolbox is all you need to build a house and modify it whenever you please.

An IDE similarly consists of all the tools you need to write, edit and run software programs, and all of these tools are bound together into one. It provides a graphical user interface. The IDE is where you write the actual code, using a language, framework and runtime environment.

An IDE can supports atleast one programming language, atleast one framework and atleast one runtime environment and a developer can use to write software in the said language => using a framework => while running on the supported runtime environment.

Some features of an IDE include a text editor to write code, a debugger to step into code to see the values while the programs runs, terminals to run commands, extensions, search features, source control integration, easy to visualise and explore directory structure etc.

We will be using the most popular IDE today, Visual Studio Code.

What are the main components in a software app?

There are many types of software systems in general; video games, artificial intelligence, virtual reality etc.

Here, we are strictly speaking about apps that we can use in a browser or mobile client.

First, there are 2 types of web and mobile applications: 1) Static and 2) Dynamic.

Static apps are the simple ones, who have static data and that data stays the same for every user that visits the app.

Dynamic apps on the other hand, are the apps which a user can use and modify. Users can enter data and change it, like Facebook for example. Every user comes in with their own set of information and the FB app changes constantly, whether it is used from the browser or from its mobile app.

We are talking here about Dynamic apps. Dynamic web/mobile apps have the following components:

• Backend
• Database
• Frontend – web browser
• Mobile

Backend

A backend handles business logic and handles the operations for an app. It is hosted on a server. The web and mobile frontends communicate with it to either get information or to create or alter information. The backend communicates with the database to store and retrieve data and performs logic on that data.

The backend performs behind the scenes and is thus finds its name, backend.

Database

Database is a place where we store data. There are many kinds of databases, the most popular among them being Relational Databases and non-relational databases.

Web frontend

Web frontend is the piece of the software app that shows on a browser such as Chrome. This code is also hosted on a server, when a browser visits a site and gets the response, it renders the content. This AWS article provides a step by step explanation of what happens exactly when you visit a website using your browser.

To summarize these steps:

• You enter a URL in your browser
• Browser looks up the IP address of the site and tris to reach it.
• Browser initiates a TCP connection with the server on which the site is hosted.
• Browser send an HTTP request
• Server send back a response
• Browser renders it. Or in simple words, browser “paints” the site on its canvas.

Mobile/Native frontend

The native mobile app, most notably Android or iOS.

Both web and mobile frontends are graphical interfaces for browser and mobile devices respectively and both of them communicate with the backend API to get data. So both web and mobile frontends are called Clients of the backend.

Web Frontend main concepts

In this series, we will be building a web browser frontend. We will use a backend API hosted on the internet so we don’t have to worry about the backend and database. We only have to worry about building the frontend and communicating with the backend to get and consequently show data and also to alter it.

Our frontend framework will be ReactJS. ReactJS is developed by Facebook and is one of the most popular frontend frameworks in the world right now.

Built on top of the React framework is NextJS, which provides enhanced features such as server-side rendering. We will be using NextJS for our frontend development.

With this, the first part of this series is completed. Be sure to open and read the links in this article as well and read on your own too to learn more and more about programming and its related concepts.

In the next episode, we will setup your local machine to setup all of the above elements required to initiate coding.