This content originally appeared on DEV Community and was authored by Arpit
Yep, Another JavaScript Framework in the Market — But Not Based on React for Once :)
If you’re someone who loves the simplicity of VanillaJS, this framework is for you.
A framework that’s lightweight, easy to grasp, and doesn’t require building or compiling. Enter Pre-ReactJS — a new framework designed with VanillaJS enthusiasts in mind.
Documentation: https://pre-reactjs-docs.vercel.app/
GitHub: https://github.com/arpit078/pre-reactjs
NPM: https://www.npmjs.com/package/pre-reactjs
What is Pre-ReactJS?
Pre-ReactJS is a lightweight frontend framework specifically crafted for building Single Page Applications (SPAs) using nothing but VanillaJS, HTML, and CSS. It’s the perfect choice for developers who want the structure and conveniences of a framework without the heavy abstractions and complexities that often come with them.
Why Another Framework?
You might be wondering, “Why create another JavaScript framework when there are already so many?” The answer lies in the simplicity and focus of Pre-ReactJS. Many modern frameworks, while powerful, can feel overwhelming for developers who just want to build something straightforward without a steep learning curve. Pre-ReactJS is built for those who appreciate the elegance of writing plain JavaScript and want to leverage a framework that enhances rather than complicates their workflow.
Getting Started
Getting started with Pre-ReactJS is a breeze. Here’s how you can set up your first project:
Installation
First, install the package via npm and create your new project:
npm install pre-reactjs
npx create-pre-react-app my-app
cd my-app
npm install
Development
To start the development server with hot-reloading, simply run:
npm run dev
This command launches your application using nodemon, which automatically restarts the server whenever changes are detected.
Production
When you’re ready to go live, running your application in production mode is just as simple — no build step involved as it is already HTML, CSS, and JS:
npm start
And that’s it! You’re all set to start building with Pre-ReactJS. Dive into the Pages/ directory to edit your files or experiment with the logic scripts in the Logic/ directory.
Behind the Scenes
If you’re curious about how Pre-ReactJS works under the hood, let’s take a quick look at the four key scripts that power the framework:
server.js:
This is the entry point of the application. It’s a file server written with ExpressJS that returns the same index.html for every incoming request. It also calls the compiler function to create file-based routes whenever the server is restarted.
scripts/router.js:
This file manages all the routing within your application. Added as a script tag in your app, it monitors changes in the window location history and handles all the HTML changes accordingly.
scripts/loader.js:
The loader script is responsible for loading all the page HTML once the application is initialized. It stores the HTML content in the browser’s session storage for quick access.
scripts/compile.js:
While it doesn’t compile in the traditional sense, this script dynamically creates the loader and router scripts based on the files present in the Pages and Logic directories.
Why You’ll Love It
Pre-ReactJS isn’t just another framework; it’s a return to the basics. It’s a tool that embraces the simplicity of VanillaJS while providing a structured approach to building SPAs. Whether you’re a seasoned developer or just starting out, Pre-ReactJS offers a refreshing alternative to the complexity of modern frameworks.
So, if you’re a VanillaJS enthusiast or someone looking for a minimalist approach to frontend development, give Pre-ReactJS a try. It’s lightweight, straightforward, and most importantly, it keeps you close to the core of JavaScript.
Happy coding! 🎉
This content originally appeared on DEV Community and was authored by Arpit
Arpit | Sciencx (2024-08-15T19:49:28+00:00) I created yet another Javascript Framework but for the VanillaJS folks :). Retrieved from https://www.scien.cx/2024/08/15/i-created-yet-another-javascript-framework-but-for-the-vanillajs-folks/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.