About / Idea

---

When developing electron applications I noticed there wasn't a good way to navigate pages. Either you link pages using urls which cause the page to refresh. Or you use a framework like Vue or React then install a router package. This was frustrating because sometimes installing a JS framework is overkill. I don't need state management, custom components, or data binding. All I want to do is link pages together without refreshing the page. So I created a solution.

The idea is you have an index page. This page is very minimal. It contains your head tags, and an empty div to hold your views. You want to minimize the time it takes to download the page and start running JavaScript as fast as possible. Then all your views will be stored in separate files. The only thing required in these files is your content. You already typed out your head tags, no need to type them again. Link to an example of a view. Example of minimal index page (below):

With this concept you are able to load the DOM much faster than static web pages. In the example project I'm able to load the DOM in under 1 second! Keep in mind this is from an external web server without caching. Then all the pages silently load in the background using ajax. The cached version is around 200ms.

[ Register or Signin to view external links. ]



Notice the meta tags. They all have the property sniddl:page . This allows us to find all the pages. Next, the name is used to define the url. For instance, the pricing page can be accessed using the /#/pricing url. Finally, the content defines the location of the file. You can also use a fully qualified url. For example if you hosted your pages on a CDN.

That is it. You can get by with just that set up. I did leave some remove for customization though so keep reading if you're interested. Also if you pair this with a JS framework like VueJS you can mount the div#app element to add features like two-way binding.

Installation

---

Or download [ Register or Signin to view external links. ] and add it to your public folder.

Examples

---

I created an example website. It only took about 10-20 minutes to complete the whole thing. [ Register or Signin to view external links. ] Notice how the url changes when you change page. This allows you to link users to a specific page like a normal website. If the page does not exist then a 404 appears. Also notice the time it takes to load the DOM completely.

Customize

---

CSS
All the pages either have a class of page-hidden or page-visible customize those any way you want.

Set The Home Page
Set the home page by setting the corresponding meta tag's name to index


Set the 404 Page
Set the 404 page by setting the corresponding meta tag's name to 404


Info about the current page
All info about the current page can be accessed by the global $page variable

Url Parameters
Build dynamic pages using the parameters passed by the URL. Use the global $params variable to access them. For example: Visiting the urlhttps://example.com/home/user/john would result in the following.


Get loaded pages
All the pages loaded into the DOM can be accessed with the global $pages variable.

Pages Reloaded
You can reload all the pages based on which meta tags are preset. This would be useful if you need to dynamically change the pages. You can call the reloadPagesFromMeta function which has a callback for when the pages are done loading. If you don't want to use a callback you can also use the global function onPagesReloaded



Use Cases

---

* Electron Apps
* Fast loading web pages (w/out 3rd party ads)
* JS framework routing