{"id":10398,"date":"2025-10-17T09:32:31","date_gmt":"2025-10-17T09:32:30","guid":{"rendered":"https:\/\/namastedev.com\/blog\/?p=10398"},"modified":"2025-10-17T09:32:31","modified_gmt":"2025-10-17T09:32:30","slug":"build-a-simple-spa-without-a-framework","status":"publish","type":"post","link":"https:\/\/namastedev.com\/blog\/build-a-simple-spa-without-a-framework\/","title":{"rendered":"Build a Simple SPA Without a Framework"},"content":{"rendered":"<h1>Build a Simple SPA Without a Framework<\/h1>\n<p>Single Page Applications (SPAs) have gained immense popularity due to their smooth user experience and fast performance. While frameworks like React, Vue, or Angular make building SPAs easier, it\u2019s entirely possible to create a simple SPA without relying on heavy frameworks. In this article, we will explore how to build a basic SPA using vanilla JavaScript, HTML, and CSS.<\/p>\n<h2>What is a Single Page Application (SPA)?<\/h2>\n<p>A Single Page Application is a web application that interacts with the user dynamically by rewriting the current page rather than loading entire new pages from the server. SPAs load a single HTML page and update the content dynamically through JavaScript, which makes them feel more like desktop applications.<\/p>\n<h2>Why Build an SPA Without a Framework?<\/h2>\n<p>Using frameworks can expedite development significantly, but there are reasons you might choose to build an SPA without one:<\/p>\n<ul>\n<li><strong>Learning Opportunity:<\/strong> Building an SPA from scratch helps you understand the underlying mechanics of the web.<\/li>\n<li><strong>Performance:<\/strong> A lightweight solution may offer better performance for small projects.<\/li>\n<li><strong>Less Overhead:<\/strong> There&#8217;s less overhead and fewer dependencies, which can simplify maintenance.<\/li>\n<\/ul>\n<h2>Setting Up Your HTML Structure<\/h2>\n<p>First, we\u2019ll create a simple HTML structure. This will include a header, a navigation bar, and a main content area where we will inject our content dynamically.<\/p>\n<pre><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;title&gt;Simple SPA Without Framework&lt;\/title&gt;\n    &lt;link rel=\"stylesheet\" href=\"styles.css\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;header&gt;\n        &lt;h1&gt;My Simple SPA&lt;\/h1&gt;\n        &lt;nav&gt;\n            &lt;ul&gt;\n                &lt;li&gt;&lt;a href=\"#\" id=\"home\"&gt;Home&lt;\/a&gt;&lt;\/li&gt;\n                &lt;li&gt;&lt;a href=\"#\" id=\"about\"&gt;About&lt;\/a&gt;&lt;\/li&gt;\n                &lt;li&gt;&lt;a href=\"#\" id=\"contact\"&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\n            &lt;\/ul&gt;\n        &lt;\/nav&gt;\n    &lt;\/header&gt;\n    &lt;main id=\"content\"&gt;&lt;\/main&gt;\n    &lt;script src=\"app.js\"&gt;&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<h2>Styling Your Application<\/h2>\n<p>Next, let\u2019s add some CSS to style our SPA. Create a file named <strong>styles.css<\/strong> with the following styles:<\/p>\n<pre><code>body {\n    font-family: Arial, sans-serif;\n    margin: 0;\n    padding: 0;\n}\n\nheader {\n    background-color: #4CAF50;\n    color: white;\n    padding: 10px 20px;\n    text-align: center;\n}\n\nnav ul {\n    list-style-type: none;\n    padding: 0;\n}\n\nnav ul li {\n    display: inline;\n    margin-right: 15px;\n}\n\nmain {\n    padding: 20px;\n}\n<\/code><\/pre>\n<h2>JavaScript to Control Navigation<\/h2>\n<p>Now that we have our basic HTML and CSS set up, let\u2019s create the functionality using JavaScript. Create a file named <strong>app.js<\/strong> and add the following code:<\/p>\n<pre><code>document.addEventListener('DOMContentLoaded', function () {\n    const contentDiv = document.getElementById('content');\n\n    function loadContent(page) {\n        switch (page) {\n            case 'home':\n                contentDiv.innerHTML = '&lt;h2&gt;Home&lt;\/h2&gt;&lt;p&gt;Welcome to the home page!&lt;\/p&gt;';\n                break;\n            case 'about':\n                contentDiv.innerHTML = '&lt;h2&gt;About&lt;\/h2&gt;&lt;p&gt;Learn more about us on this page.&lt;\/p&gt;';\n                break;\n            case 'contact':\n                contentDiv.innerHTML = '&lt;h2&gt;Contact&lt;\/h2&gt;&lt;p&gt;Get in touch with us!&lt;\/p&gt;';\n                break;\n            default:\n                contentDiv.innerHTML = '&lt;h2&gt;404 Not Found&lt;\/h2&gt;&lt;p&gt;Page not found.&lt;\/p&gt;';\n        }\n    }\n\n    \/\/ Event listeners for navigation\n    document.getElementById('home').addEventListener('click', function (e) {\n        e.preventDefault();\n        loadContent('home');\n    });\n\n    document.getElementById('about').addEventListener('click', function (e) {\n        e.preventDefault();\n        loadContent('about');\n    });\n\n    document.getElementById('contact').addEventListener('click', function (e) {\n        e.preventDefault();\n        loadContent('contact');\n    });\n\n    \/\/ Load the home page by default\n    loadContent('home');\n});<\/code><\/pre>\n<h2>Understanding the Code<\/h2>\n<p>Let\u2019s break down the JavaScript:<\/p>\n<ul>\n<li>We\u2019re using <strong>document.addEventListener<\/strong> to ensure that our code runs after the document is fully loaded.<\/li>\n<li>The <strong>loadContent<\/strong> function replaces the inner HTML of the <code>content<\/code> div with specific content based on the page requested.<\/li>\n<li>Event listeners are added to each navigation link to prevent the default behavior and trigger dynamic content loading instead.<\/li>\n<\/ul>\n<h2>Enhancing the User Experience<\/h2>\n<p>To create a more engaging SPA, you might want to implement the following enhancements:<\/p>\n<ul>\n<li><strong>Loading Indicators:<\/strong> Show a loader while fetching resources.<\/li>\n<li><strong>Browser History Management:<\/strong> Use <code>history.pushState<\/code> to manage browser history.<\/li>\n<li><strong>Animations:<\/strong> Add CSS transitions for smoother content changes.<\/li>\n<\/ul>\n<h2>Using Browser History for Navigation<\/h2>\n<p>To make your SPA behave like a traditional web application in terms of browser navigation, you can use the <code>history.pushState<\/code> method. Here\u2019s how to implement it:<\/p>\n<pre><code>document.getElementById('home').addEventListener('click', function (e) {\n    e.preventDefault();\n    loadContent('home');\n    history.pushState({ page: 'home' }, 'Home', '?page=home');\n});\n\ndocument.getElementById('about').addEventListener('click', function (e) {\n    e.preventDefault();\n    loadContent('about');\n    history.pushState({ page: 'about' }, 'About', '?page=about');\n});\n\ndocument.getElementById('contact').addEventListener('click', function (e) {\n    e.preventDefault();\n    loadContent('contact');\n    history.pushState({ page: 'contact' }, 'Contact', '?page=contact');\n});\n\n\/\/ Handle popstate event\nwindow.addEventListener('popstate', function (event) {\n    if (event.state) {\n        loadContent(event.state.page);\n    }\n});\n<\/code><\/pre>\n<h2>Conclusion<\/h2>\n<p>Creating a Single Page Application without a framework not only enhances your understanding of core web technologies but also offers flexibility and control over your project. By following the steps outlined in this article, you have built a basic SPA that can be expanded to include any additional functionality or styling you wish.<\/p>\n<p>Whether you&#8217;re a beginner looking to enhance your skills or an experienced developer wanting to have more control over your app, building a simple SPA from scratch can be both fulfilling and educational.<\/p>\n<h2>Next Steps<\/h2>\n<p>Now that you&#8217;ve created your simple SPA, consider exploring the following topics to enhance your application:<\/p>\n<ul>\n<li>Integrate with a backend using AJAX or Fetch API<\/li>\n<li>Add routing (perhaps with custom URL parameters)<\/li>\n<li>Utilize local storage for persistent data<\/li>\n<\/ul>\n<p>Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Build a Simple SPA Without a Framework Single Page Applications (SPAs) have gained immense popularity due to their smooth user experience and fast performance. While frameworks like React, Vue, or Angular make building SPAs easier, it\u2019s entirely possible to create a simple SPA without relying on heavy frameworks. In this article, we will explore how<\/p>\n","protected":false},"author":185,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[203],"tags":[386],"class_list":{"0":"post-10398","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-web-development","7":"tag-web-development"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/10398","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/users\/185"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=10398"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/10398\/revisions"}],"predecessor-version":[{"id":10399,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/10398\/revisions\/10399"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=10398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=10398"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=10398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}