DEV Community: Andreas Iosifelis

Self Oriented Programming (SOP)

Andreas Iosifelis — Thu, 19 Nov 2020 22:16:59 +0000

It's the first day at your new job.

You have been waiting for a job like this for a long time. You're eager to get github access and checkout the code of the project you have been assigned.
You open your vscode, open the embedded terminal and type git clone blah blah.

You first look at the folder structure and you realize that something is very wrong with this project. There is no particular logic in the naming of the files and folders.
Then you open a file to take a look at the code. Oh, my, goodness...

With that said, I would like to introduce a term for describing a very old coding style. SOP aka Self Oriented Programming.

Like OOP (Object Oriented Programming) SOP has a very particular logic behind it.
When you first see code written in the SOP methodology, immediately you have no clue what the heck is going on.

Variables with no particular naming pattern, Method names that are misleading and logic that just works but you can't figure out why.

In SOP, the most important thing is that only you and only at that moment, understand how your code is written and what it does. I mentioned only at the moment, because it doesn't really matter if you open the project again after a year to fix a bug.

Bug?
Bugs are enemies of the SOP pattern. They don't actually exist when you use SOP. If something doesn't work, you don't try to fix it by changing the code, you fix it by changing the mindset of your user.

Here are some examples of the SOP methodology. I'm going to be using java_script! =)

class Ajax() {
    constructor(first_name, lastName, e_mail, password) {
        this.firstName = first_name;
        this.last_name = lastName;
        this.user_email_address = e_mail;
        this.password = password;
    }

    public makeRequestTo_Server(url, params) {
       return axios.post(url, params);
    }

    private sendRequest() {
      return axios.get(url);
    }

    private sendRequest2() {
      return axios.post(url);
    }

    public makeRequest_V2() {

    }

    public login() {
      let pmrs = { 
         email: this.e_mail, 
         password: this.password,  
      } 
      return axios.post('/api/login', pmrs)
    }
}

function writeDataToUser(userIsNotDeactivated = false, usr) {
    if(!!userIsNotDeactivated) {
       var req = new Ajax(usr.fn, usr.lnm, usr.eml, usr.pwd)
       req.login()
    }

    const dt = usr.items.forEach((item) =>  
         req.items.push(item))

}

In the above example it's pretty obvious that the developer used the SOP methodology. Them and only them understand why this code was written and what it does.

Can you think of other examples/cases of the SOP methodology?
Drop a comment below.

React Ajax Client

Andreas Iosifelis — Fri, 30 Oct 2020 14:27:53 +0000

react-ajax-client

Consume rest endpoints using react components. Inspired by ApolloClient

Install

npm install --save react-ajax-client

yarn add react-ajax-client

Usage

import React from "react";

import { Provider, Fetch, Send, Client } from "react-ajax-client";

const client = new Client({
    baseURL: "http://mywebsite.com/api",
    headers: {
        "Content-Type": "application/json"
    }
});

const ListUsers = () => (
    <Fetch path="/users">
        {({ loading, error, data }) => {
            if (loading) {
                return <div>Loading...</div>;
            }

            if (error) {
                return <div>{error.message}</div>;
            }
            return <pre>{JSON.stringify(data, null, 4)}</pre>;
        }}
    </Fetch>
);

const CreateUser = () => (
    <Send
        path="/users"
        onProgress={() => console.log("Processing")}
        onComplete={response =>
            console.log("Completed", JSON.stringify(response))
        }
        onError={response => console.error("Error", JSON.stringify(response))}
    >
        {trigger => (
            <button
                onClick={e => trigger({ firstName: "Billy", lastName: "Jean" })}
            >
                Create a User
            </button>
        )}
    </Send>
);

const MyApp = () => (
    <Provider client={client}>
        <div>
            <h1>My App</h1>
            <CreateUser />
            <ListUsers />
        </div>
    </Provider>
);

DEV Community: Andreas Iosifelis

Self Oriented Programming (SOP)

It's the first day at your new job.

React Ajax Client

react-ajax-client

Install

Usage

Kinds of Robots

1.Raw-bot

2.Crow-bot

3.Row-bot

4.Throw-bot

5.Arrow-bot

6.Draw-bot

7.Grow-bot