Used on many projects at ultranoir before React/Vue was cool
minimalist MV framework that manages application state, inspired by bigwheel framework and based on handpicked npm packages : browserify - gulp - page.js - handlebars / mustache - GSAP …
upon route change :
- current view exit : animateOut then remove the view DOM container
- next view enter : loadData (JSON), compileTemplate, ready, preload, animateIn
Rendering is done client side at the moment but allows direct url access.
TODO : server-side rendering
generate static html files during build process, and/or use Mustache templates shared between PHP & Js, enabling server + client side rendering without duplication.
-
Duplicate sources and rename folder.
-
Edit .htaccess RewriteBase to your project folder on line 34
RewriteBase /YourProjectFolder/
- Edit assets/js/app.js _ROOT to your project folder on line 5
window._ROOT = '/YourProjectFolder/';
- Open Terminal and navigate to the project (from finder, drag and drop folder onto terminal application icon). Install project depencies as listed in package.json (requires node and npm to be installed)
npm install
- Run Gulp to do a first build and to launch watchify (instructions listed in gulpfile.js)
gulp
-
Open your project in a browser.
-
Edit any files, and the watchify should rebuild the project automatically (assets/js/bundle.js). If gulpfile.js edited, cancel the process in terminal and relaunch it
ctrl + c gulp