Javascript Mixins Explained in Magento 2

A mixin is a class whose methods are added to another class resulting a new instance of component, consisting of modified version of target class. In magento we can create mixins for JS Components, JS Object, JS function and jquery widgets. We will explore with examples to demonstrate how we can create mixins in magento2 javascript.
Chapters:
0:00 Introduction
0:05 What are JavaScript mixins
0:49 Creating a mixin
1:00 Mixin examples
1:28 Extend UI Component
5:39 Extend JS Object
8:54 Extend jQuery widget
13:20 Overwriting a mixin
15:13 Extend JS function
18:08 Thank you

[@Alex-bc3tt]

This is by far the best mixins explanation

[@PrinceKumar-kv9nq]

Nice tutorial 🎉

[@knowthemage]

I'm glad it was helpful!

[@ashish_1]

Thanks for increasing our knowledge and telling us the usage of mixins.

[@knowthemage]

My pleasure!

[@ashish_1]

​@@knowthemage Thanku very much , but what if I want to make a mixin , if the type of address I get is 'custimer-address' on loading the shipping page , then trigger a click on next button automatically and got proceed to billing page directly
Can this be done , and address-type==='customer-address' , we will get only when customer is logged in

[@knowthemage]

I suggest to create a mixin for "Magento_Checkout/js/model/checkout-data-resolver" file and add custom logic for "resolveShippingRates" method. Then using quote model do followings:
1- Make sure address type is 'customer-address'.
2- Check if shipping method was not selected select it (using select shipping method action).
3- Either use jquery to trigger the next button click, or you can use 'Magento_Checkout/js/action/set-shipping-information' as dependency, set the dependency and navigate to next screen using 'Magento_Checkout/js/model/step-navigator' js model.

[@knowthemage]

I will soon come with a new post on this topic.

[@ashish_1]

@@knowthemage I have tried using quote to get shipping method type but it returns null , don't know why it's giving null .

[@BMikel]

Great content. I always confuse mixins. Also need more clear difference berween extending ui components and mixins. What are common use cases

[@knowthemage]

Thank you. Mixins are useful when existing behavior modification is needed. This approach can also be termed as extending via mixins. Extending UI Components mean to create a new or a custom feature using existing or available functionality. I will come up with another tutorial on this topic soon.