DEV Community: Rahil Rehan

Part-0: Learn devops from scratch!

Rahil Rehan — Wed, 09 Feb 2022 12:51:01 +0000

Introduction

In this series of posts, I will share my journey of learning DevOps. Moreover, together, we will build some dummy microservices and also deploy them. On the way, we will explore important cloud-native tools.

How is this guide/tutorial different?

Right now, I'm struggling to learn DevOps and to get into a cloud-native ecosystem. There are a ton of tools, and also a ton of great resources put up by amazing people. The only thing that I found missing was, no tutorial explains how everything works together. That's the problem I want to solve with this tutorial. Below is a rough draft of topics I might cover, more items and steps might get added in the future.

Things we will cover:

Note: Don't worry if you don't understand anything below. We will learn each one of them.

Build simple dummy microservices
- Write some API's
- Write some tests
- Implement simple logging
- Best practices
Containerize the application built above
- Learn and use docker
- Use docker-compose
- Best practices
Build continuous integration pipeline
- Learn and use Jenkins or GitHub actions.
- Setup continuous integration for our apps
- Best practices
Provisioning
- Learn Terraform
- Provision resources on cloud providers
- Best practices
Orchestration
- Learn Kubernetes
- Setup Kubernetes on the cloud provider
- Deploy our apps to Kubernetes
- Best practices
Packaging
- Learn helm
- Use helm
- Best practices
Environments
- Setup different environments like Dev, QA, Production
- Best practices
More things
- I may not be able to cover the below items, but I will try!
- Ansible
- Secret management
- Centralized configuration
- Centralized Log management
- Metrics
- Tracing
- Security aspects
- ... more? maybe!

Oops, looks like a big commitment, lol!

Note: I won't go into much details about each and every tool as I feel there are ton of good resources to learn tools. I will point to good resources in each section.

The challenge

It is going to take time to publish the whole playlist, and some blogs will contain a lot of information which might consume more time to write.

Moreover, people tend to lose interest in incomplete blog playlists causing less retention and loss of interest in more interesting and important topics in the later parts. Keep this in mind, and try to read all the blogs to get the complete picture!

If you think I have missed any topics, made some mistakes then please comment and share your views!

If you want to motivate me more to sit and complete this series and help others find this resource, please leave a reaction. Thanks!

twitter: https://twitter.com/rahil_rehan
personal blog: https://rahilrehan.github.io/

Computer Networks simplified!

Rahil Rehan — Sat, 22 Jan 2022 06:38:54 +0000

Have you ever wondered how data is transferred from one device to another?

Well, to answer this question we need to understand computer networks. In this blog, we will briefly discuss the entire process in one go.

Before we get into any lower-level details, let's first get an overview of the process, and we'll dwell deep later.

The OSI reference model

This is a proposed conceptual model that characterizes communication functions.

The 7 proposed layers:

Application Layer
Presentation Layer
Session Layer
Transport Layer
Network Layer
Data-link Layer
Physical Layer

Again, this is a proposed layer. Real communication models(like TCP/IP model) may not have all the layers, or more interestingly some layers combined to form one.

1. Application Layer

Let's first understand what protocol means before talking about the application layer.

*Protocol: *
The protocol is a set of rules agreed upon by all parties for some process. Once a protocol is proposed, parties use the same defined steps to perform a task.

In the application layer, there are a bunch of protocols that are used for various tasks.

For example, the Gmail application may be using SMTP(Simple Mail Transfer Protocol) to send and receive emails, and all this happens at the application level(here the application is Gmail or it can be your browser). So, this protocol must be supported by the application itself.
The same concept applies to HTTP and HTTPS(which are already baked into browsers).

Some more examples of protocols in the layer: SMTP, HTTP, HTTPS, Telnet, RDP, etc.

2. Presentation Layer

Some very important services like translation, data compression, encryption, etc are provided by this layer.

Data after going through specified steps in protocols from the application layer undergo the below steps in the presentation layer now.

Translation
Data that is in text format(Unicode or utf-8) is converted to binary form.

Compression
Binary data from the above steps are compressed algorithms like Huffman encoding.

Encryption Encryption of secret data(like passwords, SSL certificates) is part of this process. Symmetric and asymmetric encryption protocols act here.

... and many more, there are tons of other things which happen here but these were the important ones.

A lot of fancy buzz happens at the presentation layer. Perfect naming for the layer, lol!

3. Session Layer

Establish, Manage, and terminate session connections between end-user applications.

More importantly, things like token management, synchronization, authentication, authorization are the responsibilities of this layer.

We can say, this layer is important for security and synchronization.

Note: In a TCP/IP model, the browser bake in all the above three layers functionalities into just one layer called the application layer.

4. Transport Layer

Segmentation:
Data is broken down into segments(small pieces) and sent over the network.

Flow Control:
Devices may have different networking capabilities and maybe one device can operate faster(like send data at 100mbps) than the other(10mbps). Well, the transport layer takes care of this problem. We will explore how later.
Error Control:
While transferring segments, some segments may get lost! Again, the transport layer got our back. It uses checksums to find such errors in transmission.
Port numbers:
The segments may get confused when they reach the destination device as they don't know their destination application. To avoid this confusion, we assign port numbers to segments before sending them from the source. So when a segment reaches a destination device it knows which application it should go to.

Finally, a segment looks like this
Segment = (source port + destination port + sequence number + acknowledgment + length)
Wireshark example: Src Port: 6648, Dst Port: 443, Seq: 24, Ack: 251, Len: 23

5. Network Layer

After segments are made we attach some more information to the segment, this includes the source IP and destination IP.

Just like the port number which helps segments to reach a particular application on the destination device, IP addresses help reach a particular device on the network.

(segment + source and destination IP) together is called a packet. An IP address is just 32 bits which can uniquely determine about 4294967296 devices, but there are more devices than that number on the internet and that's where IPV6 pitches in.

IP(Internet Protocol) is again just unique over a local network but not on the whole internet. Just remember this, we will know more about it in further blogs.

Routing, DNS, Masking are also functionalities provided by this layer.

Routing: helps in the path determination of packet. i.e. how the packet should reach from source to destination and what routes/hops it should take over the network.

DNS: it is a map of key-value pairs. example: www.google.com(key):192.168.32.3(value). Instead of us remembering all the IP addresses of different websites, we have DNS to rescue. For example, www.google.com is resolved to an IP from the DNS server when we make a request.

6. Data Link Layer

As we already discussed IP addresses are just unique over the network but not over the internet, we need one more level of uniqueness(remember there are millions of devices!). We use the MAC address which is 48 bits! and every device which has networking capabilities is manufactured with its unique mac address on the entire internet. phew!!

Now finally, we have something we call a frame, a combination of packet + source and destination mac addresses + some extra tail data(like some more checksum to avoid data loss at this level).

some more functionalities provided by this layer are:

Access to media: Determination of media for transfers (wired, wireless, optical, etc)
Media-Access Control: avoiding collision over the media.
Error detection: tail data is used to perform checksum here.

7. Physical Layer:

Bit-level data transfer happens at this layer, i.e bits of frames are converted into some form of signals. Ex: light flashes or radio signals and then transmitted.

We won't discuss much of the physical layer as I don't think it is that important for Software Engineering. If you are interested in exploring, be my guest.

Transmission Media: What media to use to transport data?

Guide: There is a physical medium like wires(co-axial, twisted pair cables) on which transmission takes place.
Unguided: Medium of transfer is air, examples are Wifi, infrared and radio signals.

Transmission Modes:
When two devices are connected over a medium we can have three modes of transmission

Simplex: Data can flow only in one direction.
Half-duple: Data can flow in both directions but not at the same time.
Full-duplex: Data can flow in both directions and simultaneously

I would highly recommend you to read about Manchester encoding and differential Manchester encoding to get an understanding of how signals can carry bit information.

Data is processed sequentially from the application layer to the physical layer and then sent over to another device. Now data is decodedbackwardsd. i.e data is decoded from the physical layer to the application layer.

It is just like amazon delivery, packing the product and delivering it to the customer and when the customer receives the product they unbox just relate and you will be surprised. We will dive deep soon, hopefully! See you again!

Visit my blog at: https://rahilrehan.github.io/ 🙈
And follow me on Twitter: https://twitter.com/rahil_rehan

Software Development Lifecycle

Rahil Rehan — Tue, 19 Oct 2021 08:54:13 +0000

What is Software Development/Engineering?

Software engineering is defined as the application of a systematic, disciplined, quantifiable approach to the development, operation, and maintenance of software. - IEEE's Standard Glossary

Software devlopment is not just writing code, its about writing clean, understandable and maintainable code. And there are many other things involved in software development process. Things like requiremnt gathering, planning, desinging, testing, releasing and later maintaining. These aspects are also very important!

Like Martin Fowler said, “Any fool can write code that a computer can understand. Good programmers write code that humans can understand.”

Types of software engineers:

SDE(Software development engineer) - A common term used to represent an umbrella of professions.

Frontend engineers: Folks who deal with visual components of the product.
Backend engineers: Folks who deal with internal system components providing an abstraction in form of APIs which frontend engineers can use.
Fullstack engineers: Combination of both of the above roles.
System Architect: The system designer, makes sure the systems design is good .
SDET(tester): One who test the whole system for bugs and acceptance critereas.
- In some companies testing is part of development process, so this role is played by SDE itself. Ex: in TDD
Operations engineer: Deals with releasing the product to market. Deployment and stuff.
SRE - Site reliability engineers: Folks who work both on development teams and operations teams(release teams)
Devops engineer: Acts as a middleman between devolopment teams and operations team. It's more of a culture. So, some companies may not have this role at all.

Testing

Acceptance tests: end-to-end tests to ensure the whole system adheres to business requirements.
Performance, Load, Regression testing: Even though all the test cases pass, system has to be performant, should be able to handle load etc. These tests evaluate above metrics.

Software Development Models:

Waterfall model:

Steps in waterfall model:

Requirement collection (gather customer requirement)
Desgin (design system accordingly)
Implementation (build system)
Verification (verify if the product meets the initial requriements)
Maintenance (Maintain the project)

In this model we assume that all requirements are collected before implementation (which is almost never the case!)

Iterative Model:

Steps in iterative model:

Requirement collection
Design
Implement
Verify
Jump to 1st step(and repeat)

Repeat this until the customer is satisfied ^^
Problem from waterfall model is solved!

Agile!

Agile itself is not a model, it is an umbrella term.
Agile way says,
- we have to build software in iterative, incrementing, short cycles.
- Intra-team(cross-team) communication is key to reduce conflicts in future.

Some models of agile:

Lean development:[copied from wiki]

Eliminate waste : do not add anything which is not required.
Amplify learning: gather requirments constantly, share knowledge among teams.
Decide as late as possible: conter-intuitive? nah, just don't commit early.
Deliver ASAP: the faster the deliver, the faster the feedback and faster the cycle repeats.
Empower the team: Important.
Optimize the whole: Always think about how the system works on the whole.

SCRUM!!

The whole project is broken down into chunks.
Each chunk is divided such that it can be completed in 2-4 weeks.
And this timeframe to complete a chuck is called sprint.
Each chunk of work is again divided into tasks which people can pickup and complete.
Number of tasks completed in a sprint gives teams velocity.
Balance the velocity, it shouldn't be too high(easy tasks) or too low(hard tasks).
The tasks which are not completed(spillovers) are again put into next sprint.
Scrum events:
- Planning - Initial planning of whole project
- Estimation - Splitting into chunks
- Daily standups - Daily updates(what was done yesterday, what will be done today, any blockers?) - each team member talks about these three points in short.
- Retrospection - After each sprint, what went well and what can be improved must be discussed among team. And actions items have to be planned accordingly.

Kanban

A board style todo-list.
Contains lanes
- TODO/Backlog
- Doing
- Review
- Done
More lanes can be added according to teams need and style
Ex: Trello

Devops!

Popular!
People are switching to microservice architecture.
As number of services increase in microservice architecture, each team which is responsible for a service owns the service. Hence, team should also be involved in operations related tasks!
Devops itself has become a new role now-a-days. It was just a culture before...

Visit my personal blog: https://rahilrehan.github.io/

Dependency Injection - Spring

Rahil Rehan — Sat, 09 Oct 2021 02:59:09 +0000

Basics

Spring has lot of modules
start.spring.io lists many spring modules which you can configure
spring boot is useful to build RESTfull web services. It makes developing spring applications easy by auto configuring default components. It is opinionated framework
fat jar -> also includes tomcat. better solution if you want to deploy on cloud platforms

Dependency Injection

Assume mail sender example, where we can have mailSender of type SMTP, POPM or MockMail.
We can have an interface MailSender which defines the common functionality and we implement the interface in SMTP, POPM or Mock class.
*Problem: object creation will be like: *
- private MailSender = new SMTPMailSender()
- private MailSender = new POPMMailSender()
- private MailSender = new MockMailSender()
- we need to hardcode the type while creating object
- can we automate this?
- Add @Component annotation to any class which implements MailSender
- Add @Autowired annotation when creating object
- how does it work:
  - When application starts all the beans gets setup
    - Beans: annotations at top level, whose object will be created and stored in Application Context
    - Beans examples: @Component, @RestController
  - When application is running and when we create objects variables for which we have annotations like @Autowired. Objects which were already created from application context are assigned to current variables.
  - i.e those objects from application context are injected into these variables and hence dependency injection
@Autowired also works on methods(setters, constructors, getters, any methods..)
Multiple beans problem: when we create two classes from same interface and add @component annotation to both classes, and create object using interface using @autowired annotation, spring will be confused to choose between beans
- one solution is to use camel-case variable names while creating objects which resemble the name of the class you want (ex: smtpMailSender)
- you can also add name param to @component -> @component("mockMail"), and create object using the name mockMail
- use extra @primary annotation, the bean which has this will get preference
- you can also use @qualifier annotation to class, and also use @qualifier in setter or constructor, ...etc
Prefer constructor injection
@resource and @inject are similar to @autowired, but @autowired is very powerful, so use @autowired
Specializations of @component annotations
- @Controller
- @Service
- @Repository
- @Configuration
- @SpringBootApplication(scanBasePackageClasses = {default.class, abc.class}) - scans through the package and puts any dependency injection components into application context
- @RestController
- ..... many others
what if you import a dependency and you have to create object from there, you cannot add @component annotation dependency package
- Create a new config class, which has methods to return objects from the external dependency
- the new config class must have @Configuration annotation
- and methods must have @Bean configuration
- names of the methods can be used for object variable names
use @Value annotation to access variables from .properties or .yaml files
an external config file takes more preference over internal config(application.properties)
**Profiles: **A spring application can be configure to behave differently in different environments using profiles
- ex environments: dev, test, prod
- provide in application.properties:
  - spring.profiles.active: book, dev
- you can also use particular beans in particular environments!
  - just use @profile("envName"), can accepts bool, !envName
- @Conditional annotation, include or exclude beans based on arbitrary conditions
  - @ConditionalOnClass, OnProperty, OnMissingBean ..etc
  - configure bean based on presence of application property => @ConditionalOnProperty
In @Configuration classes, when we try to create same bean again from some method, spring still returns the cached bean only.
- Caching does not happen when we use @Component annotation
Always use @Configuration Classes

visit my personal blog: https://rahilrehan.github.io/

Test Driven Development - Notes

Rahil Rehan — Sat, 09 Oct 2021 02:46:10 +0000

The art of a good night's sleep is knowing you will not get woken by a support call and the piece of mind from being able to confidently change your software in an always moving market. - Nic Jackson
change in code can have undesirable effect on the other parts, tests helps in making the process of changing code in future easy
testing pyramid: unit testing(bottom), service/integration(middle), ui/end-end(top)
- test cases should decrease as you go from bottom to top
Approach
Just write test first (use expected function)
Run and fail the test
Write minimal code for the test to run and fail
Write minimal code to make test pass
Test same function with different values
Make sure all tests are passing
Tests for base cases
Refactor both code and tests

Features and scenarios

Given a feature, break it down to scenarios. Each feature is a user story
- Example Feature: As a user when I call the search endpoint, I would like to receive a list of kittens
- Break it down to scenarios
  - 1st Scenario: Invalid query Given I have no search criteria When I call the search endpoint Then I should receive a bad request message
  - and so... on number of different scenarios

Uncle bobs, rules of unit tests

First law: You may not write production code until you have written a failing unit test
Second law: You may not write more of a unit test than is sufficient to fail, and not compiling is failing
Third law: You may not write more production code than is sufficient to pass the currently failing test

Naming

my convention: TestNameReturnSomethingWhenSomethingHappens
- example: TestDogHandlerReturnsBadRequestWhenNoSearchCriteriaIsSent

AAA format for testing - Arrange, Act, Assert

I always try to follow this pattern for clean code

public class CalculatorTest{
    public void sumOfTwoNumbers(){
        //Arrange
        double first = 10;
        double second = 20;
        var Calc = new Calculator();

        //Act
        double result = Calc.Sum(first, second);

        //Assert
        Assert.Equal(30, result);
    }
}

concepts

Idempotency
Side effects
A stub is a fake class that comes with preprogrammed return values. It’s injected into the class under test to give you absolute control over what’s being tested as input. A typical stub is a database connection that allows you to mimic any scenario without having a real database.
A mock is a fake class that can be examined after the test is finished for its interactions with the class under test. For example, you can ask it whether a method was called or how many times it was called. Typical mocks are classes with side effects that need to be examined, e.g. a class that sends emails or sends data to another external service.
Learn mocking - https://semaphoreci.com/community/tutorials/stubbing-and-mocking-with-mockito-2-and-junit
Wrapper: something which hides implementation of some other code or internally uses other code.

visit my personal blog: https://rahilrehan.github.io

Microservices concepts - Java

Rahil Rehan — Sat, 09 Oct 2021 02:19:03 +0000

Microservices Concepts (Using Java technologies)

In microservices we can have multiple services running, and each service can have multiple instances as well.

Product service: browse products using rest api
Order service: places order
Inventory service: checks if product is available in inventory
Notification service:

Discovery Service

Each service can have multiple instances running and they need to discover each other.
As we cannot particularly specify the service as they are multiple instances, referring to different service needs to be generic.
Referring to one service means to refer to available services.
In java we can use spring cloud netflix eureka

Centralized configuration

If we change a config variable in code, we need to make change to code, compile and re-deploy it again.
If we have multiple instances of same service then it becomes hard as we need to take down those services as well .
Solution: Use a centralized config server
Store all config variables of different services in different files in a git repository or local store.
Whenever there is change in these files, config server will have new config variables.
Now to refresh all the config variables in runtime, you need to call to some api actuator which will refresh the config variables in that service and all its instances.
In Java Central config server with automatic refresh

Storing secrets in vault

usernames, passwords, database links etc have to be hidden from configuration
We have to install vault in our system or via docker, starting vault will start a server as well.
Save all the secrets in vault.
In Java we can use Spring starter vault config to use secrets in our code.
It's enough just to connect to vault server and all the secrets are made available to the service.

Message Broker

One service might depend on other service, change in config variable of one service may effect the other.
We can use message broker like RabbitMQ, which broadcast that there is some change in config to other services which are subscribed to that service which has changes.
RabbitMQ must be installed on the host system and runs on some host and port.
RabbitMQ in infra?

API gateway

We may have different services in our application.
Each service may handle different endpoints.
API gateway, receives a uri request from clients.
It redirects the client to correct service.
It acts like a central endpoint distributer.
We can attach load balancers to each service as well.
Authentication, monitoring and rete limiting can also be taken care here.
API gateway is also a service and should be present in discovery service.
In Java, spring cloud gateway

Sercuring server with authentication and authorization

Run keycloak on host machine, it will start at some port
token relay:
- If authentication is done by token, using keycloak as we will be authorizing at api gateway, we need to send this token to the respective gateway as well.
In Java, use Keycloak

Resilience

Order service asynchronously communicates with Inventory service
Inventory service can go down, so we need to make it resilient
RequestInterceptor:
- When one service is speaking to other, authentication token is not sent. Because, it is not token relay mechanism.
- For passing auth token, we need to get the token and append it to authorization bearer in the request header and then send the request to service.
Definition: watch for service outages and network latencies and temporarily stop the service until service starts functioning normally again .
In Java, Resilience4g or hystrix(netflix - not maintained right now)

Event driven microservices architecture

When order is placed, order service broadcasts message to notification service via RabbitMQ.
Use rabbitMQ binders to listen for events
- output binders: to send notifications
- input binders: to receive notifications

Distributed tracing

microservices pattern allows us to track the requests from one microservice to other.
We give unique id along the journey of the request
each request has same trace id along its journey
but when there is a circuit breaker in between, trace id changes as circuit breaker spawns a new thread. But there is a workaround to keep our trace id same(traceableExecuterService in Java)
In java, we use spring cloud sleuth and zipkin

Centralized logging

logs are all over different services
place all logs in a centralized manner
First we need to use some logging library at each service like log4J or logback
beware of security issues while logging
In java (ELK stack is popular -> elastic search, logstash and kibana)
- logstash: application services send logs to logstash over tcp. these logs are then sent from logstash to elastic search.
  - phases: (configure in logstash.conf)
    - input: from services using tcp or ftp or rabbitMQ
    - filter: filter logs
    - output: send to elastic search
- Elastic search(search engine implementation in java): Used to store logs
  - Each service has its own index in elastic search
- Kibana: Visualize, Query and filter elastic search data

End

Do not use microservice architecture unless there is a need. Monoliths are best in most cases.

Visit my personal blog here: https://rahilrehan.github.io/

Javascript Notes, Part-06 - Classes, Objects, Prototypes.

Rahil Rehan — Thu, 23 Apr 2020 13:03:58 +0000

Let's get some terminology aside first.

Class is a template for what things and functionalities our objects should have.
Objects are the real existing entities that have properties and functions(methods) attached to them.
Factory functions, they create new entities as the name suggests. Example: Object.create().
. notations can be used to grab the property value of an object using a property name.

In JS objects play a very huge role!

Ok, let's dwell deep in.

function userCreator(name, score) {
 const newUser = {};
 newUser.name = name;
 newUser.score = score;
 newUser.increment = function() {
   newUser.score++;
 };
 return newUser;
};
const user1 = userCreator("Will", 3);
const user2 = userCreator("Tim", 5);
user1.increment()

This is defenitely not the code you will write for your applications but there are lot of lessons to learn here, let's see what's happening.

We have created a new factory function userCreator which creates a new object and sets properties for given arguments.
Here we create two objects, user1, and user2 by invoking the factory function userCreator.
Think about this, in the last line we invoke the method increment on user1. Now, look at the code of increment in userCreator. We use newUser object which is not present in our global scope, then how can we still invoke increment. That is the magic of closure again!
Assume, we have 1000 users. For each user, we have a copy of the increment method. Is our code DRY? No.(shortcoming)
Assume you want to add a property to an object, you manually have to do it. (shortcoming)

Prototype chaining

Store the increment function in just one object and have the interpreter, if it
doesn't find the function on user1, look up to that object to check if it's there.

Link user1 and the object that has functions so the interpreter, on not finding .increment, makes sure to check up in that object where it would find it.

Make the link with Object.create() technique

function userCreator (name, score) {
 const newUser = Object.create(userFunctionStore);
 newUser.name = name;
 newUser.score = score;
 return newUser;
};
const userFunctionStore = {
 increment: function(){this.score++;},
 login: function(){console.log("Logged in");}
};
const user1 = userCreator("Will", 3);
const user2 = userCreator("Tim", 5);
user1.increment();

Object.create(functionStore) automatically references methods in functionStore to our objects.
This way, we are not creating copies of the method increment.

What's going on under the hood? let's see.

Object.create(userFunctionStore) is going to add reference value to proto property on the object(a hidden property, also read as dunder proto dunder)
So, when we call user.increment(), we will first look-up if the object has the given property. If we don't find it, JS doesn't panic instead it looks up through the prototype chain to find the methods. This is JS's prototypal nature.
Hence, we have removed the problem of having copies of methods for each object.
Note the usage of this keyword in the above code, which generalizes the user on which we are working on. this(the current user) is an implicit parameter which is passed into increment methods.

Inbuilt methods

So, every object has proto and every object is linked to one functionStore by default which is Object.prototype which has some interesting functions like hasOwnProperty. Object.prototype is on the top of the prototype chain(its proto:null).

Some notes:

Using functions inside methods will have this keyword set to global.
To overcome this problem, use function.call(this) or use arrow functions which are lexically scoped.

new keyword for cleaner code

When we call the function that returns an object with new in front we automate 2
things

Create a new user object
Return the new user object

We need to modify the factory function a little bit to

function userCreator(name, score){
 this.name = name;
 this.score = score;
}
userCreator.prototype.increment = function(){ this.score++; };
const user1 = new userCreator(“Eva”, 9)
user1.increment()

Look at how we set the object which had all the functions to userCreator function. All functions have a default property prototype which is initialized to an empty object, which is where we store our methods like increment.
Now, every users proto will be set to the userCreator.prototype.

Understanding all of these concepts is pretty hard for new developers and hence classes were introduced.
Normally, developers if not using class keyword then they would capitalize these factory functions just to let know the other developers that those factory function would need a new keyword before it.

The class keyword

class UserCreator {
 constructor (name, score){
 this.name = name;
 this.score = score;
 }
 increment (){ this.score++; }
 login (){ console.log("login"); }
}
const user1 = new UserCreator("Eva", 9);
user1.increment();

It does the same thing as the new keyword. But creates a function and object combo. function part has the variable assignments and object part has method definitions.

Let's look at the internals
first, function part, the constructor

function userCreator(name, score){
 this.name = name;
 this.score = score;
}

and then, sets prototype, remaining code

userCreator.prototype.increment = function(){ this.score++; };
userCreator.prototype.login = function(){ console.log("login"); };

Therefore it is readable, bundled, clean to look at and looks like other languages(but the internals are very different!).

Javascript Notes, Part-05 - Promises.

Rahil Rehan — Thu, 23 Apr 2020 10:25:04 +0000

In the previous post, we have learned that there is no way to interact with browser functionalities like setTimeout. We don't know when they will end, we cannot return anything from those callback function. We just leave it up to JS to execute the code in those callbacks.

Do you want to trust setTimeout(or any other browser functions) or would you prefer something more intricate which would promise you that it would let you know when such browser functionalities end, exits and could also provide you a way to return values?

In ES6 Promises were introduced. These facade functions start functionality in the browser and in JS memory as well so that we can track what's going on in the background.

So, what do they do?

When promise functions are invoked they start the functionality in the browser as well as store data in JS memory to keep track of what is going on.

Let's look at an example using fetch(a browser facade function)

function display(data){
 console.log(data)
}
const futureData = fetch('https://twitter.com/will/tweets/1')
futureData.then(display);

console.log("Me first!");

So, let us see what happened.

Function display is stored in global memory.
fetch, which is browser function introduced in ES6 is invoked with URL.
Even though the request to get data might take time, fetch immediately returns a JS object(Promise). This Promise object has fields {value:..., onfulfillment:[], onrejection:[]}
This Promise object is stored in futureData.
This Promise object stored in futureData has method .then which takes a callback as an argument.
The callback argument display is stored in onfulfillment array.
The fetch works on its own to get data apart from JS, our Thread of Execution proceeds and prints "Me first!" on the console.
Now, whenever our fetch fetches the data and returns a value, it is stored in the value property.
Once the value property of Promise(futureData) is changed, the function display stored in onfulfillment array gets executed.

So, what have we achieved?

A nice cleaner way to code things.
A promise object to keep track of what is going on.
And we can now return data to the caller.

Bonus!

When does promise deferred functions stored in onfulfillment array are going to be executed? Immediately? No way, JS is synchronous. Remember that!

Similar to the callback queue, we have a new queue for these new ES6 operations and that is called the microtask queue.

Callback functions from the promise objects are put into the microtask queue.
Our event loop now has a new job, that is to check the microtasks queue too.
Microtask queue is given preference than the callback queue.
Value property of Promise object is updated only after we execute the entire JS global code.
There is also a .catch method attached to Promises which adds a parameter callback function to onrejection array, these callbacks are executed when errors are returned.
onfulfillment and onrejection are hidden properties of Promise object.

Javascript Notes, Part-04 - Async JS, and Event Loop.

Rahil Rehan — Thu, 23 Apr 2020 08:17:23 +0000

Some background first:
Assume while executing code line by line, our (Thread of Execution)TOE meets with a code that runs really slow(maybe a server requests), then the code below that line has to wait because JS is synchronous language and it executes code line by line. This wait can sometimes take hours!

const tweets = getTweets("http://twitter.com/will/1")
// ⛔350ms wait while a request is sent to Twitter HQ
displayTweets(tweets)
// more code to run
console.log("I want to runnnn!")

To solve this, we have to make our code asynchronous but note that JS itself is synchronous. Big challenge!

This is where our browsers async features come into play.
Browser is amalgamate of JS + console + dev tools + sockets + DOM + rendering engines + underlying language etc.

Note that some features you think are JS are not even JS. For example, console, timeouts, XHR, DOM. These functionalities are provided by the browser.

Now, the question is, Can we elevate these browser features to introduce the concept of Async in JS? Yes, We can.

Let's look at an example, understand what is happening and what would happen in the snippet given below.

function printHello(){
 console.log("Hello");
}
setTimeout(printHello,1000);
console.log("Me first!");

Our function printHello gets stored in the global memory store.
setTimeout(a browser function) is called with two arguments a function and time.
Once the setTimeout function is invoked, our JS TOE proceeds to execute the code.
We now print "Me first" to the console.
setTimeout function starts a timer in the browser and once the timer is complete, the parameter function is put into something called the callback queue.
Now, there is one more thing called the event loop which checks if any function is currently on JS call stack or there is any global code that has to be executed.
When there is nothing in the call stack and no global code, we put the callback function from the callback queue into the call stack, put parenthesis at the end of function hence invoking the function.
Therefore, our callback functions which are passed into setTimeout will get executed only when there is nothing on the call stack and no remaining global code.

Summary:

To introduce async concepts in our code we use browser features.
Any callback function we pass into the browser functions gets executed only after there are no functions on the call stack and there is no global code yet to run.
Event loop is what which infinitely checks call stack, global code, and call back queue.
Note that even though we use setTimeout(printHello, 0) in the above example printHello will get executed in the end.

Alright! looks good, is there anything else? Oh yes, there is!

There are problems.

You do many things using browser functionalities(like setTimeout) but we don't have anything to track stuff going on in the browser.
We can't return a value from the function which is passed into browser functionalities, and hence the problem of callback hell.

We will learn ways to solve these problems in further posts.

Javascript Notes, Part-03 - Closures

Rahil Rehan — Thu, 23 Apr 2020 03:10:02 +0000

YOU CAN RETURN A FUNCTION FROM A FUNCTION!

This is possible because functions are first-class objects.

function createFunction() {
 function multiplyBy2 (num){
 return num*2;
 }
 return multiplyBy2;
}
const generatedFunc = createFunction();
const result = generatedFunc(3); // 6

Returning a function, storing it in a variable(sorry, I mean const) and invoking the returned function from outside where it is defined. Well, Looks great!!

But wait! what if our returned function is using data of its parent function? Look at the below example.

function outer (){
 let counter = 0;
 function incrementCounter (){ counter ++; }
 return incrementCounter;
}
const myNewFunction = outer();
myNewFunction();
myNewFunction();

Here, when our returned function is invoked we try to access a variable that is already dead! I mean, trying to access a variable from a function that already got executed, popped out of call stack, and whose local memory is cleared. There is no way of accessing that variable right?

But, this is JS! anything can happen, lol.
Okay! let's understand what is happening.

Attention! When a function is returned a datastore is created if the outer function has any data which is being referenced by inner function(returned fn). This datastore is called closure. I usually call it a backpack

One more time: A closure is a combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an inner function.[MDN]

Note that the data inside a closure is persistent and referred.

One more takeaway! See below example:

function outer (){
 let counter = 0;
 function incrementCounter (){
 counter ++;
 }
 return incrementCounter;
}
const myNewFunction = outer();
myNewFunction();
myNewFunction();

const anotherFunction = outer();
anotherFunction();
anotherFunction();

Here we create two different backpacks(closures) for two variables myNewFunction and anotherFunction. This happens because we have two different execution contexts while assigning returned functions to variables.

Application of closures: Asynchronous JS, Iterators and generators, and many more.

Javascript Notes, Part-02 - Callbacks and Higher-order functions

Rahil Rehan — Wed, 22 Apr 2020 15:07:28 +0000

Remember one word when you write code, "DRY" (Don't Repeat Yourself).

Higher-order functions and callbacks.

Most of the code can be optimized, shortened, and modularized while writing functions. If you can modularly write code that doesn't repeat the same functionality then you are following the DRY principle.

Some DRY principles

Generalization: First try to generalize your functions. If two functions do the same things then probably they can be combined to one.
Example:

function nineSquared() {
 return 9*9;
}

function tenSquared() {
 return 10*10;
}

//above code is not DRY

 function numSquared(num){
  return num*num
}

//generalized function

Functions are first-class objects

They can be assigned to variables.
They can be passed as arguments.
Can be returned from other functions.

Higher-order functions: A function that takes in a function as an argument or returns out a function.
Callback functions: Functions that are passed in as parameters to higher-order functions are called as callback functions.

We can use a callback function to DRY our code. Look at the below example where multiplyBy2 function acts as a callback function. Note that you can pass in
different functions as a callback function.

function copyArrayAndAdd3(array) {
 const output = [];
 for (let i = 0; i < array.length; i++) {
 output.push(array[i] + 3);
 }
 return output;
 }
const myArray = [1,2,3];
const result = copyArrayAndAdd3(myArray);

//we are breaking the DRY principle in above

function copyArrayAndManipulate(array, instructions) {
 const output = [];
 for (let i = 0; i < array.length; i++) {
 output.push(instructions(array[i]));
 }
 return output;
}
function multiplyBy2(input) { return input * 2; }
const result = copyArrayAndManipulate([1, 2, 3], multiplyBy2);

//Here multipleBy2 is passed as callback function to higher-order function copyArrayAndManipulate.
//This callback function can be later invoked inside the parent function.
// multipleBy2 can be replaced with other functions, hence our code is DRY!

Some Notes:

Async JS: callbacks are the core aspect of async JS
Parameters are passed in as a link back to where it was saved in global, We are not copying but sending the reference of the variable into a function.
Blocks like for loop get their own protected namespace but not an entire execution context.
Methods, They can be passed as inputs, as arguments into other functions, they reference back to where they were born, more on this later.

Javascript Notes, Part-01 - Principles of JS

Rahil Rehan — Wed, 22 Apr 2020 06:52:43 +0000

There are five big areas of JS which are foundational pieces to understand JavaScript in-depth:

Principles of JavaScript
Callbacks & Higher-order functions
Closures
Asynchronous JavaScript & the event loop
Classes & Prototypes (OOP)

In this blog let's talk about Principles of JavaScript. These principles are basic building blocks that you need to remember all the time. These will be foundations for understanding complex concepts later and will also help you in effective technical communication.

Principles of JavaScript

Thread of Execution

JS is a single-threaded programming language hence only one thread handles the code execution, therefore the code is executed line by line known as the thread of execution(TOE).
Right now with one thread and without complex code, JS has a synchronous programming style.

Execution Context

Then there is something called execution context(EC) which is an abstract concept that holds information about the environment within which the current code is being executed. Some notes on EC
easy definition: In the execution context, we go and compartmentalize any data we're storing while we're inside that function
There are two main components in EC, they are
- A Thread of Execution(TOE)
- Memory (A new memory store for each EC)
Global EC is created before any code is executed.
A new function always creates a new EC.
With a new EC, a TOE is now in that function and also a new local memory store(where all data related to function are stored) is created for each new function.
When TOE completes in function, it is cleared from memory except for a returned value from the function.
There is always one TOE alive until the program is exited.
JavaScript keeps track of the function which it is currently running by using a call stack.
TOE is always in the function which is on top of the stack.
There is always a global context on the call stack.

Functions and call stack

JavaScript keeps track of what function is currently running using a call stack.
In JS code, i.e in JS engine, a new function means a new execution context is created and when we call that that function using parenthesis '()' we push that function onto the call stack then our TOE runs the code in the topmost function of the call stack.
When finished running the function we remove it from the call stack and TOE is also returned to the parent function.
As call stack is a stack we have the functionality of LIFO(Last In First Out), we execute functions which are most recent.
Therefore there is a chance of code getting blocked for a longer period of time in the parent function(a function calling another function) when the child function(a function which is being called) takes longer time to be executed and return the TOE to the parent function.