Forem: Jose Álvarez

Understanding the JavaScript Event Loop (In Simple Terms)

Jose Álvarez — Mon, 28 Apr 2025 07:17:57 +0000

JavaScript is often described as single-threaded and asynchronous — but how is that possible? The answer lies in the Event Loop.

What is the Event Loop?

The Event Loop is a mechanism that allows JavaScript to perform non-blocking operations, like handling I/O or timers, despite running on a single thread. It manages multiple tasks by coordinating between the Call Stack, Web APIs, and the Task Queue.

How does it work?

Here's a simplified flow:

Call Stack: When you run code, JavaScript executes it line by line, pushing function calls onto the Call Stack and popping them off once completed.

Web APIs: When asynchronous functions like setTimeout, fetch, or event listeners are called, the browser handles them separately through Web APIs. Once they're done, the associated callback is placed into the Task Queue.

Task Queue: This queue holds all the callbacks that are ready to run.

The Event Loop: Continuously checks if the Call Stack is empty. If it is, it takes the first task from the Task Queue and pushes it onto the Call Stack, allowing it to run.

Important: As long as the Call Stack is busy (e.g., a heavy synchronous task), the Event Loop cannot push new tasks in — leading to potential delays.

Quick Example

Copy
Edit
console.log('Start');

setTimeout(() => {
  console.log('Timeout callback');
}, 0);`

console.log('End');

Output:

sql
Copy
Edit
Start
End
Timeout callback

Even though the timeout is 0ms, it still waits for the current stack to clear before the callback runs!

Conclusion

The Event Loop is what makes JavaScript asynchronous without multi-threading. It ensures that while your code runs in a single thread, operations like network requests or timers don't block the entire application.

Understanding it is key to writing efficient and responsive JavaScript applications!

The truth about Angular form

Jose Álvarez — Wed, 23 Jun 2021 17:06:58 +0000

introdution

In this article i want to explain how to use angular forms directives in the right way, because i've observed that is not already clear how to use it correctly or what is the diferent about use template forms and built our owned form whith FormBuilder class. I am not going to enter in how to create a form in angular only i want to explain the interesting things.

explanation

I'm going to start with something very simple but could be doubs about this.

The question is: What happens when we use <form #f="ngForm" ... ?

Someone could think that we're referencing our form, this could be true, but in reality more things are happening behind the scenes.

The truth about this is that when we import FormsModule automatically NgForm is avalilable in our view, this means that NgForm is automatically attached to any <form> in our view and is not necessary add explicitly ngForm as an attribute.

Answering the question posed, when we use #f="ngForm" in a form tag in reality we're creating a FormGroup ! where f is the type FormGroup, this is so because this syntax says that we want to create a local variable for this view but, where did ngForm cames from ? it came from the NgForm directive.

At this moment you could think, ok f variable is a FormGroup, if you remenber a FormGroup is composed by FormControls and, where are they in our form ? Now comes into play NgModel directive.

When we use ngModel with no attribute vslue we are specifying that at first we want a one-way data binding, and this is important we want to create a FormControl on this form with the name same as name attribute. NgModel creates a new FormControl that is automatically added to the parent FromGroup.

Now we can build our form like this:

<!-- Creates a FormGroup-->
<form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
  <!-- Creates a FormControl with name email -->
  <input name="email" type="email"  ngModel >
  <!-- Creates a FormControl with name password -->
  <input name="password" type="password" ngModel >
</form>

Conclusion

In this simple way we can create a valid form in Angular using template forms, but create form with this way have some limitations, for example what happens if we want validate the password input, we cant specify validators for FormControls and neither we can't listen the form events. If we aren't want do special stuff template form could be a great solution.

Collection of Kotlin extension functions

Jose Álvarez — Tue, 16 Mar 2021 09:49:40 +0000

This post is about a recopilation of most used extension functions on kotlin for Android Framework.

Event

This utility class is recomended by Google Team to use events in LiveData , is designed for help us to process events, that check if its used or not. Because when a configuration change occurs in the device, the events we are observing may occur when they actually do not.

open class Event<out T>(private val content: T) {

    private var hasBeenHandled = false

    fun getContentIfNotHandled(): T? {
        return if (hasBeenHandled) {
            null
        } else {
            hasBeenHandled = true
            content
        }
    }

}

Now that you know what is used for, you're going to understand the following function.

1. ObserveEvent:

Its very interesting function for the Event class, in particular for LiveData<Event<T>>, whose function is facilitate our work when observing events.

inline fun <T> LiveData<Event<T>>.observeEvent(
        owner: LifecycleOwner, crossinline onEventUnhandledContent: (T) -> Unit) {
    observe(owner, Observer { it.getContentIfNotHandled()?.let(onEventUnhandledContent) })
}

The use is similar when we observe a LiveData from activity or fragment, only instead of call observe method, we must call observeEvent method, passing a lambda as argument.

// Para un LiveData<Event<Int>> it será Int.
viewModel.eventLiveData.observeEvent(this) { doAction(it)}

Fragment

SetToolbarButtonAndTitle

Without a doubt this function should be the most used, because to work with fragment allow us establish the navigation button and the toolbar title easily.

fun Fragment.setToolbarButtonAndTitle(string: String){
    (requireActivity() as AppCompatActivity).supportActionBar?.run {
        setDisplayHomeAsUpEnabled(true)
        title = string
    }
}

Usage:

fun setupViews() {
    setToolbarButtonAndTitle(getString(R.string.fragment_title))
}

Arguments

Obtaining fragment arguments is a bit ugly process, so i bring us a couple of extension fucntions, that makes it easy for us to obtain arguments in fragment.

fun Fragment.extraBoolean(extraId: String, default: Boolean = false)  = lazy { arguments?.getBoolean(extraId, default) ?: default }

fun Fragment.extraInt(extraId: String, default: Int = 0) = lazy { arguments?.getInt(extraId, default) ?: default}

fun Fragment.extraString(extraId: String, default: String = "") = lazy { arguments?.getString(extraId) ?: default }

LiveData

GetValue

One of the biggest inconveniences of using LiveData is obtaining its value, because can return null and we ever check it with Elvis operator.

Now with this couple of functions we haven't worry about of that, only when we want obtain LiveData value we must call her getValue method, passing a default value by params

fun LiveData<Int>.getValue(defaultValue:Int) : Int = value ?: defaultValue

fun LiveData<String>.getValue(defaultValue:String) : String = value ?: defaultValue

fun LiveData<Long>.getValue(defaultValue:Long) : Long = value ?: defaultValue

fun LiveData<Boolean>.getValue(defaultValue:Boolean) : Boolean = value ?: defaultValue

Clearly this is only a example, you can create for more types

Spinner

SetOnItemSelectedListener:

This function is quite useful to set the listener of an adapter and not having to implement all the methods of the AdapterView.OnItemSelectedListener interface, but by using it directly we pass the function to be performed when a Spinner item is selected.

fun Spinner.setOnItemSelectedListener( onNothingSelectedAction: (parent: AdapterView<*>?) -> Unit = {},
        onItemSelectedAction: (parent: AdapterView<*>?, view: View?, position: Int, id: Long) -> Unit) {

    onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
        override fun onNothingSelected(parent: AdapterView<*>?) { onNothingSelectedAction(parent)}

        override fun onItemSelected(parent: AdapterView<*>?, view: View?, 
                                    position: Int, id: Long) {
            onItemSelectedAction(parent, view, position, id)
        }
    }
}

Usage:

spinner.setOnItemSelectedListener { _, _, _, _ -> doAction() }

Toast

1. showToast:

This function we save a lot of time to show a toat, making code more readable

  fun Context.toast(message: String, duration: Int = Toast.LENGTH_SHORT) {
        Toast.makeText(this, message, duration).show()
    }

Usage:

toast(getString(R.string.message)

Note: We should keep in mind, that to call this function from fragment we have to call before getContex method.

context.toast(getString(R.string.message))

RecyclerView

1. setOnSwipeListener:

This function allows us to easily set an action for when an element of the RecyclerView is dragged sideways to the left or right (default). Making the code more readable.

fun RecyclerView.setOnSwipeListener( swipeDirs: Int = ItemTouchHelper.LEFT or ItemTouchHelper.RIGHT,
        onSwipe: (viewHolder: RecyclerView.ViewHolder, direction: Int) -> Unit =  { _ , _ -> }) {

    val itemTouchHelper = ItemTouchHelper(
        object : ItemTouchHelper.SimpleCallback(0, swipeDirs) {
            override fun onMove(recyclerView: RecyclerView, 
                                viewHolder: RecyclerView.ViewHolder,
                                target: RecyclerView.ViewHolder): Boolean = false

            override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {
                onSwipe(viewHolder, direction)
            }
    })
    itemTouchHelper.attachToRecyclerView(this)
}

Usage:

recyclerView.setOnSwipeListener { viewHolder, _ -> doAction(viewHolder.currentList[viewHolder.adapterPosition]) }

Intent

requireParcelableExtra

To save us all the checks to obtain an intent, we can use this extension function that does all the checks for us, which receives the id of the extra to extract and will return an Any object.

fun Intent.requireParcelableExtra(extraId:String):Any? {
    if (!hasExtra(extraId))  throw RuntimeException("Intent is not valid, must have  EXTRA_POKEMON")
    return getParcelableExtra(extraId)
}

Usage:

if (result.resultCode == RESULT_OK && intentResult != null) {
    intentResult.requireParcelableExtra(EXTRA_ID) as Int
}

TextView

strikeThrough

With this function we can strike out the TextView text easily.

fun TextView.strikeThrough(strike: Boolean) {
    paintFlags = if (strike) {
        paintFlags or Paint.STRIKE_THRU_TEXT_FLAG
    } else {
        paintFlags and Paint.STRIKE_THRU_TEXT_FLAG.inv()
    }
}

Usage:

binding.lblTaskSubject.strikeThrough(isCompleted)

View

GoneUnless

This extension function is very popular and very useful, that's why I think it deserves to be in this compilation. Besides, it is very useful to use it in layouts with dataBinding .

fun View.goneUnless(condition: Boolean) {
    visibility = if (condition) View.VISIBLE else View.GONE
}

Usage:

binding.emptyView.goneUnless(list.isEmpty)

HideKeyboard

It allows to hide the virtual keyboard simply invoking it, we must call it with a view that generally will be an EditText.

fun View.hideKeyboard(): Boolean {
    try {
        val inputMethodManager = context.getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
        return inputMethodManager.hideSoftInputFromWindow(windowToken, 0)
    } catch (ignored: RuntimeException) { }
    return false
}

Usage:

binding.edtName.hideKeyboard()

JavaScript Social Auth with modal window

Jose Álvarez — Wed, 03 Mar 2021 12:19:53 +0000

Hi, I'm going to explain how to implement social auth with modal window on Vue but can work on any other JavaScript Framework event in native JS.

The problem here is that when the modal window has been opened we loose the control to listen any event or request token when login or register is success.

We must think some way to receive an event when login is success and thus be able to recover the token, this event maybe launch from our back.

Let's go by parts.

Open modal

I'll asume that you know how to open a new window in JavaScript, so I'm not going to explain it in deep.

//This is my object with configurations for new window. 
window = null;
defaultOptions = {
    width: 500,
    height: 500,
    menubar: "no",
    resizable: "no",
    location: "yes",
    scrollbars: "no",
    centered: true,
  };

/
login(){
   const url = 'https://www.OurSocialAuthEndPoint.com'

   //When login is called open window is opened
   this. window = window.open(
    url, 
    null, 
    this.optionsToString(this.popupOptions)
   );
}

//Map the object with window options into string.
optionsToString = options =>
    Object.keys(options)
      .map(key => `${key}=${options[key]}`)
      .join(",");

Well, the modal window open with our social login page, now we need to know if the user has registered.

Emit event.

In my case when user logged the back save it, and emit a JWT token that have to save in front-end as Cookie.

The problem is that JavaScript doesn't allow listen event on windows with other domain.

The solution I suggest is that pass token generated for the back-end by message event and our front-end will be listening that event.

My back emit a callback response, and emit postMessageEvent with token value.

In this way when callback page loads the message event will send and his value is the generated token.

Listen event

Once the event is send, we need to listen the event to capture the value that must be the token.

 token = null;
login(){
  //...open modal window code

onFetchToken();

saveToken()

this.window.close;
}


onFetchToken() {
   //Listen the message event to capture token.
  window.addEventListener("message", event => {
    const { data } = event;
    this.token = data.token
    });
  }

The code above can look like correct but, is incorrect, because the event does't happens immediately, and we will save a null token and window will close but the user have't registered.

The solution is wait for the event occur asynchronously. For those we are going to use Promise, the promise is resolve only when the event occur and the window won't close.

//Remove token property

login(){
  //...open modal window code

  let token = await this.onFetchToken();

  saveToken(token)

  this.window.close;
}

onFetchToken() {
    return new Promise(resolve => {
      window.addEventListener("message", event => {
        const { data } = event;
        resolve(data.token);
      });
    });
  }