xunuoi / Node Bigpipe
Licence: mit
A super easy, lightweight Bigpie Module for Nodejs, Express, Sails, ThinkJS with good intergration for web framework
Stars: ✭ 77
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Node Bigpipe
Node Javascript Ecommerce
Build ECommece Like Amazona Using Vanilla JS
Stars: ✭ 57 (-25.97%)
Mutual labels: backend
Graphql Microservices
Showcasing a graphql microservice setup
Stars: ✭ 68 (-11.69%)
Mutual labels: backend
Pipe
[READONLY] Library for implementing function call chains
Stars: ✭ 70 (-9.09%)
Mutual labels: pipe
Node Typescript Boilerplate
Minimalistic project template to jump start a Node.js back-end application in TypeScript. ESLint, Jest and type definitions included.
Stars: ✭ 1,061 (+1277.92%)
Mutual labels: backend
Aquarius
🐋 Off-chain database store for data assets metadata.
Stars: ✭ 76 (-1.3%)
Mutual labels: backend
Mform
Spielend einfach umfangreiche Modul-Input-Formulare erzeugen.
Stars: ✭ 65 (-15.58%)
Mutual labels: backend
Jmeter Elasticsearch Backend Listener
JMeter plugin that lets you send sample results to an ElasticSearch engine to enable live monitoring of load tests.
Stars: ✭ 72 (-6.49%)
Mutual labels: backend
Promised Pipe
A ramda.pipe-like utility that handles promises internally with zero dependencies
Stars: ✭ 64 (-16.88%)
Mutual labels: pipe
Node Clean Architecture
Clean Architecture implementation written in NodeJS
Stars: ✭ 74 (-3.9%)
Mutual labels: backend
Firebaseswift
Firebase REST API wrapper for use in server-side Swift
Stars: ✭ 54 (-29.87%)
Mutual labels: backend
Bank
🏦 Full Stack Web Application similar to financial software that is used in banking institutions | React.js and Node.js
Stars: ✭ 1,158 (+1403.9%)
Mutual labels: backend
Bancha
Bancha is an open-source CMS made by Nicholas Valbusa written in PHP5.3.
Stars: ✭ 76 (-1.3%)
Mutual labels: backend
Vos backend
vangav open source - backend; a backend generator (generates more than 90% of the code needed for big scale backend services)
Stars: ✭ 71 (-7.79%)
Mutual labels: backend
node-bigpipe
Introduction
- Bigpie module for nodejs, web frameworks like Express, Sails, ThinkJS
- Only 3 Simple API:
start
,pipe
,end
, very light and transparent - Based on
Promise
, easy to use and control
Install
- Backend side:
npm install node-bigpipe --save-dev
- Frontend side: Involve the
jQuery
andbro.bigpipe.js
scripts into html. Orrequire('node-bigpipe/static/bro.bigpipe')
bywebpack/browserify
. - You can write the Frontend js code by yourself, make sure to match the
Bigpipe
API of Backend.
Usage
In Backend, you should use node-bigpipe
to create a bigpipe for response.
In Frontend, you can use bro.bigpipe.js
, or use your own js code to call the bigpipe
from Backend.
Step:
- require the
node-bigpipe
module byvar Bigpipe = require('node-bigpipe').Bigpipe
- Create an Bigpipe by
var bigpipe = new Bigpipe('pipeName', req, res)
- Use
start
api to ouput the pipe and render the unclosed base html frame - Use
pipe
api to transport to browser the array composed by pipe blocks you created - Use
end
api to finish this bigpipe - More detail in Example
*Note:
If you use nginx/apache
, please check the server buffer
config .
If the response size is small, the nginx won't send pagelet, it will save in its buffer for final response. But you can close nginx buffer/gzip to show the bigpipe effect obviously like this:
location / {
gzip off;
fastcgi_buffer_size 0k;
proxy_buffering off;
...
}
Backend API
-
bigpipe.start(viewPath, [data])
: Start render,viewPath
can be a basic html template -
bigpipe.pipe(promiseList)
:begin to transport the pipe into reponse -
bigpipe.end([onEndFn])
: finish the pipe -
bigpipe.render(selector, htmlData)
: Similar with$(selector).html(htmlData)
in browser, set the dom html content -
bigpipe.append(selector, htmlData)
: Similar with$(selector).append(htmlData)
, append the dom element content -
bigpipe.fire(eventName, data)
: Trigger the event which subscribed in Front End. The event should is used to process the data transported by bigpipe. You can useon
api to subscribe the event in Frontend js.
Frontend js(Browser) API
-
bigpipe.on(eventName).then(data=>{ // deal with data ... })
: Subscribe the eventName, you can use callback function inthen
API to process data. -
bigpie.fire/render/append
Set the dom content, Same with mentioned above in Backend API.
Examples
- Create a pagelet and return a Promise
The implementation will be put into the tagPagelet, bp
// Here the `bigpipe` parameter is injected by `start` API automatically.
function tagPagelet(bigpipe){
return new Promise((resolve, reject)=>{
let rdata = {
'tag': 'your data'
}
// simulate the asynchronous response
setTimeout(()=>{
let html = '<div><span>TagA</span><span>TagB</span><span>TagC</span><span>TagD</span></div>'
let pipeData = {
'html': html,
'message': 'for tag pipe html',
'css': ['a.css'],
'js': ['b.js'],
}
// Here the `tag` event names will subscribed by Frontend js code.
// Here you can use `render`, `append`, `fire`, it depends on your Backend code
bigpipe.fire('tag', pipeData)
resolve()
}, 3000)
})
}
- In Backend controller, start the pipe
index (req, res, next, page=1){
let bigpipe = new Bigpipe('karatBP', req, res)
/**
* `bigpipe.start` will inject the _bigpipe_id into the template `data`, So Frontend js can get the `id` by `new Bigpipe('{{_bigpipe_id}}')`
* And in Frontend js, it will export a object named by `_bigpipe_id`. for Example, here will create the window.karatBP object in browser js.
*/
bigpipe.start('view/home')
.pipe([
articlePagelet,
tagPagelet,
// other ...
])
.end()
},
- Front End
<script type="text/javascript">
// This method will automatically export a object `karatBP` in window. And the `_bigpipe_id` shoud match the definition in backend
new Bigpipe('karatBP')
// You can also use the `_bigpipe_id` parameter from backend by defaultl below:
// new Bigpipe('{{_bigpipe_id}}')
</script>
Full Demo Code
- Full Backend demo code in
demo/DemoController.js
:
var Bigpipe = require('node-bigpipe').Bigpipe
// this is a pagelet for pipe, you should return a promise in the pagelet-function.
function tagPagelet(bigpipe){
return new Promise((resolve, reject)=>{
let rdata = {
'tag': 'your data'
}
// simulate the asynchronous response, it may be replaced by DB/IO/NETWORK and other async operations.
setTimeout(()=>{
let html = '<div><span>TagA</span><span>TagB</span><span>TagC</span><span>TagD</span></div>'
let pipeData = {
'html': html,
'message': 'for tag pipe html'
'css': ['a.css'],
'js': ['b.js'],
}
// here the `tag` match the event in frontend. You can use the bigpipe by `on('tag')` in Frontend js code.
bigpipe.fire('tag', pipeData)
resolve()
}, 3000)
})
}
// another pagelet
function articlePagelet(bigpipe){
return new Promise((resolve, reject)=>{
let rdata = {
'article': 'your data'
}
bigpipe.res.render('view/article', rdata, (err, html)=>{
// Here you can use `render`, `append`, `fire`
bigpipe.render('.wrap > .content', html)
resolve()
})
})
}
// here the `index` fn should be bound in router so it can be views by url
// the `view/home` is the basic html template, you can define some container div/elements in this html.
export default {
index (req, res, next, page=1){
let bigpipe = new Bigpipe('karatBP', req, res)
bigpipe.start('view/home')
.pipe([
articlePagelet,
tagPagelet,
// other pagelet...
])
.end()
},
}
- Full Frontend demo code
<!-- If you want, you can write your own Frontend js to replace `jquery` and `bro.bigpipe` here. -->
<script type="text/javascript" src="/static/jquery.min.js"></script>
<script type="text/javascript" src="/static/bro.bigpipe.js"></script>
<!-- Here will use the bigpipe object transported from Backend -->
<script type="text/javascript">
// The `karatBP` is the bigpipe-id, it should match the Backend definition. Or you can use '{{_bigpipe_id}}' directly.
var karatBP = new Bigpipe('karatBP')
// You can subscribe the events which match the backend API `fire`, like fire('tag', data), then you can `on('tag')` in FE js.
karatBP.on('tag')
.then(function (pageletData) {
console.log(pageletData)
$('#tag').html(pageletData.html)
})
</script>
Support for ThinkJS
Difference of usage in Backend:
- Put an additional param
this
intonew Bigpipe()
, likenew Bigpipe('xxxBP', http.req, http.res, this)
- Other APIs keep SAME with above usage
- More About ThinkJS: https://thinkjs.org
export default class extends Base {
indexAction(){
let http = this.http;
// Put an additional param: `this`
let bigpipe = new Bigpipe('thinkBP', http.req, http.res, this)
// `start` method use default ThinkJS template path: index.html
// Or bigpipe.sart('xxx') to specific some html template file
bigpipe.start()
.pipe([
tagPagelet,
articlePagelet
// other pagelet...
])
.end()
// Other APIs keep same with above usage.
}
}
More
Please check the demo code in demo
folder in the repository. And the Frontend js code is in static
folder.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].