Odoo provides an automatic way for "frontend" widgets to be automatically attached to elements (DOM nodes) defined in your templates (and in fact defined anywhere, not just your templates). Here's a minimal example - let's assume we want a component, which renders the current date:

views/assets.xml

<odoo>
  <template id="assets_frontend" inherit_id="web.assets_frontend" name="Test assets">
    <xpath expr="//script[last()]" position="after">
      <script type="text/javascript" src="/my_module/static/src/js/current_date.js"/>
    </xpath>
  </template>
</odoo>

views/templates.xml

<odoo>
  <template id="test_page" name="Test Page">
    <t t-call="website.layout">
      <div id="my-container">
        Some content        
        <span class="current-date"> Today is: <span/> </span>
      </div>
    </t>
  </template>
</odoo>

static/src/js/current_date.js

odoo.define('my_module.current_date', function (require) {
  var publicWidget = require('web.public.widget');
  publicWidget.registry.current_date = publicWidget.Widget.extend({

    selector: '.current-date',

    start: function (parent) {
      this._renderDate();
    },

    // Renders date in M/D/YY format
    _renderDate: function() {
      var now = new Date();
      var formatted = [
        (now.getMonth() + 1),
        now.getDate(),
        now.getFullYear() - 2000
      ].join('/');
      this.$('span').text(formatted);
    }
  });
  return publicWidget.registry.current_date;
});

We create subclass of a PublicWidget, which has ability to automatically attach instances of itself to arbitrary html elements defined by the "selector". It's important to consider selector specificity: here, our  current_date widget will be attached to ANY element which has a "current-date" CSS class. If we wanted to make sure it's only attached to instances of this template, we could say:

selector: "#my-container .current-date"

Hope this helps!