DEV Community: Sinazo Bogicevic

Typescript and React, my experience

Sinazo Bogicevic — Tue, 18 May 2021 11:11:58 +0000

I recently just started learning Typescript so I thought I'd share my experience so far. I'm not going to focus too much on what typescript is and its features because I feel there are already so many helpful articles out there. Instead, I want to focus on my experience and maybe that will help you decide if it's a language you should learn.

Typescript is a superset of Javascript which just means if you look under the hood, you'll find Javascript. This is great especially if you're looking to migrate to it. Two things I really enjoyed about Typescript are types and interfaces.

The :Type annotation allows us to specify the type after the variable name, basically this just means stating if it's a string, number, boolean etc. This is great because it allows the compiler to check at runtime for bugs. Interfaces can be used to specify the type and they allow us to guarantee that an object will contain specific fields however using ? after the property name makes it optional.

One thing I really loved about Typescript was its familiarity. Working with it reminded me of Kotlin. Some of its syntax and its simplicity really reminded me of kotlin which I appreciated. It was fairly simple to understand the basics however things did become slightly harder once I needed to make an API call.

I really struggled when I had to destructure the data that came from the API because typescript wouldn't allow me to retrieve the data. After bashing my head against the wall, I finally realised that any data I needed to destructure I would have to provide a type for. I ended up with a lot of types however I didn't need to declare a type for all the data returned by the API. I only needed to declare a type for the data I needed to retrieve from the API. Trying to retrieve data I didn't create a type for resulted in errors.

I obviously have just scratched the surface when it comes to Typescript but I'm really enjoying it. I plan on adding firebase to my project so I might come back with another article about that experience. For now, I'm convinced and
I will probably be using it a lot more often.

Alert Dialog in Android

Sinazo Bogicevic — Thu, 18 Feb 2021 11:51:39 +0000

A dialog is a small window that pops up on the screen and prompts the user to make a decision before they continue with their action. Think of it as a pop up for android.

Step 1. Create an appropriately named class that extends DialogFragment. It's better to use DialogFragment as it's lifecycle aware and the class will handle any lifecycle events such as the user rotating the screen or pushing the back button.

public class Dialog extends DialogFragment {
    @NonNull
    @Override
    public Dialog onCreateDialog(@Nullable Bundle savedInstanceState) {
        super.onCreateDialog(savedInstanceState)
   }
}

step 2: Use the builder class as its more convenient. When you instantiate this class and call show, you'll be able to see the dialog.

public class Dialog extends DialogFragment {
    @NonNull
    @Override
    public Dialog onCreateDialog(@Nullable Bundle savedInstanceState) {
       AlertDialog.Builder builder = new AlertDialog.Builder(getActivity()); 
       return builder.create();
   }
}

step 3: Set the title and the message you want to display to the user.

public class Dialog extends DialogFragment {
    @NonNull
    @Override
    public Dialog onCreateDialog(@Nullable Bundle savedInstanceState) {
       AlertDialog.Builder builder = new AlertDialog.Builder(getActivity()); 
       builder.setTitle(R.string.download_file)
              .setMessage(R.string.dialog_download_file)

       return builder.create();
   }
}

step 4: Now you're going to add the action buttons. There should be no more than three buttons; a negative, positive and neutral action. First, we'll start with the positive action. The user will use this to accept and continue with the action.

public class Dialog extends DialogFragment {
    @NonNull
    @Override
    public Dialog onCreateDialog(@Nullable Bundle savedInstanceState) {
       AlertDialog.Builder builder = new AlertDialog.Builder(getActivity()); 
       builder.setTitle(R.string.download_file)
              .setMessage(R.string.dialog_download_file)     
.setPositiveButton(String.valueOf(R.string.download), new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
               //accept and continue
            }
        });

       return builder.create();
   }
}

Step 5: Now the last button you will add will be the negative action. The user needs this inorder to cancel the action.

public class Dialog extends DialogFragment {
    @NonNull
    @Override
    public Dialog onCreateDialog(@Nullable Bundle savedInstanceState) {
       AlertDialog.Builder builder = new AlertDialog.Builder(getActivity()); 
       builder.setTitle(R.string.download_file)
              .setMessage(R.string.dialog_download_file)
      .setPositiveButton(String.valueOf(R.string.download), new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                //accept and continue
            }
        })
      .setNegativeButton(String.valueOf(R.string.cancel), new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                //cancel action
            }
        });

       return builder.create();
   }
}

step 6: Instantiate a Dialog object and call show() making sure you pass in the supportFragmentManager and a tag name for the fragment.

 Dialog dialog = new Dialog();
 dialog.show(getSupportFragmentManager(), "download");

disclaimer
Banner vector created by freepik - www.freepik.com

MVVM explained

Sinazo Bogicevic — Wed, 10 Feb 2021 10:54:18 +0000

Model View ViewModel or MVVM isn't as hard to understand as you might think. It really just describes one way we can write and organise our code so it's easier to maintain, refactor and test.

MVVM basically says look instead of writing all of your code inside your fragment or activity, separate it into three distinct parts, the View, ViewModel and Model.

View that where you're going to place your business logic and it's going to provide the data to your UI.
ViewModel is going to act as a bridge between the View and Model. ViewModel provides data to the view and it communicates with the model.
Model contains the business logic that handles data operations i.e querying local and or remote data source.

Each parent component is only dependent on the child component directly below it. The child component doesn't know about the parent above it. This means that if anything happens to the parent component, the child is not affected by that change. The child components may not have a direct reference to the parent component above but it does have a reference to the parent by Observables. The child exposes the Observable to the parent component so that the parent can listen and respond to any changes.

As you go along your coding journey you'll definitely come across other buzzwords like MVP or MVC these are just other design patterns. There is no rule set in stone regarding which pattern you should use however it is good practice to follow best practice and to separate your code into distinct sections.