But how do you handle the encapsulation of views? If I am working on a React app...

But how do you handle the encapsulation of views? If I am working on a React app and I want to add a new interface, say a simple view that displays a record and has some controls on the left side, I might write something like this:

  <Panel>  
    <Left>  
       <ControlPanel record={record} />  
    </Left>  
    <Right>  
       <RecordView record={record} />  
    </Right>  
  </Panel>

This view would be injected into the frame of the app that already has a navbar and footer, the layout would be pre-built via my panel components Left and Right, and if I want to change the control-panel I can go to that file and make any changes I want so long as the API stays the same. Similarly, if the schema changes and we need to update the way we display records, I would go to the RecordView component and change it because it is a decoupled module. I just don't see how you can accomplish this with vanilla HTML and JS.