SPAC: Controller Implementation

Designing the Controller

  • Self initializing, single point of entry: The controller is the only JavaScript module that you need to load with a <script> tag from your index.html. From thereon, it handles the loading and unloading of all other JavaScript functions that are needed for the application.
  • Rendering Pages: The controller uses page classes for delivering the HTML to the clients. Pages expose a display() method that will render HTML and attach the output to the DOM. Pages themselves consist of static HTML and components that are added via mount().
  • Handling Actions: Actions are client-side external interactions like calling a backend or an external API. An action receives an args object and a updateState callback that receives the result of the action.

Self-Initialization

  1. Create a script for loading the controller, e.g. in js/app.js
// js/app.js
import { Controller } from 'spacjs';
const controller = new Controller();controller.init();
<script src="js/controller.js" type="module"></script>

Render Pages

.
└── pages
├── IndexPage.js
├── SearchApiElementsPage.js
└── SearchApiSpecPage.js
const pages = {
Index: {
route: '/index',
obj: IndexPage()
},
SearchApiElements: {
route: '/search_api_elements',
obj: SearchApiElementsPage()
},
SearchApiSpec: {
route: '/search_api_spec',
obj: SearchApiSpecPage()
}
}

Handling Actions

const actions = {
loadAPI: {
obj: LoadApiAction()
}
}
this.controller.action('loadAPI', {state: this.getState()}

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store