-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
89 lines (85 loc) · 2.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="nanoqueue.js"></script>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/sunburst.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<title>NanoQueue - The minimal PubSub for your modules</title>
</head>
<body>
<div id="info" class="panel">
<ul class="nav">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="example.html">Example</a>
</li>
</ul>
<h1>Welcome!</h1>
<p>Imagine Alice creates a module for fetching calendar data from
a Microsoft Exchange Web Service API. However, she's not very good
at UI, and let's the module be used as a library, rather than bind
it to UI components.
</p>
<p>Along comes Bob. He's an expert in creating traditionally laid out
calendar UI's, but thinks Ajax, web-API's and authentication is
difficult to work with. He just wants to subscribe to live events
from the calendar to keep the UI up to date.
</p>
<p>If Alice and Bob add the option to communicate through NanoQueue,
they will be able to communicate with eachother's modules, even though they
have never talked or met. This means that you can use both of their
modules on your page, with minimal setup, and have them communicate
messages.
</p>
<p>Let's see some code:</p>
<pre>
<code class="html">// Include on the page in the header, before any modules
<head>
...
<script src="nanoqueue.js"></script>
<script src="moduleA.js"></script>
<script src="moduleB.js"></script>
...
</head>
...
</code></pre>
<p>A module could use it like this:</p>
<pre>
<code class="javascript">var ModuleA = function(){
// Subscribe to the specified topic, supplying the callback
_Q.subscribeTo("calendar.data.new", this.updateUI);
// message handler function
var updateUI = function(data){
// do some important UI stuff
document.querySelector("#result").innerText(JSON.stringify(data, null,'\t'));
}
}
</code></pre>
<p>Or:</p>
<pre>
<code class="javascript">var ModuleB = function(){
var doStuff = function(someInput){
// Do some useful stuff to the input and build an object to share
// lets pretend we have gotten som data from a calendar service
var message = {
data : {
"bookings": [ someInput ],
},
"created" : new Date().toISOString()
};
// Publish to the specified topic, supplying the data
_Q.publishTo("calendar.data.new", message);
}
}
ModuleB.doStuff("Write some code");
</code></pre>
</div>
</body>
</html>