Hi friends,
Just wanted to talk about a nice little trick, you might know. When building UI for applications, I like to go vanilla and skip on most frameworks and other stuff and just write what I need.
When creating UI in Javascript, you have many frameworks to choose between, some good, some bad, some evil and some just difficult, to wrap your head around.
I begin my pages with a map of states StartPage, FooPage, BarPage, then I have my
let states = Object.freeze({
StartPage: "startpage",
FooPage: "foopage",
BarPage: "barpage",
});
(async function() {
})()
where I add the next blob of text
document.addEventHandler("stateChange", (evt) => {
let state = evt.detail;
(async function() {
switch (stat.nextState) {
case states.StartPage:
await startpage(state);
break;
case states.FooPage:
await foopage(state);
break;
default:
console.error("handling unknown state", state.nextState);
}
})()
});
Then I begint to flesh out each page, mind you this is still a single page application, all we do is adding some sections with an ID, and then show and hide in each state.
I find this a very easy and controlled way to show and manage the events on each view/page.
Please look at the reference Gitlab Pipeline Viewer, where I use this technique.