Introduction to web APIs - Learn web development | MDN

mdn-question

Hello, hope your doing well? pls could you expand on the inversion of control part ? i dont understand. Thanks a lot!

Hi @kenna

That’s an interesting and important question! I’ll try my best to explain it in a simple way.

You can think of a library as a collection of functions. For example jQuery is a popular library for manipulating the DOM. You would code your own JS and use jQuery functions here and there to add new HTML elements or remove a class from an element.
You are calling jQuery functions where you need it.

A framework on the other hand, like its name says, builds a frame around your whole application. You typically have an entry point like <div id="app"></div> and you tell the framework to take control of everything inside this element. It will load all needed components and sub components, listens to changes in the URL to load new components and so on.
The developer essentially fills those components with life. I know, this sound rather abstract, but maybe a look at a component from the Vue.js (a popular framework) documentation sheds a bit of light on this complex topic. You don’t need to understand exactly what happens here, but I hope it gives you an idea how the framework has control:

<script>
export default {
  // Properties returned from data() become reactive state
  // and will be exposed on `this`.
  data() {
    return {
      count: 0
    }
  },

  // Methods are functions that mutate state and trigger updates.
  // They can be bound as event listeners in templates.
  methods: {
    increment() {
      this.count++
    }
  },

  // Lifecycle hooks are called at different stages
  // of a component's lifecycle.
  // This function will be called when the component is mounted.
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

The framework calls the developer’s code.

I hope I could explain it in a more or less understandable way. Don’t be discouraged if not everything makes sense now. It will get clearer, I promise. :slightly_smiling_face:

Michael

1 Like

Wow, thanks a lot Miko! im so grateful for your help. The example was super helpful.

1 Like