A web application is 1 of the many means of how a software product may be represented. In the field of SWE, web development is both a demanding skillset and heavily sought after field. This is mainly cause of the relatively friendly learning curve for picking up software development, and the wide range of benefits in the business world.
Opinion: The industrial expectation for web development is much higher now, compared to the past. This is mainly cause of the introduction of new tools and evolving technology. Despite that, it is still considered to be simpler, compared to areas like mobile development. The reason is because the topic utilizes, or relates to the different aspects of IT, which has a relatively lesser complexity, but covers the fundamentals of computing technology. This makes the subject appropriate for beginners, and often 1 of the first few subjects that are being taught.
In this series for picking up web dev, I plan to start off by giving a high level overview of what makes a web application. The fundamentals for each of the topics are important, but the problem of learning them silo, without having a understanding of how each of those topics function together collectively, is not helpful. In the subsequent articles, I will dive into the individual topics, covering some key areas which I feel are important, in helping you to become relatively proficient in web development.
Basic Terminologies
Before we cover the workings of a web application, it’s important to know some of the commonly used terminologies. This is just so that you can communicate effectively, and also understand what is being said, when talking about this topic:
Webpage: a single view in a browser
Website: a collection of webpages
Web application: a complex website, functioning as a full fledge software for more complex uses
Web: a system which allows information sharing across the internet
Opinion: This is high likely not your 1st time coming across terminologies like website and web application. I am not a history expert, but I believe the differentiating of the terms started from the transition from web 1.0 to 2.0 era. For consistency sake, I will use the term web application when I’m talking about a functioning software product, and website for a collection of web pages.
Building Blocks
As mentioned earlier, in a modern web application, it is built up using several technology. Each of them plays a vital role, when put all of them together, we get to experience an actual application delivered in the browser.
At the very basic level for making websites, 3 languages always come into mind. Following are a short summary of it:
HTML (Hyper Text Markup Language)
What is it: a language to define the basic content and structure to be viewed in a browser
CSS (Cascading Style Sheet)
What is it: a styling language used to define the aesthetics of the markups (HTML) in the browser
JS (JavaScript)
What is it: a scripting language used to define dynamic behavior (based on user interaction) and implementation of complex logic for responsive view in the browser
To have a better understanding of how the technologies work together, following are the explanation of how the languages are used, if I were to build a residential apartment:
HTML: the core structure of the building, like concrete and steel beams, for the initial building existence
CSS: the designer or architect that decides the general aesthetic of the building, like the color theme
JS: individual families or home owners, coming in will be able to renovate how their unit will look like, and the fancy utilities that are available inside, like scheduling a robot cleaner to sweep the floor every Wednesday during lunch time
More on JavaScript
Developing with just HTML and CSS will result in being the web pages being static in nature. In other words, it never changes. This is regardless of whatever you do to the current page you are viewing.
Obviously, in a modern web application, the web pages should behave according to certain responses. Like clicking of a button to download a file from a remote server, or showing a toast (popup) like notification when your friend react to your post on social media.
Utilizing JavaScript in web development, allows you to process those logic “on the fly”. It is important to note that these events, happen on the client side, which in the context of web, it is in the browser. Thus, turning the web pages to be dynamic in nature.
NodeJS
A software being built to serve at a certain level of complexity, definitely require a suitable system to be in placed, to support it’s needs. In almost every case scenario, there will be a remote computer, or the backend server, involved to process those complexity. The server is strategically placed in a way which the users will not have direct access, but instead the way it can be utilized is directed by the frontend.
Some simple examples to explain the reason of having a backend server, think of it as you visiting a fancy Italian restaurant:
The chef cooking at where you’re dining inconvenience your experience
The kitchen has all the dedicated equipment the chef requires
The restaurant owner will not want the public to know their secret recipe
Introducing NodeJS, a technology that allows you to execute JavaScript codes, which then you are able to create your very own backend server application to serve your frontend web application.
Opinion: There are many others type of programming language which you can used to develop your backend server, like PHP and Golang. The reason why I chose NodeJS is because it uses the same language which the browser is able to execute, JS. The choice of backend language used are different, mainly on the core paradigm and the ecosystem of libraries you could used. But the general concept of a backend module is always the same.
Conclusion
That’s it for an overview of web development in general. Yes, nothing specific, yes. This article is meant as an overview into the field. Truly putting it together require diving into topics like the common protocols it utilizes, or the many intricate details of the utilized technologies. Till then, stay tuned for the guides on the many topics for web development!