Skip to content

Adopt Vue Router on Static Site Editor

Summary

Use VueRouter in the Static Site Editor for view transitions and URL routing.

Benefits

  • Less bandwidth usage on view transitions.
  • Out of the box state machine style architecture to handle complex UI workflows
  • Better suited for testing.

Architecture

These models display how routing works from several perspectives: What the actual URLs look like, what components we will implement, and how routes interact with each other. This design is heavily inspired in the design management and Web IDE apps routing designs.

Route pattern

gitlab.com/[namespace]/[project]/-/sse/[editable]/-/(*vueroute)

  • Home: gitlab.com/[namespace]/[project]/-/sse/[editable]/-/
  • Success: gitlab.com/[namespace]/[project]/-/sse/[editable]/-/success

Required backend changes

The way VueRouter + Rails integration works is by using route globbing to delegate part of the URL path processing to the client, for example: The Web IDE and design management app routes. This design decision conflicts with the Static Site Editor route configuration because we can’t put one globbing pattern after the other.

Considering that, we should evaluate moving file validation to a separate endpoint or other actions that can solve this problem.

Components

Highlight: Pages serve as smart components and create a bridge between state management and reusable components.

Static_Site_Editor_Vue_Router_specs_1_

Routes interaction

These are sequence diagrams that demonstrate how the store, pages, and the router interact in two use cases.

Changes were saved successfully

Display the success page when changes are submitted successfully.

sequenceDiagram
  Home->>Store: submit changes
  Store-->>Home: changes saved successfully 🎉
  Home->>Router: push({ name: 'success' })

Tasks

Edited by Enrique Alcántara