It is highly recommended as good practice to declare the JavaScript resources in the templates instead of layouts updates, mainly to take advantage of the processing and loading via RequireJS.

There are two ways to initialize a JavaScript component on the templates:

Imperative Initialization and Declarative Initialization. On the imperative initialization, Magento 2 allows raw code to be used and applied to the business layer as well as to work in two ways using the JavaScript resources on your template files with the IDs notation: RequireJS ID e Magento Modulate ID.

See the following example of declaration using RequireJS ID:

require(["jquery"], function($){ 
   /*my code here*/ 
}); 

With this call it is possible to load the jQuery library to the function in the template, creating a widget of your theme or module development. You will see in the following sequence that it is possible to map these dependencies to facilitate the use of JavaScript components.

Now see an example of the declaration using Magento Modulate ID:

require(["Magento_Sales/order/create/form"], function(){ 
   /*my code here*/ 
}); 

In the preceding example, the file form.js is loaded into a determined template through the reference Magento_Sales/order/create/form. With this type of reference, it is possible to reuse the resources in different templates.

The declarative initialization allows for the preparation of all the backend layer to the response that has been sent to a page source using standard tools. There are also two ways to work with declarative initialization:

The data-mage-int can be used inside the tags. Here is an example of initialization in the <nav> tag:

<nav data-mage-init='{ "<component_name>": {...} }'></nav> 

Using the tag <script type="text/x-magento-init">, the HTML will not have direct access to the element. See the following example:

<script type="text/x-magento-init"> 
{ 
    "#main-container": { 
        "navigation": <?php echo $block->getNavigationConfig(); ?>, 
        "accordion": <?php echo $block->getNavigationAccordionConfig(); ?> 
    }, 
    "*": { 
        "pageCache": <?php echo $block->getPageCacheConfig(); ?> 
    } 
} 
</script> 

You can use the declarative way for the passage of backend parameters, once everything has been processed on the server-side before delivering the response in the template.

The use of the two approaches depends on the scope of the project to which you are working.

With the objective to facilitate the declaration of dependencies in RequireJS, it is possible to create aliases to the files and JavaScript libraries. For this task, Magento works with a standard file called requires-config.js. The requires-config.js file can act at different levels according to the scope of action. For example, the mapping of JavaScript resources used in the native Catalog module is available in the path app/code/Magento/Catalog/view/frontend/requirejs-config.js, as:

var config = { 
    "paths": { 
              "product": "./product/product" 
    } 
}; 

All the modules and themes in the Magento 2 system may have the requirejs-config.js file as a reference to the used libraries. The configuration file always uses the relative path according to the directory. By default, this file is inserted in the directory view/frontend of the modules and themes.

To reference third-party libraries in the requirejs-config.js configuration file, you can use the shim instruction:

var config = { 
 "paths": { 
              "product": "./product/product" 
    }, 
 "shim": { 
    "3-rd-party-plugin": ["jquery"] 
  } 
}; 

If there are different versions of your file or you want more options for a mapping of various resources, you can also use the map instruction:

var config = { 
 map":{ 
        "*":{ 
          "product": "./product/product" 
        } 
    }, 
 "shim": { 
    "3-rd-party-plugin": ["jquery"] 
  } 
};