nitowa
/
tur-shoutbox
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

optimize webpack bundling, minimize gateway JS

master
nitowa 3 years ago
parent
3175b262c2
commit
a4b9635ee7
6 changed files with 46 additions and 18 deletions
Unified View Show Diff Stats
  1. 32
    0
      README.md
  2. 1
    0
      gateway/index.html
  3. 8
    7
      package-lock.json
  4. 2
    2
      package.json
  5. 0
    5
      src/Browser.ts
  6. 3
    4
      src/Gateway.ts

+ 32
- 0
README.md View File

1 
+# Overview
2 
+
3 
+httXrp is a proof of concept for a truly serverless web architecture. If serverless simply means "a server owned by someone else", httXrp pushes that definition to its limit.
4 
+
5 
+# How it works
6 
+
7 
+## 1: Getting data into and out of the blockchain
8 
+
9 
+Transactions on the ripple blockchain are allowed to carry up to 1kB of arbitrary data via the memo field.
10 
+We can use this to store data of any size by building a tree of references between these transactions that can then be reassembled by reading them back from the blockchain.
11 
+In order to generate these transactions a library called [xrpio](https://gitea.nitowa.xyz/npm-packages/xrpio.git) is used.
12 
+
13 
+Highly simplified, you can visualize the process like this:
14 
+
15 
+![xrpio treewrite](https://i.imgur.com/G2HofSE.gif)
16 
+
17 
+## 2: Abstracting the webserver away from the web
18 
+
19 
+Using tools like `webpack`, it is possible to condense even modern complex single-page-applications into a single html file. As `xrpio` is written in JavaScript, it is even possible to embed it into such an HTML file, the use of which will become more clear a few paragraphs below.
20 
+
21 
+Since such a condensed HTML file is effectively nothing more than a long string it is possible to use `xrpio` to store them into the ripple blockchain and to retrieve them via a single identifying hash.
22 
+
23 
+![Webserverless web](https://i.imgur.com/Y0TgzVi.gif)
24 
+
25 
+## 3: Dynamic web applications without a backend
26 
+
27 
+Superficially, this technique is limited to serving static webpages, as there is no *real* backend serving these pages. However, since it is possible to embed `xrpio` into such a "static" page, it is possible to listen for transactions on the Ripple blockchain containing valid xrpio hashes and to dynamically update the webpage's content based on the stored data.
28 
+
29 
+# Credits
30 
+
31 
+- This project was originally inspired by indImm (https://ndm-inf.github.io/ndm/main), a ripple-based file storage using IPFS.
32 
+- xrpio (https://gitea.nitowa.xyz/npm-packages/xrpio.git) is heavily used in the technical architecture of this project. It is also written and maintained by me.

+ 1
- 0
gateway/index.html View File

5 
   <script src="https://bundle.run/buffer@6.0.3"></script>
 5 
   <script src="https://bundle.run/buffer@6.0.3"></script>
6 
   <script src="https://cdn.jsdelivr.net/npm/ripple-lib@1.10.0/build/ripple-latest-min.min.js"></script>
 6 
   <script src="https://cdn.jsdelivr.net/npm/ripple-lib@1.10.0/build/ripple-latest-min.min.js"></script>
7 
   <script src="https://cdn.jsdelivr.net/npm/xrpl@2.1.1"></script>
 7 
   <script src="https://cdn.jsdelivr.net/npm/xrpl@2.1.1"></script>
8 
+  <script src="https://cdn.jsdelivr.net/npm/xrpio@0.1.7/lib/browser/xrpio.browser.js"></script>
8 
 </head>
 9 
 </head>
9 
 <body>
 10 
 <body>
10 
   Loading ...
 11 
   Loading ...

+ 8
- 7
package-lock.json View File

9 
       "version": "1.0.0",
 9 
       "version": "1.0.0",
10 
       "license": "ISC",
 10 
       "license": "ISC",
11 
       "dependencies": {
 11 
       "dependencies": {
12 
+        "buffer": "^6.0.3",
12 
         "chai": "^4.3.4",
 13 
         "chai": "^4.3.4",
13 
         "node-fetch": "^2.6.1",
 14 
         "node-fetch": "^2.6.1",
14 
-        "xrpio": "^0.1.6",
15 
+        "xrpio": "^0.1.7",
15 
         "xrpl": "^2.6.0-beta.0"
 16 
         "xrpl": "^2.6.0-beta.0"
16 
       },
 17 
       },
17 
       "devDependencies": {
 18 
       "devDependencies": {
3684 
       }
 3685 
       }
3685 
     },
 3686 
     },
3686 
     "node_modules/xrpio": {
 3687 
     "node_modules/xrpio": {
3687 
-      "version": "0.1.6",
3688 
-      "resolved": "https://registry.npmjs.org/xrpio/-/xrpio-0.1.6.tgz",
3689 
-      "integrity": "sha512-SHm3NfrRv9i82OWrUdyB+Djn0Zr6qwwMfs/wemNR1pf2ajorfiOPpWnvKQTgAZcfgS2DliIfMuF8nRiqfXlmmg==",
3688 
+      "version": "0.1.7",
3689 
+      "resolved": "https://registry.npmjs.org/xrpio/-/xrpio-0.1.7.tgz",
3690 
+      "integrity": "sha512-X/Hxlf31KC1OONq7NYQ518Esd8LHYpyc/RFN9F1J9Nr8WEjgz/XaJDR4IakV7MrNeC3uIRz6/qGFPFWHw2Rr+g==",
3690 
       "dependencies": {
 3691 
       "dependencies": {
3691 
         "ripple-lib": "^1.10.0",
 3692 
         "ripple-lib": "^1.10.0",
3692 
         "xrpl": "^2.1.1"
 3693 
         "xrpl": "^2.1.1"
6717 
       "requires": {}
 6718 
       "requires": {}
6718 
     },
 6719 
     },
6719 
     "xrpio": {
 6720 
     "xrpio": {
6720 
-      "version": "0.1.6",
6721 
-      "resolved": "https://registry.npmjs.org/xrpio/-/xrpio-0.1.6.tgz",
6722 
-      "integrity": "sha512-SHm3NfrRv9i82OWrUdyB+Djn0Zr6qwwMfs/wemNR1pf2ajorfiOPpWnvKQTgAZcfgS2DliIfMuF8nRiqfXlmmg==",
6721 
+      "version": "0.1.7",
6722 
+      "resolved": "https://registry.npmjs.org/xrpio/-/xrpio-0.1.7.tgz",
6723 
+      "integrity": "sha512-X/Hxlf31KC1OONq7NYQ518Esd8LHYpyc/RFN9F1J9Nr8WEjgz/XaJDR4IakV7MrNeC3uIRz6/qGFPFWHw2Rr+g==",
6723 
       "requires": {
 6724 
       "requires": {
6724 
         "ripple-lib": "^1.10.0",
 6725 
         "ripple-lib": "^1.10.0",
6725 
         "xrpl": "^2.1.1"
 6726 
         "xrpl": "^2.1.1"

+ 2
- 2
package.json View File

17 
   "author": "",
 17 
   "author": "",
18 
   "license": "ISC",
 18 
   "license": "ISC",
19 
   "dependencies": {
 19 
   "dependencies": {
20 
+    "buffer": "^6.0.3",
20 
     "chai": "^4.3.4",
 21 
     "chai": "^4.3.4",
21 
     "node-fetch": "^2.6.1",
 22 
     "node-fetch": "^2.6.1",
22 
-    "xrpio": "^0.1.6",
23 
-    "buffer": "^6.0.3",
23 
+    "xrpio": "^0.1.7",
24 
     "xrpl": "^2.6.0-beta.0"
 24 
     "xrpl": "^2.6.0-beta.0"
25 
   },
 25 
   },
26 
   "devDependencies": {
 26 
   "devDependencies": {

+ 0
- 5
src/Browser.ts View File

1 
-(window as any).global = window;
2 
-(window as any).Buffer = (window as any).buffer.Buffer;
3 
-const rippleApi = require('xrpio')
4 
-window['xrpIO'] = rippleApi.xrpIO
5 
-

+ 3
- 4
src/Gateway.ts View File

1 
-(window as any).global = window;
2 
-(window as any).Buffer = (window as any).Buffer || require('buffer/').Buffer;
3 
 (window as any).buffer = (window as any).Buffer
 1 
 (window as any).buffer = (window as any).Buffer
4 
-import { xrpIO } from 'xrpio';
5 
-(window as any).xrpIO = xrpIO;
2 
+//import { xrpIO } from 'xrpio';
3 
+
4 
+declare const xrpIO
6 
 declare const DATA_HASH: string
 5 
 declare const DATA_HASH: string
7
6
8 
 const api = new xrpIO("wss://s.altnet.rippletest.net:51233")
 7 
 const api = new xrpIO("wss://s.altnet.rippletest.net:51233")

Write Preview
Loading…
Cancel
Save