What is Full-Stack(MEAN, MERN etc)? How to get into web development? [Beginner-Advance]

Introduction

The term "full stack" has become increasingly popular, particularly within startup environments where teams collaborate on projects from start to finish. This often entails frequent updates to the live environment, known as production. In this article, I aim to divide the content into three sections tailored to individuals preparing for roles as either entry-level or senior developers.

• Basic technologies.
• Intermediate (MEAN/MERN Stack)
• Advace Tech Stack

Basic

Any development as a whole can be divided into 4 parts.

• Development
• Test
• Build and
• Deploy

Let's concentrate on the initial section, which primarily addresses beginners. We'll delve into the fundamentals and essential concepts for those who are just starting out in the field of web development.

Development

When it comes to web development, there are multiple roles out there specific to your interest area(such as Software Engineer/Developer, UI/UX Developer,Web Designer, Frontend(FE) Developer, Backend(BE) Developer) and then you have Full Stack Engineer role.

The role of a Full Stack Engineer can be likened to that of a Swiss army knife, encompassing a versatile set of skills and capabilities. Let's delve into each aspect of this role to understand its breadth and depth.

• UI Design and User Experience(UX)
• Frontend (UI or FE)
• Backend(BE)
• Databases and 3rd party APIs

Essentially, to develop any website or web application, a foundational understanding of HTML, CSS, and JavaScript for front-end development is indispensable. Beyond that, proficiency in server-side programming is often required, and the necessity for a database may vary depending on the project's requirements. (For static websites, you don't need any Databases).

You can read Head First HTML and CSS book and if you follow along, you will be able to create a nice Starbuzz Coffee website.

Find the code here. Its only built with HTML & CSS.

Web Development Basics is very well written by Hayk Simonyan.

Q: When you say I need only HTML, CSS and Javascript for UI/FE, then why is this React, Angular and all other stuff their?

A: We call these stuff Frameworks.

Lets look into the different parts of Full Stack web development and I will cover explanation of framework there.

UI Design and User Experience(UX)

Before diving into the development of a website or web application, it's crucial to establish the foundational design elements.

e.g you don't jump into development when a client ask you to build a app or a website. You understand their requirement and design a sample page for them or ask them for sample mockup screens for the required app.

This includes decisions about typography and the color palette:

1. Typography: Choosing the right typography involves selecting the font family, specific fonts within that family, and determining appropriate font sizes. Each font family and typeface conveys a different aesthetic and can influence the overall feel of the website or application. Additionally, considering factors such as readability and accessibility is essential when making typography decisions.
2. Color Palette: The color palette defines the set of colors that will be used consistently throughout the web pages, including font colors, backgrounds, buttons, and other UI elements. Selecting a cohesive color palette enhances visual consistency and brand identity. It's essential to consider factors like contrast, accessibility, and the emotional impact of colors when creating a color palette.

Establishing these design elements early on helps create a consistent and visually appealing user experience across the entire website or application.

To facilitate this design process, there are numerous tools available:

• Figma
• Canva
• Sketch
• InVision
• Miro

Additionally, tools like Adobe Illustrator, Adobe XD, and Adobe Photoshop are popular choices for more advanced design needs, offering robust features for creating intricate designs and graphics.

Utilizing these design tools allows you to create a solid reference or starting point for front-end developers, ensuring a smooth transition from design to development while maintaining the integrity of the design vision.

Learn more on this here in this article here.

Frontend (UI-User Interface)

Then we develop the UI part of the website or application.

You do that in HTML , CSS and Javascript. Yes you just need these three to basically create any page (Remember the example of Starbuzz Coffee above).

But smart people have made great products to make our job easier. Here comes different frameworks for Javascript, CSS so that you can get more job done with less coding.

You have different frameworks(Will talk about this soon, keep going :-) ) in javascript React, Angular, Vue, jQuery, NextJs, .Net etc.

Similarly you got Bootstrap, Material UI, Tailwind CSS, Bulma, Semantic UI, Foundation etc in CSS framework.

Q: Whats the Framework?

A: Framework: Creating a website/app from the scratch really shows that you have good grasp of underlying programming concepts(here HTML, CSS, JS) but as we make our website/app more and more complex, the code becomes repetitive and difficult to maintain.

Here comes frameworks for rescue. Frameworks are collections of code that simplifies the development process. They takes care or repetitive task and allows us to focus on the more unique features of our project.

Frameworks may rise and fall in popularity but the same underlying concepts for developing web pages applies for all these technologies.

Lets understand this with a simple analogy of a GULAAB jamun or CAKE mix :-).

Framework offer additional advantages and efficiencies in UI development:

1. Efficiency: Frameworks provide tools and methodologies for structuring and managing complex user interfaces more efficiently than plain JavaScript.
2. State Management: Modern web applications often require sophisticated state management. Frameworks like React offer solutions for managing application state in a more organized and scalable manner.
3. Component-based Architecture: Frameworks promote a component-based architecture, enabling developers to build reusable UI elements that enhance maintainability and scalability.
4. Declarative Syntax: Frameworks often use declarative syntax, which allows developers to describe the desired UI state, making code more readable and easier to reason about.
5. Ecosystem and Community: Frameworks come with vast ecosystems and active communities, providing access to libraries, tools, and resources that streamline development and troubleshooting.

Additional: There is something called Storybook which you may use in some organisation to create and test your UI component separately. More details here.

Backend(BE)

Lets divide this into two parts.

• Application/App Server
• Connecting Services e.g Database, Cache, 3rd party APIs(like chatGPT) etc.

Backend(BE) - Application/App Server

The server-side code resides here, operating on physical servers and responsible for delivering pages to frontend users.

You can write this code in various languages such as JavaScript, Python, Java, C#, Ruby, Go, etc., to set up the server that responds to requests from frontend code. Each programming language offers multiple frameworks to aid in coding faster and more efficiently.

These frameworks provide pre-built functionalities and structures, streamlining the development process and allowing developers to focus on implementing business logic rather than reinventing the wheel. Choosing the right framework depends on factors such as project requirements, team expertise, scalability needs, and performance considerations. More on NodeJS frameworks here.

Databases and 3rd party APIs

To store any information, a form of storage is essential. For instance, when signing up on a website, providing details such as name, email, phone, and password necessitates storage.

Various databases cater to this need, including IBM DB2, PostgreSQL, MySQL, MongoDB, Cassandra, among others:

Choosing the right database depends on factors such as data structure, scalability requirements, performance needs, and the nature of the application.

Check a nice article here 15 Databases and When to Use Them.

You don't have to write the SQL query to run various operation on your DB rather there is something called ORM library available in each programming language.

Object Relational Mapping, commonly referred to as its abbreviation ORM, is a technique that connects the rich objects of an application to tables in a relational database management system. An ORM library is a completely ordinary library written in your language of choice that encapsulates the code needed to manipulate the data, so you don't use SQL anymore; you interact directly with an object in the same language you're using.

We can also use cache (key-value storage) to speed up the response time of your application, e.g Redis.

Furthermore, integrating with 3rd party APIs enriches the functionality of our applications by allowing access to additional data or services. Whether it's integrating with ChatGPT for conversational AI, Google Maps for location services, or any other API, this integration expands the capabilities of our applications beyond what we store internally, providing users with a more comprehensive experience.

Click here to learn Redis basic

I will probably cover databases in details in another article.

Intermediate (MEAN/MERN Stack)

MEAN and MERN are popular web technology stacks consisting of different layers, particularly favored in startup environments. However, it's common to observe SQL databases such as MySQL or PostgreSQL being preferred over MongoDB, a NoSQL database. This preference can be attributed to two primary reasons:

• Firstly, adapting to NoSQL databases can initially present challenges, requiring a clear understanding of their purpose and benefits.
• Secondly, opting for SQL databases, or relational database management systems (RDBMS), will give you wings (not like Red Bull :-)) but can significantly broaden job opportunities, providing a wider range of career paths compared to NoSQL databases.

MEAN stack in Details.

Forntend(FE) - We chose React or Angular for frontend development

Backend(BE) - Node runtime for javascript with Express backend Framework for node.

Databases - We see MongoDB but as I said, you can replace with postgres or mysql.

Regardless of the chosen frontend framework, it's crucial to understand that the code ultimately needs to be transformed and transpiled into HTML, CSS, and JavaScript. These are the only languages comprehensible by web browsers such as Chrome, Safari, and Firefox.

You can learn more on how modern browser works from these series of articles here.You can check part 3,4 & 5 about how a browser reads HTML, CSS and JS.

Build tools or Bundlers for JS

Browser doesn't know react, angular or typescript. We use build tools(sometimes called as bundlers) for that. e.g here is an article on how to use webpack bundler.

A fantastic feature of a bundler is that it generates a dependency graph as it traverses your first code files apart from providing some performance optimisation features like code-splitting and hot-module replacement.

Click here to know the different JavaScript Bundlers.

• Webpack
• Rollup
• Vite
• Parcel
• esbuild
• Browserify etc

Note* : If you are using a framework CLI such as Angular CLI, Create React App, Vue Cli, SvelteKit etc, then handle the module bundling for you. They use tool like webpack or Rollup under the hood to automatically bundle up all your code.

You can check below build tools and task runners for extended knowledge.

Babel transpiler, Webpack, Vite , Gulp & Grunt task runners for javascript

Lets look into how our codes goes to actual server with the help of following diagram.

Apart from knowing frontend frameworks, its is good to know few additional things which will help with better opportunities.

• Monolith vs Microservice architecture.
• Postman - Install and start using it for API calls and testing.
• REST API vs graphQL
• Typscript(TS) - TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor. TypeScript code converts to JavaScript, which runs anywhere JavaScript runs: In a browser, on Node.js or Deno and in your apps. In other word,your existing working JavaScript code is also TypeScript code. The main benefit of TypeScript is that it can highlight unexpected behaviour in your code, lowering the chance of bugs. Click here to know the basics of TS
• State Management tools - In simple terms, state management refers to the process of storing and retrieving the data that an application uses to function properly.

There is also something called state management which may or may not be framework dependent.

React Context API, Redux, Mobx

Aside from the process of building the web application itself, a critical aspect that warrants attention from the outset is testing your development code. Testing holds significant importance as it minimises bugs within your codebase, instilling greater confidence when pushing or deploying code to the server.

Testing - Popular JavaScript testing frameworks that are helpful for unit testing in JavaScript. Here is the guide to write your unit test in JS.

Jest, Cypress, Jasmine, Mocha - Testing with Mocha and Chai

Advace Tech Stack

Besides frontend frameworks, backend servers, and databases, a plethora of open-source tools are widely utilized across major startups and the IT industry in general. Let's explore a general tech stack encompassing various tools available across different programming languages such as Python, JavaScript, Java, Ruby, Scala, and more.

You can look for the system design courses and to know more about multiple technologies which is being used across most popular startup including MAANG companies.

I would recommend learning Redis, Kafka and Elastic-search & distributed system concepts as these are used in almost every startup and big organisation.

If you are trying to go deep and learn more about networking, load balancing, caching, API Gateway, CDNs, Monolith vs Microservice architecture etc. I would recommend system design course by Gaurav Sen.

Deployment

Finally lets look into how the code are shipped in multiple environment from local to production servers.

Lets say, you have built a great website using React or some other modern front-end framework. You also have a back-end service that works like a charm. Till now, you have run your code locally and everything is good. But how would you allow other to see your app ? you can't give access to your PC to public. So what to do?

You can buy a domain name(www.mywebsite.com) from GoDaddy but then you only got name, but how would you link your newly purchased website name to your code? Here comes the hosting servers.

Web hosting:

A web host or hosting provider is a business that provides all the services needed by Web Developers to run their apps on the internet. When someone wants to view your website, all they have to do is type its domain name in a browser, and the servers provided by your web host will serve the requested page.

There are different types of web hosting but in current scenario, the cloud hosting is popular.

Check this article for more details on web hosting. I would like your to especially check the Cloud hosting - IaaS and PaaS.

Popular IaaS providers:

• Digital Ocean: A IaaS cloud provider that’s simpler to use than the big three cloud providers also in this list.
• Amazon Web Services: The first and most popular of all cloud providers.
• Google Cloud Platform
• Microsoft Azure

Popular PaaS providers:

• Render
• Heroku: Heroku makes it easy to deploy Node.js, Ruby, Java, PHP, Python, Go, Scala, and Clojure applications with a few commands.
• Google App Engine

Containerization(Docker & Kubernetes-k8s):

It is now de facto in every organisation to containerize your application and deploy it in the server. There are awesome software built for making this work very easy for developers. Here are few devops tools you must know for advance knowledge (rather I would say dev tools as it is more often used by all developers).

• Docker and Containerisation - check the below articles to get started.https://www.freecodecamp.org/news/what-is-docker-used-for-a-docker-container-tutorial-for-beginners/https://medium.com/zero-equals-false/docker-introduction-what-you-need-to-know-to-start-creating-containers-8ffaf064930a
• Kubernetes - Here is nice tutorial for the beginner. https://youtu.be/VnvRFRk_51k?si=PX4VZuW_fah1WBM_

I'd like to conclude our discussion here. I trust this has provided you with a comprehensive overview of web development, including current trends and insights on how to initiate and strategize your career path moving forward.

Happy Reading - Gaurav Singh