Roadmap to modern Web development | From Static to Full-stack to Micro-services

Introduction

If you are curious that for whom this blog is, the answer is anyone who is an Absolute Beginner and above. So lets dive in, shall we ?

Why Web-development ?

Okay jokes apart, in a nutshell in today’s modern day and age, internet is at the heart of every product in some way or the other and well, web-development is what empowers you to pursue a career where you can build tools and what not for the Internet first hand. And on top of that it is very easy too, to get started with. It has a massive community to help you. Web-applications are the most accessible form of applications which literally requires just a simple browser. And in today’s modern day and age, with concepts like Progressive Web Apps (PWAs) it is easier than ever to make our applications act like native applications regardless of the platform and operating system they are running on. So you see, what I told earlier was in some extent true, “Web-Development is the best”. 😉

The Road Map in short

  1. Static Websites
  2. Dynamic Websites
  3. Databases
  4. Backend
  5. Monoliths
  6. Microservices

And basically that is everything what we are gonna talk about in this blog. In the upcoming sections, we are going to dive deep into every step that I mentioned above and discuss about how to start and eventually be good enough to build your own web applications. So buckle up, grab some popcorn and relax, as its gonna be a long ride.

Behind the scenes

Before starting with web-development at the first place, we should understand why we need to follow the roadmap that I outlined, or in other words find the motivation to why should we follow the road-map. So here arrises the question, what actually happens behind the scene when you provide a URL in the address-bar of your favorite browser ?

In a broader sense, this itself is a humungous topic that will require its own blog to cover all the corners, but just for the sake of this blog, in simple words, three things happen when you navigate to a website -

Glossary -

(Simplified just for the case of this blog)

Server — Just as the name suggests, it serves to the requests made by the client.

Client — The device from which the request is being sent and the device that accepts the response from a server.

Request — In simple words, it is what a client asks the server to provide, with some context.

  1. The client (in this case your favorite browser) sends a request (in this case it will look something like “load https://arunabharjun.com in my browser”) to the server.
  2. The server sends a response in context of that request to the client. (In this case sends you the server side rendered website)
  3. The client then displays that response for the user to consume. (in this case the website you requested to load)

It is obvious that a request really doesn’t exactly look like “load https://arunabharjun.com in my browser”, but for the sake of understanding, you can imagine the client and server communicating with each other in some form which reciprocates “load https://arunabharjun.com in my browser”.

Now you see, in reality there is a lot that goes behind the scenes but we can sum it up to two terms in a broader sense -

1. Frontend (Everything client)

2. Backend (Everything server)

So what you see with your eyes and interact with directly in a website after it loads in your window is the frontend, and everything that works away from your sight, basically the thing that provides you with the website is the backend. Now I am not going too much into details, but hey, google is always there right? If you are a curious kid, just open a new tab and you know what you need to do. 😛

So with everything that you have learnt from this discussion, I hope you are feeling motivated now to follow the roadmap, as simply put, the knowledge of static websites help you understand dynamic websites which have a more robust backend that drives the frontend and then there are two ways to achieve that (monoliths and micro-services) which we will discuss in more details in the coming sections. Okay I know what you are saying, “enough with the pre-requisite part Arunabh, just let us know what we need to learn and from where to”, and thats exactly what I am going to discuss now.

Static Websites

So now that we have that out of the way, lets understand more about static websites.

What is a static website

Glossary -

HTML — Hyper Text Markup Language

CSS — Cascading Style Sheets

JS — JavaScript

A static web page (sometimes called a flat page or a stationary page) is a web page that is delivered to the user’s web browser exactly as stored, in contrast to dynamic web pages which are generated by a web application, is the wikipedia definition. So basically it is just the simple hard coded HTML page that the server sends to the client just as stored in the server without any changes at-all. What the developer has coded is what you get to see in your window.

So a static website, while could be just a HTML page, but HTML alone does-not have the ability to format the document, well at-least not in as robust way, as we might want to. That is achieved using CSS. In simple words, what plaster and paint is to bare brick walls is what CSS is to plain HTML. Now HTML & CSS together make the website pretty and presentable, but what about the functionality? To understand what I mean by functionality, let us take the example of a wall again. So you might have seen there are windows and doors in walls, but they are rendered useless without the hinge mechanism and all the other bells and whistles that come along with the doors and windows and that is exactly what JS brings to the table for vanilla HTML documents. JS makes the website gain more functionality. So in a nutshell, to make a bare minimum static website with hardcoded pages and some pretty formatting along with some functionality, you will need to know HTML, CSS & JS.

Resources for HTML, CSS & JS

  1. HTMLhttps://www.w3schools.com/html/
  2. CSShttps://www.w3schools.com/css/default.asp
  3. JShttps://www.w3schools.com/js/default.asp

After getting your hands dirty with the ones above, I would like to get you interested into a web UI framework called Bootstrap. It is a very popular UI-library / framework which is easy to learn and helps you understand most of the conventional terminologies of UI elements that are used in mainstream frontend web-development. Find the resource for Bootstrap as follows -

  1. BOOTSTRAPhttps://www.w3schools.com/bootstrap/bootstrap_ver.asp

💡PRO TIP : After going through with all the above mentioned, download a Bootstrap free website template and try to recreate the complete template on your own.

While the above resources are really great and best in my opinion to get started with, but do not limit yourself to them. Feel free to explore more as you like.

Dynamic Websites

What is a SPA?

Why use SPAs

  1. It is much easier for the developers as the libraries & frameworks make code reusability possible and in general debugging is easier using variety of tools available.

React.js? Angular? Vue.js?

So by now you have seen me talk about two things in particular a lot, framework & library. The reason behind that is that here a framework is the one that provides a very strict set of ways that will achieve the end goal, but a with a library, you can achieve the same goal with totally different kind of methods and steps. And that is what sets the difference between React.js, Angular & Vue.js, where React.js is a UI library & Angular, Vue.js are UI frameworks. Now they are not the only libraries or frameworks but they certainly are the most popular out there. And which ever one or may be more than one you choose to proceed with, you are good to go.

From where to learn React.js, Angular & Vue.js?

Official Documentation -

  1. React.js : https://reactjs.org/docs/getting-started.html
  2. Angular : https://angular.io/docs
  3. Vue.js : https://vuejs.org/v2/guide/

Fun facts

React.js is developed and maintained by the Facebook team

Angular is developed and maintained by the Google team

Vue.js is not developed & maintained by any one Organization

💡PRO TIP : If you went the React.js way, try to explore Next.js after getting your hands dirty with React.js

Lets talk Backend development

What is a database?

A database is an organized collection of data, generally stored and accessed electronically from a computer system.

Simply put, it is where we put the data or information generated by or for the application we are building. And there is not only one THE DATABASE. There are a number of databases out there which are being used in all kinds of applications. And the categories in which they are divided into are a lot but to name the most commonly used are -

  • Distributed Databases
  • NoSql Databases
  • Relational Databases

Now the discussion about all these types of databases is a complete different blog to write, but if you are curious to know, feel free to go ahead and make a google search on “types of databases”.

So now that we have discussed about what is a database, you might be thinking “yeah, yeah… all these are fine, now tell me where do I start if there are so many types of databases”. And don’t worry, that is exactly what we are going to discuss now.

Learning a Database

From where to learn MySQL & MongoDB ?

MySQL https://www.tutorialspoint.com/mysql/index.htm

MongoDB https://www.tutorialspoint.com/mongodb/index.htm

As always, dont restrict yourself to only these resources, while they are good enough, do go ahead and explore a little bit yourself. Remember, Google is your best friend.

Now that we have explored frontend, and databases, we need to learn backend which connects the frontend part with our database.

💡PRO TIP : Do explore Firebase (A Backend-as-a-Service by Google).

Learning Backend development

What is the objective of writing a backend ?

The answer is that we want to take data from client side, do something with it, and then either store that data to the database or send it back to client, or may be simpy fetch data from the database and send it to the client. In simple words, do everything to the data before storing it in the databse and sending it to the client side.

How do we achieve that objective ?

We write some code that lives in our server, and that code acts as our backend service which processes the data for us.

How do we write that backend code ?

We can write this backend code with a number of languages, and achieve the same end goal.

What all languages are there with which we can write backend code?

Now this is a interesting question, as there are a lot of them, but just to state a few of the mainstream ones -

  • JavaScript (Node.js)
  • Java
  • Ruby
  • Python
  • C, C++
  • C#
  • Objective C
  • Go
  • PHP
  • Perl

And the list goes on …

Which one should I choose?

This really will differ from one person to another, but a very simple way which I think is to make this decision is by asking yoursef this question -

Which languages do I know already out of all these and which one is my favourite out of them ?

Which ever comes in your mind, go ahead with it and you shoukd be good to go. Still if you are not sure, may be do a google search of what is the language most in demand for different kind of job openings and choose according to that.

Still, if you ask me, I went with the Node.js route as it was not a very big paradigm shift from frontend to backend as they both use JavaScript extensively. Now I believe I am not the best person to recoment resources for all the different languages, as I myself dont know them all, but I will share one for Node.js as that is the one I use -

Node.js Learning Resource : https://www.tutorialspoint.com/nodejs/index.htm

Full-Stack Developer

Roadmap covered as of now

  1. ✅Dynamic Websites
  2. ✅Databases
  3. ✅Backend
  4. ✅Monoliths
  5. ⏹Microservices

Now even though having learnt all these does entitle you to call yourself a full-stack developer, but let me ask you a question. What is the real objective behind learning all these? And the answer to this question is quite simple, its building real world web-applications. And while we might not really realize it, but in todays world, a web-application is intended to be used by a huge number of users and that really depends on what service the web-application is providing. But the main thing to understand here is that the applications that we develop should be able to accommodate as many users as needed and it would be a very bad idea to limit the number of users that can use the service. But why even am I telling you all these things, by now you might have thought that “okay, I will get as much storage space in the database require and let as many users use it” right ? But here the bottleneck is not really being enforced by the capacity of database, but the server that is going to serve the data. Okay, I am assuming that some of you would get confused by now so let me make it simple for you -

Monoliths ?

In software engineering, a monolithic application describes a single-tiered software application in which the user interface and data access code are combined into a single program from a single platform. A monolithic application is self-contained and independent from other computing applications.

But a server is just another computer sitting somewhere far from us which is accepting and serving requests. And that computer has its own limitations, just like the one you are using to view this blog right now. So there will be a certain number of requests that a server can process and if ever the time comes that there are more requests than the server can process, the server might become unresponsive and that is what we mean when we say “The server went down” or “The server failed” etc. So now you see, the bottleneck is being enforced by the capacity of the server to process requests and not by the capacity of database. And this is a very bad event if it occurs as there can be a number of services and features that are running on that server and even a simple request can bring the whole server down, thus creating one single point of failure. And so, I again ask you the question, Does learning just Frontend, Backend & Databases make us Full-stack developer ? And as harsh the answer might sound, but the answer is NO! It does-not. But don’t worry, we together will fix it.

How to solve the bottleneck issue of Monoliths ?

Microservices

What is docker?

While docker has a lot more use-cases than what I mentioned here, but for the sake of this discussion, we will limit ourselves to what I just now said. Here is the wikipedia definition -

Docker is a set of platform as a service products that use OS-level virtualization to deliver software in packages called containers. Containers are isolated from one another and bundle their own software, libraries and configuration files; they can communicate with each other through well-defined channels.

What is Kubernetes?

Kubernetes is an open-source container-orchestration system for automating computer application deployment, scaling, and management. It was originally designed by Google and is now maintained by the Cloud Native Computing Foundation.

From where do I learn Docker & Kubernetes ?

Microservices Course : https://www.udemy.com/course/microservices-with-node-js-and-react/

And basically that is it, if you have followed this guide, you my friend can call yourself a good Full-Stack developer.

Conclusion

P.S -

There is a lot more to web-development and this blog obviously doesn’t cover 100% of it, but it sure covers a part of it. Do make sure you never restrict yourself from exploring and researching as much as you can. The more you will explore, the more you will know.

Feel free to contact me for doubts or comment them down below.

Written By

Arunabh Arjun

www.arunabharjun.com

A product manager and a skilled full-stack developer. Know more @ www.arunabharjun.com