Computer Basics - III

Hello readers👋 Today we will learn about the basics- part 3 of how a computer system works. If you haven't read part 1 or 2 of the computer basics then I would recommend you to first read it and then devour this blog.

Link to part 1 - Computer Basics - I

Link to part 2 - Computer Basics - II

HTML, CSS & DOM

HTML and CSS are the languages of the web. These languages are also essential if you want to become a Frontend-Developer/Engineer. HTML has tags which are seen as elements in the web browsers. There are -

• div tags (<div></div>) which creates a container. 
• input tags (<input type="text"/> which creates a textbox. 
• image tag (<img/>) which adds an image to a particular area

To learn HTML & CSS in detail you can read this book - W3Schools. 

DOM can stand for Document Object Model, a programming interface that represents HTML or XML documents as a tree structure.

• Document is the webpage that you end up seeing in the browser.
• Objects (or nodes) are each of the individual HTML elements that build that webpage
• Model is the hierarchy of how those elements are laid out

The blue nodes represented as a tree structure in the picture is known as the DOM structure.

How a page becomes interactive using JavaScript- 

Common languages, frameworks and tools

1. Backend languages - C++, C#, Java, Python, Nodejs, Ruby
2. Backend Frameworks - Express (of node.js), Rails (of Ruby), Django (of Python), Hapi (of node.js), Flask (of Python)

1. Frontend languages - HTML, CSS, JavaScript, ES6, Saas, Less (compiled CSS), TypeScript(compiled JavaScript)
2. Frontend Frameworks - React, Vue.js, Angular(version 2 of Angular and beyond), Bootstrap, Angular.js( version 1 of Angular)

If you ever hear about Vanilla.js - It is the lack of framework and libraries in an application. Only JavaScript used.

Task Runners - like Grunt and Gulp 

It allows programmers to perform common tasks more efficiently. For example: if you need to launch multiple programs prior to running your application as a developer, you can get a task runner to automate that process and launch those programs automatically. 

Build tools - like webpack used in the frontend

If you have innumerable files in your website, you can send them to the webpack which will compress & optimize the files and make them less in number for performance efficiency.

More tools - Terminal (a command line interface): tasks get quick in the computer by using this rather than a GUI(Graphical User Interface) where you use your mouse to interact with visuals on the screen.  

Component based Architecture (CBA)

In coding there is no one way of writing your code, this is where coding conventions and software architectures come into play.

In web development it refers to the individual pieces of code coming together to form one functioning web page. Example - 

Here, the dashboard component is the parent component and others are all child components. The parent component retrieves data from the backend/server and passes that data to the individual child components wherever necessary.

Model, View, Controller (MVC)

It refers to the software architectural design. It is not specific to frontend but can also be implemented at the backend unlike CBA which is the difference between the two. MVC is just another organization design pattern normally used with CBA.
The model(M) retrieves and manipulates data, the view(V) is the visuals that display the content and data retrieved from the model and the controller(C) ties the model and view together. 
The parent component would contain the MVC, and the child component would contain just the V and C.

Vertical and Horizontal Scaling

When it comes to servers or software architectures, there is usually more than 1 machine involved. Let's say we have a bunch of web servers, if more than 1 machine is doing the same job it is referred to as a pool of machines, in this case a web server pool. 

When we scale a system there are two types-

• Vertical - Add more power (CPU, RAW, Hard Drive) to the existing machine
• Horizontal - Add more machines into your pool of resources

Single Page Application (SPA)

An SPA (Single-page application) is a web app implementation that loads only a single web document, and then updates the body content of that single document via JavaScript APIs such as Fetch when different content is to be shown.

This therefore allows users to use websites without loading whole new pages from the server, which can result in performance gains and a more dynamic experience, with some tradeoff disadvantages such as SEO, more effort required to maintain state, implement navigation, and do meaningful performance monitoring

SPA Frameworks - React, Angular, Vue.js

In my next blog we will be particularly reading the concepts of System Design as now we are familiar with all the basics. I will also share a fantastic Product Management resource which will help you gain more knowledge in this domain, until then Ciao!😀