DEV Community: Gerrit Weiermann

The dream about avoiding API-Endpoints and API-Calls (is it worth it?)

Gerrit Weiermann — Sun, 06 Nov 2022 02:04:16 +0000

Hey guys,
there's this idea stuck with me for a real long time.

Imagine you build a small webapp and you don't care about how your API-Endpoint for database queries would look like. So urls like "endpoint-0", "endpoint-1", etc. aren't a dealbreaker. You could just let a compiler generate the api for you!

Before I get into the details I want to explain, how apis are commonly build:

Server API-Endpoint

create a function that handles the database query
gather the parameters from the request
serialize the result
think about a good url (optional: store the url into a definition file -> for easier refactoring)

Client-Request

create a second function that makes the api call
pass all needed information in a correct way to the endpoint
deserialize the response
then return it

Pseudocode

What if you'd just write one function and the serialization and api-call part would happen automated?
You'd just write:

// Server side code
// generates intern api-endpoint
// function body will be replaced with an api-call to that endpoint
async function getPost(id) {
  return db.first("SELECT * FROM Post WHERE id=?", id);
}

// ...
// Client side code (can import the auto generated getPost(...) function)
console.log(await getPost(1));

It looks very clean and easy to understand.

Downsides

But: you also don't know exactly what happens under the hood, it's harder to think about authentication, authorization, etc.
And that's actually why I would call this a bad practice... Nevertheless I like this idea very much :D

Prototype:

Because I don't have the knowledge to make a plugin for a bundler like vite oder webpack, I thought I'd give it a try with Rust.
Here is a working protype:

#[macro_use] extern crate rocket;
use rocket::{Build, launch, Rocket};
use serde::{Serialize, Deserialize};
use serde_json;

#[derive(Serialize, Deserialize, Debug)]
struct Data {
    pub foo: String
}

// proc-macro would be much nicer! (but I'm too lazy :D)
ssf!{
    "/api/foo", // api-endpoint for foo(...)
    foo_route, // reference to the endpoint so we can mount it later on
    // the following function body will be replaced with an http-call
    async fn foo(text: String) -> Data {
        Data {
            foo: text
        }
    }
}

#[get("/test")]
async fn test() -> String {
    let data = foo("bar".to_string()).await;  // does a http request to /api/foo with data { text: "bar".to_string() }
    serde_json::to_string(&data).unwrap() // Response is '{ "foo": "bar" }'
}

#[launch]
fn rocket() -> Rocket<Build> {
    rocket::build().mount("/", routes![foo_route, test])
}

And here you've got the macro:

macro_rules! ssf {
    ($path:literal, $apiname:ident, $(vis:vis)? async fn $fn:ident ( $($name:ident : $type:ty),*  ) -> $ret:ty $body:block ) => {
        // Params
        #[derive(Serialize, Deserialize)]
        struct Params {
            $(pub $name: $type),*
        }

        // The actual function (wont be accessable from the outside due to hygiene)
        fn serverside($($name:$type),*) -> $ret $body

        // Endpoint
        #[post($path, data="<body>")]
        fn $apiname(body: String) -> String {
            let data: Params = serde_json::from_str(&body).unwrap();
            let result = serverside($(data.$name),*);
            let response = serde_json::to_string(&result).unwrap();
            response
        }

        // HTTP-Request
        async fn $fn($($name:$type),*) -> $ret  {
            let client = reqwest::Client::new();
            let params = Params { $($name),* };
            let response = client
                .post(format!("http://localhost:8000{}", $path))
                .body(serde_json::to_string(&params).unwrap())
                .send().await
                .unwrap();
            let mut body = response.text().await.unwrap();
            let data: $ret = serde_json::from_str(&body).unwrap();
            data
        }
    };
}

Be aware that you will need to check/modify the hardcoded url in the macro to make it work on your machine!

I would love to hear your opinion on this :)
Have a nice day!

Using Tailwind like styled-components

Gerrit Weiermann — Tue, 31 Aug 2021 09:11:28 +0000

Introduction

It is time to learn something new. Yesterday I watched fireships video about TailwindCSS that motivated me to give it a try. Initially, I didn't like it much, because of readability and learning (kind of) a new language.

So I started creating my first button component in React.
With the knowledge I would want to create many more, I quickly missed the easy way I'd create components with styled-components.

I got carried away and made myself a version of styled-components. With the difference that it would just take class names as arguments:

The Tailwind like styled-components

(or however you want to call it).

The development was quite straightforward. But I also wanted to use typescript.
Finding the correct typings took me a long while to accomplish. After all, I finally did finish my prototype. Here's how to use it:

export const Button = tailwind.button`px-2 py-1 m-5 bg-green-500 rounded-md`

And I thought it would be also useful to have a set of different stylings you could combine, so I implemented the following as well:

const spacing = "px-2 py-1 m-5"
const primary = "bg-red-500"
const rounded = "rounded-md"

export const Button = tailwind_fn.button(spacing, primary, rounded)

Now I'm proud of it and forgot about my previous goal: learning tailwind (lol)
If you are interested in the source code, I uploaded it to pastebin (not github because I'm very lazy :))
It's just 50 lines of code!

It was already there

Also: After doing research I found out this was possible before (obviously), with actually using styled-components itself:

An Efficient React + TailwindCSS + Styled Components Workflow

Derek Shanks ・ Jan 22 '20

#javascript #react #webdev #tutorial

That's it

Thank's for reading and have a nice day :D
Share your thoughts on this if you like :)

Stressed, not excited?

Gerrit Weiermann — Mon, 26 Apr 2021 19:22:09 +0000

Hey there, in my first post I wanted to share a mental health issue I got in my life which I didn't fix by now... maybe I'm not alone with it :)

How I went there

Some years ago I had an internship at a very nice software company. They wanted to remake their webapp a modern design and replace the Angular 2 implementation with Angular 7. So I made also like three pages or so. It was a pretty straightforward task: I got screendesigns, access to their old system and its code.
I worked pretty hard on my task so I actually got a little pocket money (which wasn't usual for them).

So, because I worked so hard, my stress level always got very high when I arrived home (I was 17). This could have helped in developing my issue.

So while I had the internship, I didn't like the idea that one needs to draw a screendesign, export it and then a programmer needs to depict it.
There should be something that puts both processes together.

Then I actually started a project that should handle the problems I faced.
(By this time, there are some softwares like web flow or retool that can already do that).
You can imagine that this is a huge project you can't handle alone. But I don't bother to start big projects that I discontinue after a week.

I liked the idea way too much...

I dreamed of starting a company someday that makes money with modern software solutions that are just drag'n'dropped together in a week or so, but still with high quality.
At the end I worked on it like three years, often freezed, but my head continued working on it (thinking about it got me symptoms I describe below).

My current issue

Before that story happened, I was really excited about every new technology and learned them, and was very happy and stuff. I guess we all know this feeling :)

After the story above, I got a little paranoia.
That someone else could come up with my ideas or simply solve my problem in another way (Sidenote: now there are already companies that offer that indeed and they are getting popular).

Now when I'm excited my stress level increases and I can breath more difficult, my stomach contracts.
That is when I learn something new, when I'm thinking about programming and even while I'm writing this post...

Fortunately I let my utopia dream go, with a very little hope to reach get it reality.
It's getting better, but still isn't good...

This article was my very first on the internet :)
Hope you liked it!
Feel free to share all your thoughts on this :D