页面的Js组件使用问题

对于js的使用有好几种，有些放在layout.xml中，

<item name="component" xsi:type="string">Magento_Checkout/js/view/authentication-messages</item>

有些放在Phtml中，

"#form-validate": {
    "verifySellerShop": }

还有是使用

"#registration": {
    "Magento_Ui/js/core/app": {
       "components": {
            "registration": {
                "component": "Magento_Checkout/js/view/registration",
                "config": {
                    "registrationUrl": "<?= /* @escapeNotVerified */ $block->getCreateAccountUrl() ?>",
                    "email": "<?= /* @escapeNotVerified */ $block->getEmailAddress() ?>"
                }

具体是什么时候使得哪种方式，特别是Magento_Ui/js/core/app这个组件不太理解。

至于js组件，什么时候使用 $.widget，什么时候使用Componect.Extend，Element.extend, 这三者有什么使用区别？