You are viewing our Forum Archives. To view or take place in current topics click here.
Made a JS script for fast page loading.
Posted:

Made a JS script for fast page loading.Posted:

CriticaI
  • Shoutbox Hero
Status: Offline
Joined: Nov 05, 201310Year Member
Posts: 2,737
Reputation Power: 448
Status: Offline
Joined: Nov 05, 201310Year Member
Posts: 2,737
Reputation Power: 448
Simple Preloaded SPA w/ Pages

Render pages in the background & navigate site without redirecting. Uses native JS & HTML meta tags.


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


<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Preload</title>
    <link rel="stylesheet" href="css/main.css">
    <meta property="sniddl:page" name="index" content="views/home.html">
    <meta property="sniddl:page" name="card" content="views/card.html">
    <meta property="sniddl:page" name="photos" content="views/photos.html">
    <meta property="sniddl:page" name="pricing" content="https://gist.githubusercontent.com/ZebTheWizard/6fb1a7f448b3cdfd11901325a18147be/raw/0dda02be4b9bcdf498c8b9a3b6f749581afc7d4a/example%20pricing%20page">
  </head>
    <body>
      <div id="app"></div>
      <!-- Script tag goes here. TTG won't let me include it. -->
    </body>
</html>


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

npm install --save sniddl-spa
...
require('sniddl-spa')


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

<meta property="sniddl:page" name="index" content="/views/home.html">

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

<meta property="sniddl:page" name="index" content="/views/home.html">

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.

$params = ["user", "john"]
$page = {name: 'home', el: <Element>}

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

reloadPagesFromMeta(() => {
  console.log('pages have loaded');
})
...
reloadPagesFromMeta()
window.onPagesReloaded = function () {
  console.log('pages have loaded')
}


Use Cases


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

The following 1 user thanked CriticaI for this useful post:

Deftones (05-25-2018)
#2. Posted:
Cyimking
  • V5 Launch
Status: Offline
Joined: May 02, 201211Year Member
Posts: 1,129
Reputation Power: 34
Status: Offline
Joined: May 02, 201211Year Member
Posts: 1,129
Reputation Power: 34
This is cool. How does this compare to ReactJS?
#3. Posted:
Gavin-
  • TTG Fanatic
Status: Offline
Joined: Nov 02, 201310Year Member
Posts: 4,340
Reputation Power: 1865
Status: Offline
Joined: Nov 02, 201310Year Member
Posts: 4,340
Reputation Power: 1865
Man Thats really neat and fast loading times. At my work we are going to be learning a new language as part of a re branding. Which do you prefer React or Vue.
#4. Posted:
CriticaI
  • Blind Luck
Status: Offline
Joined: Nov 05, 201310Year Member
Posts: 2,737
Reputation Power: 448
Status: Offline
Joined: Nov 05, 201310Year Member
Posts: 2,737
Reputation Power: 448
Cyimking wrote This is cool. How does this compare to ReactJS?

It works well along side react. It kind of an alternative to react-router because it's easier to use.

Gavin- wrote Man Thats really neat and fast loading times. At my work we are going to be learning a new language as part of a re branding. Which do you prefer React or Vue.


I personally like Vue more because it's based on HTML syntax and everything operates in it's own scope. Even css/sass!
Jump to:
You are viewing our Forum Archives. To view or take place in current topics click here.