An introduction to Web Programming
Web is rocking at this point of time. A major share of applications developed as web applications. There are many languages, frameworks, tools that one can use to build a web application. Today most web applications are using multiple technologies or frameworks for different sets of needs in backend and frontend. For a person just starting out, it can be overwhelming to know where to start. This article revisits the basics of Web as we know today.
A tour from Browser to Server
What happens you put https://google.com in browser? How does it find its way to provide you with the content of https://google.com?
Here’s the thing, computers doesn’t really understand google.com. It needs an address to the server, which will provide the actual content. But the IP addresses can be hard to remember for humans. For example, here is an IP address of google.com — 172.217.10.14. Imagine you need to remember all those numbers for each of the web services you use, like Facebook, Amazon, Twitter etc. That wouldn’t be that useful to us, humans. So we have created a human-readable name for those addresses, called Domain Names. google.com, facebook.com all are domain names.
So when we write https://google.com, our computer searches for associated IP address with google.com in our own machine first. This piece of memory in our machine is called DNS Cache.
When you visit a Website for the first time, your computer doesn’t have the IP address in its DNS Cache. It requests your ISP for DNS lookup. Your ISP also has a DNS Cache, except it’s much bigger. The DNS request lookup propagates from ISP to connected ISP, until there’s a match. That is how your computer finds out the IP of a website. Once the IP is found, your computer performs the actual HTTP request to that IP address for content.
HTTP & HTTPS
HTTP stands for Hyper Text Transfer Protocol. It’s a text based protocol on top of TCP/IP protocol. It is the primary protocol used by Browsers and Servers to serve websites & web applications.
HTTP request & response both has two parts, Header & Body. Header contains metadata regarding the request. Like -
- Type of request (GET / POST)
- From where request initiated (HTTP_REFERRER)
- Type of content it accepts (Content-Type) etc.
Body content the data for the request.
Sending data between browser and server can be risky as those are just plain texts. Anyone with a packet tracer can read what you are sending or receiving. HTTPS uses a secure end-to-end encryption technique (namely RSA & Elliptic Curve) to protect you from man in the middle attack.
The Mighty Server Side Frameworks
A computer have a handful of network ports. Because there are a good deal of software communicating via network, there needed a way to differentiate between who is responsible for a particular incoming request. Thus, all software who communicate via network, they listen on specific port. By default, HTTP server listens on port 80 and HTTPS server listens on port 443. This is required, for domain name to work directly. Otherwise, you need to put port with domain name in your browser. For example if google.com didn’t listen to 80 or 443, instead listen on 8000, you need to put https://google.com:8000 on the browser to access.
We can imagine a program with a loop, continuously checking if there is a new HTTP request on port 80. If there is one, it hands over to specific handler to process the request, based on header information of HTTP Request.
Now there are many questions to answer, while handling a request -
- What type of request it is
- How to collect data for response
- How to manage database connections
- How to serialize or deserialize data from and to request, also for internal uses.
- How to generate response
- If required how to manage third party integrations etc.
For years people have implemented many ways to do all those things. And those solutions, which considered as best practices, are aggregated in a framework. So if you use a framework you can get all those boilerplate codes already written for you. Therefore, frameworks are very useful.
It can happen that you like some things from one framework but not other things. In that case you can build your own framework by combining your favorite libraries together. Today we have so many libraries and frameworks that you can follow any of the mentioned ways of web programming with ease.
The beauty of Frontend
There were times when we had very small number of tools for frontend. For JS there were jQuery & MooTools. For CSS Bootstrap. But now all those are still relevant, but the landscape is not that empty anymore. React, Vue, Angular has changed the way we develop frontend applications. From ES6 JavaScript as a language has been more popular than ever.
Less, SCSS, PostCSS has changed the way we used to write and think about CSS. Many new features are available in CSS natively now. Frameworks like Tailwind, and some other concepts like CSS in JS, CSS modules are being very popular. There are many design systems now — Material Design, Ant Design etc.
The story of PWA
Recent times Progressive Web Application has got extreme hype. The ability to serve mobile users, just like an app, without building app, appealed a lot of us. PWA is great, but also has challenges. Like if your application works offline, how would you sync between your server and local when data changes offline. Solutions might vary from application to application. But the usability of PWA is very high.
How to start
Web is growing, and ever-changing. Don’t get confused if you are just starting out. Follow some tutorials on framework of your choice. Find some examples to learn from. https://github.com/gothinkster/realworld can be a great resource. Don’t jump on backend and frontend at a time. Keep assign SPA & PWA when learning about backend. Keep backend aside when learning about those. When you feel you started to understand, try to build a couple of apps. Hopefully you will be able to learn web programming without any fear.