VueJS block updates

With a client request to be able to create a web site from the channel folders and articles, it provided an opportunity to create a new way to generate web pages:

• Pages are composed of individual HTML blocks, each of with is defined by a set of HTML, CSS and JS files.
• Page layouts (lists of HTML blocks) are stored in Bitbucket as simple YAML files.
• Javascript and HTML block files are downloaded as needed via Websockets.
• All blocks are created as VueJS components.
• Individual channels can use different repositories for page designs.
• Individual users can use different branches of repository.

Here is the block layout for a sample home page:

The current state of the browser is maintained by three variables: pageId, sectionId and articleId. When an article link is clicked, it changes these three variables which triggers a check of the site definition object which comes from the Bitbucket definition of the site. 

In this example, the pageId is changing from "home" to "sideList". Here is the definition of blocks for the "sideList" page:

The browser sees that the "sideListBody.html" and "article.html" blocks do not exist in the page so it makes a request via Websocket to the server:

The JSON responses contain the HTML along with a Javascript modules that contains the VueJS code. These blocks are inserted in to the page using any additional parameters specified in the page YAML definition.

The resulting page:

The benefits of this design include:

• Faster response - lower HTTP overhead since connection is already established.
• Lazy loading - VueJS components are only loaded as needed.
• Better security - administrative components are not loading in browser if not needed reducing exposure of attack vectors.
• Simple page design by blocks using YAML definitions.