Become a full-stack Developer

Well… after 5+ years of full stack development I have came across some experience which I would like to share. This article will help the below group of people :

1. If you are a fresher and wondering, what is full stack, how to and where to start, how to bla bla bla ...
2. You are a backend developer who is always writing algorithms but client only remembers the cool dashboard shown using your data and never realize how much of code optimization you have done. You might be wondering to make those cool dashboard/ UI yourself and get client visibility someday
3. If you are a Frontend developer who always uses the data but always wondering if you cloud have the data the way you want, then your UI could have look much smatter

Ok! so let’s start with the freshers ….

Basically your role is defined by the skills you have. If you are working in HTML, CSS/Less/Sass and Bootstrap then you are a UI developer. HTML is the structure of the web page(table, image, paragraphs etc.) and CSS is the beauty of it (colors, alignment and size of elements). Bootstrap is the x-factor. It makes the UI compatible/resizable in desktop and all mobile devices so you just have to develop one UI which will work everywhere. The popular term you might have heard for this is “mobile first” development.

When you start understanding JavaScript and how JS is playing/ manipulating UI as well as interacting with backend services by Ajax you will become a Frontend Developer.

This is one side of development or let’s call it as browser side development. The best source to learn all these is w3schools . I think the content present here is enough to start learning and working at the same time.

Now, if you are working in Python/ Java/ C#/PHP, these are server side languages and along with a data base like MySQL/ PostgreSQL/ Oracle you become a Backend Developer or let’s call it as server side development.

For SQL I think w3schools is good enough and for the server side languages like Java and Python you will get thousands of resources in YouTube as they are opensource.

So we have 2 wheels of development

1. Browser side → Frontend (HTML, CSS, JS, Bootstrap, Ajax)
2. Server side → Backend (PHP/Python/Java/C#, MySQL/Oracle/PostgreSQL)

Now combining these two you become a Full-stack Developer.

How backend dev can learn frontend ?

For backend developer, I would suggest you can start with HTML and CSS. HTML is very easy to understand. Just go through w3schools you will get it with in an day or two.

CSS is something which is very easy to learn but very difficult to master. So practice regularly for a week and once you get the jest of it, then it will be a piece of cake for you. But make sure you understand CSS properly because Bootstrap is build on top of CSS. So to understand Bootstrap you need to have good grasp on CSS.

In Bootstrap the most important part is the Grid system. Other concepts will be easy if you have already worked in CSS.

Now let’s talk about JavaScript. HTML, CSS, Bootstrap will make a static UI but JavaScript adds life into it. When you click a button it shows some dialog box or asks a question. This kind of interaction is being achieved by using JS. JavaScript can talk to your server using Ajax and get the data and feed into UI. Basically JS is the bridge between frontend and backend. The reason I am giving JS a spotlight is, this can manipulate the UI, change the CSS properties, manipulate the HTML items as well. You need to be very clear about some concepts like DOM elements, Sync and Async execution, the sequence HTML,CSS and JS gets loaded into a page. Otherwise debugging JS can be very difficult.

You need to understand the relationship between HTML, CSS and JS which is not straight like Python/Java and SQL. You need to master the browser debugging console and all the options of it to work in frontend.

What I have seen in my experience is, we tend to learn the most popular framework in the market. For example ReactJS or AngularJS. But from my experience, I would suggest that first try to learn JavaScript and jQuery. These have very simple syntax and concepts which will be easy for you to understand the web, then you can go for React or Angular. Otherwise you might learn the high-end framework but you will never understand what is going behind the picture of component, actions, reducers, state etc.

How frontend dev can learn backend ?

For frontend developer, you guys need to learn a server side language like Python/Java which is like JavaScript and a SQL database which is very similar to English. So in terms of learning the languages it will be matter of time.

But if you want to grow as a full stack you need to learn about some more things apart from the language. Like the server in which your application is hosted, URL routing, MVC, ORM, connection pools, time and space complexity, packages and libraries, stored procedures, indexing and ranking in databases etc.

Normally frontend developer struggles in some cases because they can not visualize the code running and how the data is getting modified from one format to another. But you can also put breakpoints and analyze the code flow here as well. For that you need a powerful and colorful editor and my personal favorite is VSCode.

I am a big time Avenger fan and I think I can relate the above technologies with the superheroes.

Iron Man → Python/Java/C# : The brain of the team, smart, rich and billionaire. Like him every server side language works with logic and complex algorithm with rich frameworks and billions of libraries.

Hulk → Database : The scientist with 7 PhDs who have all the knowledge (data). Even Iron man needs his help like Python needs data from database.

Thor → HTML : Has good biceps, shoulders, abs. Basically well structured body. Like him, HTML is the structure of the web page.

Black Widow → CSS : The beauty factor of the team. Like her, CSS brings colors and alignment and make the page look beautiful.

Hawkeye → Bootstrap : Known for his accuracy. Like him, Bootstrap make sure the UI looks accurate in every devices.

And finally …

Captain America → Java Script : Coordinate with the complete team and makes the plan. Like JavaScript talk to backend and gets the data and feed it to the frontend.

So basically you need to be the Nick Fury and use them in the battel. Just tried to give a picture to all the technologies guys, meant no offence to any super hero.

All the best on your learning path and Happy full stacking …