Single Page Application Without a Popular Framework like Vue, React or Angular
Hello hello hello, as a web developer it is a must to understand the working principles of client-side applications. Three months ago I made a SPA template to start a SPA client application project. You may find it here. I did it to understand the principles of SPA applications. I tried to use my template for a real-life hobby project then I realized SPA front-end development without Angular, React or Vue was huge freedom. These frameworks are great most of the time but all the dependencies coming with these frameworks causes a lot of problems too.
If you want to get how SPA applications work check out this and my SPA template. I will try to explain some concepts from the SPA template as much as I can. We can start without NodeJS entry point, below you can find inside of server.js
const port = process.env.PORT || 3000,
express = require("express"),
app = express(),
path = require("path");
app.use("/", express.static(path.resolve(__dirname, "dist")));
app.get("/*", (req, res) => {
res.sendFile(path.resolve(__dirname, "dist", "index.html"));
});
app.listen(port, () => console.log("Vanilla is running on port ::: " + port));The required functions in the first four-line are imports of libraries. We need to install the express library with the command “npm install express”. Since the path is a built-in library, we don't need to install it.
We will be serving all the files under the “dist” directory. “dist” is a directory containing the resulting output of our NodeJS application. Here we are using NodeJS only to get the output result under “dist”. And with app.get command we are redirecting any request to index.html which is the initiator of our client-side application.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="icon" type="image/svg+xml" href="/img/favicon.svg">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<main>
<section id="app"></section>
</main>
</body>
</html>This above is out ejs file. Our webpack config using this file to create the index.html under the dist directory. Under webpack directory there is the config file it does the magic and put all the necessary files under dist directory it writes all Javascript classes under an index.js file all logic we wrote is on this single file.
import ExampleHome from "./main/view/ExampleHome";
const routes = [
{path: "/", view: ExampleHome}
];In app/index.js you can find routing logic and you can add additional routes as much as you want.
If you clone my repository
git clone https://github.com/ekingunoncu/vanillacd vanillanpm run start
You will realize whenever you change the files project rebuild itself and overwrite the dist directory. I use the watch library to achieve this behavior. On localhost:3000 you can reach the sample app. I made an API call as an example.
API pulls count of people in the space right now.
But it is possible to make much more complex systems with my template. I and friends of mine Doğukan Elbasan and Oğuzhan Özben did a video-call application using this template without using a framework.
