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:
Status: Offline
Joined: Nov 05, 201311Year Member
Posts: 2,753
Reputation Power: 452
Status: Offline
Joined: Nov 05, 201311Year Member
Posts: 2,753
Reputation Power: 452
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. ]
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
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:
Status: Offline
Joined: May 02, 201212Year Member
Posts: 1,129
Reputation Power: 34
Status: Offline
Joined: May 02, 201212Year Member
Posts: 1,129
Reputation Power: 34
This is cool. How does this compare to ReactJS?
- 1useful
- 0not useful
#3. Posted:
Status: Offline
Joined: Nov 02, 201311Year Member
Posts: 4,340
Reputation Power: 1865
Status: Offline
Joined: Nov 02, 201311Year 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.
- 1useful
- 0not useful
#4. Posted:
Status: Offline
Joined: Nov 05, 201311Year Member
Posts: 2,753
Reputation Power: 452
Status: Offline
Joined: Nov 05, 201311Year Member
Posts: 2,753
Reputation Power: 452
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!
- 1useful
- 0not useful
You are viewing our Forum Archives. To view or take place in current topics click here.