DEV Community: Niko Skrypnik

Three Tier Architecture Explained in Pictures

Niko Skrypnik — Fri, 17 Feb 2023 02:09:08 +0000

Previously I made series of pictures explaining the very foundation of software architecture for modern systems and services - Client-Server Architecture.

A logical next step in understanding the architecture of the modern systems is Three-Tier Architecture where you can further logically divide all the services by in the system by three key roles they play in the system.

Look at pictures below for explanation of what each layer is, and what it is for:

Code beauty. Does it matter?

Niko Skrypnik — Sat, 11 Feb 2023 01:00:46 +0000

I'm not that old but I do still remember times when we didn't have jslint, pylint and whatever-lint, so in our code review we were visually catching those things like bad indentation in C++ code, absence of white spaces after parenthesis and other things we considered to be out of agreed code convention. I tell you that skill is just like riding a bike - once you learn it, you can find imperfection in any PR. Now linting made it obsolete though.

Yet the question is - why do we do this? Why code conventions, linting rules and other stuff if programming language syntax pretty much allow you to do any crazy thing and compiler/interpreter are able to use this code? Well, the answer is super simple and I partially answered it in another my article. So every time we write the code we have to keep in mind that we write code not for computer, but pretty much for other humans. Yes we kinda keep in mind performance but mostly it is avoiding mistakes like making O(n^2) algorithms, if we were really thinking only about performance we would write code on machine code. Yet here we are writing code for another human beings in the way they can understand how does that algorithm work and criticize us for non-optimal solution.

Non the less, check out code snippet bellow.

This code can be easily executed by V8, but probably you have hard times of understanding what's going on there, right? You can see that it tries to import something at beginning... then your eyes perhaps quickly get tired and following the code just by reading it gets hard really quick. That may be easy for interpreter to read word after word and do whatever is written there, but it is simply not like human brain works and understand things. Imagine you get such code on the legacy project and you have to support it and maintain. I'm sure everyone agree that it would be a nightmare.

So quite naturally developers community got quickly to simple tricks which change the look of the code drastically:

Imagine that your are reading this code 50 years ago on monochrome display, that how the code/text would look like to you. Yet it is still way better than a previous sample. Now it has a structure, and you can visually separate logical code blocks - like import block and function declarations.

By changing slightly visual structure of the code you can make the code way more readable, thus it can be understood and easier to navigate for other developers which is big value if you do teamwork and your success really depends on how good your teammates are able to understand a code. And it tells very interesting story about us, namely about how our brain really works and how do we process an information. We don't have a lot of researches for this topic, but it is evidential that because such code formatting become de-facto a standard and basis of almost all linting rules it means that for majority if not for all the humans it is easier to digest an information when it is visually separated into logical entities.

So no wonders that as soon as we got multicolored displays the syntax highlighting has been invented and we get code visualization in IDEs as we know it know.

Once again this syntax highlight helps us to find the pattern and easily recognize parts of the code which represents different logical and structural entities like class declaration, function declaration, imports etc. You open any file with the code, move your screen away so you can hardly read letters and you'll be still able to recognize patterns of the code.

So, why have we stopped? Surprisingly since code highlighting has been invented around 50 years ago nothing has changed in code visualization since. A lot of other concepts were added to the programming languages, sometimes even indentation as part of the syntax as in Python, but it terms of showing you the code itself there's that much. Sure, IDEs have improved a lot with all the autocompletion and error checking right while you are writing the code made Java programming way less miserable, but is that all we can do to help ourselves to improve readability. Why didn't we try to highlight not only syntax but entire logical blocks like classes, functions, methods by showing them on different background color? Below is just a simple experiment of how TypeScript function might look like in our IDE.

With our great ability to use visual patterns we could read and understand something like this even faster. So there's something really to think about. Perhaps especially in the era when AI can already write the code. Perhaps then our biggest value as specialists will be not an ability to write the code, but ability to read it and understand it.

Programming Languages: How and Why?

Niko Skrypnik — Sat, 04 Feb 2023 01:08:27 +0000

The story starts with invention of computational machine. The easiest (but surprisingly not the only) way to build such machine and scale it up and down was to use binary coding for storing data and instructions to manipulate this data. The era of computing and IT was born. The core of every computational device is a processor or CPU (Central Processing Unit). Those guys are able to read instructions and those binary encoded instructions tell what to do with binary encoded data. That's simple hey? we just need to write those instructions and provide data.

Yet you obviously see that if you want CPU to do something more complex than just move bytes from one register to another you'd need to write a lot of code, and using binary code will have its flows like you can quickly get lost of what your code is doing and passing it to another developer would be a nightmare.

So you have to be inventive there. And the first idea may be to write down binary code not in 1 and 0, but in byte-sized hexadecimal numbers.

This is already a HUGE improvement. For the start you reduce your code (in the written on the paper form) in 8 times and with human's perfect ability to read symbols like... any symbol you can kinda understand better the code, but... well yeah, still not ideal.

Let's think how could we further improve on this? What do we basically know about machine code and instructions?

Alright now we can tell our processor to do commands in the way we understand them - take this byte, put it to that register, make an interruption... But is how do we really want to do things here? Let's step up and look at the code again - it is bunch of instructions for processor to do, but what do we get at the end, what is the end result?

Bingo! That's it. We want our computer just to put "Hello world" on the screen, so why don't we do it in the very clear for us humans form, so when I want to share my program code another human being can understand me just right. Sure to be able to do it we need to go from writing an Assembly program using machine code, then we use Assembly language to write Compiler, than we use Compiler to write Interpreter...

And the quest doesn't end here. As the more and more complex systems we create we always can make a step up and take a look at our system from higher level, find some patterns, invent new concepts which describe how the system work and then explain it to another human being so they can understand it. IMHO at some point we did stuck rather with textual description as with bridge between human and processor worlds, and although there're many complex concepts introduced into programming languages we still using visualizations like charts and diagrams for only human communication and then we write down the code in textual form (syntax highlight was a huge leap though in visualizing code). Yet for me this is the area of opportunity for development of programming tools, though this is another story for another day...

Client-Server Architecture Explained in Pictures

Niko Skrypnik — Wed, 01 Feb 2023 19:18:00 +0000

Client-server architecture is really a backbone of almost all modern IT services you can imagine. Social networks, messengers, databases, you name it, they all implement this architecture. In the infographic below I did quickly summarized main aspects you should know about this architecture.

We Should Do Better Job of Visualizing Codebase

Niko Skrypnik — Tue, 31 Jan 2023 23:21:40 +0000

One can argue that Software Engineer job is to write a code. Well yes, this is a part of the job, yet the other part of software engineering is reading a code, not writing it. Now if you go deeper into the thought - it is actually about understanding the code, the structure of the projects, it's details, nuances etc.

Nowadays you rarely come to job to start everything from scratch - you usually come to a new job and you see a dozens of folders, hundreds if not thousands of files. Sounds familiar right? And you don't have a clue usually what is this codebase about, so you need knowledge transfer sessions, looking into the code and trying to make sense of it, trying to understand how to run it etc., etc.

Let's take an example - let's go to docker-compose repo page in Github and try to make sense of it. The first thing you gonna see there is:

Looks impressive isn't it? Just another list of folder names and files which gives us only one idea - the project does consist of folders and files. Awesome thing, at list I know now that it doesn't consist of dragons and wizards, that is something which helps me as an engineer to start with. Ah, just kidding - this is terrible and doesn't give you any information about the project. Like if you want to know about tech stack you have either to ask someone or go inside folders to see what's there and try to guess or basically reverse-engineer things.

So after spending some time looking at the code I drew the next picture which I want to share with you:

I agree that this is not ideal, but at least it can give you an idea, that you can visualize project in better way, telling a richer story about it as just a list of folders can do. At least it can show you tech stack right away and it is something can be done automatically by analyzing the code. Github is already doing it but presents an information in very limited way like just a list of languages used in the project.

This is just a simple idea, but think about possibilities. You can show areas for more often used folders bigger, show warning signs, comments, notes right here on the project map. While working on the project you could look at how this visualization is generated and keep your structure accordingly so auto-generated visualization is actually making sense and tells complete story about your project so you can even save your precious time on doing documentation. Following Python Zen lead you can do your code self-documented and make sure that your documentation looks awesome, not just generated as another bunch of files. I'm not even mentioning what possibilities can be open with using of an AI.

So tell me what do you think about it? Do you share an idea what the world would be better if we had such visualizations of the codebase?

A Novel Way to Look at Binary Tree

Niko Skrypnik — Sat, 28 Jan 2023 00:47:24 +0000

Just having a Friday night fun experimenting with the way to visualize a binary tree in a way I haven't seen it done before :-).

Also demonstrating that simple zoom tool can add a new pseudo dimension into your data visualization. As we have this zoom feature in many tools like Miro, Figma and many other - why don't we use it in our advantage?

Have a great weekend everyone.

What is Cloud and Why? Short Story of Cloud Computing

Niko Skrypnik — Thu, 26 Jan 2023 00:22:38 +0000

Another story in pictures from me. This time it is about how and why cloud computing and cloud infrastructure have emerged. Hope you enjoy it and learn something new.

DNS Basics Explained

Niko Skrypnik — Sun, 22 Jan 2023 22:50:27 +0000

Another series of funny pictures explaining very basics of how DNS works. Enjoy!
Let me know in the comments if you find this format enjoyable and informative.

OAuth 2.0 basics explanation in pictures

Niko Skrypnik — Fri, 20 Jan 2023 23:03:29 +0000

Greetings everyone. Cheer me up for my first post here. I was bored and decided to make simple infographics to explain basic but essential principle of OAuth 2.0 protocol. Check it out!