I make a small single-page application for android on web technologies (html, css, js). Googling a bit, I found that I could use angular, but I don’t want to use such a tool for the sake of a simple task. I thought about how to make blocks, change them, or use some templates, switch them. How best to implement a SPA?

    1 answer 1

    It's easier nowhere (although you can do without js at all, do display: none to all inactive pages, but this is slightly different, this is an example of native templating) -

     const PageType = { MainPageType: "main", SomePageType: "some", DefaultPageType: "main" }; const mainPageTemplate = () => (`<div class="page"><span>main</span></div>`); const somePageTemplate = () => (`<div class="page"><span>some</span></div>`); const templates = { [ PageType.MainPageType ]: mainPageTemplate, [ PageType.SomePageType ]: somePageTemplate, } const router = { set( routeType ){ document.body.querySelector('main').innerHTML = templates[ routeType ](); } }; router.set( PageType.DefaultPageType ); // navigation document.body.querySelector('.button-group__navbar').addEventListener('click', ({target}) => { if( target.classList.contains( 'button-group__navbar__button' ) ){ router.set( target.dataset.route ) } }); 
     .page { width: 100%; height: 100%; background: tomato; display: flex; justify-content: center; align-items: center; position: absolute; } span { font-size: 5rem; } .button-group__navbar { position: absolute; top: 0; } 
     <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" type="text/css" /> <main></main> <div class="button-group__navbar"> <button class="button-group__navbar__button" data-route="main">main</button> <button class="button-group__navbar__button" data-route="some">some</button> </div>