Return an Observable by using a Storage value + Good practices advices

Ionic Framework ionic-v3
1

Hey guys !

I’m quite new with Ionic, and Django, but I’m trying my best.
I’m currently struggling with something, and I would like to have good practice before implementing weird stuff everywhere in my project.

I have a Django backend, which returns a JSON object as follow, on GET /users/{username} :

{
"id":3,
"username":"admin",
"email":"admin@example.com",
"is_active":true,
"date_joined":"2021-04-24T14:05:33.724350Z"
}

With following functions :
api.service.ts

getInfo() {       
        return from(Storage.get({ key: CURRENT_USERNAME }).then(data => {
            const userName = data.value
            console.log("url : " + `${environment.api_url}/users/${userName}`)
            return this.httpClient.get(`${environment.api_url}/users/${userName}`)
        })
        )
    }

profile.page.ts

async getInfo() {
    this.apiService.getInfo().subscribe(
      data => {
        console.log("my data stringified " + JSON.stringify(data))
        data.subscribe(data2 => {
          console.log("data 2 json " + JSON.stringify(data2))
        })
      },
      err => {
        // Set the error information to display in the template
        console.log(`An error occurred, the data could not be retrieved: Status: ${err.status}, Message: ${err.statusText}`)
      }
    );

Sevaral questions :

  • Am I right using a Storage object to store the username ? Or should I not bother, and use a global variable, which would simplify the whole code.
  • As you can see in my profile.page.ts, the code is promise into observable which is quite horrible to read and I’m pretty sure not optimized. But, I didn’t find any way to return the correct information in my api.service.ts getInfo() method. I wanted to assign a variable to the value of my CURRENT_USERNAME, but without using a global variable, I don’t achieve to.

Thank you! Any tips, good practice, and advice would be much appreciated.

Jules

2

In the end, my ultimate answer is once again going to be this idiom, but to address your specific questions,

You’re trying to communicate information from A to B. The right way to do that depends on what (or, in this case, when) A and B are. Storage is the right choice when the app closes between A and B: when you’re talking to future app runs. It’s a bad choice when A and B are in the same app run, because it slows you down and requires dealing with synchronization needlessly.

Global variables simplify things until they don’t, at which point they spread like gangrene and kill your app’s maintainability. You have no way of telling consumers of the global when it has changed. Now is the point where I circle back to the first link I posted.

This is a totally understandable desire and frustration. That being said, the faster you train yourself not to want to do this, the happier you will become. You’re thinking imperatively: do A, then do B and put the result into C. Web app frameworks work reactively: when A happens, convert it into a B and send it over to C where it will be presented to the user.

1 Like
3

Hi Rapropos,

Thanks a lot for the super detailed answer.

You’re trying to communicate information from A to B. The right way to do that depends on what (or, in this case, when ) A and B are. Storage is the right choice when the app closes between A and B: when you’re talking to future app runs. It’s a bad choice when A and B are in the same app run, because it slows you down and requires dealing with synchronization needlessly.

Okay, that makes full sense. But in my case, surely I would like to keep my username even in two different app runs. I’m using refresh token in the to connect to the app, so this would allow me to keep the information about my user. What do you think?

Global variables simplify things until they don’t, at which point they spread like gangrene and kill your app’s maintainability

Solid point for this indeed.

Web app frameworks work reactively: when A happens, convert it into a B and send it over to C where it will be presented to the user.

Thanks for the tips, however, how to think this way ? I don’t know if you’re familiar with agile methodologies etc, but I would like new feature in my app such as “A user should be able to display his username and email”. And therefore my way of thinking would be “I want a username in the view, so I need a method which calls my API to get the information”.
But I’ve never done much web (app) frameworks. Basics of MVC in school, but nothing too crazy. So I’m used to like scripting way of thinking. Let me know if you have any documentation or any tips to follow the state of mind you mention :slight_smile:

Thanks !

4

If your situation dictates that, sure. Sometimes apps are deployed in a kiosk setting, where that would be bad.

The Tour of Heroes will ground you in solid Angular idioms.

5

Thank you for your time! I’ll give a look at this.