Bird’s-eye View of Full Stack Web Development
Beginners in Web Development are often confused with what all things need to be learned, what to focus on in their beginning stages of learning and what should be their plan on their chosen path.
Every master was once a beginner. Every pro was once an amateur.
~Robin Sharma
In this article, I cover in brief the areas under Full-Stack Web Development and other basics to focus on in order to get your fundamentals right and have in your mind, a clear picture of Web Development as a whole.
If you, due to time constraints, are unable to go through the entire article, my request is to just save the two diagrams below which very well outline what your knowledge base should if you are looking at being a pro in Web Development & Programming in the long run.
Evolution of Web Development
Web Development over the years has undergone continuous improvement and changes. Web 1.0 can be considered as the era of static web pages, while Web 2.0 is the era of web apps which saw mass adoption of financial services, social media and utility applications by people. Many industry stalwarts believe that Web 3.0 will be the next era where web applications will be customized and AI-driven to provide better experience to users.
Front-end
Front-end development is basically concerned with the User Interface. Markup, Style & Logic are three things that basically sum up the front-end development. The front-end of any application is its portal to the users through which users can interact and that is why anything which a user directly comes in contact with, comes under the purview of front-end development.
HTML, JavaScript & CSS form the holy trinity of front-end development. At this point you need to know the basics of how internet & web browsers work, what constitutes webpages and how web pages are loaded in the front-end and the interaction with the back-end. Gradually work on building webpages with styling(CSS) and functionality(JS).
In 2020, almost all developers use front-end frameworks/libraries; most widely used are ReactJS, Svelte,Vue and Angular.
If you wish to be good at UI/UX designing/development, then the knowledge of front-end is all you need to hone your craft. If it is just designing the User Interface, there are tools like Figma, Adobe XD, Sketch etc.
APIs & Data Transfer
Now a developer has a user interface ready, but how does it communicate with a server/ back-end? APIs & Data Transfer is the crucial link between the back-end and front-end. REST(Representational State Transfer) is commonly used. It ensures interoperability between different computers/ devices with a standard set of constraints on what is transferred.
Data Transfer is done by sending strings back and forth through a protocol called HTTP. Two common formats for data are JSON & XML. We convert a data string to JSON by a process called serialization.
Back-end
Back-end of an application is the logical core of the application which blends together the front-end, databases and other servers and provides as an important junction for data-handling of the application.
Most common back-end(server-side) languages are:
Python(Flask& Django Framework)
JavaScript(Express Framework with NodeJS Runtime Environment) php(Laravel Framework)
C#(ASP.NET)
Java(Spring Framework)
For ease of use, back-end is often looked at as an organization of services and processes which work accordingly to accomplish different tasks.
Databases
Databases are important part of Web Applications for the simple reason that web apps deal with real world data and the data needs to be stored, processed and updated as and when needed. Database Development in itself is a very complex field but overall it can be divided into SQL(Relational) & NoSQL(Non-relational) databases.
SQL Databases have a structured way of storing data in the form of tables and there are associated rules for accessing & updating data and interaction between the tables. Eg: MySQL & Postgres.
NoSQL Databases are basically collection of objects and can be used for unstructured data.Eg: MongoDb & Casssandra.
There are many other database paradigms and not really within the scope of this article.
Keep in mind that databases are usually the bottleneck of any web app and as the data size grows larger the databases have to be designed in such a way that the overall efficiency of the application is maintained.
Security
When dealing with user data, security is of paramount importance. Authentication & Authorization are two pillars of security of any application. Authentication basically deals with who can access your application(eg: a user logging in using email id and password). While authorization defines user roles(eg: admin of a facebook page can change the cover image of the page, while viewers cannot).
If you are building a really simple app, for example, an app in which an user can create cat-themed greeting cards and requires user logging in & using a password, it is important that you are thorough in user authentication techniques because users many a times use the same password on several applications(may be their netbanking account ). So, if your user authentication data is compromised, it may lead to adverse effects for your users.
Infrastructure & Networking
Infrastructure & Networking basically deals with deployment & maintenance of your application on the web. You can very well host a website on your computer which will run 24*7 but that doesn’t seem feasible particularly since there are companies who provide dedicated servers online for affordable costs. Knowledge of SSH, scripting, Docker will help you when it comes to this phase.
AWS(Amazon Web Services), GCP(Google Cloud Platform) & DigitalOcean are companies which do the hardware management for you while you take care of the deployment & maintenance of your application.
Amateur to Pro
In the above image, the graph basically covers the stages you need to keep in mind as you keep getting better in programming. Every developer starts as a framework consumer with basic language proficiency. Slowly over time one feels the need to know Data Structures & Algorithms to make their applications more efficient. Finally, a pro in the field will know that there are essentially Design Patterns which can be configured or utilized as per the application’s needs and demands to build large applications.
The bird’s-eye view is a horizontal representation while the graph is a vertical representation of the knowledge base in Web Development & Programming as a whole.
