A frameworkless single page application boilerplate.
Note: This project is merely a proof of concept.
A frameworkless single page application boilerplate. LIVE DEMO
NOTE: This is not a Javascript driven framework or templating system, please read the article below to learn how it works.
Learn more about the idea, theory and the implementation of this boilerplate.
yarn
yarn dev
yarn build
to make a single production buildyarn dev
to make a development build, run the server and watch for changesyarn start
to start the serverIn this boilerplate all the imports of styles, scripts, data and routing are based on the file system structure which means the folder/file structure you choose for your html templates defines the routes and they need to be consistent in styles, scripts and data folders.
?{extend-path/to/template}?
?{content}?
in the intended place in parent.?{content-template-name}?
?{content}?
in the parent template.Initialization: In order to initialize the client side routing we should import router from /scripts/helpers/router
and run the function with the options object. i.e. router(options)
router({
delay: 0, // the delay to load the new route. gives us time to animate the page offload
routeWillChange: () => {}, // this function will run before every route change
routeDidChange: () => {}, // this function will run after every route change
});
routerTransition Hook: This method exposes two events to us, the page load and the page offload. The function we pass to it is what runs on page load and the function it returns is what runs right before page offload.
routerTransition(() => {
console.log('page loaded');
return () => {
console.log('page offloading');
};
});
routeTo Hook: This method exposes the route change functionality in order to change the route from a JS script. The first argument is the new route and the second argument is a boolean called noPush that if you pass true it will not push the route to the history. It's useful for going back a route and mimicking the browser back button. The default value of noPush is false.
routeTo('/new-route', false);
This project is licensed under the MIT License.