Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/amin52j/frameworkless-spa

A frameworkless single page application boilerplate.
https://github.com/amin52j/frameworkless-spa

babel boilerplate boilerplate-application boilerplate-front-end boilerplate-template frameworkless javascript mustache node nodejs sass scss seo-friendly server-side-rendering single-page-app single-page-applications spa template webpack

Last synced: about 3 hours ago
JSON representation

A frameworkless single page application boilerplate.

Awesome Lists containing this project

README 

        
**Note:** This project is merely a proof of concept.



# Frameworkless-SPA



A frameworkless single page application boilerplate. [**LIVE DEMO**](http://movie-collection.amin52j.com)



- **Super lightweight:** Only 1.2 KB gzipped Javascript overhead.

- **SEO Friendly:** 100% SEO friendly with complete SSR (no workarounds, just the simple fetch and serve).

- **Easy to use:** Nothing more than the old HTML and CSS development that we all first started with.

- **Full control:** Using this boilerplate and/or terminology we have full control over what and how we wanna implement things and what technologies and environments we wanna work with.

- **High performance:** Nothing beats the power and performance of Vanilla JS, HTML and CSS.

- **Extendible:** You can easily twist and extend this boilerplate and/or terminology to any extent that your mind and needs go which means you can easily use any kind of libraries like state managers (e.g. redux) or DOM Manipulators (e.g. jQuery).

- **File System Routing:** 100% file system routing support for all your pages and scripts. You never need to worry about routing and route handling.



**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](https://medium.com/@a.jafari.90/framework-less-single-page-application-a547325f6e0c).



## Technologies



- **babel:** to transpile our ES6-7

- **cssnano:** to not worry about the prefixes and css code performance

- **eslint:** to have linting utility over our code

- **express:** to get our server up and running (can be replaced by any backend languages or technologies)

- **mustache:** as our html template generator (can be replaced by any templating systems for any languages)

- **prettier:** to apply linting and code styling to our code

- **SCSS:** to style our project

- **webpack:** as our module bundler



## How to start?



- Clone the project

- `yarn`

- `yarn dev`

- visit [localhost:3000](http://127.0.0.1:3000)



## Scripts



- `yarn build` to make a single production build

- `yarn dev` to make a development build, run the server and watch for changes

- `yarn start` to start the server



## Docs



### File System Routing and File System Templating



In 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.



### HTML Templating



- **Extend:** In order to extend the styles and scripts of a template in another template we add the following command to the beginning of the template `?{extend-path/to/template}?`

- **Partial Render:** In order to render a template into a certain place in the parent template, we use `?{content}?` in the intended place in parent.

- **Route Specific Partial Render:** In order to do a parital render just for a specific sub-page we use `?{content-template-name}?`

- **Full Page Render:** If we want the sub-page to replace the parent page, we should leave out `?{content}?` in the parent template.



### Client-Side Route Handling



**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)`



```js

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.



```js

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. 



```js

routeTo('/new-route', false);

```



## License



This project is licensed under the [MIT License](https://github.com/Amin52J/frameworkless-spa/blob/master/LICENSE).