MVSimple

A simple and ready-to-use MVC Javascript framework! It's built with vanilla JS, making it easy to use and lightweight to implement!

Install

We strongly recommend to use a blank project that make things easier

git clone [email protected]:gmsarates/mvsimple.git
cd mvsimple
npm install

Or, if you want to, you can start with a fresh project

npm install gmsarates/mvsimple-framework

How to use

This framework tries to simplify the use of MVC with Javascript, without using any template ou framework to render the files, its just HTML, JS & CSS!

The folder structure is simple:

- dist // folder with compiled code
- src
    - app
        - Controllers
        - Models
        - Views
        - routes.js
        - api.js // API routes (back-end)
    - assets
	    - imgs
	    - css
	    - scss 
	    - fonts
	    - [...]
    - index.html // required file where app loads all the framework
    - index.js // required file where app loads all the scripts and styles
- vite.config.js // required file to compile all the stuff

Controllers need to specify a view to render! Every logic necessary in each view should be here, inside the init function Views has the HTML, you can use vars like in Javascript ${var} to pre-render content Models retrieve info from an API. This framework DOES NOT connect to any database.

Tips

Create a new controller

You can easily create a new controller with this command

npx mvsimple make:controller <controller> <view to render>

like:

npx mvsimple make:controller HomeController home

Create a new model

You can easily create a new model with this command

npx mvsimple make:model <model>

like:

npx mvsimple make:model userModel

Include view inside view

You can include multiple views

${include(components/header)}

<h1>Home Page</h1>
<p>Hello World!</p>

Call a function after any view rendered

You can use the option onReady to call any function after a view rendered.

app.onReady = function () {
    FloatingPanel.retrieve();
    // other stuff here
}