DEV Community: devlazar

Pros and Cons of Working as a Software Engineer

devlazar — Fri, 23 Jun 2023 07:38:37 +0000

Hey, all. 🚀

So I’ve been working in the IT industry for four and a half years. I worked on a dozen different projects (ten different clients) and thought about sharing the pros and cons of being a Software Engineer by explaining companies and clients/employers that you could be working with/for. This is my experience as well as the experience of my close colleagues, not a generalization.

Types of Companies

Corporate

Pros:

Professional Development Opportunities: Large corporations often have well-structured training programs, mentorship initiatives, and career development resources in place. These resources can help employees enhance their skills, acquire new knowledge, and advance their careers within the organization.

Networking and Collaboration: Corporate environments offer opportunities for networking and collaboration with a diverse group of professionals. Working alongside experienced colleagues from different departments and backgrounds can broaden your perspective, foster innovation, and provide valuable connections for future career growth.

Competitive Compensation and Benefits: Many corporate environments offer competitive salary packages and comprehensive benefits, including health insurance, retirement plans, paid time off, lazy bags, PS5, gym membership, and various employee perks.

Established Processes and Resources: Large corporations often have well-established processes, tools, and resources in place to support employees in their work.

Cons:

Slow Career Advancement: In a corporate setting, career advancement may be slower than in smaller, more agile organizations. Promotion and improvement may be subject to strict criteria, seniority-based systems, or limited availability of higher-level positions. This can lead to frustration for ambitious individuals seeking rapid growth or those who feel their contributions are not adequately recognized or rewarded.

Lack of Work-Life Balance: Even though you are in a lazy bag playing with PS5 during your break from work, many times you feel that you lack work-life balance. Depending on the project/client, you may experience a lot of pressure to meet deadlines, populate timesheets, do bureaucratic chores, or work overtime.

Limited Autonomy and Decision-Making Authority: Corporate environments often have a top-down decision-making structure, where key decisions are made by higher-level executives. (e.g. I waited almost 2 months for the line Manager to find out about the issue/problem I reported).

Outsourcing

Pros:

Diverse and Challenging Projects: Working in an outsourcing company exposes employees to a wide range of projects across different industries, technologies, and client requirements.

Global Collaboration: Outsourcing companies often have a global presence and work with clients from different countries. This enables employees to collaborate with multicultural teams, learn from diverse perspectives, and gain cross-cultural communication skills.

Exposure to Best Practices: As outsourcing companies serve multiple clients, they tend to follow industry best practices and standards. Working in such an environment exposes employees to efficient project management methodologies, quality assurance processes, and cutting-edge technologies.

Career Growth and Advancement: Outsourcing companies often have structured career paths, performance evaluation systems, and opportunities for advancement. Employees can progress through different levels of responsibility and seniority based on their skills, experience, and performance.

Cons:

Job Insecurity and Uncertainty: Outsourcing companies often rely on client contracts for project engagements. This can introduce a level of job insecurity as projects may come to an end, or client priorities may change, affecting the availability of work.

Variable Workload and Stress: Working in an outsourcing company can involve handling multiple projects simultaneously, each with its own timelines and client demands. Balancing competing priorities and managing tight deadlines can lead to high-pressure situations and increased stress levels. (This also depends on the client type)

Limited Earning Opportunities: Usually, the outsourcing company takes a substantial cut from the paycheck. It is not unusual — and definitely cruel — for the employees to take as low as 5% of the actual money they made for the company. (Do not generalize this, it depends on various factors, country, country stability, company culture, etc…)

Limited Influence on Project Decisions: In an outsourcing company, project decisions are often made by clients or project managers, limiting the influence and autonomy of individual employees. This can result in less control over project direction, decision-making processes, and creative freedom. (This one is questionable and it mainly depends on the client type.)

StartUp

Pros:

Impact and Influence: Startups offer employees the opportunity to have a significant impact and influence on the company’s growth and success. With smaller teams and flatter hierarchies, individuals often have more autonomy, decision-making power, and the ability to shape the direction of the company.

Innovation and Creativity: Startups are known for their innovative and creative approaches to problem-solving. They often encourage and foster an entrepreneurial mindset, allowing employees to think outside the box, experiment with new ideas, and contribute to groundbreaking solutions.

Fast-Paced and Dynamic Environment: Startups thrive in a fast-paced and dynamic environment. This can be exhilarating for individuals who enjoy challenges and continuous learning.
Opportunities for Learning and Development: Startups provide excellent opportunities for learning and development. With limited resources, employees are often required to stretch their skill sets and learn new things quickly.

Equity and Financial Reward: In some cases, startups offer employees the opportunity to receive equity in the company. This can be a significant financial upside if the company experiences growth and success.

Cons:

Uncertainty and Risk: The project might die tomorrow, and money could run out tomorrow for various reasons. In general, startups operate in a highly volatile and uncertain business environment. There is always a risk of failure or closure, especially in the early stages.

Long Working Hours: Startups often require long working hours and a high level of commitment. The intense workload and fast-paced nature of the work can lead to a poor work-life balance, especially in situations where resources are limited and deadlines are tight.

Limited Resources and Support: Startups typically operate with limited resources, including financial, operational, and human resources.

Role Ambiguity and Multiple Responsibilities: Startups often have small teams, which means employees may need to take on multiple roles and responsibilities beyond their primary expertise. This can lead to role ambiguity, stretched capacities, and a lack of specialization.

Lack of Established Processes and Structure: Startups are typically in the early stages of development, which means they may lack well-established processes, systems, and organizational structures.

Types of Clients

Corporate

Obviously — but not as a rule — corporate client (employer) comes with different perks that we mentioned in the Corporate Company section, the best one being development opportunities and networking (knowledge sharing). You have access to senior colleagues with a lot of experience and knowledge, all major and necessary courses, professional training, and similar. There is also — my personal opinion and experience — one major thing that is a huge drawback of working for such a client/employer, and that is that everything is VERY VERY slow. Slow onboarding, slow decisions, slow responses from the people you need, slow promoting. The corporate lather is very high, and it takes time to climb up. Overnight success is virtually impossible.

Start-Up

Comes with the perks of creativity, a dynamic environment, faster learning and tech adoption, and the possibility to make some money. Of course, the uncertainty about the future of the project is the biggest drawback. Money can run out tomorrow, and tomorrow you could be out of work — in the worst cases the client could even postpone paying you the previous month(s).

Government

It is usually the mix of the two above, with the tendency to lean more toward the Corporate side when it comes to requirements but more to the StartUp side when it comes to certainty, and clarity.

A Start-Up that adopted Corporate culture

Probably the one you should avoid the most. There is a delay in communication and decision-making when it comes to clarifying what is needed and what is right to do at a certain point of development. There is pressure to meet VERY VERY tight deadlines. There is urgency when it comes to delivery, and delay when it comes to clarifying features/decisions/intentions. Miscommunications often arise regarding decision-making authority and responsibility. (e.g. Project Manager deciding or having a strong opinion on how long should the developer work on the task) Everything is most of the time urgent and important. Team structure changes a lot. You are following standards (design, architecture, etc…) half the time, and the other half you listen to the requirements and implement them blindly. Initial code and architecture quality are usually not among the top two requirements.

In General

Pros and Cons of Being a Software Engineer

Pros:

Lucrative Salaries
Continuous Learning
Abundance of Opportunities
Problem-solving
Creativity
Social impact
Coffee

Cons:

Feature Miscommunication
Client and Stakeholder Management
Volatile Technology Landscape

Ultimately, the pros and cons of working as a software engineer will vary depending on individual preferences, professional aspirations, personal and professional habits, and the specific work environment. By carefully weighing these factors, individuals can make informed decisions about pursuing a career in software engineering.

Important skills:

Learn how to learn
Learn how to communicate on different levels
Offer solutions, do not ask questions
Evaluate clients/employers as much as they evaluate you
Know your value
Know the worth of your time
Manage time
Manage people

Tiny Chat App UI

devlazar — Fri, 03 Mar 2023 13:30:24 +0000

Table Of Contents
* 🚀INTRO
* 🏁SOLUTION
* 🙏THANK YOU

🚀 Intro

Hey all, today I give you the tiny chat app UI that you can extend and use to create a good-looking and simple chat application.

All of the code is in the CodeSandbox don't hesitate to examine and use this code. Ask questions if you have any!

We'll use:

React (TypeScript)
Tailwindcss
heroicons
Flowbite

🏁 Solution

🙏 THANK YOU FOR READING!

Hope this helps you in your future work. Cheers! 🍻

Format large numbers to corresponding abbreviations

devlazar — Thu, 23 Feb 2023 23:14:33 +0000

Table Of Contents
* 🚀INTRO
* 🏁SOLUTION
* 🙏THANK YOU

🚀 Intro

Hey all! If you ever worked in fintech - or any other number-related field - you probably came across a requirement like this:

Format a number to the abbreviated version but only if that-and-that criteria are met.

I had such a requirement and the criteria were something like this:

If a number is less than 1000 show as-is, and no decimal points
If a number is greater than 1000, abbreviate it to the corresponding string value e.g. 1K, and always use two decimal points e.g. 1233 -> 1.23K.
If a number is greater than a million do it like 1M, 1.33M
If a number is a billion do it like 1B, 10.45B, 123.12B
Same goes for a trillion

🏁 Solution

Here is a simple, short, and sweet solution, and If you tweak it right you can accommodate your own criteria.

🙏 THANK YOU FOR READING!

Hope this helps you in your future work. Cheers! 🍻

Exact match search deeply nested objects - PostgreSQL

devlazar — Mon, 17 Oct 2022 10:17:53 +0000

Table Of Contents
* 🚀INTRO
* 🎯GOAL
* 🏁SOLUTION
* 🙏THANK YOU

🚀 Intro

Hi all! In this post I'll try to showcase the problem I faced recently. It is regarding the PostgreSQL database and how to query for an exact text match in the deeply nested objects and array of objects.

🎯 Goal

Let's consider that you are making a platform that allows people to register, create profile, add skills they poses and land a job offer. Let's assume that we are currently interested in creating a search engine that will search only for the exact match of the skill (e.g. "cooking") and It should return only the data that matched the search term.

Also, let's assume that we are storing the table that has a column called "sections" and it is of "jsonb" type. That object contains objects for "skills" (which contains an array of objects called "items"), "languages", "hobbies" etc.

Read more about JSON column in PostgreSQL docs

JSON object example

sections: {
   skills: {
      items: [{
         name: 'cooking'
      }]
   },
   languages: {...}
   hobbies: {...}
}

So, our current goal is to get the search term the "employer" user entered - in this case 'cooking' and find all the user profiles that match this term exactly.

🏁 Solution

We can achieve this in the following manner:

SELECT *
FROM user_profile up
WHERE up.sections->'skills' @> '{"items":[{ "name": "cooking"}]}';

This will return all the user profiles from the user_profile table, that matched the skill search term exactly.

🙏 THANK YOU FOR READING!

Please leave a comment, tell me about you, about your work, comment your thoughts, connect with me!

☕ SUPPORT ME AND KEEP ME FOCUSED!

Have a nice time hacking! 😊

Reusable Loader directive - Angular

devlazar — Sat, 09 Jul 2022 12:39:20 +0000

Table Of Contents
* 🚀INTRO
* 🧪 EXAMPLE USE CASE
* ⚙ IMPLEMENTATION
* 🙏THANK YOU

🚀 INTRO

Hi all! Hope you are all having a great weekend. I am currently working on multiple platforms using ReactJS, Angular 12 and Node.js.

I noticed that Angular is kinda hard to work with in terms of having reusable and easy to use components for loading, empty, error state and similar. So, I wanted to figure out the way of how to create a simple relative ("relative" in terms of where it is placed, which means it is placed in the relative parent element within the HTML)loader component that could just be plugged in into the component and control the loading of the specific component.

🧪 EXAMPLE USE CASE

Let's consider this:

You are employee of the Stark industries. Tony rings you up:

Hey, man. Can you make a simple UI form that will allow me to select the suit type, color and reactor type. The form should be in the dialog?

Of course you would say yes, It is a freakin' Tony Stark xD

You start listing the requirements:

Dialog component
Should have 3 inputs, suit type, color and reactor type
We need to fetch available suits, colors and reactor (let's assume we can fetch it all from one endpoint)
The user should not be able to interact with the component unless everything is loaded

Let's see how to implement this!

⚙ [IMPLEMENTATION]

Our main dialog component (ts file) will have **status* class member which will tell us if the API call is triggered. It will also have a form group and of course the data that will provide us with the type of suits, colors and reactor types. Of course, we have to create our form and function that will call our API service. It will look something like this.



interface IDataResponse {
  suits: Array<any>;
  colors: Array<string>;
  reactors:Array<any>
}

@Component({
  selector: "stark-dialog",
  templateUrl: "./stark-dialogcomponent.html",
  styleUrls: ["./stark-dialog.component.scss"],
})
export class StarkDialogComponent implements OnInit {
  status: 'loading' | 'not-loading' = 'not-loading';
  starkForm!: FormGroup;
  data: Array<IDataResponse> = [];

  constructor(
    @Inject(MAT_DIALOG_DATA) public data: IDialogData,
    private _apiService: ApiService,
    private _formBuilder: FormBuilder,
  ) {
    this.createStarkForm();
  }

  ngOnInit(): void {
    this.status = 'loading';
    this.fetchData();
  }

  fetchData(): void {
    ...data fetching logic
    ...
    this.status = 'not-loading';
  }

  createStarkForm() {
    this.starkForm = this._formBuilder.group({
      selectSuitType: ["", Validators.required],
      selectColor: ["", Validators.required],
      selectReactorType: ["", Validators.required],
    });
  }
}

Our HTML could look something like this



<h2 mat-dialog-title>
  Choose suit setup
</h2>
<mat-dialog-content>
      <form [formGroup]="starkForm" (submit)="onSubmit()" fxLayout="column">
        <mat-form-field appearance="fill">
          <mat-label>Select suit type</mat-label>
          <mat-select name="selectSuitType">
            <mat-option *ngFor="let suit of data.suits" [value]="suit">
              {{ suit.type }}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field appearance="fill">
          <mat-label>Select color</mat-label>
          <mat-select name="selectColor">
            <mat-option *ngFor="let color of data.colors" [value]="color">
              {{ color.key }}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field appearance="fill">
          <mat-label>Select reactor type</mat-label>
          <mat-select name="selectReactorType">
            <mat-option *ngFor="let reactor of data.reactors" [value]="reactor">
              {{ reactor.type }}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </form>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-stroked-button color="primary" type="button" mat-dialog-close>
    Cancel
  </button>
  &nbsp;
  <button mat-raised-button color="primary">Submit</button>
</mat-dialog-actions>

Our form would then look something like this:

The idea is to prevent user seeing this form before all the data is loaded. We could find solution for that using the Angular Directive.



@Directive({
  selector: "[relativeLoader]",
})
export class RelativeLoaderDirective implements OnInit, OnChanges {
  private loader: HTMLElement;
  @Input() loading: boolean = false;
  constructor(private renderer: Renderer2, private el: ElementRef) {
    this.loader = this.renderer.createElement("div"); // create loader
  }
  ngOnInit(): void {}

  ngOnChanges(): void {
    this.createSimpleLoader(); // execute create loader
    if (this.loading && this.el) {
      // hide the first element in the parent div containing directive
      // this should always be a component you want to replace with
      // the loader we are making
      this.renderer.setStyle(
        this.el.nativeElement.firstChild,
        "display",
        "none"
      );
      this.renderer.appendChild(this.el.nativeElement, this.loader);
    } else {
      this.renderer.removeChild(this.el.nativeElement, this.loader);
      this.renderer.setStyle(
        this.el?.nativeElement.firstChild,
        "display",
        "block"
      );
    }
  }

  createSimpleLoader() {
    /** add some style to the loader wrapper */
    this.renderer.setStyle(this.loader, "display", "flex");
    this.renderer.setStyle(this.loader, "flex-direction", "column");
    this.renderer.setStyle(this.loader, "justify-content", "center");
    this.renderer.setStyle(this.loader, "align-items", "center");
    // create loader spinner with custom scss
    /** Format of this loader is:
        <div class="lds-roller">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
                <div></div>
                <div></div>
                <div></div>
               <div></div>
        </div>
    */
    const ldsRoller = this.renderer.createElement("div");
    this.renderer.addClass(ldsRoller, "lds-roller");
    [0, 1, 2, 3, 4, 5, 6, 7].forEach((value) => {
      const div = this.renderer.createElement("div");
      this.renderer.appendChild(ldsRoller, div);
    });
    this.renderer.appendChild(this.loader, ldsRoller);
  }
}

SCSS for the loader (taken from https://loading.io/css/)



.lds-roller {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  margin: -4px 0 0 -4px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 63px;
  left: 63px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 68px;
  left: 56px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 71px;
  left: 48px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 72px;
  left: 40px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 71px;
  left: 32px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 68px;
  left: 24px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 63px;
  left: 17px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 56px;
  left: 12px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

IMPORTANT STUFF!

In order for this to work, you should provide this format of the HTML:



<div relativeLoader [loading]="your_loading_indicator">
    <div>
      <content-you-want-to-replace-with-loader />
    </div>
</div>

The way it works:

Directive will find reference the parent it refers to. It will find the first child which is the first div, It will hide it and add the loader at the end of the parent element.

Let's update our HTML



<h2 mat-dialog-title>
  Choose suit setup
</h2>
<mat-dialog-content>
  <div relativeLoader [loading]="isLoading === 'loading'">
     <div>
      <form [formGroup]="starkForm" (submit)="onSubmit()" fxLayout="column">
        <mat-form-field appearance="fill">
          <mat-label>Select suit type</mat-label>
          <mat-select name="selectSuitType">
            <mat-option *ngFor="let suit of data.suits" [value]="suit">
              {{ suit.type }}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field appearance="fill">
          <mat-label>Select color</mat-label>
          <mat-select name="selectColor">
            <mat-option *ngFor="let color of data.colors" [value]="color">
              {{ color.key }}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field appearance="fill">
          <mat-label>Select reactor type</mat-label>
          <mat-select name="selectReactorType">
            <mat-option *ngFor="let reactor of data.reactors" [value]="reactor">
              {{ reactor.type }}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </form>
  </div>
</div>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-stroked-button color="primary" type="button" mat-dialog-close>
    Cancel
  </button>
  &nbsp;
  <button mat-raised-button color="primary">Create</button>
</mat-dialog-actions>

Add the end we should get something like this

So, the only thing to worry about is that you have a class member that will control the loading state. But, If you use the provided template you should be able to reuse this loader directive across entire application.

🙏 THANK YOU FOR READING!

Please leave a comment, tell me about you, about your work, comment your thoughts, connect with me!

☕ SUPPORT ME AND KEEP ME FOCUSED!

Have a nice time hacking! 😊

Replace Switch statement with Record - Typescript

devlazar — Sun, 13 Mar 2022 13:20:59 +0000

Table Of Contents
* 📢ANNOUNCEMENT
* 🚀INTRO
* ⚙IMPLEMENTATION
* 👨🏻‍💻CODESANDBOX
* 🤔CONCLUSION
* 🙏THANK YOU

📢 ANNOUNCEMENT!

Hello coding dudes and dudesses! Hope you are all well and healthy. It's been quite a difficult time around the globe. I haven't been active for some time. I want to announce that I will communicate with you (through blogs) more often and try to tackle coding, engineering and business with you. Without further ado, let's get into it!

🚀 INTRO

So, you probably came across a situation where you have something like this:



switch(someVariable: string) {
   case 'someValue': 
        ....
        break;
   case 'someOtherValue':
        ....
        break;
   case 'somethingElse':
        ....
        break;
   ...
}

You probably did, right? Well, there is nothing wrong about this, It is perfectly correct way of replacing the If statement. But we can notice that this can also get a bit hard to follow and manage. With the power of TypeScript we can actually make this even simpler.

⚙ [IMPLEMENTATION]

Let's consider that each case within the switch statement usually and in the best case has three lines of code.



case 'valueToCompareWith':       //first line
      someFunctionToExecute();  //line two
      break;                     //third line

Example
We have an assignment:

We should fetch some financial or product data using two different functions (handlers) that someone provided for us. Let's say getFinancialData() and getProductData().
For this occasion we are currently using the same indicator, let's call it dataHandlerIndicator and it will be of type 'financial' | 'product'.

Let's make a switch statement for this example



type DataType = 'financial' | 'product';
const dataHandlerFunction = (dataHandlerIndicator: DataType) => {
   switch(dataHandlerIndicator) {
      case 'financial':
         getFinancialData();
         break;
      case 'product':
         getProductData();
         break;
   }
}

So, for these two different DataType types we have 6 lines of code handling it and making it fairly easy to read. If we had 3 types we would have 9 lines of code, and for 10 different data types, well we all understand maths, we will have ~ 30 lines of code, maybe even more if we add some additional logic to the case statement.

Let's simplify this by using Record!



// functions to be called
const getFinancialData = () => {
    console.log('Fetch financial data...');
}

const getProductData = () => {
    console.log('Fetch product data...');
}
// end functions to be called ...

type DataType = 'financial' | 'product';

const getDataSelector: Record<DataType, () => void> = {
   'financial': getFinancialData,
   'product': getProductData
}

const dataHandlerFunction = (dataHandlerIndicator: DataType) => {
   getDataSelector[dataHandlerIndicator]()
}

dataHandlerFunction('product'); // 'Fetch product data...'
dataHandlerFunction('financial'); // 'Fetch financial data...'

TRY OUT THE CODESANDBOX EXAMPLE

🤔 CONCLUSION

Now, we can see that with the Record we have two lines of code describing the functions that will be called based on the DataType key value, and we have one line getDataSelector[dataHandlerIndicator]() that will call corresponding function based on the dataHandlerIndicator we pass to the function. Pretty neat, right!?

We reduced number of lines
Our code is much more readable
In order to add additional functionality, just update the Record with the new (key, value) pair, and that's it, you have a new selector for fetching new data based on the data type selector.

🙏 THANK YOU FOR READING!

Please leave a comment, tell me about you, about your work, comment your thoughts, connect with me!

☕ SUPPORT ME AND KEEP ME FOCUSED!

Have a nice time hacking! 😊

BUILD THE REST API USING PYTHON DJANGO - PART 4 🐍

devlazar — Mon, 22 Feb 2021 19:11:43 +0000

Table Of Contents
* 🤓INTRO
* 🔗URLS
* 👨🏻‍💻SERIALIZERS
* 👁‍🗨VIEWS
* 🗺MAP URL
* 1️⃣GET SPECIFIC RECORD
* 📣OUTRO
* 🙏THANK YOU

🤓 INTRO

Hello, dear hackers! Welcome to yet another blog article on "Building the REST API with Python Django". I really appreciate your interest in these kinds of articles, and I am really happy that I can help you learn something new.

If you missed the previous article, check it out:

Article No Longer Available

Everything I do in this article and upcoming articles will be pushed to the repository on my GitHub:

devlazar95 / PythonDjangoTutorial

This is an official repository of the Codespresso Dev.to tutorial, regarding the "Building the REST API using Python Django" series.

PythonDjangoTutorial

This is an official repository of the Codespresso Dev.to tutorial, regarding the "Building the REST API using Python Django" series.

HOW TO RUN PROJECT

Setup you PostgreSQL database (name: company)
Edit settings.py and specify DATABASES name to company
Pull the code from this repository
Open it up in the PyCharm
Open terminal and execute pip install -r requirements.txt
Run python manage.py migrate
Run python manage.py runserver

View on GitHub

Today, we are writing methods for GETting all the data from an API as well as GETting the specific record by record id.

Please feel free to connect with me via Twitter, Instagram or LinkedIn

Let's start! 🚀

🔗 URLS

We already have our urls.py inside our company folder. But what we want to achieve is to make our API URLs map as follow:

http://127.0.0.1:8000/api/ - BASE URL
http://127.0.0.1:8000/api/employee/ - Return data for all employees in the database
http://127.0.0.1:8000/api/employee/:id - Manipulate specific employee
http://127.0.0.1:8000/api/sector/ - Return data for all sectors in the database
http://127.0.0.1:8000/api/sector/:id - Manipulate specific sector
http://127.0.0.1:8000/api/project/ - Return data for all project in the database
http://127.0.0.1:8000/api/project/:id - Manipulate specific sector

To make all routes map into /api/... we will create another file inside our API folder, name it urls.py

Before we proceed with this file, we need to create our serializer and views

👨🏻‍💻 SERIALIZERS

Serializers allow complex data such as querysets and model instances to be converted to native Python datatypes that can then be easily rendered into JSON, XML, or other content types. Serializers also provide deserialization, allowing parsed data to be converted back into complex types, after first validating the incoming data.

The serializers in the REST framework work very similarly to Django's Form and ModelForm classes. We provide a Serializer class which gives you a powerful, generic way to control the output of your responses, as well as a ModelSerializer class which provides a useful shortcut for creating serializers that deal with model instances and querysets.

In our serializers.py add the following code (note that I omitted the code regarding UserSerializer and GroupSerializer):

from company.API.models import Employee

class EmployeeSerializer(serializers.ModelSerializer):
    class Meta:
        model = Employee
        fields = '__all__'

This means that we will serialize our Model Employee and include all the fields that our model offers.

👁‍🗨 VIEWS

Each view we create will handle specific logic and will map the response with the specific route. Let's create our first view, which will get all the data regarding employees.

In your views.py file add the following code:

from company.API.serializers import UserSerializer, GroupSerializer, EmployeeSerializer
from company.API.models import Employee
from rest_framework.response import Response
from rest_framework.views import APIView


class EmployeeList(APIView):
    """
    List all employees
    """
    def get(self, request, format=None):
        employees = Employee.objects.all()
        serializer = EmployeeSerializer(employees, many=True)
        return Response(serializer.data)

🗺 MAP URL

Before we add some code to the newly created urls.py, go to the urls.py file inside the company folder, and in the urlpatterns block add the following code:

path('api/', include('company.API.urls'))

This part of the code will consider the http://127.0.0.1:8000/api/ - the base URL - but that path will map all the paths inside our newly created urls.py.

Now, we have our Employee serializer and Employee View, we need a specific endpoint that will map our response data.

In the newly created urls.py, add the following code:

from . import views
from django.urls import path
from rest_framework.urlpatterns import format_suffix_patterns

urlpatterns = [
    path('employee/', views.EmployeeList.as_view(), name="employees")
]

urlpatterns = format_suffix_patterns(urlpatterns)

This will map our EmployeeList view response to http://127.0.0.1:8000/api/employee/

Now, we should be ready to get the data from the server (please use your admin panel to add some data for employees before proceeding).

Run the following command:

python manage.py runserver

Click here to see the result in your browser or manually type in your URL bar http://127.0.0.1:8000/api/employee/

Since I have only one record in the database, here is my response:

Congratulations! 🎉 You created your first GET request, you could also send the request using the Postman, for now, I will stick to the browser.

1️⃣ GET SPECIFIC RECORD

Similarly, when we want to get the specific record by the unique identifier, we define our view that we will name EmployeeDetails, and after that, we map our view to the specific URL.

Here is the view for getting specific Employee record by the unique identifier

class EmployeeDetails(APIView):
    """Retrieve an employee instance"""

    def get_object(self, pk):
        try:
            return Employee.objects.get(pk=pk)
        except:
            raise Http404

    def get(self, request, pk, format=None):
        employee = self.get_object(pk)
        serializer = EmployeeSerializer(employee)
        return Response(serializer.data)

As you can see, we are using get_object function where we pass the primary key of an instance we are requesting. We have a try-except block of code, where we determine if such an instance exists, or if it does not, we raise an error. An Http404 error is imported as from django.http import Http404;

Now, we should map our URL, add the following code to the urlpatterns inside the newly created urls.py file.

path('employee/<slug:pk>', views.EmployeeDetails.as_view(), name="employee")

Ok, we should be ready to retrieve the specific data for a single Employee instance. First, you need a primary key, if you execute http://127.0.0.1:8000/api/employee/ you will see that each employee has an employee_id attribute, copy one of the employee_ids and execute this route https://127.0.0.1:8000/api/employee/paste_your_employee_id_here you should GET a single instance with the specific employee_id you requested.

Here is mine 👽

📣 OUTRO

So, we created views for getting all employees' data and for getting a single employee data. The logic is the same for the Project and Sector model. I encourage you to try, and write those views, serializers and urls by yourself, but If you get stuck, you can always look for the solution on my GitHub. In the next article, we will create the POST and PUT methods.

🙏 THANK YOU FOR READING!

Please leave a comment, tell me about you, about your work, comment your thoughts, connect with me!

☕ SUPPORT ME AND KEEP ME FOCUSED!

Have a nice time hacking! 😊

BUILD THE REST API USING PYTHON DJANGO - PART 3 🐍

devlazar — Sun, 21 Feb 2021 13:07:39 +0000

Table Of Contents
* 🤓INTRO
* 🧠MODELS
* 🖖🏻HOW DO WE TRANSLATE RELATIONSHIPS
* 💃🏻MODELS
* 👔EMPLOYEE MODEL
* 🏢SECTOR
* 📖PROJECT
* 💼EXPOSE MODELS TO ADMIN PANEL
* 👨🏻‍💻CODE
* 🙏THANK YOU

🤓 INTRO

Hello, hackers! I hope you are all having a great weekend, it is a beautiful Sunday, and let's complete this week with another part of the "Building the REST API using Python Django" series.

If you haven't read the previous chapter, it's about setting up the environment and the project.

Article No Longer Available

Please feel free to connect with me via Twitter, Instagram or LinkedIn

Let's start! 🚀

🧠 MODELS

We start with an image from the previous post, our ER diagram.

Each entity represented with the rectangular shape is a model, a class that has attributes that are represented by the oval shape.

Relationships are represented by the rhomboid shapes and are crucial for determining how the models are related.

🖖🏻 HOW DO WE TRANSLATE RELATIONSHIPS

ONE-ON-ONE RELATIONSHIPS - For any binary type of relationships let's call it R(1:1) in the ER scheme, we identify the relations S and T that correspond to the entity types participating in the relationship R. We choose one of two relations, let's say relation S, and we include a foreign key that represents a corresponding primary key of the relation T.

ONE-ON-MANY RELATIONSHIPS - For any binary type of relationship let's call it R(1:N) in the ER scheme, we identify relation S that participates on the N side of the relationship. In the S we include the foreign key that corresponds to the primary key of the relation T.

MANY-TO-MANY RELATIONSHIPS - For any binary type of relationship let's call it R(M:N) in the ER scheme, we create a totally new relation P, so-called pivot table. The P includes the foreign keys corresponding to the primary keys of the relations that represent entity types participating in the relationship R.

We have two relationships that correspond to ONE-TO-MANY relationships and only one relationship corresponding to MANY-TO-MANY relationships.

This means that in the EMPLOYEE-SECTOR relationship the corresponding entity type on the N side of the relationship is Employee, which means, it will hold a foreign key to the Sector entity type.

In the SECTOR-PROJECT relationship, the corresponding entity type on the N side of the relationship is the Project entity type, which means, it will hold a foreign key to the Sector entity type.

In the EMPLOYEE-PROJECT relationship, we have a MANY-TO-MANY relationship. This means, that a new table, a pivot table, will be created with the foreign keys corresponding to the primary keys of the Employee and the Project entity type, respectively.

👔 EMPLOYEE MODEL

In the models.py we add the following code.

employee_id - is a unique identifier represented by the 128-bit number, it's a self-generated, non-editable field.
first_name, middle_name, last_name - are character fields with specified maximum length and are required
gender - is a character field that is representing the choices for the gender specified by GENDER_CHOICES
address - is a character field representing an address
salary - is a decimal field, with two decimal points and is required

Now let's make our first migrations:

python manage.py makemigrations
python manage.py migrate

In your migrations folder you should see something like this:

🏢 SECTOR MODEL

📖 PROJECT MODEL

Execute the code for creating another migration and migrate the models.

💼 EXPOSE MODELS TO ADMIN PANEL

In our admin.py we add the following code

Let's run our server, open it up in the browser, log in, redirect to the admin page HTTP://127.0.0.1:8000/admin and check if our models are exposed.

In your browser you should see this:

Try adding an employee, project, and sector. You should be able to add the data you want. 🚀

👨🏻‍💻 CODE

devlazar95 / PythonDjangoTutorial

This is an official repository of the Codespresso Dev.to tutorial, regarding the "Building the REST API using Python Django" series.

PythonDjangoTutorial

This is an official repository of the Codespresso Dev.to tutorial, regarding the "Building the REST API using Python Django" series.

HOW TO RUN PROJECT

Setup you PostgreSQL database (name: company)
Edit settings.py and specify DATABASES name to company
Pull the code from this repository
Open it up in the PyCharm
Open terminal and execute pip install -r requirements.txt
Run python manage.py migrate
Run python manage.py runserver

View on GitHub

That's it for now, I hope you enjoyed it. In the next chapter, we will set up a new url.py file for an API and write our views. Stay tuned! 👽

🙏 THANK YOU FOR READING!

References:
School notes...
School books...

Please leave a comment, tell me about you, about your work, comment your thoughts, connect with me!

☕ SUPPORT ME AND KEEP ME FOCUSED!

Have a nice time hacking! 😊

BUILD THE REST API USING PYTHON DJANGO - PART 2 🐍

devlazar — Sat, 20 Feb 2021 16:14:22 +0000

Table Of Contents
* 🤓INTRODUCTION
* 🧠THE PLAN
* 📚TERMINOLOGY
* 🦄ENTITES AND RELATIONSHIPS
* 🌎CREATE THE PROJECT
* 🙏THANK YOU

🤓 INTRODUCTION

Hello, my dear hackers! Welcome, to the second part of the "Building the REST API with Python Django" series. I hope you are all having a great day, today is a big day, we will start planning and implementing the REST API using Python Django Rest Framework.

Please feel free to connect with me via Twitter, Instagram or LinkedIn

🧠 THE PLAN

Let me explain the plan. Don't worry, I will provide a visual example too 😎 We are going to build the REST API handling the company data for Employees, Sectors, and Projects! Each employee, sector, and project is described with specific attributes that are usually of some significance to the user consuming the data. Let me show you the diagram, and I will describe each entity separately as well as the relationships among them.

First, let's straight-up our terminology.

📚 TERMINOLOGY

RELATION - the table with rows and columns
ATTRIBUTE - named column of the relation
ATTRIBUTE DOMAIN - the set of the allowed values for an attribute
CARDINALITY - Number of data instances (rows) in the relation
RELATION KEY - An attribute or a set of attributes that identify each data instance in a unique manner
PRIMARY KEY - A candidate key which is selected to identify each data instance in a unique manner
FOREIGN KEY - An attribute or a set of attributes getting paired-up with the primary key (candidate key) of some other relation
ENTITY INTEGRITY - non of the primary key's attributes can have the value of NULL - no primary key can be NULL
REFERENTIAL INTEGRITY - Values of the foreign key must be equal by value to the candidate key of the specific data instance in the initial relation, or can have the value of NULL

🦄 ENTITES AND RELATIONSHIPS

Our diagram describes:

AN EMPLOYEE ENTITY - Each employee, has attributes; The name that is a composite attribute and includes the first name, middle name, and last name. Also, we have, gender, address, salary, and the unique identifier ID.
THE SECTOR ENTITY - Name, Location, and a unique identifier.
THE PROJECT ENTITY - Name Location and a unique identifier.

RELATIONSHIP 1 - The relationship between Employee and the Sector. Each employee works in only one sector, and each sector can have many employees.
RELATIONSHIP 2 - The relationship between Sector and Project. Each sector can be in charge of multiple projects but that specific project gets assigned to the specific sector.
RELATIONSHIP 3 - The relationship between Employee and the Project. Each employee can work on multiple projects, and each project can have multiple employees working on it.

So, let's get to business and start creating our project! 🚀

🌎 CREATE THE PROJECT

We start by creating our project, and we will use the PyCharm GUI to do so.

Open up the PyCharm
Click on create the new project - make sure you have the right base interpreter selected
After the virtual environment is initialized you should see something like this in your project directory tree
Open the terminal at the bottom left in the PyCharm IDE
Install Django by executing this code

pip install django

Install Django Rest Framework by executing the following code

pip install djangorestframework

Set up a new project with a single application

django-admin startproject company .
cd company
django-admin startapp API
cd ...

So, we created our project, the CompanyProject, and our application within the project that we named API.

Let's now install the psycopg2 adapter for the PostgreSQL database.

pip install psycopg2

Register the rest framework and our application by navigating to the settings.py file and add this to you INSTALLED_APPS.

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'company.API'
]

Go to the pgAdmin and create the new database, I will name my database company, you can name yours as you wish.

In your settings.py setup the database

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': 'company',
        'USER': 'postgres',
        'PASSWORD': 'put_postgre_password_here',
        'HOST': 'localhost',
        'PORT': '5432'
    }
}

Create serializers.py inside your API directory. Let's create our user serializer and user group serializer. Add this code to your serializers.py file:

from django.contrib.auth.models import User, Group
from rest_framework import serializers


class UserSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = User
        fields = ['url', 'username', 'email', 'groups']


class GroupSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = Group
        fields = ['url', 'name']

And add this code to the views.py file:

from django.contrib.auth.models import User, Group
from rest_framework import viewsets
from rest_framework import permissions
from company.API.serializers import UserSerializer, GroupSerializer


class UserViewSet(viewsets.ModelViewSet):
    """
    API endpoint that allows users to be viewed or edited.
    """
    queryset = User.objects.all().order_by('-date_joined')
    serializer_class = UserSerializer
    permission_classes = [permissions.IsAuthenticated]


class GroupViewSet(viewsets.ModelViewSet):
    """
    API endpoint that allows groups to be viewed or edited.
    """
    queryset = Group.objects.all()
    serializer_class = GroupSerializer
    permission_classes = [permissions.IsAuthenticated]

Inside your urls.py add the following code.

from django.urls import include, path
from rest_framework import routers
from company.API import views

router = routers.DefaultRouter()
router.register(r'users', views.UserViewSet)
router.register(r'groups', views.GroupViewSet)

# Wire up our API using automatic URL routing.
# Additionally, we include login URLs for the browsable API.
urlpatterns = [
    path('', include(router.urls)),
    path('api-auth/', include('rest_framework.urls', namespace='rest_framework'))
]

Execute a migration to sync your database for the first time:

python manage.py migrate

You should see something like this in your terminal:

Now, let's create the superuser that we will use to login to our administrator panel.

python manage.py createsuperuser --email admin@example.com --username admin

After executing this line you will have to specify your password, you can change your password any time.

Let's run our project!

python manage.py runserver

That is it! 🎉 We created our first project, go to your browser, redirect to HTTP://127.0.0.1:8000/ and you will get your browsable API.

That is it for now, in our next chapter we will create our models for our company API and views.

Stay tuned! 🚀

🙏 THANK YOU FOR READING!

References:
School notes...
School books...

Please leave a comment, tell me about you, about your work, comment your thoughts, connect with me!

☕ SUPPORT ME AND KEEP ME FOCUSED!

Have a nice time hacking! 😊

BUILD THE REST API USING PYTHON DJANGO - PART 1 🐍

devlazar — Fri, 19 Feb 2021 22:08:59 +0000

Table Of Contents
* 🤓INTRODUCTION
* 📦WHAT IS AN API
* 🕸SEMANTICS OF HTTP METHODS
* 🤔HTTP METHODS
* 🤠ABOUT DJANGO & DJANGO REST FRAMEWORK
* ▶GETTING STARTED
* 🙏THANK YOU

🤓 INTRODUCTION

Hello, my dear hackers! I hope you are all having a great end of the working week. Today we are starting the new series where we are going to learn how to use Python and Django Rest Framework to build the REST Application Programming Interface.

This series requires you to be in a good mood, be prepared to read, and have fun, we learn together! 🎉

Please feel free to connect with me via Twitter, Instagram or LinkedIn

Let's do this!

📦 WHAT IS AN API

An API stands for an application programming interface. It represents a set of definitions and protocols for building and integrating application software. In other words, it is a way to programmatically interact with a separate software component or resource.
Web services were originally designed to communicate using SOAP or Simple Object Access Protocol. Which is a messaging protocol that sends XML documents over HTTP. But, today, most web-based APIs use the REST - Representational State Transfer - as an architectural style.

You might ask what the REST actually is?

REST was formally introduced in 2000 by Roy Fielding in his doctoral dissertation where he explains the REST architecture in the following manner:

The Representational State Transfer (REST) style is an abstraction of the architectural elements within a distributed hypermedia system. REST ignores the details of component implementation and protocol syntax in order to focus on the roles of components, the constraints upon their interaction with other components, and their interpretation of significant data elements. It encompasses the fundamental constraints upon components, connectors, and data that define the basis of the Web architecture, and thus the essence of its behavior as a network-based application.

Benefits of using the REST architecture:

performance in component interactions, which can be the dominant factor in user-perceived performance and network efficiency;
scalability
simplicity of a uniform interface
modifiability of components to meet changing needs (even while the application is running);
visibility of communication between components by service agents;
portability of components by moving program code with the data;
reliability in the resistance to failure at the system level in the presence of failures within components, connectors, or data.

🕸 SEMANTICS OF HTTP METHODS

Since we are building REST API, specifically HTTP-based REST APIs, the basic structure of the REST APIs is:

a base URI, for example http://my-api.example.com/
standard HTTP request methods (GET, POST, PUT and DELETE)
a media type that defines state transition data elements. The current representation tells the client how to compose requests for transitions to all the next available application states.

🤔 HTTP METHODS

GET

The GET method requests a representation of the specified resource. Requests using GET should only retrieve data.

HEAD

The HEAD method asks for a response identical to that of a GET request, but without the response body.

POST

The POST method is used to submit an entity to the specified resource, often causing a change in state or side effects on the server.

PUT

The PUT method replaces all current representations of the target resource with the request payload.

DELETE

The DELETE method deletes the specified resource.

PATCH

The PATCH method is used to apply partial modifications to a resource.

🤠 ABOUT DJANGO & DJANGO REST FRAMEWORK

Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of Web development, so you can focus on writing your app without needing to reinvent the wheel. It’s free and open source.
Django REST framework is a powerful and flexible toolkit for building Web APIs. Some reasons you might want to use the REST framework:

The Web browsable API is a huge usability win for your developers.
Authentication policies including packages for OAuth1a and OAuth2.
Serialization that supports both ORM and non-ORM data sources.
Customizable all the way down - just use regular function-based views if you don't need the more powerful features.
Extensive documentation, and great community support.
Used and trusted by internationally recognized companies including Mozilla, Red Hat, Heroku, and Eventbrite.

Don't give up, we are getting somewhere!

▶ GETTING STARTED

REQUIREMENTS

Python - v3.9.2
PostgreSQL - v12.2 (pgAdmin 4 -optional)
Django - v3.1.7
Django Rest Framework - v3.12.2
psycopg2 - v2.8.6

You will also need the IDE of your choice, I am using the Jet Brains PyCharm Community Edition and I strongly recommend it!

❗ You should probably add Python to your Environment variables if you don't have it already

So, this is what you need to be familiar with, of course, an actual topic of the REST paradigm, as well as HTTP, is much, much broader. Because of that, I encourage you to read a little bit more about it. Here are some useful links:

REST
HTTP

In the next chapter, we are going to create the project, setup Django and Django rest framework, and start writing our models, views, serializers, etc...

Stay tuned! 🚀

🙏 THANK YOU FOR READING!

References:
School notes...
School books...

Please leave a comment, tell me about you, about your work, comment your thoughts, connect with me!

☕ SUPPORT ME AND KEEP ME FOCUSED!

Have a nice time hacking! 😊

Elementary Data Structures with JavaScript - Binary trees - PART 3🚀

devlazar — Wed, 17 Feb 2021 19:01:57 +0000

Table Of Contents
* 🤓 INTRODUCTION
* 🌴BREADTH-FIRST SEARCH
* 🌊DEPTH-FIRST SEARCH
* 👨🏻‍💻CODE
* 🙏 THANK YOU

🤓 INTRODUCTION

Hello, my dear coders! I hope you are all having a great day 🚀
Today, we are going to explore ways to traverse a tree with algorithms designed to optimize the search and traversal. Of course, for our implementation, we will use Vanilla JavaScript.

If you missed the previous part of this article you can check it out right here:

Article No Longer Available

Please feel free to connect with me via Twitter, Instagram or LinkedIn

🌴 BREADTH-FIRST SEARCH

Breadth-first search is characterized by the fact that it focuses on every item, from left to right, on every level before moving to the next.

🌊 DEPTH-FIRST SEARCH

The strategy followed by depth-first search is, as its name implies, to search “deeper” in the three whenever possible. Depth-first searches are more concerned with completing a traversal down the whole side of the tree to the leaves than completing every level. There are three main ways to handle this, preOrder, postOrder, and inOrder but they’re just very slight modifications of each other to change the output order.

1️⃣ PREORDER

What preorder does, it processes the root, traverses the left subtree, and after that, traverses the right subtree.

2️⃣ POSTORDER

First, we traverse the left subtree, after that, traverse the right subtree and, process the root.

3️⃣ INORDER

First, we traverse the left subtree of the root, then we process the root and after that, we traverse the right subtree of the root.

👨🏻‍💻 CODE

Here is the code! 🚀

🙏 THANK YOU FOR READING!

References:
School notes...
School books...

Please leave a comment, tell me about you, about your work, comment your thoughts, connect with me!

☕ SUPPORT ME AND KEEP ME FOCUSED!

Have a nice time hacking! 😊

Elementary Data Structures with JavaScript - Binary trees - PART 2🚀

devlazar — Tue, 16 Feb 2021 13:25:15 +0000

Table Of Contents
* 🤓 INTRODUCTION
* 0️⃣1️⃣ ABOUT BINARY SEARCH TREES
* ⭕ CREATE A NODE
* 🔎BINARY SEARCH TREE
* 🔍FIND AN ELEMENT
* 👨🏻‍💻CODE
* 🙏 THANK YOU

🤓 INTRODUCTION

Welcome, my dear hackers!🚀 Welcome to yet another blog article about elementary data structures.

If you missed the previous article where we describe the Binary trees, you can check it out right here:

Article No Longer Available

Today, we will show how to implement the binary search tree. We will concentrate on the implementation with a bit of theoretical explanation in the beginning. 🚀

Please feel free to connect with me via Twitter, Instagram or LinkedIn

0️⃣1️⃣ ABOUT BINARY SEARCH TREES

Basic operations on a binary search tree take time proportional to the height of the tree. For a complete binary tree with n nodes, such operations run in the O(logn) worst-case time.
If the tree is a linear chain of n nodes, however, the same operations take O(n) worst-case time.
In practice, we can’t always guarantee that binary search trees are built randomly, but we can design variations of binary search trees with good guaranteed
worst-case performance on basic operations.

A binary search tree is organized, as the name suggests, in a binary tree, that we discussed in the previous chapter. There, we concluded that we can represent such a tree by a linked data structure in which each node is an object. In addition to a key and satellite data, each node contains attributes left, right and a pointer that points to the nodes corresponding to its left child, its right child, and its parent, respectively. So, if a child or the parent is missing, the appropriate attribute contains the value of NULL. The root node is the only node in the tree whose parent is NULL. The keys in a binary search tree are always stored in such a way as to satisfy the binary search tree property.

Let x be a node in a binary search tree. If y is a node in the left subtree of x, then y:key <= x:key. If y is a node in the right subtree of x, then y:key >= x:key.

The binary-search-tree property allows us to print out all the keys in a binary search tree in sorted order by a simple recursive algorithm, called an inorder tree walk. This algorithm is so named because it prints the key of the root of a subtree between printing the values in its left subtree and printing those in its right subtree. (Similarly, a preorder tree walk prints the root before the values in either subtree and a postorder tree walk prints the root after the values in its subtrees.)

⭕ CREATE A NODE

As you can see in an image, we have a class BSTNode (Binary Search Tree Node) that has a constructor that takes up an argument of value being assigned to a member class variable value; Also, we have two pointers left and right, that will point to the left child and right child, respectively. The counter is used to control the duplication of the node values. For example, if we try to add another node with the same value as any node in a tree, we just increase the counter but do not add that node to the tree.

🔎 BINARY SEARCH TREE

🔍 FIND AN ELEMENT

👨🏻‍💻 CODE

class BSTNode {
  constructor(value) {
    this.value = value;
    this.right = null;
    this.left = null;
    this.count = 0;
  }
}

class BST {
  constructor() {
    this.root = null;
  }
  create(value) {
    const newNode = new BSTNode(value);
    if (!this.root) {
      this.root = newNode;
      return this;
    }

    let current = this.root;

    const addSide = side => {
      if (!current[side]) {
        current[side] = newNode;
        return this;
      }
      current = current[side];
    };

    while (true) {
      if (value === current.value) {
        current.count++;
        return this;
      }
      if (value < current.value) addSide('left');
      else addSide('right');
    }
  }
  find(value) {
    if (!this.root) return undefined;
    let current = this.root;
    let found = false;

    while (current && !found) {
      if (value < current.value) current = current.left;
      else if (value > current.value) current = current.right;
      else found = true;
    }

    if (!found) return 'Oops! Nothing found!';
    return current;
  }
}

let binary_search_tree = new BST();
binary_search_tree.create(100);
binary_search_tree.create(2);
binary_search_tree.create(21);
binary_search_tree.create(221);
binary_search_tree.create(3);
binary_search_tree.create(44);
console.log(binary_search_tree)

The expected output should be something like this:

🙏 THANK YOU FOR READING!

Stay tuned for the next chapter of this article where we will implement deletion and traversal logic!

References:
School notes...
School books...

Please leave a comment, tell me about you, about your work, comment your thoughts, connect with me!

☕ SUPPORT ME AND KEEP ME FOCUSED!

Have a nice time hacking! 😊